Merge branch 'main' into dependabot/npm_and_yarn/turndown-7.1.3

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>
+  )
+}

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 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 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

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",

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' })
+    }
+  }
+}

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)
+}

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 */
 
@@ -675,6 +676,7 @@ function Page({
               </Text>
             </Box>
             <Pizza />
+	    <Apocalypse />
             <Slack slackKey={slackKey} data={slackData} events={events} />
           </Box>
         </Box>

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.30001610"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz"
+  integrity sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==
 
 caseless@~0.12.0:
   version "0.12.0"