diff --git a/components/onboard/item.js b/components/onboard/item.js index aa395559..16042751 100644 --- a/components/onboard/item.js +++ b/components/onboard/item.js @@ -1,10 +1,15 @@ import {Box, Divider, Flex, Heading, Image, Paragraph} from "theme-ui"; +import {Link} from "theme-ui"; +import React, {useContext} from "react"; function trim(str) { return str.substring(1, str.length - 1) } -const Item = ({ title, author_name, author_slack, image }) => { +const onboardContext = React.createContext({}) + +const Item = ({ title, author_name, author_slack, image, project }) => { + //const { projectCtx, setProjectCtx } = React.useContext(onboardContext) return ( { borderRadius: 8 }} /> - - {title} - + + {title} + + { ) } -export default Item; \ No newline at end of file +export default Item; +export { onboardContext }; \ No newline at end of file diff --git a/package.json b/package.json index 93fe80ab..fb404501 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "react-page-visibility": "^7.0.0", "react-relative-time": "^0.0.9", "react-reveal": "^1.2.2", + "react-router-dom": "^6.22.3", "react-scrolllock": "^5.0.1", "react-snowfall": "^1.2.1", "react-ticker": "^1.3.2", @@ -67,6 +68,8 @@ "react-use-websocket": "^4.7.0", "react-wrap-balancer": "^1.1.0", "recharts": "2.12.2", + "remark": "^15.0.1", + "remark-html": "^16.0.1", "styled-components": "^6.1.8", "swr": "^2.2.4", "theme-ui": "^0.14", diff --git a/pages/onboard/board_page.js b/pages/onboard/board_page.js new file mode 100644 index 00000000..86cd0298 --- /dev/null +++ b/pages/onboard/board_page.js @@ -0,0 +1,235 @@ +import {Box, Button, Flex, Grid, Heading, Image, Text} from 'theme-ui' +import Head from 'next/head' +import Meta from '@hackclub/meta' +import Nav from '../../components/nav' +import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion' +import {useContext, useEffect, useRef, useState} from 'react' +import Item, {onboardContext} from '../../components/onboard/item' +//import { useSearchParams } from 'next/navigation' +/*import pcbStackup from "pcb-stackup"; +import JSZip from "jszip"; +import JSZipUtils from "jszip-utils";*/ +import { useRouter } from "next/router"; +import { remark } from 'remark'; +import html from 'remark-html'; + +// example projects +const curated = [ + 'Touch Capacitive Piano', + 'Small Stepper Motor Breakout', + 'ShawnsMultipurposeMacropad', + 'Hall-Effect Sensor Plate', + 'Gas_Smoke_Detector', + 'GPS Tracker for GOKART', + 'Ewoud\'s Desktop Clock PCB', + 'Connor Ender 3 Bed Leveler', +] + +const BoardPage = () => { + const prefersReducedMotion = usePrefersReducedMotion() + + const router = useRouter() + const { name } = router.query + + const spotlightRef = useRef() + useEffect(() => { + const handler = event => { + spotlightRef.current.style.background = `radial-gradient( + circle at ${event.pageX}px ${event.pageY}px, + rgba(0, 0, 0, 0) 10px, + rgba(0, 0, 0, 0.8) 80px + )` + } + window.addEventListener('mousemove', handler) + return () => window.removeEventListener('mousemove', handler) + }, []) + + const [project, setProject] = useState({}) + useEffect(() => { + const fetchProject = async () => { + const readme = await fetch(`https://raw.githubusercontent.com/hackclub/OnBoard/main/projects/${name}/README.md`) + const text = await readme.text() + // parse YAML frontmatter + const lines = text.split('\n') + const frontmatter = {} + let i = 0 + for (; i < lines.length; i++) { + if (lines[i].startsWith('---')) { + break + } + } + for (i++; i < lines.length; i++) { + if (lines[i].startsWith('---')) { + break + } + const [key, value] = lines[i].split(': ') + frontmatter[key] = value + } + // check for a "thumbnail.png" file in the project directory + console.log(`https://github.com/snoglobe/OnBoard/raw/main/projects/${name}/thumbnail.png`) + const thumbnail = await fetch(`https://github.com/snoglobe/OnBoard/raw/main/projects/${name}/thumbnail.png`, {mode: 'no-cors'}) + console.log(thumbnail) + const image = /*thumbnail.ok ?*/ `https://github.com/snoglobe/OnBoard/raw/main/projects/${name}/thumbnail.png` /*: await get_fallback_image(`https://github.com/hackclub/OnBoard/raw/main/projects/${project.name}`)*/ + setProject({ + project_name: name, + maker_name: frontmatter.name, + slack_handle: frontmatter.slack_handle, + github_handle: frontmatter.github_handle, + tutorial: frontmatter.tutorial, + description: lines.slice(i + 1).join('\n'), + image: image + }) + } + fetchProject() + }, [name]) + + return ( + <> + + + +