social links

This commit is contained in:
Matthias Kretschmann 2018-11-10 16:48:28 +01:00
parent 2db85128c8
commit 64a172f4c4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
15 changed files with 132 additions and 30 deletions

View File

@ -34,6 +34,8 @@ The final navigational organisation of the content is driven through the sidebar
Have a look at [docs.oceanprotocol.com/test/](https://docs.oceanprotocol.com/test/) to see what content elements can be used in the docs.
Some global values used throughout the site can be set in [`config.js`](config.js).
### Sections
The documentation is split in multiple sections whose content lives in this repo:

View File

@ -1,7 +1,18 @@
module.exports = {
siteTitle: 'Ocean Protocol Documentation',
siteShortTitle: 'Docs',
siteDescription:
'Learn everything you need to know to develop with Ocean Protocol. This should be a bit longer cause it is also the meta description so why not write some more.',
siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com',
analyticsId: 'UA-60614729-11'
siteIcon: 'src/images/profile.png',
siteCompany: 'Ocean Protocol Foundation Ltd.',
analyticsId: 'UA-60614729-11',
social: {
site: 'https://oceanprotocol.com',
blog: 'https://blog.oceanprotocol.com',
github: 'https://github.com/oceanprotocol',
twitter: 'https://twitter.com/oceanprotocol',
gitter: 'https://gitter.im/oceanprotocol/Lobby',
telegram: 'https://t.me/joinchat/GUyxrE0Hi154D0NrlOqLFg'
}
}

View File

@ -2,9 +2,9 @@ const config = require('./config.js')
module.exports = {
siteMetadata: {
siteTitle: config.siteTitle,
siteDescription: config.siteDescription,
siteUrl: config.siteUrl
// spread all of our config values here
// so they can easily be queried with GraphQL
...config
},
plugins: [
{
@ -85,14 +85,14 @@ module.exports = {
{
resolve: 'gatsby-plugin-manifest',
options: {
name: config.title,
short_name: 'Docs',
description: config.description,
name: config.siteTitle,
short_name: config.siteShortTitle,
description: config.siteDescription,
start_url: '/',
background_color: '#e2e2e2',
theme_color: '#141414',
display: 'minimal-ui',
icon: 'src/images/profile.png'
icon: config.siteIcon
}
},
'gatsby-plugin-offline',

View File

@ -1,7 +1,7 @@
@import 'variables';
.header {
margin-top: $spacer * $line-height;
padding-top: $spacer * $line-height;
margin-bottom: $spacer * $line-height;
}

View File

@ -1,25 +1,62 @@
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
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>
const query = graphql`
query {
site {
siteMetadata {
siteCompany
social {
site
blog
github
twitter
gitter
telegram
}
}
}
}
`
<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>
const FooterSocial = ({ social }) => (
<nav className={styles.links}>
{Object.keys(social).map(key => (
<a key={key} href={social[key]}>
{key.charAt(0).toUpperCase() + key.slice(1)}
</a>
))}
</nav>
)
FooterSocial.propTypes = {
social: PropTypes.object
}
const Footer = () => (
<StaticQuery
query={query}
render={data => {
const { siteCompany, social } = data.site.siteMetadata
return (
<footer className={styles.footer}>
<Content>
<small>
&copy; {new Date().getFullYear()}{' '}
<a href={social.site}>{siteCompany}</a> &mdash; All
Rights Reserved
</small>
<FooterSocial social={social} />
</Content>
</footer>
)
}}
/>
)
export default Footer

View File

@ -31,6 +31,12 @@
color: $brand-grey;
}
}
svg {
display: inline-block;
width: $font-size-large;
height: $font-size-large;
}
}
.links {
@ -42,10 +48,10 @@
}
a {
padding: 0 $spacer / 4;
margin: 0 $spacer / 2;
&:last-child {
padding-right: 0;
margin-right: 0;
}
}
}

View File

@ -22,6 +22,7 @@ const query = graphql`
}
}
`
const Header = () => (
<StaticQuery
query={query}

6
src/images/github.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55">
<g fill="none">
<rect width="55" height="55" fill="#141414" rx="2"/>
<path fill="#FFF" d="M40.9776018,24.9894877 C42.420237,27.1023024 43.2052003,29.7440131 42.9534463,32.9450797 C42.6125884,37.2731655 38.9267967,42 34.4914005,42 L20.5063245,42 C16.0737569,42 12.3865509,37.2731655 12.0456929,32.9450797 C11.7967676,29.7467822 12.5803166,27.1064561 14.0201231,24.9936414 C13.8560587,24.7098098 10.3993915,18.603969 14.888533,15.0013845 C17.7101579,15.0013845 22.0182628,19.5496128 22.0408924,19.5731501 C25.5711057,18.5748936 29.5242092,18.5818163 33.0459365,19.5953028 L33.0134065,19.5745346 C33.0134065,19.5745346 37.3398979,15 40.1685945,15 C44.7652265,18.6911953 41.0228609,25.0199477 41.0228609,25.0199477 L40.9776018,24.9894877 Z M33.15767,39.2309112 C35.8930196,39.2309112 38.1078891,37.0613302 38.1078891,34.3850059 C38.1078891,26.1206605 32.272288,29.4961797 27.5002768,29.4961797 C22.7268513,29.4961797 16.8926645,26.2065022 16.8926645,34.3850059 C16.8926645,37.0613302 19.1089483,39.2309112 21.8428836,39.2309112 L33.15767,39.2309112 Z M32.5,36 C31.6715729,36 31,35.1045695 31,34 C31,32.8954305 31.6715729,32 32.5,32 C33.3284271,32 34,32.8954305 34,34 C34,35.1045695 33.3284271,36 32.5,36 Z M22.5,36 C21.6715729,36 21,35.1045695 21,34 C21,32.8954305 21.6715729,32 22.5,32 C23.3284271,32 24,32.8954305 24,34 C24,35.1045695 23.3284271,36 22.5,36 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

6
src/images/gitter.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55">
<g fill="none">
<rect width="55" height="55" fill="#141414" rx="2"/>
<path fill="#FFF" d="M15.2048295,9.40451172 L18.6781981,9.40451172 L18.6781981,32.3276358 L15.2048295,32.3276358 L15.2048295,9.40451172 Z M36.3220792,14.9616243 L39.7951705,14.9616243 L39.7951705,32.3276358 L36.3220792,32.3276358 L36.3220792,14.9616243 Z M22.2902243,14.9616243 L25.7633157,14.9616243 L25.7633157,45.5954883 L22.2902243,45.5954883 L22.2902243,14.9616243 Z M29.2366843,14.9616243 L32.710053,14.9616243 L32.710053,45.5954883 L29.2366843,45.5954883 L29.2366843,14.9616243 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 667 B

11
src/images/medium.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55">
<g fill="none">
<rect width="55" height="55" fill="#141414" rx="2"/>
<g fill="#FFF" transform="translate(13 15)">
<path fill-opacity=".7" d="M19.337,0.027 C19.197,-0.043 19.083,0.027 19.083,0.184 L19.083,19.451 L27.489,23.669 C27.907,23.879 28.25,23.666 28.25,23.197 L28.25,4.65 C28.2504551,4.5575018 28.1985668,4.4726994 28.116,4.431 L19.337,0.026"/>
<path fill-opacity=".7" d="M9.917,14.647 L18.977,0.144 C19.0648393,0.0104811 19.2377236,-0.0377557 19.382,0.031 L28.135,4.341 C28.1868435,4.3660656 28.2256021,4.4119701 28.2416233,4.4672815 C28.2576446,4.522593 28.2494208,4.5821061 28.219,4.631 L19.127,19.183 L9.917,14.647"/>
<path fill-opacity=".7" d="M1.345,0.125 C0.773,-0.155 0.579,0.052 0.915,0.586 L9.695,14.579 L19.083,19.183 L9.755,4.316 C9.7151446,4.2523886 9.6583547,4.2011392 9.591,4.168 L1.345,0.125"/>
<path d="M9.917,23.194 C9.917,23.666 9.574,23.88 9.155,23.669 L1.258,19.689 C0.978,19.548 0.75,19.175 0.75,18.86 L0.75,0.37 C0.75,0.056 0.978,-0.086 1.258,0.054 L9.804,4.361 C9.873,4.396 9.917,4.468 9.917,4.546 L9.917,23.194"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

10
src/images/telegram.svg Normal file
View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="55" viewBox="0 0 56 55">
<g fill="none">
<rect width="55" height="55" x=".833" fill="#141414" rx="2"/>
<g transform="translate(10.25 14.255)">
<path fill="#B0B0B0" d="M12.6288083,26.0153453 C11.6468933,26.0153453 11.8137451,25.6445887 11.4750909,24.7096528 L8.58758969,15.2065755 L30.8142924,2.02060934"/>
<path fill="#D8D9D9" d="M12.6288083,26.0153453 C13.3865368,26.0153453 13.7213265,25.6688107 14.1442653,25.2576168 L18.185484,21.3280368 L13.1445689,18.2882825"/>
<path fill="#FFF" d="M13.1440637,18.2890402 L25.3586472,27.3133342 C26.7524888,28.0824034 27.7584744,27.684217 28.1056656,26.0192602 L33.0776274,2.58953716 C33.5866694,0.548671208 32.2996676,-0.37696993 30.9662422,0.228404628 L1.77096305,11.485977 C-0.221888163,12.2853048 -0.210269659,13.3971198 1.40770801,13.8925227 L8.89987486,16.2309487 L26.245038,5.28808618 C27.0638647,4.79154669 27.8153799,5.05849698 27.1985635,5.60592804"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1012 B

6
src/images/twitter.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55">
<g fill="none">
<rect width="55" height="55" fill="#141414" rx="2"/>
<path fill="#FFF" d="M27.3804404,21.8979232 L27.4548107,23.1192754 L26.216611,22.9688008 C21.7126433,22.3969973 17.7788477,20.4533671 14.4374047,17.1918302 L12.8038684,15.5729743 L12.3837416,16.7679934 C11.4926031,19.4326477 12.0614704,22.2477767 13.9181176,24.1399948 C14.9071117,25.1857932 14.6853056,25.3350139 12.977399,24.7130522 C12.3837416,24.5124194 11.8644545,24.3644527 11.8148743,24.438436 C11.6413437,24.6139897 12.2350011,26.8798864 12.704708,27.7764642 C13.3492503,29.0216415 14.6605155,30.2417397 16.0957312,30.9640178 L17.3091408,31.5370752 L15.8739251,31.5621543 C14.4869849,31.5621543 14.4387095,31.5872334 14.5861452,32.1088787 C15.081947,33.7277346 17.0364498,35.4469069 19.2140634,36.194264 L20.7484394,36.7171633 L19.4110793,37.5134247 C17.4029788,38.6676318 15.1182216,39.3026626 12.7790783,39.3567385 C11.6661338,39.3818176 10.7502052,39.482134 10.7502052,39.5561173 C10.7502052,39.8044004 13.7693771,41.1987984 15.5255591,41.7480307 C20.7967148,43.3656326 27.059474,42.6684336 31.7604577,39.9047168 C35.1005959,37.9360075 38.4420389,34.0274298 40.001205,30.2417397 C40.8427633,28.2241261 41.6843215,24.5387524 41.6843215,22.769422 C41.6843215,21.6245611 41.7586918,21.4753404 43.1443273,20.1047676 C43.9610954,19.3085062 44.7282835,18.4370075 44.877024,18.1874704 C45.1249249,17.7147294 45.09883,17.7147294 43.837145,18.1373122 C41.7339017,18.8846694 41.4364206,18.785607 42.4762996,17.6645712 C43.2434876,16.8670558 44.1594162,15.4224997 44.1594162,14.9999169 C44.1594162,14.9246796 43.7875648,15.0500751 43.3674381,15.2732791 C42.9212165,15.5228161 41.9322224,15.8964947 41.1885198,16.1209526 L39.8524645,16.5435355 L38.6390549,15.7221949 C37.972332,15.2732791 37.0316133,14.7754589 36.5371163,14.6262383 C35.2741265,14.2776388 33.3444138,14.327797 32.2053745,14.7265547 C29.1131371,15.8463365 27.1573296,18.7354488 27.3804404,21.8991772 L27.3804404,21.8979232 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

6
src/images/website.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55">
<g fill="none">
<rect width="55" height="55" fill="#141414" rx="2"/>
<path fill="#FFF" d="M27.5007941,11.328125 C36.4176577,11.328125 43.671875,18.5827202 43.671875,27.5 C43.671875,36.4172798 36.4176577,43.671875 27.5007941,43.671875 C18.5815482,43.671875 11.328125,36.418074 11.328125,27.5 C11.328125,18.581926 18.5815482,11.328125 27.5007941,11.328125 Z M27.5008009,13.0540575 C19.5348874,13.0540575 13.0540575,19.5352249 13.0540575,27.5 C13.0540575,35.4647751 19.5348874,41.9459425 27.5008009,41.9459425 C35.4643117,41.9459425 41.9459425,35.4639741 41.9459425,27.5 C41.9459425,19.5360259 35.4643117,13.0540575 27.5008009,13.0540575 Z M41.1662271,27.5604492 C41.1662271,30.7526512 40.106625,33.6960216 38.3406215,36.0479911 C37.8408092,35.6491789 37.3093421,34.5703407 37.8091544,33.4523031 C38.3139648,32.3274481 38.4455821,29.7232385 38.3289592,28.7091647 C38.2190005,27.6967952 37.7041938,25.2579052 36.3063854,25.2340446 C34.910243,25.2135927 33.9522695,24.7414945 33.122581,23.0473948 C31.4015607,19.5228492 36.3530346,18.8462319 34.6320142,16.8964834 C34.1505283,16.3476905 31.6614631,19.1496019 31.2966001,15.4154243 C31.2732755,15.1478452 31.5215156,14.7473287 31.8563899,14.3314732 C37.2610269,16.1891882 41.1662271,21.4163551 41.1662271,27.5604492 Z M25.8370171,13.6383929 C25.5012004,14.2641621 24.6153981,14.5180737 24.077406,14.9882196 C22.9054742,16.0022279 22.4017491,15.8613479 21.771236,16.8344026 C21.1355829,17.8074574 19.0864156,19.2080665 19.0864156,19.9124664 C19.0864156,20.6168663 20.1212794,21.4457648 20.6387113,21.2852271 C21.1561432,21.1214132 22.5216836,21.131242 23.3235317,21.3998969 C24.1270932,21.671828 30.0295861,21.9437591 28.1483271,26.7140208 C27.5520811,28.2309378 24.9392214,27.975388 24.243601,30.4866556 C24.1390866,30.8552369 23.7775696,32.4294888 23.7552961,32.9438645 C23.7124623,33.7400002 24.3446887,36.7410714 23.5411272,36.7410714 C22.7341391,36.7410714 20.5633238,34.0561611 20.5633238,33.5696337 C20.5633238,33.0831064 20.0013448,31.3778034 20.0013448,29.9165831 C20.0013448,28.457001 17.4004785,28.4799349 17.4004785,26.5387399 C17.4004785,24.7892071 18.8105661,23.917717 18.4935963,23.0773515 C18.1834798,22.2419005 15.7059748,22.2140521 14.6728243,22.1108493 C16.4769825,17.6370909 20.7209521,14.3165825 25.8370171,13.6383929 Z M23.0985336,40.7440861 C23.9342131,40.2388748 24.0191398,39.5859863 24.7766866,39.5529533 C25.6429397,39.5082615 26.3478319,39.1662723 27.3244897,38.919496 C28.1907428,38.7038097 29.7415056,37.6972733 31.1054296,37.5690273 C32.2570366,37.4621557 34.5279784,37.6370366 35.1394512,38.9078373 C32.9398478,40.5808639 30.3020223,41.5563104 27.4722623,41.5563104 C25.945279,41.5563104 24.4743473,41.2667854 23.0985336,40.7440861 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -31,7 +31,7 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
$font-size-root: 15px;
$font-size-base: 1rem;
$font-size-large: 1.2rem;
$font-size-small: .85rem;
$font-size-small: .8rem;
$font-size-mini: .65rem;
$font-size-text: $font-size-base;
$font-size-label: $font-size-base;

View File

@ -29,6 +29,6 @@
.mainSingle {
composes: main;
max-width: $break-point--small;
max-width: 73%;
margin: auto;
}