basic markdown pages generation & global styling setup

README.md

@@ -2,13 +2,15 @@
 
 <h1 align="center">docs</h1>
 
-> One site to rule all docs.
+> 🐍 Ocean Protocol's official documentation.
 
-[![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?branch=master)](https://travis-ci.com/oceanprotocol/docs)
+[![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/docs)
 [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![Greenkeeper badge](https://badges.greenkeeper.io/oceanprotocol/docs.svg)](https://greenkeeper.io/)
 
+---
+
 - [Content](#content)
     - [Editing docs](#editing-docs)
     - [Adding docs](#adding-docs)
@@ -16,6 +18,8 @@
 - [Authors](#authors)
 - [License](#license)
 
+---
+
 ## Content
 
 ...documentation concept...

content/concepts/introduction.md

@@ -0,0 +1,5 @@
+---
+title: Introduction
+---
+
+What is Ocean Protocol?

gatsby-browser.js

@@ -1,7 +1,7 @@
-/**
+// import global branding styles
- * Implement Gatsby's Browser APIs in this file.
+import './src/styles/global.scss'
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
 
-// You can delete this file if you're not using it
+// IntersectionObserver polyfill for gatsby-image (Safari, IE)
+if (typeof window.IntersectionObserver === 'undefined') {
+    import('intersection-observer')
+}

gatsby-config.js

@@ -1,6 +1,8 @@
 module.exports = {
     siteMetadata: {
-        title: 'Ocean Protocol Docs'
+        title: 'Ocean Protocol Docs',
+        descritpion: '',
+        siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com'
     },
     plugins: [
         {
@@ -17,6 +19,29 @@ module.exports = {
                 path: `${__dirname}/content`
             }
         },
+        {
+            resolve: 'gatsby-transformer-remark',
+            options: {
+                plugins: [
+                    {
+                        resolve: 'gatsby-remark-images',
+                        options: {
+                            maxWidth: 600
+                        }
+                    },
+                    'gatsby-remark-prismjs',
+                    'gatsby-remark-autolink-headers'
+                ]
+            }
+        },
+        {
+            resolve: 'gatsby-plugin-sass',
+            options: {
+                includePaths: [`${__dirname}/src/styles`]
+            }
+        },
+        'gatsby-plugin-react-svg',
+        'gatsby-plugin-catch-links',
         'gatsby-plugin-react-helmet',
         'gatsby-transformer-sharp',
         'gatsby-plugin-sharp'

gatsby-node.js

@@ -1,7 +1,73 @@
-/**
+const path = require('path')
- * Implement Gatsby's Node APIs in this file.
+const { createFilePath } = require('gatsby-source-filesystem')
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
 
-// You can delete this file if you're not using it
+exports.onCreateNode = ({ node, getNode, actions }) => {
+    const { createNodeField } = actions
+
+    if (node.internal.type === `MarkdownRemark`) {
+        const fileNode = getNode(node.parent)
+        const parsedFilePath = path.parse(fileNode.relativePath)
+        const slug = createFilePath({ node, getNode })
+        const section = parsedFilePath.dir
+
+        createNodeField({
+            node,
+            name: 'slug',
+            value: slug
+        })
+
+        createNodeField({
+            node,
+            name: 'section',
+            value: section
+        })
+    }
+}
+
+exports.createPages = ({ graphql, actions }) => {
+    const { createPage } = actions
+
+    return new Promise((resolve, reject) => {
+        resolve(
+            graphql(
+                `
+                    {
+                        allMarkdownRemark {
+                            edges {
+                                node {
+                                    fields {
+                                        slug
+                                        section
+                                    }
+                                }
+                            }
+                        }
+                    }
+                `
+            ).then(result => {
+                if (result.errors) {
+                    /* eslint-disable-next-line no-console */
+                    console.log(result.errors)
+                    reject(result.errors)
+                }
+
+                const posts = result.data.allMarkdownRemark.edges
+                const docTemplate = path.resolve('./src/templates/Doc.jsx')
+
+                // Create Doc pages
+                posts.forEach(post => {
+                    createPage({
+                        path: `${post.node.fields.slug}`,
+                        component: docTemplate,
+                        context: {
+                            slug: post.node.fields.slug,
+                            section: post.node.fields.section
+                        }
+                    })
+                })
+
+                resolve()
+            })
+        )
+    })
+}

package.json

@@ -6,12 +6,22 @@
   "dependencies": {
     "gatsby": "^2.0.19",
     "gatsby-image": "^2.0.15",
+    "gatsby-plugin-catch-links": "^2.0.6",
     "gatsby-plugin-manifest": "^2.0.5",
     "gatsby-plugin-offline": "^2.0.11",
     "gatsby-plugin-react-helmet": "^3.0.0",
+    "gatsby-plugin-react-svg": "^2.0.0-beta1",
+    "gatsby-plugin-sass": "^2.0.3",
     "gatsby-plugin-sharp": "^2.0.7",
+    "gatsby-remark-autolink-headers": "^2.0.10",
+    "gatsby-remark-images": "^2.0.6",
+    "gatsby-remark-prismjs": "^3.0.3",
     "gatsby-source-filesystem": "^2.0.4",
+    "gatsby-transformer-remark": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.4",
+    "intersection-observer": "^0.5.1",
+    "node-sass": "^4.10.0",
+    "prismjs": "^1.15.0",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-helmet": "^5.2.0"

src/components/Layout.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { StaticQuery, graphql } from 'gatsby'
 
-import Header from './header'
+import Header from './Header'
-import './layout.css'
+import styles from './Layout.module.scss'
 
 const Layout = ({ children }) => (
     <StaticQuery
@@ -29,7 +29,7 @@ const Layout = ({ children }) => (
                     <html lang="en" />
                 </Helmet>
                 <Header siteTitle={data.site.siteMetadata.title} />
-                <div>{children}</div>
+                <main className={styles.main}>{children}</main>
             </>
         )}
     />

src/components/Layout.module.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+
+.main {
+    padding: 0 $spacer;
+    max-width: 45rem;
+    margin: auto;
+}

src/components/layout.css

@@ -1,624 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: .67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -.25em;
-}
-sup {
-  top: -.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type=reset],
-[type=submit],
-button,
-html [type=button] {
-  -webkit-appearance: button;
-}
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: .35em .625em .75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type=checkbox],
-[type=radio] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}

src/pages/404.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Layout from '../components/layout'
+import Layout from '../components/Layout'
 
 const NotFoundPage = () => (
     <Layout>

src/pages/index.js

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Link } from 'gatsby'
 
-import Layout from '../components/layout'
+import Layout from '../components/Layout'
-import Image from '../components/image'
+import Image from '../components/Image'
 
 const IndexPage = () => (
     <Layout>
@@ -10,7 +9,6 @@ const IndexPage = () => (
         <p>Welcome to your new Gatsby site.</p>
         <p>Now go build something great.</p>
         <Image />
-        <Link to="/page-2/">Go to page 2</Link>
     </Layout>
 )
 

src/pages/page-2.js

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Link } from 'gatsby'
-
-import Layout from '../components/layout'
-
-const SecondPage = () => (
-    <Layout>
-        <h1>Hi from the second page</h1>
-        <p>Welcome to page 2</p>
-        <Link to="/">Go back to the homepage</Link>
-    </Layout>
-)
-
-export default SecondPage

src/styles/_fonts.scss

@@ -0,0 +1,26 @@
+@font-face {
+    font-family: 'Sharp Sans Display';
+    src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'),
+    url('../fonts/SharpSansDispNo1-Bold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+  }
+
+  @font-face {
+    font-family: 'Sharp Sans Medium';
+    src: url('../fonts/SharpSans-Medium.woff2') format('woff2'),
+    url('../fonts/SharpSans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+  }
+
+  @font-face {
+    font-family: 'Sharp Sans Bold';
+    src: url('../fonts/SharpSans-Bold.woff2') format('woff2'),
+    url('../fonts/SharpSans-Bold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+  }

src/styles/_variables.scss

@@ -0,0 +1,56 @@
+// Colors
+$brand-white:         #fff;
+$brand-black:         #141414;
+$brand-pink:          #ff4092;
+$brand-purple:        #7b1173;
+$brand-violet:        #e000cf;
+
+$brand-grey:          #41474e;
+$brand-grey-light:    #8b98a9;
+$brand-grey-dark:     #303030;
+$brand-grey-lighter:  #e2e2e2;
+
+$green:               #5fb359;
+$red:                 #d80606;
+$orange:              #b35f36;
+$yellow:              #eac146;
+
+$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
+
+// Fonts
+$font-family-base:      'Sharp Sans Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-title:     'Sharp Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-button:    'Sharp Sans Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+
+$font-size-root:        15px;
+$font-size-base:        1rem;
+$font-size-large:       1.25rem;
+$font-size-small:       .85rem;
+$font-size-mini:        .65rem;
+$font-size-text:        $font-size-base;
+$font-size-label:       $font-size-base;
+$font-size-title:       1.4rem;
+$font-size-h1:          3.4rem;
+$font-size-h2:          2.7rem;
+$font-size-h3:          2rem;
+$font-size-h4:          1.5rem;
+$font-size-h5:          1.125rem;
+
+$font-weight-base:      500;
+$font-weight-bold:      600;
+
+$line-height:           1.5;
+
+// Sizes
+$spacer:                2rem;
+$page-frame:            .75rem;
+
+$break-point--small:    640px;
+$break-point--medium:   860px;
+$break-point--large:    1140px;
+$break-point--huge:     1400px;
+$brand-border-width:    1px;
+
+$border-radius:         .2rem;
+
+$narrowWidth:           35rem;

src/styles/global.scss

@@ -0,0 +1,136 @@
+@import 'variables';
+@import 'fonts';
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: $font-size-root;
+}
+
+body {
+    color: $brand-black;
+    font-size: $font-size-base;
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    line-height: $line-height;
+    background: $brand-white;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    margin: 0;
+
+    @media screen and (min-width: $break-point--small) {
+        padding: $page-frame;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: $brand-pink;
+    transition: .2s ease-out;
+
+    &:hover,
+    &:focus {
+        color: darken($brand-pink, 15%);
+        text-decoration: none;
+        transform: translate3d(0, -.1rem, 0);
+    }
+
+    &:active {
+        color: darken($brand-pink, 15%);
+        text-decoration: none;
+        transform: none;
+        transition: none;
+    }
+}
+
+p {
+    margin: 0;
+    margin-bottom: $spacer / 2;
+}
+
+strong,
+.strong {
+    font-family: $font-family-button;
+    font-weight: 600;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: $font-family-title;
+    color: inherit;
+    line-height: 1.25;
+    font-weight: 600;
+}
+
+h1 {
+    font-size: $font-size-h1;
+}
+
+h2 {
+    font-size: $font-size-h2;
+}
+
+h3 {
+    font-size: $font-size-h3;
+}
+
+h4 {
+    font-size: $font-size-h4;
+}
+
+h5 {
+    font-size: $font-size-h5;
+}
+
+.fade {
+    &-enter {
+        opacity: .01;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        transition: opacity 400ms ease-out;
+    }
+
+    &-exit {
+        opacity: 1;
+    }
+
+    &-exit-active {
+        opacity: .01;
+        transition: opacity 400ms ease-in;
+    }
+}
+
+.grow {
+    &-enter {
+        opacity: .01;
+        max-height: 0;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        max-height: 500px;
+        transition: 200ms ease-out;
+    }
+
+    &-exit {
+        opacity: 1;
+        max-height: 500px;
+    }
+
+    &-exit-active {
+        opacity: .01;
+        max-height: 0;
+        transition: 200ms ease-in;
+    }
+}

src/templates/Doc.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
+
+export default class DocTemplate extends Component {
+    static propTypes = {
+        data: PropTypes.object.isRequired,
+        location: PropTypes.object.isRequired
+    }
+
+    render() {
+        const post = this.props.data.markdownRemark
+
+        return (
+            <Layout location={this.props.location}>
+                <h1>{post.frontmatter.title}</h1>
+                <div dangerouslySetInnerHTML={{ __html: post.html }} />
+            </Layout>
+        )
+    }
+}
+
+export const pageQuery = graphql`
+    query DocBySlug($slug: String!) {
+        site {
+            siteMetadata {
+                title
+            }
+        }
+        markdownRemark(fields: { slug: { eq: $slug } }) {
+            id
+            excerpt
+            html
+            frontmatter {
+                title
+            }
+        }
+    }
+`