generate markdown pages, use for terms

content/terms.md

@@ -1,6 +1,9 @@
-# Terms and Conditions
+---
+title: Terms and Conditions
+description: Thanks for using our product and services.
+---
 
-Thanks for using our product and services. By using our products and services you are agreeing to the terms. Please read them carefully.
+By using our products and services you are agreeing to the terms. Please read them carefully.
 
 _Latest Revision: February 20, 2020_
 

gatsby-node.js

@@ -1,12 +1,12 @@
-exports.onCreateWebpackConfig = ({ actions }) => {
+const createFields = require('./gatsby/createFields')
-  actions.setWebpackConfig({
+const createMarkdownPages = require('./gatsby/createMarkdownPages')
-    node: {
+
-      // 'fs' fix for squid.js
+exports.onCreateNode = ({ node, actions, getNode }) => {
-      fs: 'empty'
+  createFields(node, actions, getNode)
-    },
+}
-    // fix for 'got'/'swarm-js' dependency
+
-    externals: ['got']
+exports.createPages = async ({ graphql, actions }) => {
-  })
+  await createMarkdownPages(graphql, actions)
 }
 
 exports.onCreatePage = async ({ page, actions }) => {
@@ -22,3 +22,14 @@ exports.onCreatePage = async ({ page, actions }) => {
     createPage(page)
   }
 }
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    node: {
+      // 'fs' fix for squid.js
+      fs: 'empty'
+    },
+    // fix for 'got'/'swarm-js' dependency
+    externals: ['got']
+  })
+}

gatsby/createFields.js

@@ -0,0 +1,26 @@
+const { createFilePath } = require('gatsby-source-filesystem')
+
+function createMarkdownFields(node, actions, getNode) {
+  const { createNodeField } = actions
+
+  // Automatically create slugs for specific node types,
+  // relative to ./content/
+  const { type } = node.internal
+
+  if (type === 'MarkdownRemark') {
+    // Create a slug from the file path & name
+    const slug = createFilePath({
+      node,
+      getNode,
+      trailingSlash: false
+    })
+
+    createNodeField({
+      name: 'slug',
+      node,
+      value: slug
+    })
+  }
+}
+
+module.exports = createMarkdownFields

gatsby/createMarkdownPages.js

@@ -0,0 +1,42 @@
+const path = require('path')
+
+async function createMarkdownPages(graphql, actions) {
+  const { createPage } = actions
+
+  const markdownPageTemplate = path.resolve(
+    './src/components/templates/PageMarkdown.tsx'
+  )
+  // Grab all markdown files with a frontmatter title defined
+  const markdownResult = await graphql(`
+    {
+      allMarkdownRemark(filter: { frontmatter: { title: { ne: "" } } }) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  if (markdownResult.errors) {
+    throw markdownResult.errors
+  }
+
+  // Create markdown pages.
+  const markdownPages = markdownResult.data.allMarkdownRemark.edges
+
+  markdownPages.forEach((page) => {
+    createPage({
+      path: page.node.fields.slug,
+      component: markdownPageTemplate,
+      context: {
+        slug: page.node.fields.slug
+      }
+    })
+  })
+}
+
+module.exports = createMarkdownPages

src/components/templates/PageMarkdown.module.css

@@ -0,0 +1,121 @@
+.teaser {
+  margin-bottom: calc(var(--spacer) * 2);
+  margin-top: -4rem;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.content {
+  /* handling long text, like URLs */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.content table {
+  overflow-wrap: normal;
+  word-wrap: normal;
+  word-break: normal;
+}
+
+.content h1,
+.content h2 {
+  font-size: var(--font-size-h3);
+}
+
+.content h3 {
+  font-size: var(--font-size-h4);
+}
+
+.content h4 {
+  font-size: var(--font-size-h5);
+}
+
+.content h5 {
+  font-size: var(--font-size-base);
+}
+
+.content ul,
+.content ol {
+  margin: 0;
+  margin-bottom: var(--spacer);
+  padding-left: 1.5rem;
+}
+
+.content ul {
+  list-style: none;
+}
+
+.content ul li {
+  position: relative;
+  display: block;
+}
+
+.content ul li:before {
+  content: '▪';
+  top: -2px;
+  position: absolute;
+  left: -1.5rem;
+  color: var(--brand-grey-light);
+  user-select: none;
+}
+
+.content li + li {
+  margin-top: calc(var(--spacer) / 8);
+}
+
+.content li ul,
+.content li ol,
+.content li p {
+  margin-bottom: 0;
+  margin-top: calc(var(--spacer) / 8);
+}
+
+.content hr {
+  display: block;
+  margin: calc(var(--spacer) * 2) auto;
+  max-width: 20%;
+  border: 0;
+  border-top: 2px solid var(--brand-black);
+}
+
+.content figure {
+  margin-bottom: var(--spacer);
+}
+
+.content figcaption {
+  text-align: center;
+  color: var(--brand-grey-light);
+  margin-top: calc(var(--spacer) / 4);
+  font-size: var(--font-size-small);
+}
+
+.content blockquote {
+  font-style: italic;
+  font-size: var(--font-size-large);
+  padding-left: calc(var(--spacer) / 2);
+  position: relative;
+  margin-top: calc(var(--spacer) * 1.5);
+  margin-bottom: calc(var(--spacer) * 1.5);
+}
+
+.content blockquote::before {
+  content: '‟';
+  font-size: 400%;
+  position: absolute;
+  left: -3rem;
+  top: -2rem;
+  color: var(--brand-grey-light);
+}
+
+.content :global(.anchor) {
+  opacity: 0;
+  color: var(--brand-grey-light);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-base);
+  margin-top: 0.2rem;
+}
+
+.content :global([id]:hover .anchor) {
+  opacity: 1;
+}

src/components/templates/PageMarkdown.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react'
+import { graphql, PageProps } from 'gatsby'
+import Layout from '../Layout'
+import styles from './PageMarkdown.module.css'
+import Container from '../atoms/Container'
+
+export default function PageTemplateMarkdown(props: PageProps): ReactElement {
+  const { html, frontmatter } = (props.data as any).markdownRemark
+  const { title, description } = frontmatter
+
+  return (
+    <Layout
+      title={title}
+      description={description}
+      uri={props.uri}
+      headerCenter
+    >
+      <Container narrow>
+        <div
+          className={styles.content}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </Container>
+    </Layout>
+  )
+}
+
+export const pageQuery = graphql`
+  query PageMarkdownBySlug($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        title
+        description
+      }
+      fields {
+        slug
+      }
+    }
+  }
+`