table of contents page

src/App.css

@@ -107,6 +107,16 @@
     text-decoration: none;
 }
 
+.plain-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.plain-link:hover {
+    text-decoration: none;
+    color: #444;
+}
+
 .side-nav-item {
     padding: 0.5rem 0.75rem;
     width: 100%;

src/App.js

@@ -15,6 +15,7 @@ import Chapter from "./components/Chapter";
 import { content } from "./content/index";
 import Sidebar from "./components/Sidebar";
 import Header from "./components/Header";
+import TableOfContentsPage from "./pages/TableOfContentsPage";
 import { useEffect } from "react";
 const chapters = content.reduce((chapters, item) => (
   item.content
@@ -40,7 +41,7 @@ function App(props) {
           />
           <Switch>
             <Route path="/" exact>
-              <Chapter>{chapters[0]}</Chapter>
+              <TableOfContentsPage />
             </Route>
             {chapters.map((chapter) => (
               <Route key={chapter.path} path={chapter.path}>

src/content/index.js

@@ -7,7 +7,7 @@
  */
 
 /* eslint-disable import/no-webpack-loader-syntax */
-import * as about from "!babel-loader!mdx-loader!./about.mdx";
+import * as intro from "!babel-loader!mdx-loader!./intro.mdx";
 
 import * as presentEquative from "!babel-loader!mdx-loader!./equatives/present-equative.mdx"
 import * as subjunctiveHabitualEquative from "!babel-loader!mdx-loader!./equatives/subjunctive-habitual-equative.mdx";
@@ -29,8 +29,8 @@ import * as inflectionPatterns from "!babel-loader!mdx-loader!./inflection/infle
 
 const contentTree = [
     {
-        import: about,
-        slug: "about",
+        import: intro,
+        slug: "intro",
     },
     {
         heading: "Equatives",

src/pages/TableOfContentsPage.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2021 lingdocs.com
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import { Link } from "react-router-dom";
+import Footer from "../components/Footer";
+import { content } from "../content/index";
+
+const TableOfContentsPage = () => {
+  return <>
+    <main className="col bg-faded py-3 d-flex flex-column">
+      <div className="flex-shrink-0">
+        <h2 className="mb-3">Table of Contents</h2>
+        {content.map((section) => (
+          section.path ?
+            <Link to={section.path} className="plain-link">
+              <h3 className="mb-3">{section.frontMatter.title}</h3>
+            </Link>
+          : <div>
+            <Link to={section.chapters[0].path} className="plain-link">
+              <h3>{section.heading}</h3>
+            </Link>
+            <div className="ml-3">
+              {section.chapters.map((chapter) => (
+                <Link to={chapter.path} className="plain-link">
+                  <div className="my-3" style={{ fontSize: "larger"}}>
+                    {chapter.frontMatter.title}
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <Footer />
+    </main>
+  </>;
+};
+
+export default TableOfContentsPage;