Skip to content

Commit e97416d

Browse files
DDbrother9999DDbrother9999
committed
add project of the week
showcase card properly cleanup blueprint/moonshot standardize the card (woopsy) add card to header standarize font fix hover add author, age add author, age reverse order of CTA/Hydra reverse order of projects and programs proper enable/disable config proper enable/disable x2 cleanup
1 parent 174732e commit e97416d

File tree

4 files changed

+237
-192
lines changed

4 files changed

+237
-192
lines changed

‎components/index/cards/project-of-the-week.js‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import CardModel from './card-model'
2+
import { Badge, Box, Flex, Grid, Image, Text } from 'theme-ui'
3+
import Icon from '../../icon'
4+
import Buttons from './button'
5+
import { useEffect } from 'react'
6+
import useSWR from 'swr'
7+
import featuredProject from '../../../lib/featured-project.json'
8+
9+
/** @jsxImportSource theme-ui */
10+
11+
const fetcher = (url) => fetch(url).then((res) => res.json())
12+
13+
export default function ProjectOfTheWeek() {
14+
const { data, mutate } = useSWR('/api/featured-project-views', fetcher)
15+
16+
useEffect(() => {
17+
fetch('/api/featured-project-views', { method: 'POST' }).then(() => {
18+
mutate()
19+
})
20+
}, [mutate])
21+
22+
return (
23+
<CardModel
24+
color="white"
25+
sx={{
26+
background: theme => theme.util.gx('red', 'orange'),
27+
borderRadius: '24px',
28+
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
29+
mb: 5,
30+
maxWidth: 'layout',
31+
width: '90vw',
32+
mx: 'auto',
33+
transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
34+
'&:hover': {
35+
transform: 'scale(1.0625)',
36+
boxShadow: '0 12px 32px rgba(0, 0, 0, 0.15)'
37+
}
38+
}}
39+
highlight="white"
40+
visible={true}
41+
>
42+
<Grid
43+
columns={[1, 2]}
44+
sx={{ position: 'relative', alignItems: 'center', zIndex: 2 }}
45+
>
46+
<Box sx={{ textAlign: ['left', 'left', 'left'], position: 'relative' }}>
47+
<Text
48+
as="h3"
49+
sx={{
50+
color: 'white',
51+
fontSize: ['28px', '34px', '42px'],
52+
fontWeight: 800,
53+
mb: 3,
54+
lineHeight: 1,
55+
textAlign: 'left',
56+
textShadow: '0 2px 4px rgba(0,0,0,0.2)'
57+
}}
58+
>
59+
Project of the week: {featuredProject.name}!
60+
</Text>
61+
62+
<Text
63+
as="p"
64+
sx={{
65+
color: 'rgba(255,255,255,0.9)',
66+
fontSize: [1, '16px', '20px'],
67+
lineHeight: 1.5,
68+
mb: 3,
69+
display: 'block',
70+
textAlign: 'left'
71+
}}
72+
>
73+
{featuredProject.description} Built by {featuredProject.author}, {featuredProject.age}!
74+
</Text>
75+
76+
<Box sx={{ display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', gap: 2 }}>
77+
<Buttons
78+
id="check-it-out"
79+
link={featuredProject.url}
80+
primary="white"
81+
color="red"
82+
icon="external"
83+
>
84+
CHECK IT OUT
85+
</Buttons>
86+
<Buttons
87+
id="view-more-projects"
88+
link="https://scrapbook.hackclub.com/"
89+
icon="view"
90+
primary="transparent"
91+
sx={{
92+
border: '1px solid rgba(255,255,255,0.5)',
93+
color: 'white'
94+
}}
95+
>
96+
View more projects
97+
</Buttons>
98+
</Box>
99+
</Box>
100+
101+
<Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>
102+
<Box
103+
sx={{
104+
position: 'relative',
105+
width: '100%',
106+
display: 'block'
107+
}}
108+
>
109+
<Image
110+
alt={`Screenshot of ${featuredProject.name}`}
111+
src={featuredProject.image}
112+
sx={{
113+
width: '100%',
114+
objectFit: 'cover',
115+
borderRadius: '12px',
116+
aspectRatio: '16/9'
117+
}}
118+
/>
119+
<Box
120+
sx={{
121+
color: 'red',
122+
backgroundColor: 'white',
123+
position: 'absolute',
124+
bottom: '16px',
125+
right: '16px',
126+
padding: '6px 12px',
127+
borderRadius: '16px',
128+
display: 'flex',
129+
alignItems: 'center',
130+
boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
131+
zIndex: 5
132+
}}
133+
>
134+
<Icon glyph="view" size={24} />
135+
<Text sx={{ ml: 1, fontWeight: 'bold' }}>
136+
{data ? data.views : '...'} views
137+
</Text>
138+
</Box>
139+
</Box>
140+
</Flex>
141+
</Grid>
142+
</CardModel>
143+
)
144+
}

‎lib/featured-project.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"enabled": true,
3+
"id": "hydra",
4+
"name": "Hydra",
5+
"description": "An experimental Nintendo Switch emulator for macOS.",
6+
"author": "SamoZ256",
7+
"age": 18,
8+
"url": "https://github.com/SamoZ256/hydra",
9+
"image": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/37cdc4369fcfe6c5d941beac8d3cea0cdaa55296_image.png"
10+
}

‎pages/api/featured-project-views.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import featuredProject from '../../lib/featured-project.json'
2+
3+
let projectViews = {}
4+
5+
export default function handler(req, res) {
6+
const currentProjectId = featuredProject.id
7+
8+
if (projectViews[currentProjectId] === undefined) {
9+
projectViews[currentProjectId] = 0
10+
}
11+
12+
if (req.method === 'POST') {
13+
projectViews[currentProjectId] += 1
14+
return res.status(200).json({ views: projectViews[currentProjectId] })
15+
} else {
16+
return res.status(200).json({ views: projectViews[currentProjectId] })
17+
}
18+
}

0 commit comments

Comments
 (0)