feat: add table of content on the home page, remove read docs link (r…

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">Troubleshooting</a>
+        </li>
+      </ul>
+    </div>
+  );
+}

src/css/toc.css

@@ -0,0 +1,32 @@
+/**
+* For table of contents items 
+*/
+.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;
+}

src/pages/index.js

@@ -1,50 +1,51 @@
-import React from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import TableOfContents from "../../components/TableOfContents.jsx";
 
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 const features = [
   {
-    title: 'Modular and Configurable',
-    imageUrl: 'img/undraw_Content_creator_re_pt5b.svg',
+    title: "Modular and Configurable",
+    imageUrl: "img/undraw_Content_creator_re_pt5b.svg",
     description: (
       <>
-        Honeycomb was designed to be modular, composable, easily configured to deploy to Linux, Mac,
-
-        Windows, Browsers, PsiTurk, and more
-
+        Honeycomb was designed to be modular, composable, easily configured to
+        deploy to Linux, Mac, Windows, Browsers, PsiTurk, and more
       </>
     ),
   },
   {
-    title: 'Packed with automation',
-    imageUrl: 'img/undraw_User_flow_re_bvfx.svg',
+    title: "Packed with automation",
+    imageUrl: "img/undraw_User_flow_re_bvfx.svg",
     description: (
-      <>Honeycomb includes GitHub Actions that build the executables/deployments for you.</>
+      <>
+        Honeycomb includes GitHub Actions that build the executables/deployments
+        for you.
+      </>
     ),
   },
   {
-    title: 'Based on trusted and mature libraries',
-    imageUrl: 'img/undraw_Code_review_re_woeb.svg',
-    description: <>Honeycomb relies on mature libraries such as JSPsych, React and Electron</>,
+    title: "Based on trusted and mature libraries",
+    imageUrl: "img/undraw_Code_review_re_woeb.svg",
+    description: (
+      <>
+        Honeycomb relies on mature libraries such as JSPsych, React and Electron
+      </>
+    ),
   },
 ];
 
 function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
-    <div className={clsx('col col--4', styles.feature)}>
+    <div className={clsx("col col--4", styles.feature)}>
       {imgUrl && (
-        <div className='text--center'>
-          <img
-            className={styles.featureImage}
-            src={imgUrl}
-            alt={title}
-          />
+        <div className="text--center">
+          <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
       <h3>{title}</h3>
@@ -59,35 +60,24 @@ function Home() {
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description='Description will go into a meta tag in <head />'
+      description="Description will go into a meta tag in <head />"
     >
-      <header className={clsx('hero', styles.heroBanner)}>
-        <div className='container'>
-          <h1 className='hero__title'>{siteConfig.title}</h1>
-          <p className='hero__subtitle'>{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className={clsx(
-                'button button--outline button--secondary button--lg',
-                styles.getStarted
-              )}
-              to={useBaseUrl('/docs')}
-            >
-              Read the Docs
-            </Link>
-          </div>
+      <header className={clsx("hero", styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
         </div>
+
+        <TableOfContents />
       </header>
+
       <main>
         {features && features.length > 0 && (
           <section className={styles.features}>
-            <div className='container'>
-              <div className='row'>
+            <div className="container">
+              <div className="row">
                 {features.map((props, idx) => (
-                  <Feature
-                    key={idx}
-                    {...props}
-                  />
+                  <Feature key={idx} {...props} />
                 ))}
               </div>
             </div>

src/pages/styles.module.css

@@ -10,6 +10,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 @media screen and (max-width: 966px) {