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

many content changes

Browse Source 
* auto placeholder for empty content
* split up doc components
* add global footer
* video embedding
* more plugins
* spacing fixes
This commit is contained in:
Matthias Kretschmann 2018-11-10 00:16:41 +01:00
parent 582c06335d
commit 71418549b0
Signed by: m
GPG Key ID: 606EEEF3C479A91F
21 changed files with 211 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -30,6 +30,8 @@ All content lives in the [`/content`](content/) & [`/data`](data/) folders utili
The final navigational organisation of the content is driven through the sidebar files under [`/data/sidebars`](data/sidebars/).
Have a look at [docs.oceanprotocol.com/test/](https://docs.oceanprotocol.com/test/) to see what content elements can be used in the docs.
### Sections
The documentation is split in multiple sections whose content lives in this repo:

4
content/setup/keeper.md
View File

@ -1,7 +1,3 @@
---
title: Set Up a Keeper
---
This page is a placeholder for now.
- [💧 keeper-contracts](https://github.com/oceanprotocol/keeper-contracts)

2
content/setup/publisher.md
View File

@ -1,5 +1,3 @@
---
title: Publish Data or Services
---
This page is a placeholder for now.

27
content/test.md
View File

@ -1,6 +1,6 @@
---
title: Content test
description: This is intended as a quick reference and showcase.
description: On this site, Markdown is transformed to HTML through Remark following GitHub Flavored Markdown. This page 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/).
@ -18,7 +18,7 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
* [Inline HTML](#inline-html)
* [Horizontal Rule](#horizontal-rule)
* [Line Breaks](#line-breaks)
* [YouTube Videos](#youtube-videos)
* [Videos](#videos)
## Headers
@ -215,9 +215,6 @@ No language indicated, so no syntax highlighting in Markdown Here (varies on Git
But let's throw in a <b>tag</b>.
```
Again, to see what languages are available for highlighting, and how to write those language names, see the [highlight.js demo page](http://softwaremaniacs.org/media/soft/highlight/test.html).
## Tables
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.
@ -351,17 +348,27 @@ This line is only separated by a single newline, so it's a separate line in the
(Technical note: *Markdown Here* uses GFM line breaks, so there's no need to use MD's two-space line breaks.)
## YouTube Videos
## Videos
They can't be added directly but you can add an image with a link to the video like this:
Videos can be embedded like so, works with YouTube, Vimeo, VideoPress, Twitch:
```
`video: https://www.youtube.com/watch?v=6YRmyUZr2No`
```
resulting in:
`video: https://www.youtube.com/watch?v=6YRmyUZr2No`
You can also 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 href="http://www.youtube.com/watch?feature=player_embedded&v=6YRmyUZr2No" target="_blank">
<img src="http://img.youtube.com/vi/6YRmyUZr2No/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=6YRmyUZr2No" target="_blank"><img src="http://img.youtube.com/vi/6YRmyUZr2No/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:

5
gatsby-config.js
View File

@ -56,8 +56,11 @@ module.exports = {
}
},
'gatsby-remark-smartypants',
'gatsby-remark-embed-video',
'gatsby-remark-responsive-iframe',
'gatsby-remark-prismjs',
'gatsby-remark-autolink-headers'
'gatsby-remark-autolink-headers',
'gatsby-remark-copy-linked-files'
]
}
},

7
gatsby-ssr.js
View File

@ -1,7 +0,0 @@
/**
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/ssr-apis/
*/
// You can delete this file if you're not using it

3
package.json
View File

@ -17,8 +17,11 @@
"gatsby-plugin-sitemap": "^2.0.2",
"gatsby-plugin-svgr": "^2.0.0-alpha",
"gatsby-remark-autolink-headers": "^2.0.11",
"gatsby-remark-copy-linked-files": "^2.0.6",
"gatsby-remark-embed-video": "^1.4.0",
"gatsby-remark-images": "^2.0.6",
"gatsby-remark-prismjs": "^3.0.3",
"gatsby-remark-responsive-iframe": "^2.0.6",
"gatsby-remark-smartypants": "^2.0.6",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-remark": "^2.1.12",

23
src/components/DocContent.jsx Normal file
View File

@ -0,0 +1,23 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './DocContent.module.scss'
const DocContent = ({ html }) =>
html ? (
<div
className={styles.docContent}
dangerouslySetInnerHTML={{
__html: html
}}
/>
) : (
<div className={styles.empty}>
This is a placeholder for now. Help creating it.
</div>
)
DocContent.propTypes = {
html: PropTypes.string
}
export default DocContent

28
src/components/DocContent.module.scss Normal file
View File

@ -0,0 +1,28 @@
@import 'variables';
.docContent {
// handling long text, like URLs
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
padding-bottom: $spacer / $line-height;
figcaption {
font-size: $font-size-small;
text-align: center;
color: $brand-grey-light;
margin-top: $spacer / 2;
}
h1, h2 {
margin-top: $spacer * $line-height;
margin-bottom: $spacer / $line-height;
padding-bottom: $spacer / $line-height;
border-bottom: 1px solid $brand-grey-lighter;
}
}
.empty {
font-style: italic;
margin-bottom: $spacer * 2;
}

5
src/components/DocFooter.jsx
View File

@ -8,7 +8,10 @@ const githubContentPath =
const DocFooter = ({ post }) => (
<footer className={styles.footer}>
<a href={`${githubContentPath}/${post.parent.relativePath}`}>
<a
href={`${githubContentPath}/${post.parent.relativePath}`}
className={!post.html ? styles.active : null}
>
<Pencil /> Edit this page on GitHub
</a>
</footer>

4
src/components/DocFooter.module.scss
View File

@ -29,3 +29,7 @@
}
}
}
.active {
color: $brand-pink !important;
}

17
src/components/DocHeader.jsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './DocHeader.module.scss'
const DocHeader = ({ title, description }) => (
<header className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{description && <p className={styles.lead}>{description}</p>}
</header>
)
DocHeader.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string
}
export default DocHeader

16
src/components/DocHeader.module.scss Normal file
View File

@ -0,0 +1,16 @@
@import 'variables';
.header {
margin-top: $spacer * $line-height;
margin-bottom: $spacer * $line-height;
}
.title {
font-size: $font-size-h1;
margin-top: 0;
margin-bottom: $spacer / $line-height;
}
.lead {
font-size: $font-size-large;
}

25
src/components/Footer.jsx Normal file
View File

@ -0,0 +1,25 @@
import React from 'react'
import Content from '../components/Content'
import styles from './Footer.module.scss'
const Footer = () => (
<footer className={styles.footer}>
<Content>
<small>
&copy; {new Date().getFullYear()}{' '}
<a href="https://oceanprotocol.com">
Ocean Protocol Foundation Ltd.
</a>{' '}
&mdash; All Rights Reserved
</small>
<nav className={styles.links}>
<a href="https://blog.oceanprotocol.com">Blog</a>
<a href="https://twitter.com/oceanprotocol">Twitter</a>
<a href="https://github.com/oceanprotocol">GitHub</a>
</nav>
</Content>
</footer>
)
export default Footer

51
src/components/Footer.module.scss Normal file
View File

@ -0,0 +1,51 @@
@import 'variables';
.footer {
color: $brand-grey-light;
width: 100%;
text-align: center;
margin-top: $spacer;
padding-top: $spacer;
padding-bottom: $spacer;
> section {
align-self: flex-end;
@media screen and (min-width: $break-point--small) {
text-align: left;
display: flex;
justify-content: space-between;
}
}
&,
small {
font-size: $font-size-small;
}
a {
color: inherit;
&:hover,
&:focus {
color: $brand-grey;
}
}
}
.links {
margin-top: $spacer / 2;
@media screen and (min-width: $break-point--small) {
text-align: right;
margin-top: 0;
}
a {
padding: 0 $spacer / 4;
&:last-child {
padding-right: 0;
}
}
}

4
src/components/HeaderSection.jsx
View File

@ -5,7 +5,7 @@ import Content from './Content'
import styles from './HeaderSection.module.scss'
const HeaderSection = ({ title }) => (
<header className={styles.headerSection}>
<aside className={styles.headerSection}>
<Content>
<h1 className={styles.headerSectionTitle}>
<Link className={styles.rootLink} to="/">
@ -14,7 +14,7 @@ const HeaderSection = ({ title }) => (
{title}
</h1>
</Content>
</header>
</aside>
)
HeaderSection.propTypes = {

2
src/components/Layout.jsx
View File

@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import Header from './Header'
import Footer from './Footer'
const Layout = ({ children, header }) => {
const headerElement = header || <Header />
@ -9,6 +10,7 @@ const Layout = ({ children, header }) => {
<>
{headerElement}
{children}
<Footer />
</>
)
}

2
src/components/Repositories/index.module.scss
View File

@ -6,7 +6,7 @@
.quickrun {
padding-top: $spacer;
padding-bottom: $spacer;
padding-bottom: $spacer * $line-height;
text-align: center;
max-width: $break-point--small;
margin: auto;

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

@ -20,7 +20,7 @@
&:before { display: none; }
@media (min-width: $break-point--medium) {
flex: 0 0 30%;
flex: 0 0 31%;
}
a {

39
src/templates/Doc.jsx
View File

@ -5,6 +5,8 @@ import Layout from '../components/Layout'
import Content from '../components/Content'
import HeaderSection from '../components/HeaderSection'
import Sidebar from '../components/Sidebar'
import DocContent from '../components/DocContent'
import DocHeader from '../components/DocHeader'
import DocFooter from '../components/DocFooter'
import styles from './Doc.module.scss'
@ -40,44 +42,25 @@ export default class DocTemplate extends Component {
<Sidebar
location={location}
sidebar={section}
isPlaceholder={!post.html}
/>
</aside>
<article className={styles.main}>
<header className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{description && (
<p className={styles.lead}>
{description}
</p>
)}
</header>
<div
className={styles.docContent}
dangerouslySetInnerHTML={{
__html: post.html
}}
<DocHeader
title={title}
description={description}
/>
<DocContent html={post.html} />
<DocFooter post={post} />
</article>
</main>
) : (
<article className={styles.mainSingle}>
<header className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{description && (
<p className={styles.lead}>{description}</p>
)}
</header>
<div
className={styles.docContent}
dangerouslySetInnerHTML={{
__html: post.html
}}
<DocHeader
title={title}
description={description}
/>
<DocContent html={post.html} />
<DocFooter post={post} />
</article>
)}

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

@ -21,40 +21,3 @@
max-width: $break-point--small;
margin: auto;
}
.header {
margin-top: $spacer * $line-height;
margin-bottom: $spacer * $line-height;
}
.title {
font-size: $font-size-h1;
margin-top: 0;
margin-bottom: $spacer / $line-height;
}
.lead {
font-size: $font-size-large;
}
.docContent {
// handling long text, like URLs
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
padding-bottom: $spacer / $line-height;
figcaption {
font-size: $font-size-small;
text-align: center;
color: $brand-grey-light;
margin-top: $spacer / 2;
}
h1, h2 {
margin-top: $spacer * $line-height;
margin-bottom: $spacer / $line-height;
padding-bottom: $spacer / $line-height;
border-bottom: 1px solid $brand-grey-lighter;
}
}