Merge pull request #1201 from aaronw-dev/main

responsive teehee

lib/carousel.json

@@ -17,6 +17,15 @@
     "img": "https://cloud-eg2ex8nol-hack-club-bot.vercel.app/0favicon-on-light-removebg-preview.png",
     "link": "https://cpu.land"
   },
+  {
+    "background": "#e5e6da",
+    "titleColor": "black",
+    "descriptionColor": "black",
+    "title": "The Bin",
+    "description": "A free electronics starter kit for high schoolers, shipped to your door.",
+    "img": "https://cloud-e3pxf7bt9-hack-club-bot.vercel.app/0ezgif.com-resize.gif",
+    "link": "https://hackclub.com/bin"
+  },
   {
     "background": "#000",
     "titleColor": "green",

next.config.mjs

@@ -274,6 +274,18 @@ const nextConfig = {
       {
         source: '/how-to-organize-a-hackathon/style.css',
         destination: 'https://expandables.hackclub.dev/style.css'
+      },
+      {
+        source: '/bin/',
+        destination: '/bin/index.html'
+      },
+      {
+        source: '/bin/:path*',
+        destination: '/bin/:path*'
+      },
+      {
+        source: '/bin/selector/',
+        destination: '/bin/selector/index.html'
       }
     ]
   },

pages/api/bin/openai.js

@@ -1,4 +1,18 @@
 import OpenAI from 'openai';
+import AirtablePlus from "airtable-plus"
+
+const saveProject = async (parts = [], idea) => {
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'appKjALSnOoA0EmPk',
+    tableName: 'Cached Ideas'
+  })
+  const cacheName = parts.sort().join(',')
+  airtable.create({
+    "Name": cacheName,
+    "Recommendation": idea
+  })
+}
 
 const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
 
@@ -47,6 +61,7 @@ export default async function handler(req, res) {
   })
 
   const recommendation = await generateProjectIdea(parts)
+  await saveProject(parts, recommendation)
 
   res.send({ recommendation, parts })
 }

pages/api/bin/wokwi/new.js

@@ -1,6 +1,36 @@
 import AirtablePlus from "airtable-plus"
 
-const createProject = async (partsList=[]) => {
+const findOrCreateProject = async (partsList = []) => {
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'appKjALSnOoA0EmPk',
+    tableName: 'Cached Projects'
+  })
+
+  const cacheName = partsList.sort().join(',')
+
+  const existingProject = await airtable.read({
+    filterByFormula: `{Name}="${cacheName}"`,
+    maxRecords: 1
+  })
+
+  if (existingProject.length > 0) {
+    return existingProject[0].fields['Share Link']
+  } else {
+    const shareLink = await createProject(partsList)
+    if (shareLink) {
+      await airtable.create({
+        "Name": cacheName,
+        "Share Link": shareLink
+      })
+      return shareLink
+    } else {
+      return null
+    }
+  }
+}
+
+const createProject = async (partsList = []) => {
   const airtable = new AirtablePlus({
     apiKey: process.env.AIRTABLE_API_KEY,
     baseID: 'appKjALSnOoA0EmPk',
@@ -11,7 +41,7 @@ const createProject = async (partsList=[]) => {
   const PADDING = 30;
   const MAX_WIDTH = 320; // big question mark on this one
   const ROW_HEIGHT = 215; // close enough for jazz, keypad is too big for this but ¯\_(ツ)_/¯
-  
+
   const parts = [
     { "type": "board-pi-pico-w", "id": "pico", "top": 0, "left": 0, "attrs": {} }
   ]
@@ -24,7 +54,7 @@ const createProject = async (partsList=[]) => {
     })
     return airPart[0].fields['Wokwi Name'].split(',').forEach((name, i) => {
       const width = airPart[0].fields['Wokwi X-Offset'];
-      if((x + width + PADDING) > MAX_WIDTH) {
+      if ((x + width + PADDING) > MAX_WIDTH) {
         x = 0;
         y += ROW_HEIGHT;
       }
@@ -49,20 +79,23 @@ Now that you've thrown some parts into The Bin, it's time to turn that trash int
 
 Wire up your parts and write some code to make them work together.
 
-If you'd like a tutorial, check out this short explainer on making a blinking LED:
+If you'd like a tutorial, check out this short explainer on making a blinking
+LED:
 https://github.com/hackclub/hackclub/pull/1860/files?short_path=0494126
 
-You can get help by chatting with other high schoolers on the Hack Club Slack in the #electronics channel:
+You can get help by chatting with other high schoolers on the Hack Club Slack in
+the #electronics channel:
 👉 https://hackclub.com/slack 👈
 
-Once you're ready build your design IRL, click the "Share" button and submit your design:
-https://forms.hackclub.com/t/adnj7zfgTyus
+Once you're ready build your design IRL, click the "Share" button and submit
+your design:
+https://hack.club/bin-submit
     `
     },
     {
       name: "sketch.ino",
       content: `// Now turn this trash into treasure!
-// Want some help? You can chat with us on the Hack Club Slack in the #electronics channel
+
 void setup() {
   // put your setup code here, to run once:
   Serial1.begin(115200);
@@ -107,7 +140,7 @@ export default async function handler(req, res) {
   if (req.method === 'POST') {
     const { parts } = req.body
 
-    const shareLink = await createProject(parts)
+    const shareLink = await findOrCreateProject(parts)
     if (shareLink) {
       res.status(200).json({ shareLink })
     } else {

pages/bin.js → pages/bin/prelaunch.js

@@ -12,17 +12,17 @@ import {
 } from 'theme-ui'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Nav from '../../components/nav'
 import { useEffect, useState, useRef } from 'react'
-import Footer from '../components/footer'
+import Footer from '../../components/footer'
 import { keyframes } from '@emotion/react'
-import RsvpForm from '../components/bin/rsvp-form'
+import RsvpForm from '../../components/bin/rsvp-form'
 import { Fade } from 'react-reveal'
-import ForceTheme from '../components/force-theme'
+import ForceTheme from '../../components/force-theme'
 import JSConfetti from 'js-confetti'
-import Sparkles from '../components/sparkles'
+import Sparkles from '../../components/sparkles'
 import Icon from "@hackclub/icons"
-import Announcement from '../components/announcement'
+import Announcement from '../../components/announcement'
 import { TypeAnimation } from 'react-type-animation'
 
 const RsvpCount = () => {

pages/index.js

@@ -204,9 +204,9 @@ function Page({
             gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
           />
 	  <Announcement
-            copy="Hop OnBoard and create your first PCB"
-            caption="Join 1,000 others to create your first circuit board."
-            href="https://hackclub.com/onboard/"
+            copy="Get a free hardware starter kit!"
+            caption="Join 100s of other high schoolers to create your first electronics project."
+            href="/bin/"
             iconLeft="idea"
           />
           <Box