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

…eplace with TOC)
brown-ccv · Jun 26, 2024 · 5313873 · 5313873
1 parent b32ad90
commit 5313873
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 48 deletions.
diff --git a/src/pages/index.js b/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 "@site/table_of_content.mdx";
 
-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,25 @@ 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>
+        <div className={styles.TOC}>
+          <TableOfContents />
         </div>
       </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>

diff --git a/src/pages/styles.module.css b/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) {
@@ -35,3 +37,36 @@
   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;
+}
+
+.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/table_of_content.mdx b/table_of_content.mdx
@@ -0,0 +1,30 @@
+---
+id: table_of_content
+slug: /tableofcontent
+title: Table of Content
+description: A table of content for the home page
+---
+
+## Table of Contents
+
+- [Introduction](./docs)
+- [Quick Start](./docs/quick_start)
+- [Prerequisites](./docs/prerequisites)
+- Project Organization
+  - [Directory Structure](./docs/directory_structure)
+  - [NPM Scripts](./docs/npm_scripts)
+  - [Environment Variables](./docs/environment_variables)
+  - [Continuous Integration / Deployment](./docs/ci_cd)
+- Deployment
+  - [Local Application](./docs/local_application)
+  - [Firebase](./docs/firebase)
+  - [PsiTurk](./docs/psiturk)
+  - [GitHub Pages](./docs/gh_pages)
+- External Tools
+  - [Event Triggers](./docs/event_triggers)
+  - [Prolific](./docs/prolific)
+- Further Reading
+  - [Github Discussions](./docs/github_discussions)
+  - [Version Control](./docs/version_control)
+  - [JavaScript](./docs/javascript)
+- [Trouble Shooting](./docs/troubleshooting)