From 0d549ebd53f37599ed5aa65826039d4a0ccd2885 Mon Sep 17 00:00:00 2001
From: Jianmin Chen <59099858+jianmin-chen@users.noreply.github.com>
Date: Sat, 14 Jan 2023 11:09:00 -0500
Subject: [PATCH] Move carousel content to JSON file (#678)
---
components/index/carousel.js | 73 +++---------------------------------
lib/carousel.json | 65 ++++++++++++++++++++++++++++++++
pages/index.js | 19 +++++++---
3 files changed, 84 insertions(+), 73 deletions(-)
create mode 100644 lib/carousel.json
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 73a43dbc..cd033c40 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -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)}
>
-
-
-
-
-
-
-
+ {cards.map((card, idx) => (
+
+ ))}
)}
diff --git a/lib/carousel.json b/lib/carousel.json
new file mode 100644
index 00000000..a413b195
--- /dev/null
+++ b/lib/carousel.json
@@ -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"
+ }
+]
diff --git a/pages/index.js b/pages/index.js
index 6487c62b..875f89f0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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({
-
+
@@ -799,7 +805,7 @@ function Page({
width: '90vw',
maxWidth: 'layout',
margin: 'auto',
- position: 'relative',
+ position: 'relative'
}}
>
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
}