This commit is contained in:
Toby Brown 2023-12-31 22:18:29 +00:00
parent 35c8ea37a5
commit b3f22ef417
5 changed files with 237 additions and 102 deletions

View file

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import styled from '@emotion/styled'
import { css, keyframes } from '@emotion/react'
import { Box, Container, Flex, Link, Text } from 'theme-ui'
import { Box, Flex, Link } from 'theme-ui'
import theme from '../lib/theme'
import Icon from './icon'
import Flag from './flag'
@ -42,7 +42,7 @@ const fixed = props =>
`
const Root = styled(Box)`
position: fixed;
position: ${props => (props.slack ? 'absolute' : 'fixed')};
top: 0;
width: 100vw;
z-index: 1000;

View file

@ -1,8 +1,8 @@
import { sample, take } from 'lodash'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import useWebSocket from 'react-use-websocket'
import { Box, Flex, Text } from 'theme-ui'
import { sql } from '@vercel/postgres'
import { Box, Grid, Text } from 'theme-ui'
import { kv } from '@vercel/kv'
const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
@ -61,11 +61,8 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
...prev
])
await sql`
INSERT INTO channels (name)
VALUES (${name})
ON CONFLICT (name) DO NOTHING;
`;
await kv.set("channels", "#name");
console.log("Added channel" + name + "to KV!")
}
}
@ -118,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
})
return (
<Flex
<Grid
sx={{
minHeight: '4em',
maxHeight: [128, 256],
@ -160,7 +157,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
</>
))}
<Channel channel="#lounge" color="red"/>
</Flex>
</Grid>
)
}

View file

@ -25,6 +25,7 @@
"@octokit/auth-app": "^6.0.1",
"@octokit/core": "^5.0.1",
"@octokit/rest": "^20.0.2",
"@vercel/kv": "^1.0.1",
"@vercel/postgres": "^0.5.1",
"add": "^2.0.6",
"airtable-plus": "^1.0.4",

View file

@ -71,9 +71,9 @@ const SlackPage = () => {
} else if (progress < 4/6) {
setColors(['green', '#51F5C5']);
} else if (progress < 5/6) {
setColors(['blue', 'cyan']);
setColors(['cyan', '#88e5f8']);
} else {
setColors(['purple', '#b46ed5']);
setColors(['purple', '#d786ff']);
}
}
}
@ -92,7 +92,7 @@ const SlackPage = () => {
image="https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/02020-07-25_d2dd4egb1th5k71w4uj0abbfkvvtnc01.jpeg"
/>
<ForceTheme theme="light" />
<Nav />
<Nav slack={true} />
<Header nameInputRef={nameInputRef} />
<Container sx={{ py: [4, 5] }}>
<Heading
@ -112,60 +112,61 @@ const SlackPage = () => {
worlds that suit you.
</Text>
<Grid
columns={[2, 9, 12]}
gap={4}
sx={{
py: [3, 4],
maxHeight: '100%',
'> div': {
px: [2, 3],
py: 4,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gridColumn: ['span 2', 'span 3']
},
a: {
position: 'relative',
':hover,:focus': {
svg: {
transform: 'translateX(28px) translateY(-28px)',
opacity: 0
columns={[2, 9, 13]}
gap={3}
sx={{
py: [3, 4],
h3: { my: 0 },
'> div': {
px: [2, 3],
py: 4,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gridColumn: ['span 1', 'span 3']
},
a: {
position: 'relative',
':hover,:focus': {
svg: {
transform: 'translateX(28px) translateY(-28px)',
opacity: 0
}
}
},
svg: {
position: 'absolute',
top: 2,
right: 2,
fill: 'white',
transition:
'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
},
h3: {
variant: 'text.headline',
color: 'white',
lineHeight: 'title',
m: 0,
'+ p': {
mt: 2,
color: 'white',
opacity: 0.75,
fontSize: 2,
lineHeight: 'caption'
}
}
},
svg: {
position: 'absolute',
top: 2,
right: 2,
fill: 'white',
transition:
'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
},
h3: {
variant: 'text.headline',
color: 'white',
lineHeight: 'title',
m: 0,
'+ p': {
mt: 2,
color: 'white',
opacity: 0.75,
fontSize: 2,
lineHeight: 'caption'
}
}
}}
}}
>
<NextLink href="/ship" passHref>
<Card
as="a"
variant="interactive"
sx={{
gridColumn: ['span 2', 'span 5'],
bg: 'blue',
backgroundImage: t => t.util.gx('cyan', 'blue')
}}
as="a"
variant="interactive"
sx={{
gridColumn: ['span 2', 'span 5'],
bg: 'blue',
backgroundImage: t => t.util.gx('cyan', 'blue')
}}
>
<Icon glyph="external" size={24} />
<Heading as="h3" variant="headline">
@ -175,14 +176,14 @@ const SlackPage = () => {
</Card>
</NextLink>
<Card
as="a"
href="https://scrapbook.hackclub.com/"
variant="interactive"
sx={{
gridColumn: ['span 2', 'span 5'],
bg: 'dark',
backgroundImage: t => t.util.gx('yellow', 'orange')
}}
as="a"
href="https://scrapbook.hackclub.com/"
variant="interactive"
sx={{
gridColumn: ['span 2', 'span 5'],
bg: 'dark',
backgroundImage: t => t.util.gx('yellow', 'orange')
}}
>
<Icon glyph="external" size={24} />
<Heading as="h3" variant="headline">
@ -191,58 +192,82 @@ const SlackPage = () => {
<Text as="p">A daily diary of project updates</Text>
</Card>
<Card
bg="red"
sx={{
gridColumn: ['span 2 !important', 'span 2 !important'],
gridRow: ['span 1 !important', 'span 3 !important'],
writingMode: ['lr-tb', 'tb-rl']
}}
bg="red"
sx={{
gridColumn: ['span 2 !important', 'span 2 !important'],
gridRow: ['span 1 !important', 'span 3 !important'],
writingMode: ['lr-tb', 'tb-rl']
}}
>
<Heading as="h3">#counttoamillion</Heading>
<Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
Were at{' '}
<Badge
variant="outline"
as="span"
sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
variant="outline"
as="span"
sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
>
{millionCount ? withCommas(millionCount.number) : '???'}
</Badge>
!
</Text>
</Card>
<Card backgroundColor="orange">
<h3 sx={{ color: 'black' }}>#gamedev</h3>
</Card>
<Card
sx={{
backgroundImage:
'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
backgroundColor: 'yellow',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% auto',
gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
h3: { opacity: 0 }
}}
sx={{
backgroundImage:
'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
backgroundColor: '#FEC62E',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% auto',
gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
h3: { opacity: 0 }
}}
>
<h3>#design</h3>
</Card>
<Card
bg="dark"
sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
bg="dark"
sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
>
<h3>#code</h3>
</Card>
<Card
bg="purple"
sx={{
backgroundSize: '100%',
backgroundPosition: 'center',
textShadow: 'text',
gridColumn: ['span 2', 'span 3 !important'],
backgroundImage: t => t.util.gx('purple', '#C153EE')
}}
sx={{
bg: 'dark',
backgroundImage:
'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
textShadow: 'text',
gridColumn: ['span 2 !important', 'span 4 !important']
}}
>
<h3>#music</h3>
<h3>#photography</h3>
</Card>
<Card bg="purple">
<Flex>
<h3>#music</h3>
<Image
src="https://cloud-jd45ga0mv-hack-club-bot.vercel.app/0music.svg"
alt="Music notes"
sx={{ height: '50px', width: '50px' }}
/>
</Flex>
</Card>
<Card
bg="red"
sx={{
backgroundImage: ({ colors }) =>
`linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
}}
>
<h3>#lgbtq</h3>
</Card>
</Grid>
<Flex
sx={{
@ -338,7 +363,7 @@ const SlackPage = () => {
<Project>
<Box>
<Text as="h1" variant="title" sx={{ width: 'copyUltra' }}>
BCI
a brainwave reading device to interact with computers using thoughts.
</Text>
<Text as="p" variant="subtitle" sx={{ width: 'copyPlus' }}>
Nest&apos;s team organizes in #nest Velit voluptate deserunt consequat. Velit

112
yarn.lock
View file

@ -1635,6 +1635,13 @@
resolved "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz"
integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
"@neondatabase/serverless@0.6.0":
version "0.6.0"
resolved "https://registry.yarnpkg.com/@neondatabase/serverless/-/serverless-0.6.0.tgz#efe001f571e85af79c8042601ec694f96ca8fb17"
integrity sha512-qXxBRYN0m2v8kVQBfMxbzNGn2xFAhTXFibzQlE++NfJ56Shz3m7+MyBBtXDlEH+3Wfa6lToDXf1MElocY4sJ3w==
dependencies:
"@types/pg" "8.6.6"
"@next/env@10.2.3":
version "10.2.3"
resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.3.tgz#ede3bbe68cec9939c37168ea2077f9adbc68334e"
@ -2214,6 +2221,15 @@
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
"@types/pg@8.6.6":
version "8.6.6"
resolved "https://registry.yarnpkg.com/@types/pg/-/pg-8.6.6.tgz#21cdf873a3e345a6e78f394677e3b3b1b543cb80"
integrity sha512-O2xNmXebtwVekJDD+02udOncjVcMZQuTEQEMpKJ0ZRf5E7/9JJX3izhKUcUifBkyKpljyUM6BTgy2trmviKlpw==
dependencies:
"@types/node" "*"
pg-protocol "*"
pg-types "^2.2.0"
"@types/styled-system@^5.1.13":
version "5.1.13"
resolved "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.13.tgz"
@ -2281,6 +2297,30 @@
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
"@upstash/redis@1.25.1":
version "1.25.1"
resolved "https://registry.yarnpkg.com/@upstash/redis/-/redis-1.25.1.tgz#361656a326b40d5816640ae4335a8b1bbbb0d238"
integrity sha512-ACj0GhJ4qrQyBshwFgPod6XufVEfKX2wcaihsEvSdLYnY+m+pa13kGt1RXm/yTHKf4TQi/Dy2A8z/y6WUEOmlg==
dependencies:
crypto-js "^4.2.0"
"@vercel/kv@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@vercel/kv/-/kv-1.0.1.tgz#2311e9d62eaed360eba99603c20eeb77a10a0749"
integrity sha512-uTKddsqVYS2GRAM/QMNNXCTuw9N742mLoGRXoNDcyECaxEXvIHG0dEY+ZnYISV4Vz534VwJO+64fd9XeSggSKw==
dependencies:
"@upstash/redis" "1.25.1"
"@vercel/postgres@^0.5.1":
version "0.5.1"
resolved "https://registry.yarnpkg.com/@vercel/postgres/-/postgres-0.5.1.tgz#af986133f5ec53b4839561fc3cc2a5fb1867868d"
integrity sha512-JKl8QOBIDnifhkxAhIKtY0A5Tb8oWBf2nzZhm0OH7Ffjsl0hGVnDL2w1/FCfpX8xna3JAWM034NGuhZfTFdmiw==
dependencies:
"@neondatabase/serverless" "0.6.0"
bufferutil "4.0.8"
utf-8-validate "6.0.3"
ws "8.14.2"
"@wry/caches@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
@ -2862,6 +2902,13 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"
bufferutil@4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.8.tgz#1de6a71092d65d7766c4d8a522b261a6e787e8ea"
integrity sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==
dependencies:
node-gyp-build "^4.3.0"
builtin-status-codes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@ -3269,6 +3316,11 @@ crypto-browserify@3.12.0, crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"
crypto-js@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
@ -5842,6 +5894,11 @@ node-fetch@2.6.1:
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
node-gyp-build@^4.3.0:
version "4.7.1"
resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.7.1.tgz#cd7d2eb48e594874053150a9418ac85af83ca8f7"
integrity sha512-wTSrZ+8lsRRa3I3H8Xr65dLWSgCvY2l4AOnaeKdPA9TB/WYMPaTcrzf3rXvFoVvjKNVnu0CcWSx54qq9GKRUYg==
node-html-parser@1.4.9:
version "1.4.9"
resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.4.9.tgz#3c8f6cac46479fae5800725edb532e9ae8fd816c"
@ -6183,6 +6240,27 @@ performance-now@^2.1.0:
resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
pg-int8@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/pg-int8/-/pg-int8-1.0.1.tgz#943bd463bf5b71b4170115f80f8efc9a0c0eb78c"
integrity sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==
pg-protocol@*:
version "1.6.0"
resolved "https://registry.yarnpkg.com/pg-protocol/-/pg-protocol-1.6.0.tgz#4c91613c0315349363af2084608db843502f8833"
integrity sha512-M+PDm637OY5WM307051+bsDia5Xej6d9IR4GwJse1qA1DIhiKlksvrneZOYQq42OM+spubpcNYEo2FcKQrDk+Q==
pg-types@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/pg-types/-/pg-types-2.2.0.tgz#2d0250d636454f7cfa3b6ae0382fdfa8063254a3"
integrity sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==
dependencies:
pg-int8 "1.0.1"
postgres-array "~2.0.0"
postgres-bytea "~1.0.0"
postgres-date "~1.0.4"
postgres-interval "^1.1.0"
picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@ -6249,6 +6327,28 @@ postcss@^8.4.31:
picocolors "^1.0.0"
source-map-js "^1.0.2"
postgres-array@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
integrity sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==
postgres-bytea@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/postgres-bytea/-/postgres-bytea-1.0.0.tgz#027b533c0aa890e26d172d47cf9ccecc521acd35"
integrity sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==
postgres-date@~1.0.4:
version "1.0.7"
resolved "https://registry.yarnpkg.com/postgres-date/-/postgres-date-1.0.7.tgz#51bc086006005e5061c591cee727f2531bf641a8"
integrity sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==
postgres-interval@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/postgres-interval/-/postgres-interval-1.2.0.tgz#b460c82cb1587507788819a06aa0fffdb3544695"
integrity sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==
dependencies:
xtend "^4.0.0"
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@ -7950,6 +8050,13 @@ use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
utf-8-validate@6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-6.0.3.tgz#7d8c936d854e86b24d1d655f138ee27d2636d777"
integrity sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==
dependencies:
node-gyp-build "^4.3.0"
util-deprecate@^1.0.1, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@ -8192,6 +8299,11 @@ wrappy@1:
resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
ws@8.14.2:
version "8.14.2"
resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==
xhr@2.3.3:
version "2.3.3"
resolved "https://registry.npmjs.org/xhr/-/xhr-2.3.3.tgz"