add ids in markdown headers automatically

component/footer.jsx

@@ -0,0 +1,3 @@
+export function Footer(props) {
+  return <footer></footer>;
+}

component/header.jsx

@@ -34,14 +34,17 @@ export function Header(props) {
         <Link href="/">
           <span className="title">{__(m.title)}</span>
         </Link>
-
-        {!faqPage && (
         <div className="header__links">
+          {!faqPage ? (
             <Link href="/faq">
               <span className="link">FAQ</span>
             </Link>
-          </div>
+          ) : (
+            <Link href="/">
+              <span className="link">Go Home</span>
+            </Link>
           )}
+        </div>
       </header>
     </>
   );

pages/faq.js

@@ -1,8 +1,22 @@
+import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Header } from '../component/header';
 import { Email } from '../component/email';
 import md from '../faq.md';
 
+function flatten(text, child) {
+  return typeof child === 'string'
+    ? text + child
+    : React.Children.toArray(child.props.children).reduce(flatten, text);
+}
+
+function HeadingRenderer(props) {
+  var children = React.Children.toArray(props.children);
+  var text = children.reduce(flatten, '');
+  var slug = text.toLowerCase().replace(/\W/g, '-');
+  return React.createElement('h' + props.level, { id: slug }, props.children);
+}
+
 export default function Faq() {
   return (
     <div>
@@ -10,7 +24,9 @@ export default function Faq() {
 
       <main>
         <div className="content md">
-          <ReactMarkdown>{md}</ReactMarkdown>
+          <ReactMarkdown renderers={{ heading: HeadingRenderer }}>
+            {md}
+          </ReactMarkdown>
         </div>
 
         <Email />