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) {
|
||||
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 Header from '../../components/slack/header'
|
||||
import SlackEvents from '../../components/slack/slack-events'
|
||||
import { getCount } from '../../pages/api/channels/count-to-a-million'
|
||||
import { formatted, thousands } from '../../lib/members'
|
||||
import useSWR from 'swr'
|
||||
import fetcher from '../../lib/fetcher'
|
||||
|
||||
const zoomSlide = keyframes({
|
||||
from: { backgroundPosition: '-32px bottom' },
|
||||
to: { backgroundPosition: '32px bottom' }
|
||||
})
|
||||
|
||||
export async function getStaticProps() {
|
||||
const millionCount = (await getCount()) || null
|
||||
return { props: { millionCount }, revalidate: 1 }
|
||||
}
|
||||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
const SlackPage = ({ millionCount }) => (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
name="Join our Slack"
|
||||
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"
|
||||
/>
|
||||
<ForceTheme theme="light" />
|
||||
<Nav />
|
||||
<Header />
|
||||
<Container sx={{ py: [4, 5] }}>
|
||||
<Grid
|
||||
columns={[2, 5]}
|
||||
gap={2}
|
||||
sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
|
||||
>
|
||||
<Stat
|
||||
value={`${thousands}k+`}
|
||||
label="total members"
|
||||
color="red"
|
||||
lg
|
||||
sx={{ gridColumn: 'span 2' }}
|
||||
/>
|
||||
<Stat value={6} label="continents" />
|
||||
<Stat value="1M+" label="messages/yr" />
|
||||
</Grid>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
|
||||
>
|
||||
Have a coding question? Looking for project feedback? You’ll find some
|
||||
fabulous people to talk to in our global Slack (Discord-style online
|
||||
groupchat) with {formatted}+ members, active at all hours.
|
||||
</Text>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="title"
|
||||
sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
|
||||
>
|
||||
Channels for every interest.
|
||||
</Heading>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subtitle"
|
||||
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
|
||||
>
|
||||
Across 2,000 public channels, find the community for your favorite
|
||||
programming language, ask for advice, or just hang out.
|
||||
</Text>
|
||||
<Grid
|
||||
columns={[2, 9, 15]}
|
||||
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
|
||||
const SlackPage = () => {
|
||||
const { data: millionCount } = useSWR(
|
||||
'https://jia.haas.hackclub.com/api/currentNumber',
|
||||
fetcher,
|
||||
{ refreshInterval: 1000 }
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
name="Join our Slack"
|
||||
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"
|
||||
/>
|
||||
<ForceTheme theme="light" />
|
||||
<Nav />
|
||||
<Header />
|
||||
<Container sx={{ py: [4, 5] }}>
|
||||
<Grid
|
||||
columns={[2, 5]}
|
||||
gap={2}
|
||||
sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
|
||||
>
|
||||
<Stat
|
||||
value={`${thousands}k+`}
|
||||
label="total members"
|
||||
color="red"
|
||||
lg
|
||||
sx={{ gridColumn: 'span 2' }}
|
||||
/>
|
||||
<Stat value={6} label="continents" />
|
||||
<Stat value="1M+" label="messages/yr" />
|
||||
</Grid>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
|
||||
>
|
||||
Have a coding question? Looking for project feedback? You’ll find some
|
||||
fabulous people to talk to in our global Slack (Discord-style online
|
||||
groupchat) with {formatted}+ members, active at all hours.
|
||||
</Text>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="title"
|
||||
sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
|
||||
>
|
||||
Channels for every interest.
|
||||
</Heading>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subtitle"
|
||||
sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
|
||||
>
|
||||
Across 2,000 public channels, find the community for your favorite
|
||||
programming language, ask for advice, or just hang out.
|
||||
</Text>
|
||||
<Grid
|
||||
columns={[2, 9, 15]}
|
||||
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'
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="aside"
|
||||
sx={{
|
||||
gridRow: [null, 'span 2'],
|
||||
gridColumn: ['span 2', 'span 3'],
|
||||
maxHeight: '100%',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="subheadline"
|
||||
<Box
|
||||
as="aside"
|
||||
sx={{
|
||||
mt: 0,
|
||||
color: 'red',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 'headline'
|
||||
gridRow: [null, 'span 2'],
|
||||
gridColumn: ['span 2', 'span 3'],
|
||||
maxHeight: '100%',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
Live from our Slack
|
||||
</Heading>
|
||||
<SlackEvents />
|
||||
</Box>
|
||||
<NextLink href="/ship" passHref>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
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
|
||||
as="a"
|
||||
href="https://scrapbook.hackclub.com/"
|
||||
variant="interactive"
|
||||
sx={{
|
||||
gridColumn: ['span 2', 'span 5'],
|
||||
bg: 'blue',
|
||||
backgroundImage: t => t.util.gx('cyan', 'blue')
|
||||
bg: 'dark',
|
||||
backgroundImage: t => t.util.gx('yellow', 'orange')
|
||||
}}
|
||||
>
|
||||
<Icon glyph="external" size={24} />
|
||||
<Heading as="h3" variant="headline">
|
||||
#ship
|
||||
#scrapbook
|
||||
</Heading>
|
||||
<Text as="p">Launch your latest projects & get feedback</Text>
|
||||
<Text as="p">A daily diary of project updates</Text>
|
||||
</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
|
||||
bg="red"
|
||||
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'
|
||||
gridColumn: ['span 2 !important', 'span 2 !important'],
|
||||
gridRow: ['span 1 !important', 'span 3 !important'],
|
||||
writingMode: ['lr-tb', 'tb-rl']
|
||||
}}
|
||||
>
|
||||
<Icon glyph="external" size={24} />
|
||||
<h3>AMAs</h3>
|
||||
<p>Zoom with someone remarkable</p>
|
||||
<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 ? 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>
|
||||
</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',
|
||||
'url(https://cloud-ds22ysgb0.vercel.app/2020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
|
||||
backgroundSize: 'cover',
|
||||
h3: {
|
||||
textTransform: 'uppercase',
|
||||
WebkitTextStroke: 'white',
|
||||
WebkitTextStrokeWidth: '2px',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
|
||||
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
|
||||
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} />
|
||||
<h3>Hack Night</h3>
|
||||
<p>Weekly live coding & hangout on Zoom</p>
|
||||
<h3>Community fun</h3>
|
||||
<p>Members run their own events—all with Zoom Pro</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} />
|
||||
<h3>Community fun</h3>
|
||||
<p>Members run their own events—all with Zoom Pro</p>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
</Grid>
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SlackPage
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue