From da6eef9bba8de203632cd7f2e67c4477fe73a591 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 17 Jul 2020 14:59:20 +0200 Subject: [PATCH] generate markdown pages, use for terms --- content/terms.md | 7 +- gatsby-node.js | 29 +++-- gatsby/createFields.js | 26 ++++ gatsby/createMarkdownPages.js | 42 ++++++ .../templates/PageMarkdown.module.css | 121 ++++++++++++++++++ src/components/templates/PageMarkdown.tsx | 41 ++++++ 6 files changed, 255 insertions(+), 11 deletions(-) create mode 100644 gatsby/createFields.js create mode 100644 gatsby/createMarkdownPages.js create mode 100644 src/components/templates/PageMarkdown.module.css create mode 100644 src/components/templates/PageMarkdown.tsx diff --git a/content/terms.md b/content/terms.md index 8d6b581b1..b48cc624b 100644 --- a/content/terms.md +++ b/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_ diff --git a/gatsby-node.js b/gatsby-node.js index 5d29e55bb..ba178e2c2 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,12 +1,12 @@ -exports.onCreateWebpackConfig = ({ actions }) => { - actions.setWebpackConfig({ - node: { - // 'fs' fix for squid.js - fs: 'empty' - }, - // fix for 'got'/'swarm-js' dependency - externals: ['got'] - }) +const createFields = require('./gatsby/createFields') +const createMarkdownPages = require('./gatsby/createMarkdownPages') + +exports.onCreateNode = ({ node, actions, getNode }) => { + createFields(node, actions, getNode) +} + +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'] + }) +} diff --git a/gatsby/createFields.js b/gatsby/createFields.js new file mode 100644 index 000000000..70f89351d --- /dev/null +++ b/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 diff --git a/gatsby/createMarkdownPages.js b/gatsby/createMarkdownPages.js new file mode 100644 index 000000000..37f6b5031 --- /dev/null +++ b/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 diff --git a/src/components/templates/PageMarkdown.module.css b/src/components/templates/PageMarkdown.module.css new file mode 100644 index 000000000..19fc7a81a --- /dev/null +++ b/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; +} diff --git a/src/components/templates/PageMarkdown.tsx b/src/components/templates/PageMarkdown.tsx new file mode 100644 index 000000000..c551d0810 --- /dev/null +++ b/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 ( + + +
+ + + ) +} + +export const pageQuery = graphql` + query PageMarkdownBySlug($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + frontmatter { + title + description + } + fields { + slug + } + } + } +`