Building static pages dynamically

Here we use GraphQL at compile time to create all those user landing pages as actual Gatsby pages in our app.

Add an allPages query on the server

Dynamically create static Gatsby pages

Show content and editor side-by-side

We're using remark to render our editable Markdown content. It's the same rendering engine that Gatsby uses when you want to use markdown pages with gatsby-plugin-remark. That approach is meant for static content uneditable by users hoewver.

You can read about the details behind this code in my article about building remark plugins and my article on custom markdown extensions

I used those to build TechLetter.App. We use a simplified useRemark hook for our project.

import { useState, useEffect } from "react"
import remark from "remark"
import remark2react from "remark-react"
export const remarkCompile = input =>
  new Promise((resolve, reject) => {
    remark()
      .use(remark2react, {
        sanitize: false,
      })
      .process(input, (err, output) => {
        if (err) {
          reject(err)
        } else {
          resolve(output)
        }
      })
  })
export default function useRemark(input) {
  const [rendered, setRendered] = useState("")
  useEffect(() => {
    remarkCompile(input)
      .then(output => setRendered(output.contents))
      .catch(err => console.error(err))
  }, [input])
  return rendered
}