Merge branch 'main' into dependabot/npm_and_yarn/lodash-4.17.21

2026-04-19 23:22:49 +00:00 · 2024-05-01 10:53:11 -04:00 · 2024-05-01 10:53:11 -04:00 · 50302bc945
commit 50302bc945
parent f1d2068059 42c2cedd5d
7 changed files with 260 additions and 16 deletions
--- a/components/index/cards/apocalypse.js
+++ b/components/index/cards/apocalypse.js
@ -0,0 +1,103 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+export default function Apocalypse() {
+  return (
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
+      }}
+      position={[null, 'bottom', 'bottom']}
+      image="https://cloud-1132qsbcy-hack-club-bot.vercel.app/0image__6_.png"
+    >
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            justifyContent: 'space-between'
+          }}
+        >
+          <Image
+            src="https://cloud-lvxa0tab7-hack-club-bot.vercel.app/0apotitle_cropped.png"
+            sx={{
+              width: ['200px', '250px', '300px'],
+              mt: ['-5px', '-5px', '-5px'],
+              mb: ['30px', '30px', '30px'],
+              position: 'relative',
+              zIndex: 2,
+              fontSize: ['36px', 4, 5],
+              color: 'white'
+            }}
+            alt="Apocalypse"
+          />
+
+          <Flex
+            sx={{
+              flexDirection: ['row', 'row', 'column'],
+              justifyContent: 'space-between'
+            }}
+          >
+            <Text
+              as="p"
+              variant="subheadline"
+              sx={{
+                ml: ['0px', '0px', '10px'],
+                mt: ['0px', '0px', '-10px'],
+                mb: ['0px', '0px', '20px'],
+                zIndex: 2,
+                color: 'white',
+                fontSize: ['24px !important'],
+
+                textShadow: '0 0 20px #fbbae4'
+              }}
+            >
+              Downtown Toronto
+              <br />
+              May 17–19
+            </Text>
+
+            <Buttons
+              icon="flag-fill"
+              href="https://apocalypse.hackclub.com/"
+              target="_blank"
+              rel="noopener"
+              primary="#FE5CA8"
+              id="43"
+              sx={{ color: '#fff' }}
+            >
+              Join Us
+            </Buttons>
+          </Flex>
+        </Flex>
+        <Box>
+          <Text
+            as="p"
+            variant="subtitle"
+            sx={{
+              fontSize: ['22px', '20px', '18px']
+            }}
+          >
+            It's 2034, and zombies have taken over! But tech still operates.
+            What would you do?
+          </Text>
+          <Text
+            as="p"
+            variant="subtitle"
+            sx={{
+              fontSize: ['22px', '20px', '18px']
+            }}
+          >
+            Join 150 high schoolers for 44 hours at Apocalypse! Take yourself
+            out of the real world and build wacky projects to spark a new age of
+            humanity.
+          </Text>
+        </Box>
+      </Grid>
+    </CardModel>
+  )
+}
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@ -91,10 +91,10 @@ export default function Slack({ data, slackKey, events }) {
            variant="subtitle"
            sx={{ fontSize: [1, '16px', '24px'] }}
          >
-            Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
-            make things together and in our Slack, you’ll find awesome people to
-            hangout with too. Code together, find your programming community, or
-            just hang out.
+            Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club,
+            we make remarkable things together, and in our Slack you’ll find 
+            awesome people to hang out with too. Code together, find your programming 
+            community, dream up something wild, or just #lounge.
          </Text>
          <Text as="p" variant="subtitle">
            Occasionally we invite someone we really want to speak to (like Sal
--- a/package.json
+++ b/package.json
@ -37,6 +37,7 @@
    "animated-value": "^0.2.4",
    "animejs": "^3.2.2",
    "axios": "^1.6.7",
+    "camelcase": "^8.0.0",
    "cookies-next": "^4.0.0",
    "country-list": "^2.3.0",
    "country-list-js": "^3.1.8",
@ -75,7 +76,7 @@
    "react-tooltip": "^4.5.1",
    "react-tsparticles": "^2.12.2",
    "react-type-animation": "^3.2.0",
-    "react-use-websocket": "^4.7.0",
+    "react-use-websocket": "^4.8.1",
    "react-wrap-balancer": "^1.1.0",
    "recharts": "2.12.2",
    "remark": "^15.0.1",
--- a/pages/api/bin/wokwi/new.js
+++ b/pages/api/bin/wokwi/new.js
@ -0,0 +1,104 @@
+import AirtablePlus from "airtable-plus"
+
+const createProject = async (partsList=[]) => {
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'appKjALSnOoA0EmPk',
+    tableName: 'Supported Parts'
+  })
+
+  const parts = [
+    { "type": "board-pi-pico-w", "id": "pico", "top": 0, "left": 0, "attrs": {} }
+  ]
+
+  await Promise.all(partsList.map(async (part) => {
+    const airPart = await airtable.read({
+      filterByFormula: `{Wokwi Name}= "${part}"`,
+      maxRecords: 1
+    })
+    return airPart[0].fields['Wokwi Name'].split(',').forEach((name, i) => {
+      parts.push({
+        type: name,
+        id: name + '-' + i,
+        left: i * 100, // this is roughtly the width of most parts
+      })
+    })
+  }))
+
+  const body = JSON.stringify({
+    name: "The Bin!",
+    unlisted: false,
+    files: [{
+      name: "help.md",
+      content: `# Welcome to The Bin! 🦝
+
+Now that you've thrown some parts into The Bin, it's time to turn that trash into treasure! 🗑️➡️💎
+
+Wire up your parts and write some code to make them work together.
+
+If you'd like a tutorial, check out some sample projects:
+https://jams.hackclub.com/tags/the-bin
+
+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://hackclub.com/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);
+  Serial1.println("Hello, Raspberry Pi Pico W!");
+}
+void loop() {
+  // put your main code here, to run repeatedly:
+  delay(1); // this speeds up the simulation
+}`
+    }, {
+      name: "diagram.json",
+      content: JSON.stringify({
+        "version": 1,
+        "author": "The Bin - Hack Club",
+        "editor": "wokwi",
+        "parts": parts,
+        "connections": [["pico:GP0", "$serialMonitor:RX", "", []], ["pico:GP1", "$serialMonitor:TX", "", []]], "dependencies": {}
+      }, null, 2)
+    }],
+  })
+
+  const response = await fetch('https://wokwi.com/api/projects/save', {
+    method: 'POST',
+    cors: 'no-cors',
+    headers: {
+      'Content-Type': 'application/json',
+      'Referer': 'https://wokwi.com/projects/new/pi-pico-w',
+      'User-Agent': 'Hack Club - contact max@hackclub.com for any complaints!'
+    },
+    body
+  }).catch((e) => {
+    console.log(e)
+  })
+
+  const data = await response.json()
+  const { projectId } = data
+
+  return `https://wokwi.com/projects/${projectId}`
+}
+
+export default async function handler(req, res) {
+  if (req.method === 'POST') {
+    const { parts } = req.body
+
+    const shareLink = await createProject(parts)
+    if (shareLink) {
+      res.status(200).json({ shareLink })
+    } else {
+      res.status(500).json({ error: 'Failed to create project' })
+    }
+  }
+}
--- a/pages/api/bin/wokwi/parts.js
+++ b/pages/api/bin/wokwi/parts.js
@ -0,0 +1,29 @@
+import AirtablePlus from "airtable-plus"
+import camelcase from "camelcase"
+
+const camelizeObject = (obj) => {
+  Object.keys(obj).forEach(key => {
+    obj[camelcase(key)] = obj[key]
+    if (key !== camelcase(key)) {
+      delete obj[key]
+    }
+  })
+  return obj
+}
+
+const wokwiParts = async () => {
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'appKjALSnOoA0EmPk',
+    tableName: 'Supported Parts'
+  })
+
+  const records = await airtable.read()
+  const parts = records.map(record => camelizeObject(record.fields))
+  return parts
+}
+
+export default async function handler(req, res) {
+  const data = await wokwiParts()
+  res.status(200).json(data)
+}
--- a/pages/index.js
+++ b/pages/index.js
@ -40,6 +40,7 @@ import Photo from '../components/photo'
 import Comma from '../components/comma'
 import Haxidraw from '../components/index/cards/haxidraw'
 import Onboard from '../components/index/cards/onboard'
+import Apocalypse from '../components/index/cards/apocalypse'

 /** @jsxImportSource theme-ui */

@ -203,10 +204,10 @@ 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/"
-            iconLeft="idea"
+            copy="Get free boba for making your first website! 🍵"
+            caption="Follow the tutorial to build your own space on the web."
+            href="https://workshops.hackclub.com/personal_website"
+            iconLeft="web"
          />
          <Box
            sx={{
@ -675,6 +676,7 @@ function Page({
              </Text>
            </Box>
            <Pizza />
+	    <Apocalypse />
            <Slack slackKey={slackKey} data={slackData} events={events} />
          </Box>
        </Box>
--- a/yarn.lock
+++ b/yarn.lock
@ -3216,15 +3216,20 @@ camelcase@^5.3.1:
  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

+camelcase@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-8.0.0.tgz#c0d36d418753fb6ad9c5e0437579745c1c14a534"
+  integrity sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==
+
 camelize@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==

 caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228, caniuse-lite@^1.0.30001282, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001541:
-  version "1.0.30001603"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz"
-  integrity sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==
+  version "1.0.30001614"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz"
+  integrity sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==

 caseless@~0.12.0:
  version "0.12.0"
@ -7502,10 +7507,10 @@ react-type-animation@^3.2.0:
  resolved "https://registry.yarnpkg.com/react-type-animation/-/react-type-animation-3.2.0.tgz#6863d5d60e3beb237f2bd690cceb585402c47e6a"
  integrity sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==

-react-use-websocket@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-4.7.0.tgz#e45545ed48eb60171bf6401d1884cc80c700a0ea"
-  integrity sha512-YjR62jB7vB94IZy5UPBGZSR3c0hxu796q9IuJ0vbNg7InJ7Z84NHOd/LHzVI5nAKtaGy1oqvf8EmjKxX+cNz4A==
+react-use-websocket@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-4.8.1.tgz#be06a0bc956c6d56391a29cbe2caa6ae8edb5615"
+  integrity sha512-FTXuG5O+LFozmu1BRfrzl7UIQngECvGJmL7BHsK4TYXuVt+mCizVA8lT0hGSIF0Z0TedF7bOo1nRzOUdginhDw==

 react-wrap-balancer@^1.1.0:
  version "1.1.0"