mirror of
https://github.com/System-End/site.git
synced 2026-04-19 18:35:12 +00:00
Move carousel content to JSON file (#678)
This commit is contained in:
Jianmin Chen
GitHub
parent
ab0609991a
commit
0d549ebd53
3 changed files with 84 additions and 73 deletions
|
|
@ -1,7 +1,4 @@
|
|||
import {
|
||||
Box,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { Box, Text } from 'theme-ui'
|
||||
import CarouselCards from './carousel-cards'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
|
@ -10,7 +7,7 @@ import PageVisibility from 'react-page-visibility'
|
|||
import { Fade } from 'react-reveal'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Carousel() {
|
||||
export default function Carousel({ cards }) {
|
||||
let [speed, setSpeed] = useState(5)
|
||||
|
||||
const [pageIsVisible, setPageIsVisible] = useState(true)
|
||||
|
|
@ -44,69 +41,9 @@ export default function Carousel() {
|
|||
onMouseOver={() => setSpeed(2)}
|
||||
onMouseOut={() => setSpeed(6)}
|
||||
>
|
||||
<CarouselCards
|
||||
background="#000"
|
||||
titleColor="yellow"
|
||||
descriptionColor="white"
|
||||
title="Sprig"
|
||||
description="Join hundreds of teenagers making tile-based JavaScript games"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
link="https://sprig.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="blue"
|
||||
titleColor="white"
|
||||
textColor="white"
|
||||
title="Clubs network"
|
||||
description="Join one of 400+ coding clubs around the world"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png"
|
||||
link="/clubs"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="dark"
|
||||
titleColor="red"
|
||||
textColor="white"
|
||||
title="Hack Club Bank"
|
||||
description="No. 1 fiscal sponsor for teenagers (we crossed $7 million in transactions)"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
|
||||
link="/bank"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="snow"
|
||||
titleColor="dark"
|
||||
descriptionColor="black"
|
||||
title="Some Assembly Required"
|
||||
description="The 4th most starred Assembly repository on GitHub"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/someassemblyrequired/cfacfacaaa2d8b1d.png"
|
||||
link="https://github.com/hackclub/some-assembly-required"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#271932"
|
||||
titleColor="#CAB4D4"
|
||||
textColor="#CAB4D4"
|
||||
title="SineRider"
|
||||
description="Help build a game about love, math, and graphing 💖"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
|
||||
link="https://sinerider.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="black"
|
||||
titleColor="yellow"
|
||||
textColor="white"
|
||||
title="High school hackathons"
|
||||
description="🔍 A curated list of high school hackathons with hundreds of events"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f469-200d-1f4bb@2x.png"
|
||||
link="/hackathons"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="snow"
|
||||
titleColor="dark"
|
||||
descriptionColor="black"
|
||||
title="Workshops"
|
||||
description="100+ coding workshops to build a project in under an hour"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
|
||||
link="https://workshops.hackclub.com"
|
||||
/>
|
||||
{cards.map((card, idx) => (
|
||||
<CarouselCards key={idx} {...card} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Ticker>
|
||||
|
|
|
|||
65
lib/carousel.json
Normal file
65
lib/carousel.json
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
[
|
||||
{
|
||||
"background": "#000",
|
||||
"titleColor": "yellow",
|
||||
"descriptionColor": "white",
|
||||
"title": "Sprig",
|
||||
"description": "Join hundreds of teenagers making tile-based JavaScript games",
|
||||
"img": "https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png",
|
||||
"link": "https://sprig.hackclub.com"
|
||||
},
|
||||
{
|
||||
"background": "blue",
|
||||
"titleColor": "white",
|
||||
"textColor": "white",
|
||||
"title": "Clubs network",
|
||||
"description": "Join one of 400+ coding clubs around the world",
|
||||
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png",
|
||||
"link": "/clubs"
|
||||
},
|
||||
{
|
||||
"background": "dark",
|
||||
"titleColor": "red",
|
||||
"textColor": "white",
|
||||
"title": "Hack Club Bank",
|
||||
"description": "No. 1 fiscal sponsor for teenagers (we crossed $7 million in transactions)",
|
||||
"img": "https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png",
|
||||
"link": "/bank"
|
||||
},
|
||||
{
|
||||
"background": "snow",
|
||||
"titleColor": "dark",
|
||||
"descriptionColor": "black",
|
||||
"title": "Some Assembly Required",
|
||||
"description": "The 4th most starred Assembly repository on GitHub",
|
||||
"img": "https://emoji.slack-edge.com/T0266FRGM/someassemblyrequired/cfacfacaaa2d8b1d.png",
|
||||
"link": "https://github.com/hackclub/some-assembly-required"
|
||||
},
|
||||
{
|
||||
"background": "#271932",
|
||||
"titleColor": "#CAB4D4",
|
||||
"textColor": "#CAB4D4",
|
||||
"title": "SineRider",
|
||||
"description": "Help build a game about love, math, and graphing 💖",
|
||||
"img": "https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png",
|
||||
"link": "https://sinerider.com"
|
||||
},
|
||||
{
|
||||
"background": "black",
|
||||
"titleColor": "yellow",
|
||||
"textColor": "white",
|
||||
"title": "High school hackathons",
|
||||
"description": "🔍 A curated list of high school hackathons with hundreds of events",
|
||||
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f469-200d-1f4bb@2x.png",
|
||||
"link": "/hackathons"
|
||||
},
|
||||
{
|
||||
"background": "snow",
|
||||
"titleColor": "dark",
|
||||
"descriptionColor": "black",
|
||||
"title": "Workshops",
|
||||
"description": "100+ coding workshops to build a project in under an hour",
|
||||
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png",
|
||||
"link": "https://workshops.hackclub.com"
|
||||
}
|
||||
]
|
||||
|
|
@ -52,7 +52,8 @@ function Page({
|
|||
dataPieces,
|
||||
game,
|
||||
gameTitle,
|
||||
events
|
||||
events,
|
||||
carouselCards
|
||||
}) {
|
||||
let [gameImage, setGameImage] = useState('')
|
||||
let [gameImage1, setGameImage1] = useState('')
|
||||
|
|
@ -586,7 +587,7 @@ function Page({
|
|||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
<Carousel />
|
||||
<Carousel cards={carouselCards} />
|
||||
<Box
|
||||
as="section"
|
||||
sx={{
|
||||
|
|
@ -656,7 +657,12 @@ function Page({
|
|||
sx={{
|
||||
flexDirection: ['column', 'column', 'column', 'row'],
|
||||
justifyContent: 'center',
|
||||
alignItems: ['flex-start', 'flex-start', 'flex-start', 'center'],
|
||||
alignItems: [
|
||||
'flex-start',
|
||||
'flex-start',
|
||||
'flex-start',
|
||||
'center'
|
||||
],
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
|
|
@ -799,7 +805,7 @@ function Page({
|
|||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto',
|
||||
position: 'relative',
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
@ -1097,6 +1103,8 @@ function Page({
|
|||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
export async function getStaticProps() {
|
||||
const carouselCards = require('../lib/carousel.json')
|
||||
|
||||
// HCB: get total raised
|
||||
let bankData = []
|
||||
let initialBankData = await fetch('https://bank.hackclub.com/stats').then(r =>
|
||||
|
|
@ -1158,7 +1166,8 @@ export async function getStaticProps() {
|
|||
bankData,
|
||||
slackData,
|
||||
stars,
|
||||
events
|
||||
events,
|
||||
carouselCards
|
||||
},
|
||||
revalidate: 60
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue