Skip to content

Commit

Permalink
Merge pull request #141 from brown-ccv/add-table-content
Browse files Browse the repository at this point in the history 
feat: add table of content on the home page, remove read docs link (r…
  • Loading branch information
@YUUU23
YUUU23 authored Aug 1, 2024
2 parents b45a5ed + 3797b0d commit 6e4e808
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 48 deletions.
101 changes: 101 additions & 0 deletions components/TableOfContents.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
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-container">
<h2>Table of Contents</h2>
<div className="TOC-content">
<div className="TOC-col">
<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>
</ul>
</div>
<div className="TOC-col">
<ul>
<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>
</div>
</div>
);
}
48 changes: 48 additions & 0 deletions src/css/toc.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* For table of contents items
*/
.TOC-container {
display: flex;
flex-direction: column;
justify-content: center;
}

.TOC-content {
display: flex;
flex-direction: row;
align-items: top;
justify-self: center;
margin: 1.5vh 0;
gap: 5.5vw;
padding: 0;
}

.TOC-col {
display: flex;
flex-direction: column;
align-items: center;
justify-self: center;
margin: 1.5vh 0;
padding: 0;
}

.TOC-col > ul {
display: inline-block;
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}

.TOC-col > ul > li {
margin-bottom: 1.5vh;
font-size: large;
}

.TOC-col > ul > li > ul {
text-align: center;
list-style: none;
padding: 0;
margin: 0;
font-size: smaller;
}
86 changes: 38 additions & 48 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/pages/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}

@media screen and (max-width: 966px) {
Expand Down

0 comments on commit 6e4e808

Please sign in to comment.