From cd79eaf6a4086c5bc775978239732fb0b7d68812 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Sun, 28 Mar 2021 23:41:10 -0400
Subject: [PATCH] add ids in markdown headers automatically

---
 component/footer.jsx |  3 +++
 component/header.jsx | 13 ++++++++-----
 pages/faq.js         | 18 +++++++++++++++++-
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 component/footer.jsx

diff --git a/component/footer.jsx b/component/footer.jsx
new file mode 100644
index 0000000..b1481ce
--- /dev/null
+++ b/component/footer.jsx
@@ -0,0 +1,3 @@
+export function Footer(props) {
+  return <footer></footer>;
+}
diff --git a/component/header.jsx b/component/header.jsx
index d675768..846a2a4 100644
--- a/component/header.jsx
+++ b/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">
+        <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>
     </>
   );
diff --git a/pages/faq.js b/pages/faq.js
index 48228b1..e4480ef 100644
--- a/pages/faq.js
+++ b/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 />