refactor: change table of contents to components and move style to it…

…s own stylesheet
brown-ccv · Jul 16, 2024 · eebf5cc · eebf5cc
1 parent 6ddb7ca
commit eebf5cc
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 37 deletions.
diff --git a/components/TableOfContents.jsx b/components/TableOfContents.jsx
@@ -0,0 +1,89 @@
+import React from "react";
+import "../src/css/toc.css";
+
+/**
+ * A Table of Contents for the Honeycomb Docs page
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function TableOfContents() {
+  return (
+    <div className="TOC">
+      <h2>Table of Contents</h2>
+      <ul>
+        <li>
+          <a href="../docs">Introduction</a>
+        </li>
+        <li>
+          <a href="../docs/quick_start">Quick Start</a>
+        </li>
+        <li>
+          <a href="../docs/prerequisites">Prerequisites</a>
+        </li>
+        <li>
+          Project Organization
+          <ul>
+            <li>
+              <a href="../docs/directory_structure">Directory Structure</a>
+            </li>
+            <li>
+              <a href="../docs/npm_scripts">NPM Scripts</a>
+            </li>
+            <li>
+              <a href="../docs/environment_variables">Environment Variables</a>
+            </li>
+            <li>
+              <a href="../docs/ci_cd">Continuous Integration / Deployment</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Deployment
+          <ul>
+            <li>
+              <a href="../docs/local_application">Local Application</a>
+            </li>
+            <li>
+              <a href="../docs/firebase">Firebase</a>
+            </li>
+            <li>
+              <a href="../docs/psiturk">PsiTurk</a>
+            </li>
+            <li>
+              <a href="../docs/gh_pages">GitHub Pages</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          External Tools
+          <ul>
+            <li>
+              <a href="../docs/event_triggers">Event Triggers</a>
+            </li>
+            <li>
+              <a href="../docs/prolific">Prolific</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Further Reading
+          <ul>
+            <li>
+              <a href="../docs/github_discussions">Github Discussions</a>
+            </li>
+            <li>
+              <a href="../docs/version_control">Version Control</a>
+            </li>
+            <li>
+              <a href="../docs/javascript">JavaScript</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href="../docs/troubleshooting">Trouble Shooting</a>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/src/css/toc.css b/src/css/toc.css
@@ -0,0 +1,62 @@
+/**
+* For table of content items 
+*/
+/* .TOC {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-self: center;
+  margin: 1.5vh 0;
+  padding: 0;
+
+  ul {
+    display: inline-block;
+    text-align: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      margin-bottom: 1.5vh;
+      font-size: large;
+
+      ul {
+        text-align: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: smaller;
+      }
+    }
+  }
+} */
+
+.TOC {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-self: center;
+  margin: 1.5vh 0;
+  padding: 0;
+}
+
+.TOC > ul {
+  display: inline-block;
+  text-align: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.TOC > ul > li {
+  margin-bottom: 1.5vh;
+  font-size: large;
+}
+
+.TOC > ul > li > ul {
+  text-align: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: smaller;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import TableOfContents from "@site/table_of_content.mdx";
+import TableOfContents from "../../components/TableOfContents.jsx";
 
 import styles from "./styles.module.css";
 
@@ -67,9 +67,8 @@ function Home() {
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
         </div>
-        <div className={styles.TOC}>
-          <TableOfContents />
-        </div>
+
+        <TableOfContents />
       </header>
 
       <main>

diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
@@ -37,36 +37,3 @@
   height: 200px;
   width: 200px;
 }
-
-/**
-* For table of content items 
-*/
-.TOC {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-self: center;
-  margin: 1.5vh 0;
-  padding: 0;
-
-  > ul {
-    display: inline-block;
-    text-align: center;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    > li {
-      margin-bottom: 1.5vh;
-      font-size: large;
-
-      > ul {
-        text-align: center;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        font-size: smaller;
-      }
-    }
-  }
-}