Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Aug 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
024d692
feat: add table of content on the home page, remove read docs link (r…
YUUU23 Jun 19, 2024
5313873
feat: add table of content on the home page, remove read docs link (r…
YUUU23 Jun 19, 2024
02c3143
Merge branch 'add-table-content' of https://github.com/brown-ccv/hone…
YUUU23 Jun 26, 2024
8535ef6
Merge branch 'main' into add-table-content
YUUU23 Jul 9, 2024
134b689
combine nesting in css
YUUU23 Jul 11, 2024
2edd8f6
nest css TOC content
YUUU23 Jul 12, 2024
2431bb4
Merge branch 'main' into add-table-content
YUUU23 Jul 12, 2024
6ddb7ca
correct table of contents spelling
YUUU23 Jul 12, 2024
eebf5cc
refactor: change table of contents to components and move style to it…
YUUU23 Jul 16, 2024
facda17
remove extra toc mdx
YUUU23 Jul 17, 2024
a207839
nesting css
YUUU23 Jul 17, 2024
76a8741
revert back to original styling format without nesting
YUUU23 Jul 17, 2024
ab8c63a
Update components/TableOfContents.jsx
YUUU23 Jul 24, 2024
04fafc4
rm mdx toc
YUUU23 Jul 24, 2024
3797b0d
style: 2 columns for TOC
YUUU23 Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions components/TableOfContents.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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