Merge pull request #1108 from hackclub/onboard_gallery

OnBoard gallery

Author: maxwofford

components/onboard/item.js

@@ -0,0 +1,76 @@
+import {Box, Divider, Flex, Heading, Image, Paragraph} from "theme-ui";
+import {Link} from "theme-ui";
+import React, {useContext} from "react";
+import {OBJECT} from "swr/_internal";
+
+function trim(str) {
+    return str.substring(1, str.length - 1)
+}
+
+const onboardContext = React.createContext({})
+
+const Item = ({ title, author_name, author_slack, image, project }) => {
+    //const { projectCtx, setProjectCtx } = React.useContext(onboardContext)
+    return (
+        <Box
+            sx={{
+                bg: '#ffffff',
+                color: 'black',
+                borderRadius: 8,
+                boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                p: 4,
+                mt: 4,
+                position: 'relative'
+            }}
+        >
+            <Flex
+                sx={{
+                    flexDirection: 'column',
+                    alignItems: 'center'
+                }}
+            >
+                <object
+                    data={image}
+                    type={'image/svg+xml'}
+                    style={{
+                        width: '100%',
+                        borderRadius: '8px'
+                    }}
+                ></object>
+                <Link
+                    href={`/onboard/board/${project.project_name}`}
+                    sx={{
+                        textDecoration: 'none',
+                        color: 'black',
+                        ':hover': {
+                            color: 'primary'
+                        }
+                    }}
+                >
+                    <Heading
+                        as="h2"
+                        //variant="title"
+                        sx={{
+                            textAlign: 'center',
+                            mt: 3
+                        }}
+                    >
+                        {title}
+                    </Heading>
+                </Link>
+                <Paragraph
+                    sx={{
+                        textAlign: 'center',
+                        mt: 2,
+                        wordBreak: 'break-word'
+                    }}
+                >
+                    {`${author_name ? `by ${trim(author_name)}` : ""} ${author_slack ? `(${trim(author_slack)})` : ""}`}
+                </Paragraph>
+            </Flex>
+        </Box>
+    )
+}
+
+export default Item;
+export { onboardContext };

next.config.mjs

@@ -288,6 +288,15 @@ const nextConfig = {
           },
           { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
         ]
+      },
+      {
+        source: '/api/board/svg/(.+)',
+        headers: [
+          {
+            key: 'content-type',
+            value: 'image/svg+xml'
+          }
+        ]
       }
     ]
   }

package.json

@@ -25,6 +25,12 @@
     "@octokit/auth-app": "^6.0.1",
     "@octokit/core": "^5.1.0",
     "@octokit/rest": "^20.0.2",
+    "@tracespace/core": "^5.0.0-alpha.0",
+    "@tracespace/identify-layers": "^5.0.0-alpha.0",
+    "@tracespace/parser": "^5.0.0-next.0",
+    "@tracespace/plotter": "^5.0.0-alpha.0",
+    "@tracespace/renderer": "^5.0.0-alpha.0",
+    "@tracespace/xml-id": "^4.2.7",
     "@sendgrid/mail": "^8.1.1",
     "add": "^2.0.6",
     "airtable-plus": "^1.0.4",
@@ -43,10 +49,14 @@
     "globby": "^11.0.4",
     "graphql": "^16.8.1",
     "js-confetti": "^0.12.0",
+    "jszip": "^3.10.1",
+    "jszip-utils": "^0.1.0",
     "lodash": "^4.17.21",
     "million": "^2.6.4",
     "next": "^12.3.1",
     "next-transpile-modules": "^10.0.1",
+    "nextjs-current-url": "^1.0.3",
+    "pcb-stackup": "^4.2.8",
     "react": "^17.0.2",
     "react-before-after-slider-component": "^1.1.8",
     "react-datepicker": "^4.24.0",
@@ -58,6 +68,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",
@@ -66,6 +77,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",

pages/api/board/[name].js

@@ -0,0 +1,51 @@
+import {gerberToSvg} from "./svg/[board_url]";
+
+export const FetchProject = async (name) => {
+    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`
+        :*/ /*`data:image/svg+xml;base64,${btoa((await gerberToSvg(`https://github.com/snoglobe/OnBoard/raw/main/projects/${name}/gerber.zip`)).top)}`*/
+        `/api/board/svg/${encodeURIComponent(`https://github.com/snoglobe/OnBoard/raw/main/projects/${name}/gerber.zip`)}/top`
+    console.log("done")
+    return({
+        project_name: name ?? null,
+        maker_name: frontmatter.name ?? null,
+        slack_handle: frontmatter.slack_handle ?? null,
+        github_handle: frontmatter.github_handle ?? null,
+        tutorial: frontmatter.tutorial ?? null,
+        description: lines.slice(i + 1).join('\n') ?? null,
+        image: image ?? null
+    })
+}
+
+export default async function handler(req, res) {
+    const { name } = req.query
+    if (!name) {
+        return res.status(400).json({ status: 400, error: 'Must provide name' })
+    }
+    const project = await FetchProject(name)
+    if (!project) {
+        return res.status(404).json({ status: 404, error: 'Project not found' })
+    }
+    return res.status(200).json(project)
+}

pages/api/board/svg/[board_url]/bottom.js

@@ -0,0 +1,17 @@
+// test me with: curl http://localhost:3000/api/board/svg/https%3A%2F%2Fgithub.com%2Fhackclub%2FOnBoard%2Fraw%2Fmain%2Fprojects%2F2_Switch_Keyboard%2Fgerber.zip/bottom
+
+import { gerberToSvg } from '.'
+
+export default async function handler(req, res) {
+  const { board_url } = req.query
+  if (!board_url) {
+    return res.status(404).json({ status: 404, error: 'Must provide file' })
+  }
+  // ensure valid file url is included
+  const parsed_url = new URL(decodeURI(board_url))
+  if (!parsed_url) {
+    return res.status(404).json({ status: 404, error: 'Invalid file' })
+  }
+  const svg = await gerberToSvg(parsed_url)
+  return res.status(200).send(svg.bottom)
+}

pages/api/board/svg/[board_url]/index.js

@@ -0,0 +1,93 @@
+import JSZip from 'jszip'
+import {
+  read,
+  plot,
+  renderLayers,
+  renderBoard,
+  stringifySvg
+} from '@tracespace/core'
+import fs from 'fs'
+
+export const gerberToSvg = async gerberURL => {
+  const data = await fetch(gerberURL).then(res => res.arrayBuffer())
+  const files = []
+  const zip = new JSZip()
+
+  const zippedData = await new Promise((resolve, _reject) => {
+    zip.loadAsync(data).then(resolve, e => {
+      console.error(e)
+      resolve({
+        files: {} // TODO: actually handle this error (bad or nonexistent gerber.zip)
+      })
+    })
+  })
+
+  const allowedExtensions = [
+    'gbr', // gerber
+    'drl', // drillfile
+    'gko', // gerber board outline
+    'gbl', // gerber bottom layer
+    'gbp', // gerber bottom paste
+    'gbs', // gerber bottom solder mask
+    'gbo', // gerber bottom silk
+    'gtl', // gerber top layer
+    'gto', // gerber top silk
+    'gts' // gerber top soldermask
+  ]
+  const unzipJobs = Object.entries(zippedData.files).map(
+    async ([filename, file]) => {
+      const extension = filename.split('.').pop().toLowerCase()
+      if (allowedExtensions.includes(extension)) {
+        const filePath = `/tmp/${filename}`
+        await new Promise((resolve, _reject) => {
+          file.async('uint8array').then(function (fileData) {
+            fs.writeFileSync(filePath, fileData)
+            files.push(filePath)
+            resolve()
+          })
+        })
+      }
+    }
+  )
+
+  await Promise.all(unzipJobs)
+
+  let readResult
+  try {
+    readResult = await read(files)
+  } catch (e) {
+    console.error(e)
+    return {}
+  }
+  const plotResult = plot(readResult)
+  const renderLayersResult = renderLayers(plotResult)
+  const renderBoardResult = renderBoard(renderLayersResult)
+  for (const file of files) {
+    if (fs.existsSync(file)) {
+      fs.unlinkSync(file)
+    }
+  }
+  return {
+    top: stringifySvg(renderBoardResult.top),
+    bottom: stringifySvg(renderBoardResult.bottom)
+    // all: stringifySvg(renderLayersResult)
+  }
+}
+
+export default async function handler(req, res) {
+  const { file, format } = req.query
+  if (!file) {
+    return res.status(400).json({ status: 400, error: 'Must provide file' })
+  }
+  // ensure valid file url is included
+  const url = new URL(decodeURI(file))
+  const svg = await gerberToSvg(url)
+  if (format === 'top') {
+    res.contentType('image/svg')
+    return res.status(200).send(svg.top)
+  }
+  if (format === 'json') return res.status(200).json(svg)
+
+  return res.status(200).json(svg)
+}
+// test me with: curl http://localhost:3000/api/board/svg/https%3A%2F%2Fgithub.com%2Fhackclub%2FOnBoard%2Fraw%2Fmain%2Fprojects%2F2_Switch_Keyboard%2Fgerber.zip

pages/api/board/svg/[board_url]/top.js

@@ -0,0 +1,17 @@
+// test me with: curl http://localhost:3000/api/board/svg/https%3A%2F%2Fgithub.com%2Fhackclub%2FOnBoard%2Fraw%2Fmain%2Fprojects%2F2_Switch_Keyboard%2Fgerber.zip/top
+
+import { gerberToSvg } from '.'
+
+export default async function handler(req, res) {
+  const { board_url } = req.query
+  if (!board_url) {
+    return res.status(404).json({ status: 404, error: 'Must provide file' })
+  }
+  // ensure valid file url is included
+  const parsed_url = new URL(decodeURI(board_url))
+  if (!parsed_url) {
+    return res.status(404).json({ status: 404, error: 'Invalid file' })
+  }
+  const svg = await gerberToSvg(parsed_url)
+  return res.status(200).send(svg.top)
+}