mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
Use Jia API for counttoamillion thing (#435)
* Use Jia API for counttoamillion thing * COMMAS
This commit is contained in:
Caleb Denio
GitHub
parent
a99674d139
commit
979e9a2fa9
3 changed files with 342 additions and 351 deletions
|
|
@ -5,5 +5,5 @@
|
||||||
|
|
||||||
export default async function fetcher(...args) {
|
export default async function fetcher(...args) {
|
||||||
const res = await fetch(...args)
|
const res = await fetch(...args)
|
||||||
return res.json()
|
return await res.json()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
|
||||||
|
|
||||||
// fetches the latest message in #counttoamillion and returns the current count
|
|
||||||
export const getCount = async (req, res) => {
|
|
||||||
const history = await fetch(
|
|
||||||
`https://slack.com/api/conversations.history?token=${process.env.SLACK_LEGACY_TOKEN}&channel=CDJMS683D&limit=1&inclusive=true`
|
|
||||||
)
|
|
||||||
.then(r => r.json())
|
|
||||||
.catch(err => console.err(`Error: ${err}`))
|
|
||||||
const str = history.messages?.[0].text.split(' ')?.[0].replace(/[^0-9]/g, '')
|
|
||||||
if (!str) return 'error'
|
|
||||||
return withCommas(Number(str))
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCountEndpoint = (req, res) => getCount().then(v => res.send(v))
|
|
||||||
|
|
||||||
export default getCountEndpoint
|
|
||||||
|
|
@ -10,380 +10,388 @@ import Stat from '../../components/stat'
|
||||||
import Footer from '../../components/footer'
|
import Footer from '../../components/footer'
|
||||||
import Header from '../../components/slack/header'
|
import Header from '../../components/slack/header'
|
||||||
import SlackEvents from '../../components/slack/slack-events'
|
import SlackEvents from '../../components/slack/slack-events'
|
||||||
import { getCount } from '../../pages/api/channels/count-to-a-million'
|
|
||||||
import { formatted, thousands } from '../../lib/members'
|
import { formatted, thousands } from '../../lib/members'
|
||||||
|
import useSWR from 'swr'
|
||||||
|
import fetcher from '../../lib/fetcher'
|
||||||
|
|
||||||
const zoomSlide = keyframes({
|
const zoomSlide = keyframes({
|
||||||
from: { backgroundPosition: '-32px bottom' },
|
from: { backgroundPosition: '-32px bottom' },
|
||||||
to: { backgroundPosition: '32px bottom' }
|
to: { backgroundPosition: '32px bottom' }
|
||||||
})
|
})
|
||||||
|
|
||||||
export async function getStaticProps() {
|
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
const millionCount = (await getCount()) || null
|
|
||||||
return { props: { millionCount }, revalidate: 1 }
|
|
||||||
}
|
|
||||||
|
|
||||||
const SlackPage = ({ millionCount }) => (
|
const SlackPage = () => {
|
||||||
<>
|
const { data: millionCount } = useSWR(
|
||||||
<Meta
|
'https://jia.haas.hackclub.com/api/currentNumber',
|
||||||
as={Head}
|
fetcher,
|
||||||
name="Join our Slack"
|
{ refreshInterval: 1000 }
|
||||||
description={`The Hack Club Slack is a community of ${thousands}k+ high school hackers around the world. Chat, meet new friends, code together, share your work.`}
|
)
|
||||||
image="https://cloud-ls9rh3hok.vercel.app/2020-07-25_d2dd4egb1th5k71w4uj0abbfkvvtnc01.jpeg"
|
|
||||||
/>
|
return (
|
||||||
<ForceTheme theme="light" />
|
<>
|
||||||
<Nav />
|
<Meta
|
||||||
<Header />
|
as={Head}
|
||||||
<Container sx={{ py: [4, 5] }}>
|
name="Join our Slack"
|
||||||
<Grid
|
description={`The Hack Club Slack is a community of ${thousands}k+ high school hackers around the world. Chat, meet new friends, code together, share your work.`}
|
||||||
columns={[2, 5]}
|
image="https://cloud-ls9rh3hok.vercel.app/2020-07-25_d2dd4egb1th5k71w4uj0abbfkvvtnc01.jpeg"
|
||||||
gap={2}
|
/>
|
||||||
sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
|
<ForceTheme theme="light" />
|
||||||
>
|
<Nav />
|
||||||
<Stat
|
<Header />
|
||||||
value={`${thousands}k+`}
|
<Container sx={{ py: [4, 5] }}>
|
||||||
label="total members"
|
<Grid
|
||||||
color="red"
|
columns={[2, 5]}
|
||||||
lg
|
gap={2}
|
||||||
sx={{ gridColumn: 'span 2' }}
|
sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
|
||||||
/>
|
>
|
||||||
<Stat value={6} label="continents" />
|
<Stat
|
||||||
<Stat value="1M+" label="messages/yr" />
|
value={`${thousands}k+`}
|
||||||
</Grid>
|
label="total members"
|
||||||
<Text
|
color="red"
|
||||||
variant="subtitle"
|
lg
|
||||||
as="p"
|
sx={{ gridColumn: 'span 2' }}
|
||||||
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
|
/>
|
||||||
>
|
<Stat value={6} label="continents" />
|
||||||
Have a coding question? Looking for project feedback? You’ll find some
|
<Stat value="1M+" label="messages/yr" />
|
||||||
fabulous people to talk to in our global Slack (Discord-style online
|
</Grid>
|
||||||
groupchat) with {formatted}+ members, active at all hours.
|
<Text
|
||||||
</Text>
|
variant="subtitle"
|
||||||
<Heading
|
as="p"
|
||||||
as="h2"
|
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
|
||||||
variant="title"
|
>
|
||||||
sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
|
Have a coding question? Looking for project feedback? You’ll find some
|
||||||
>
|
fabulous people to talk to in our global Slack (Discord-style online
|
||||||
Channels for every interest.
|
groupchat) with {formatted}+ members, active at all hours.
|
||||||
</Heading>
|
</Text>
|
||||||
<Text
|
<Heading
|
||||||
as="p"
|
as="h2"
|
||||||
variant="subtitle"
|
variant="title"
|
||||||
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
|
sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
|
||||||
>
|
>
|
||||||
Across 2,000 public channels, find the community for your favorite
|
Channels for every interest.
|
||||||
programming language, ask for advice, or just hang out.
|
</Heading>
|
||||||
</Text>
|
<Text
|
||||||
<Grid
|
as="p"
|
||||||
columns={[2, 9, 15]}
|
variant="subtitle"
|
||||||
gap={3}
|
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
|
||||||
sx={{
|
>
|
||||||
py: [3, 4],
|
Across 2,000 public channels, find the community for your favorite
|
||||||
h3: { my: 0 },
|
programming language, ask for advice, or just hang out.
|
||||||
'> div': {
|
</Text>
|
||||||
px: [2, 3],
|
<Grid
|
||||||
py: 4,
|
columns={[2, 9, 15]}
|
||||||
display: 'flex',
|
gap={3}
|
||||||
flexDirection: 'column',
|
sx={{
|
||||||
justifyContent: 'center',
|
py: [3, 4],
|
||||||
gridColumn: ['span 1', 'span 3']
|
h3: { my: 0 },
|
||||||
},
|
'> div': {
|
||||||
a: {
|
px: [2, 3],
|
||||||
position: 'relative',
|
py: 4,
|
||||||
':hover,:focus': {
|
display: 'flex',
|
||||||
svg: {
|
flexDirection: 'column',
|
||||||
transform: 'translateX(28px) translateY(-28px)',
|
justifyContent: 'center',
|
||||||
opacity: 0
|
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'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
as="aside"
|
|
||||||
sx={{
|
|
||||||
gridRow: [null, 'span 2'],
|
|
||||||
gridColumn: ['span 2', 'span 3'],
|
|
||||||
maxHeight: '100%',
|
|
||||||
overflow: 'hidden'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Heading
|
<Box
|
||||||
as="h2"
|
as="aside"
|
||||||
variant="subheadline"
|
|
||||||
sx={{
|
sx={{
|
||||||
mt: 0,
|
gridRow: [null, 'span 2'],
|
||||||
color: 'red',
|
gridColumn: ['span 2', 'span 3'],
|
||||||
textTransform: 'uppercase',
|
maxHeight: '100%',
|
||||||
letterSpacing: 'headline'
|
overflow: 'hidden'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Live from our Slack
|
<Heading
|
||||||
</Heading>
|
as="h2"
|
||||||
<SlackEvents />
|
variant="subheadline"
|
||||||
</Box>
|
sx={{
|
||||||
<NextLink href="/ship" passHref>
|
mt: 0,
|
||||||
|
color: 'red',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 'headline'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Live from our Slack
|
||||||
|
</Heading>
|
||||||
|
<SlackEvents />
|
||||||
|
</Box>
|
||||||
|
<NextLink href="/ship" passHref>
|
||||||
|
<Card
|
||||||
|
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">
|
||||||
|
#ship
|
||||||
|
</Heading>
|
||||||
|
<Text as="p">Launch your latest projects & get feedback</Text>
|
||||||
|
</Card>
|
||||||
|
</NextLink>
|
||||||
<Card
|
<Card
|
||||||
as="a"
|
as="a"
|
||||||
|
href="https://scrapbook.hackclub.com/"
|
||||||
variant="interactive"
|
variant="interactive"
|
||||||
sx={{
|
sx={{
|
||||||
gridColumn: ['span 2', 'span 5'],
|
gridColumn: ['span 2', 'span 5'],
|
||||||
bg: 'blue',
|
bg: 'dark',
|
||||||
backgroundImage: t => t.util.gx('cyan', 'blue')
|
backgroundImage: t => t.util.gx('yellow', 'orange')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon glyph="external" size={24} />
|
<Icon glyph="external" size={24} />
|
||||||
<Heading as="h3" variant="headline">
|
<Heading as="h3" variant="headline">
|
||||||
#ship
|
#scrapbook
|
||||||
</Heading>
|
</Heading>
|
||||||
<Text as="p">Launch your latest projects & get feedback</Text>
|
<Text as="p">A daily diary of project updates</Text>
|
||||||
</Card>
|
</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')
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon glyph="external" size={24} />
|
|
||||||
<Heading as="h3" variant="headline">
|
|
||||||
#scrapbook
|
|
||||||
</Heading>
|
|
||||||
<Text as="p">A daily diary of project updates</Text>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
bg="red"
|
|
||||||
as="a"
|
|
||||||
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' }}>
|
|
||||||
We’re at{' '}
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
as="span"
|
|
||||||
sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
|
|
||||||
>
|
|
||||||
{millionCount}
|
|
||||||
</Badge>
|
|
||||||
!
|
|
||||||
</Text>
|
|
||||||
</Card>
|
|
||||||
<Card bg="cyan">
|
|
||||||
<h3>#lounge</h3>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
backgroundImage:
|
|
||||||
'url(https://cloud-dfzi9msk3.vercel.app/2020-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' } }}
|
|
||||||
>
|
|
||||||
<h3>#code</h3>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
bg="yellow"
|
|
||||||
sx={{
|
|
||||||
backgroundImage:
|
|
||||||
'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
|
|
||||||
backgroundSize: '100%',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
textShadow: 'text',
|
|
||||||
gridColumn: ['span 2', 'span 3 !important']
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h3>#dogs</h3>
|
|
||||||
</Card>
|
|
||||||
<Card bg="purple">
|
|
||||||
<h3>#music</h3>
|
|
||||||
</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>
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
bg: 'dark',
|
|
||||||
backgroundImage:
|
|
||||||
'url(https://cloud-ds22ysgb0.vercel.app/2020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
textShadow: 'text',
|
|
||||||
gridColumn: ['span 2 !important', 'span 4 !important']
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h3>#photography</h3>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
<Heading
|
|
||||||
as="h2"
|
|
||||||
variant="title"
|
|
||||||
sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
|
|
||||||
>
|
|
||||||
Events on Zoom that don’t suck.
|
|
||||||
</Heading>
|
|
||||||
<Grid
|
|
||||||
columns={[null, 2]}
|
|
||||||
gap={[3, 4]}
|
|
||||||
sx={{
|
|
||||||
py: [3, 4],
|
|
||||||
mx: [null, null, null, -4],
|
|
||||||
h3: {
|
|
||||||
variant: 'text.title',
|
|
||||||
color: 'white',
|
|
||||||
my: 0
|
|
||||||
},
|
|
||||||
p: {
|
|
||||||
color: 'white',
|
|
||||||
opacity: 0.875,
|
|
||||||
fontSize: [2, 3],
|
|
||||||
lineHeight: 'caption',
|
|
||||||
mt: 2
|
|
||||||
},
|
|
||||||
a: {
|
|
||||||
position: 'relative',
|
|
||||||
pb: [4, 5],
|
|
||||||
':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'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NextLink href="/amas" passHref>
|
|
||||||
<Card
|
<Card
|
||||||
|
bg="red"
|
||||||
as="a"
|
as="a"
|
||||||
variant="interactive"
|
|
||||||
sx={{
|
sx={{
|
||||||
bg: '#000',
|
gridColumn: ['span 2 !important', 'span 2 !important'],
|
||||||
backgroundImage:
|
gridRow: ['span 1 !important', 'span 3 !important'],
|
||||||
'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-qivhneg5o.vercel.app/2020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
|
writingMode: ['lr-tb', 'tb-rl']
|
||||||
backgroundSize: '100% auto',
|
|
||||||
textShadow: 'text'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon glyph="external" size={24} />
|
<Heading as="h3">#counttoamillion</Heading>
|
||||||
<h3>AMAs</h3>
|
<Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
|
||||||
<p>Zoom with someone remarkable</p>
|
We’re at{' '}
|
||||||
|
<Badge
|
||||||
|
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 bg="cyan">
|
||||||
|
<h3>#lounge</h3>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
backgroundImage:
|
||||||
|
'url(https://cloud-dfzi9msk3.vercel.app/2020-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' } }}
|
||||||
|
>
|
||||||
|
<h3>#code</h3>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
bg="yellow"
|
||||||
|
sx={{
|
||||||
|
backgroundImage:
|
||||||
|
'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
|
||||||
|
backgroundSize: '100%',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
textShadow: 'text',
|
||||||
|
gridColumn: ['span 2', 'span 3 !important']
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3>#dogs</h3>
|
||||||
|
</Card>
|
||||||
|
<Card bg="purple">
|
||||||
|
<h3>#music</h3>
|
||||||
|
</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>
|
</Card>
|
||||||
</NextLink>
|
|
||||||
<NextLink href="/night" passHref>
|
|
||||||
<Card
|
<Card
|
||||||
as="a"
|
|
||||||
variant="interactive"
|
|
||||||
sx={{
|
sx={{
|
||||||
bg: 'dark',
|
bg: 'dark',
|
||||||
backgroundImage:
|
backgroundImage:
|
||||||
'url(https://cloud-58v67k4qk.vercel.app/2020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
|
'url(https://cloud-ds22ysgb0.vercel.app/2020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
|
||||||
backgroundPosition: 'bottom center',
|
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
h3: {
|
backgroundPosition: 'center',
|
||||||
textTransform: 'uppercase',
|
textShadow: 'text',
|
||||||
WebkitTextStroke: 'white',
|
gridColumn: ['span 2 !important', 'span 4 !important']
|
||||||
WebkitTextStrokeWidth: '2px',
|
}}
|
||||||
WebkitTextFillColor: 'transparent',
|
>
|
||||||
filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
|
<h3>#photography</h3>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Heading
|
||||||
|
as="h2"
|
||||||
|
variant="title"
|
||||||
|
sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
|
||||||
|
>
|
||||||
|
Events on Zoom that don’t suck.
|
||||||
|
</Heading>
|
||||||
|
<Grid
|
||||||
|
columns={[null, 2]}
|
||||||
|
gap={[3, 4]}
|
||||||
|
sx={{
|
||||||
|
py: [3, 4],
|
||||||
|
mx: [null, null, null, -4],
|
||||||
|
h3: {
|
||||||
|
variant: 'text.title',
|
||||||
|
color: 'white',
|
||||||
|
my: 0
|
||||||
|
},
|
||||||
|
p: {
|
||||||
|
color: 'white',
|
||||||
|
opacity: 0.875,
|
||||||
|
fontSize: [2, 3],
|
||||||
|
lineHeight: 'caption',
|
||||||
|
mt: 2
|
||||||
|
},
|
||||||
|
a: {
|
||||||
|
position: 'relative',
|
||||||
|
pb: [4, 5],
|
||||||
|
':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'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<NextLink href="/amas" passHref>
|
||||||
|
<Card
|
||||||
|
as="a"
|
||||||
|
variant="interactive"
|
||||||
|
sx={{
|
||||||
|
bg: '#000',
|
||||||
|
backgroundImage:
|
||||||
|
'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-qivhneg5o.vercel.app/2020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
|
||||||
|
backgroundSize: '100% auto',
|
||||||
|
textShadow: 'text'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon glyph="external" size={24} />
|
||||||
|
<h3>AMAs</h3>
|
||||||
|
<p>Zoom with someone remarkable</p>
|
||||||
|
</Card>
|
||||||
|
</NextLink>
|
||||||
|
<NextLink href="/night" passHref>
|
||||||
|
<Card
|
||||||
|
as="a"
|
||||||
|
variant="interactive"
|
||||||
|
sx={{
|
||||||
|
bg: 'dark',
|
||||||
|
backgroundImage:
|
||||||
|
'url(https://cloud-58v67k4qk.vercel.app/2020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
|
||||||
|
backgroundPosition: 'bottom center',
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
h3: {
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
WebkitTextStroke: 'white',
|
||||||
|
WebkitTextStrokeWidth: '2px',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon glyph="external" size={24} />
|
||||||
|
<h3>Hack Night</h3>
|
||||||
|
<p>Weekly live coding & hangout on Zoom</p>
|
||||||
|
</Card>
|
||||||
|
</NextLink>
|
||||||
|
<NextLink href="/minecraft" passHref>
|
||||||
|
<Card
|
||||||
|
as="a"
|
||||||
|
variant="interactive"
|
||||||
|
sx={{
|
||||||
|
bg: '#759B40',
|
||||||
|
backgroundImage:
|
||||||
|
'url(https://cloud-mvq23w0hk.vercel.app/2020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
textShadow: 'text'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon glyph="external" size={24} />
|
||||||
|
<h3>Minecraft</h3>
|
||||||
|
<p>Play on our server, build OSS plugins, compete</p>
|
||||||
|
</Card>
|
||||||
|
</NextLink>
|
||||||
|
<Card
|
||||||
|
as="a"
|
||||||
|
href="https://events.hackclub.com/"
|
||||||
|
variant="interactive"
|
||||||
|
sx={{
|
||||||
|
bg: '#3b6fce',
|
||||||
|
backgroundImage:
|
||||||
|
'url(https://cloud-1k2khgx4q.vercel.app/2020-07-25_zoomus-icon.svg)',
|
||||||
|
backgroundRepeat: 'repeat-x',
|
||||||
|
backgroundPosition: '0 bottom',
|
||||||
|
'@media (prefers-reduced-motion: no-preference)': {
|
||||||
|
animation: `${zoomSlide} 2s linear infinite`
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon glyph="external" size={24} />
|
<Icon glyph="external" size={24} />
|
||||||
<h3>Hack Night</h3>
|
<h3>Community fun</h3>
|
||||||
<p>Weekly live coding & hangout on Zoom</p>
|
<p>Members run their own events—all with Zoom Pro</p>
|
||||||
</Card>
|
</Card>
|
||||||
</NextLink>
|
</Grid>
|
||||||
<NextLink href="/minecraft" passHref>
|
</Container>
|
||||||
<Card
|
<Footer />
|
||||||
as="a"
|
</>
|
||||||
variant="interactive"
|
)
|
||||||
sx={{
|
}
|
||||||
bg: '#759B40',
|
|
||||||
backgroundImage:
|
|
||||||
'url(https://cloud-mvq23w0hk.vercel.app/2020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
textShadow: 'text'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon glyph="external" size={24} />
|
|
||||||
<h3>Minecraft</h3>
|
|
||||||
<p>Play on our server, build OSS plugins, compete</p>
|
|
||||||
</Card>
|
|
||||||
</NextLink>
|
|
||||||
<Card
|
|
||||||
as="a"
|
|
||||||
href="https://events.hackclub.com/"
|
|
||||||
variant="interactive"
|
|
||||||
sx={{
|
|
||||||
bg: '#3b6fce',
|
|
||||||
backgroundImage:
|
|
||||||
'url(https://cloud-1k2khgx4q.vercel.app/2020-07-25_zoomus-icon.svg)',
|
|
||||||
backgroundRepeat: 'repeat-x',
|
|
||||||
backgroundPosition: '0 bottom',
|
|
||||||
'@media (prefers-reduced-motion: no-preference)': {
|
|
||||||
animation: `${zoomSlide} 2s linear infinite`
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon glyph="external" size={24} />
|
|
||||||
<h3>Community fun</h3>
|
|
||||||
<p>Members run their own events—all with Zoom Pro</p>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default SlackPage
|
export default SlackPage
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue