diff --git a/src/pages/index.js b/src/pages/index.js index 7352b0fd..0e9f4bec 100644 --- 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 ( -
+
{imgUrl && ( -
- {title} +
+ {title}
)}

{title}

@@ -59,35 +60,25 @@ function Home() { return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Read the Docs - -
+
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+
+
+
{features && features.length > 0 && (
-
-
+
+
{features.map((props, idx) => ( - + ))}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css index c1aa8512..9126bda2 100644 --- 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 new file mode 100644 index 00000000..b79e8f9e --- /dev/null +++ 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)