oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

more content styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-08 22:52:42 +01:00
parent 064ff60b4f
commit c90f07e483
Signed by: m
GPG Key ID: 606EEEF3C479A91F
12 changed files with 237 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/concepts/ecosystem.md
View File

@ -3,8 +3,6 @@ title: Ecosystem
description: The Ocean Protocol network consists of various components.
---
[Architecture](./architecture/)
Learn about all of them here.
- 💧 keeper. See also [Set Up a Keeper](/setup/keeper/)

7
content/setup/marketplace.md
View File

@ -1,5 +1,6 @@
---
title: Set Up a Marketplace
description: Fill me
---
If you want to set up a marketplace for the Ocean network, then you could start by running the following tech stack:
@ -36,8 +37,8 @@ TODO: Link to instructions.
At the time of writing, Aquarius worked with three databases:
* MongoDB
* Elasticsearch
* BigchainDB
- MongoDB
- Elasticsearch
- BigchainDB
TODO: Outline the pros and cons of each database.

61
content/test.md
View File

@ -1,23 +1,24 @@
---
title: Content test
description: This is intended as a quick reference and showcase.
---
This is intended as a quick reference and showcase. For more complete info, see [John Gruber's original spec](http://daringfireball.net/projects/markdown/) and the [Github-flavored Markdown info page](http://github.github.com/github-flavored-markdown/).
For more complete info, see [John Gruber's original spec](http://daringfireball.net/projects/markdown/) and the [Github-flavored Markdown info page](http://github.github.com/github-flavored-markdown/).
##### Table of Contents
## Table of Contents
* [Headers](#headers)
* [Emphasis](#emphasis)
* [Lists](#lists)
* [Links](#links)
* [Images](#images)
* [Code and Syntax Highlighting](#code)
* [Code and Syntax Highlighting](#code-and-syntax-highlighting)
* [Tables](#tables)
* [Blockquotes](#blockquotes)
* [Inline HTML](#html)
* [Horizontal Rule](#hr)
* [Line Breaks](#lines)
* [YouTube Videos](#videos)
* [Inline HTML](#inline-html)
* [Horizontal Rule](#horizontal-rule)
* [Line Breaks](#line-breaks)
* [YouTube Videos](#youtube-videos)
## Headers
@ -82,9 +83,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~
1. Actual numbers don't matter, just that it's a number
1. Ordered sub-list
4. And another item.
Some text that should be aligned with the above item.
* Unordered list can use asterisks
- Or minuses
+ Or pluses
@ -92,17 +91,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
1. First ordered list item
2. Another item
* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
1. Ordered sub-list
4. And another item.
Some text that should be aligned with the above item.
* Unordered list can use asterisks
- Or minuses
+ Or pluses
@ -152,30 +145,30 @@ Some text to show that the reference links can follow later.
## Images
```
Here's our logo (hover to see the title text):
Here's our jellyfish (hover to see the title text):
Inline-style:
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
![alt text](https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish")
Reference-style:
![alt text][logo]
![alt text][jellyfish]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
[jellyfish]: https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish"
```
Here's our logo (hover to see the title text):
Here's our jellyfish (hover to see the title text):
Inline-style:
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
![alt text](https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish")
Reference-style:
![alt text][logo]
![alt text][jellyfish]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
[jellyfish]: https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish"
## Code and Syntax Highlighting
Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and *Markdown Here* -- support syntax highlighting. *Markdown Here* supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the [highlight.js demo page](http://softwaremaniacs.org/media/soft/highlight/test.html).
Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and *Markdown Here* -- support syntax highlighting.
```
Inline `code` has `back-ticks around` it.
@ -183,9 +176,9 @@ Inline `code` has `back-ticks around` it.
Inline `code` has `back-ticks around` it.
Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
<pre lang="no-highlight"><code>```javascript
<pre><code>```js
var s = "JavaScript syntax highlighting";
alert(s);
```
@ -223,7 +216,7 @@ Again, to see what languages are available for highlighting, and how to write th
Tables aren't part of the core Markdown spec, but they are part of GFM and *Markdown Here* supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.
```no-highlight
```markdown
Colons can be used to align columns.
| Tables | Are | Cool |
@ -258,7 +251,7 @@ The outer pipes (|) are optional, and you don't need to make the raw Markdown li
## Blockquotes
```
```markdown
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
@ -356,14 +349,16 @@ This line is only separated by a single newline, so it's a separate line in the
They can't be added directly but you can add an image with a link to the video like this:
```html
<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE" target="_blank">
<img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
</a>
```
<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE
" target="_blank"><img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
```
<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE" target="_blank"><img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
Or, in pure Markdown, but losing the image sizing and border:
```
```md
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
```

2
data/sections.yml
View File

@ -4,7 +4,7 @@
- title: Setup Guides
description: Setting up the Ocean Protocol components.
link: /setup/keeper/
link: /setup/marketplace/
- title: Tutorials
description: Browse tutorials for most common setup and development use-cases.

4
data/sidebars/setup.yml
View File

@ -1,8 +1,8 @@
- group: Setup Guides
items:
- title: Set Up a Keeper
link: /setup/keeper/
- title: Set Up a Marketplace
link: /setup/marketplace/
- title: Set Up a Keeper
link: /setup/keeper/
- title: Publish Data or Services
link: /setup/publisher/

2
gatsby-config.js
View File

@ -33,7 +33,7 @@ module.exports = {
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 756,
maxWidth: 640,
quality: 80,
withWebp: true,
linkImagesToOriginal: false,

6
src/components/Header.module.scss
View File

@ -8,13 +8,10 @@
}
.headerContent {
max-width: $break-point--large;
margin-left: auto;
margin-right: auto;
composes: content from './Content.module.scss';
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 $spacer;
}
.headerLogo {
@ -34,6 +31,7 @@
width: 60px;
height: 60px;
fill: #fff;
margin: 0;
}
.headerTitle {

2
src/components/Sidebar.module.scss
View File

@ -31,6 +31,8 @@
li {
display: block;
&:before { display: none; }
}
}

2
src/pages/index.module.scss
View File

@ -15,6 +15,8 @@
.section {
margin-bottom: $spacer;
&:before { display: none; }
@media (min-width: $break-point--medium) {
flex: 0 0 30%;
margin-bottom: 0;

162
src/styles/global.scss
View File

@ -24,11 +24,6 @@ body {
position: relative;
margin: 0;
// handling long text, like URLs
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
@media screen and (min-width: $break-point--small) {
padding: $page-frame;
}
@ -56,15 +51,82 @@ a {
p {
margin: 0;
margin-bottom: $spacer / 2;
margin-bottom: $spacer / $line-height;
}
// Lists
/////////////////////////////////////
ul {
li {
&::before {
content: ' \25AA'; // Black Small Square: ▪ &#9642;
}
}
}
ol {
counter-reset: ol-counter;
li {
&::before {
content: counter(ol-counter) '.';
counter-increment: ol-counter;
font-family: $font-family-button;
}
}
ul li::before {
content: ' \25AA';
}
}
ul,
ol {
margin-top: 0;
margin-bottom: $spacer;
padding-left: $spacer / $line-height;
list-style: none;
li {
position: relative;
display: block;
&::before {
position: absolute;
left: -($spacer / $line-height);
top: -1px;
color: $brand-grey-light;
user-select: none;
}
}
}
// Inline typography
/////////////////////////////////////
b,
strong,
.strong {
.bold {
font-family: $font-family-button;
font-weight: 600;
}
em,
.italic {
font-style: italic;
}
abbr[title],
dfn {
text-transform: none;
font-style: normal;
font-size: inherit;
border-bottom: 1px dashed $brand-grey-light;
cursor: help;
font-feature-settings: inherit;
}
h1,
h2,
h3,
@ -113,26 +175,94 @@ picture {
display: block;
}
hr {
margin: $spacer * $line-height 0;
border: 0;
border-bottom: .1rem solid $brand-grey-lighter;
}
// Quotes
/////////////////////////////////////
q {
font-style: italic;
}
cite {
font-style: normal;
text-transform: uppercase;
}
blockquote,
blockquote > p {
font-style: italic;
}
blockquote {
margin: 0 0 $spacer;
padding-left: $spacer;
}
// Tables
/////////////////////////////////////
table {
width: 100%;
margin-bottom: $spacer * $line-height;
border-collapse: collapse;
th,
td {
border: 0;
margin: 0;
padding: $spacer / 2;
border-bottom: 1px solid $brand-grey-lighter;
}
th {
font-family: $font-family-button;
font-weight: 600;
text-align: left;
&[align="center"] {
text-align: center;
}
&[align="right"] {
text-align: right;
}
}
td {
}
}
// Code
/////////////////////////////////////
code,
kbd,
pre,
samp {
font-family: $font-family-monospace;
font-size: $font-size-small;
background: $brand-black !important;
color: $brand-grey-lighter !important;
border-radius: $border-radius !important;
}
pre {
display: block;
margin-bottom: $spacer !important;
padding: 0 !important;
// make 'em scrollable
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: 500px;
max-width: 100%;
code {
padding: 0;
padding: $spacer;
white-space: pre;
display: block;
color: inherit;
@ -143,3 +273,15 @@ pre {
}
}
// Selection
/////////////////////////////////////
::-moz-selection {
background: $brand-black;
color: #fff;
}
::selection {
background: $brand-black;
color: #fff;
}

31
src/templates/Doc.jsx
View File

@ -23,17 +23,34 @@ export default class DocTemplate extends Component {
<Layout location={location}>
<HeaderSection title={section} />
<Content>
<main className={styles.wrapper}>
{section && (
{section ? (
<main className={styles.wrapper}>
<aside className={styles.sidebar}>
<Sidebar
location={location}
sidebar={section}
/>
</aside>
)}
<article className={styles.main}>
<header className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{description && (
<p className={styles.lead}>
{description}
</p>
)}
</header>
<article className={styles.main}>
<div
className={styles.docContent}
dangerouslySetInnerHTML={{
__html: post.html
}}
/>
</article>
</main>
) : (
<article className={styles.mainSingle}>
<header className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{description && (
@ -43,10 +60,12 @@ export default class DocTemplate extends Component {
<div
className={styles.docContent}
dangerouslySetInnerHTML={{ __html: post.html }}
dangerouslySetInnerHTML={{
__html: post.html
}}
/>
</article>
</main>
)}
</Content>
</Layout>
)

20
src/templates/Doc.module.scss
View File

@ -3,18 +3,24 @@
.wrapper {
@media (min-width: $break-point--medium) {
display: flex;
justify-content: space-between;
}
}
.sidebar {
flex: 0 0 25%;
flex: 0 0 30%;
padding-right: $spacer * 2;
+ .main {
flex: 0 0 70%;
max-width: $break-point--small;
}
}
.mainSingle {
max-width: $break-point--small;
margin: auto;
}
.header {
margin-top: $spacer;
margin-bottom: $spacer * $line-height;
@ -31,10 +37,20 @@
}
.docContent {
// handling long text, like URLs
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
figcaption {
font-size: $font-size-small;
text-align: center;
color: $brand-grey-light;
margin-top: $spacer / 2;
}
h1, h2 {
margin-top: $spacer;
margin-bottom: $spacer;
}
}