System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-20 00:25:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

♻️ Refactor

Browse source
This commit is contained in:
Malted 2023-04-07 01:47:20 +01:00
parent 066fa2a0bc
commit 150bbde298
No known key found for this signature in database
GPG key ID: C1AF1C0E5180BE02
2 changed files with 94 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
components/index/github.js
View file

@ -11,90 +11,78 @@ export default function GitHub({
message,
...props
}) {
if (!user) return null
return (
<Badge
variant="pill"
bg="snow"
as='a'
href='https://github.com/hackclub'
target='_blank'
rel='noopener'
sx={{
color: 'black',
textDecoration: 'none',
fontWeight: '400',
zIndex: 4,
px: '4px !important',
py: '2px !important',
// my: [1, 1, 2],
height: 'fit-content',
width: ['fit-content', '100%'],
width: '100%',
display: 'flex',
alignItems: 'center',
gap: '1rem',
height: '2rem',
width: 'fit-content',
maxWidth: '30rem',
}}
{...props}
>
<Link
href='https://github.com/hackclub'
target='_blank'
rel='noopener'
<Image
alt='GitHub user avatar'
src={img}
sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0, }}
/>
<Text
sx={{
textDecoration: 'none',
color: 'inherit',
display: 'flex',
fontSize: ['11px', '11px', '14px'],
height: ['15px', '15px', '25px'],
position: 'relative',
alignItems: 'center',
justifyContent: 'flex-start',
mr: 2,
textOverflow: 'ellipsis',
display: 'inline-block',
overflow: 'hidden',
whiteSpace: 'nowrap',
flexShrink: 0,
display: [
'none',
'inline-block',
'inline-block',
'inline-block'
]
}}
>
{!user.endsWith('[bot]') && (
<>
<Image
alt='GitHub user avatar'
src={img}
sx={{ borderRadius: '100%', height: '90%', mr: 2 }}
/>
<Text
sx={{
mr: 2,
textOverflow: 'ellipsis',
maxWidth: '80px',
display: 'inline-block',
overflow: 'hidden',
whiteSpace: 'nowrap',
display: [
'none',
'inline-block',
'inline-block',
'inline-block'
]
}}
>
{user}
</Text>
<Text
sx={{
textOverflow: 'ellipsis',
maxWidth: '150px',
display: 'inline-block',
overflow: 'hidden',
whiteSpace: 'nowrap'
}}
>
{message}
</Text>
<Text
as="span"
sx={{
fontSize: ['8px', '8px', '10px'],
color: 'inherit',
mx: 2,
ml: 'auto',
}}
>
<RelativeTime value={time} titleformat="iso8601" />
</Text>
</>)}
</Link>
{user}
</Text>
<Text
sx={{
textOverflow: 'ellipsis',
maxWidth: '100%',
display: 'inline-block',
overflow: 'hidden',
whiteSpace: 'nowrap',
flexShrink: 1,
}}
>
{message}
</Text>
<Text
as="span"
sx={{
fontSize: ['8px', '8px', '10px'],
color: 'inherit',
mx: 2,
flexShrink: 0,
ml: 'auto',
}}
>
<RelativeTime value={time} titleformat="iso8601" />
</Text>
</Badge>
)
}

88
pages/index.js
View file

@ -64,6 +64,8 @@ function Page({
let jsConfetti;
console.info(gitHubData)
useEffect(() => {
jsConfetti = new JSConfetti()
@ -664,7 +666,7 @@ function Page({
'flex-start',
'center'
],
gap: '10px'
gap: '10px',
}}
>
<Box sx={{ mb: [3, 0, 0] }}>
@ -673,7 +675,7 @@ function Page({
as="h2"
sx={{
fontSize: ['36px', '48px', '56px'],
maxWidth: '20ch'
maxWidth: '20ch',
}}
>
We build{' '}
@ -708,57 +710,43 @@ function Page({
{gitHubData && (
<Flex
sx={{
flexDirection: ['row', 'row', 'row', 'column'],
flexDirection: ['row', null, null, 'column'],
gap: [1, 2, 2],
alignItems: ['center', 'center', 'center', 'flex-start']
alignItems: ['center', 'center', 'center', 'flex-start'],
flexWrap: 'wrap',
width: ['100%', null, null, 'fit-content'],
'& > a:nth-child(n+4)': {
display: ['none', null, null, 'flex']
}
}}
>
<Text
as="p"
sx={{
fontSize: ['11px', '11px', '14px'],
textAlign: 'left',
lineHeight: '90%',
width: 'fit-content',
fontStyle: 'italic'
}}
>
Live from GitHub
</Text>
<GitHub
type={gitHubData[0].type}
img={gitHubData[0].userImage}
user={gitHubData[0].user}
time={gitHubData[0].time}
message={gitHubData[0].message}
key={key}
/>
<GitHub
type={gitHubData[1].type}
img={gitHubData[1].userImage}
user={gitHubData[1].user}
time={gitHubData[1].time}
message={gitHubData[1].message}
key={key}
/>
<GitHub
type={gitHubData[2].type}
img={gitHubData[2].userImage}
user={gitHubData[2].user}
time={gitHubData[2].time}
message={gitHubData[2].message}
key={key}
sx={{ display: ['none', 'none', 'none', 'inline'] }}
/>
<GitHub
type={gitHubData[3].type}
img={gitHubData[3].userImage}
user={gitHubData[3].user}
time={gitHubData[3].time}
message={gitHubData[3].message}
key={key}
sx={{ display: ['none', 'none', 'none', 'inline'] }}
/>
<Text
sx={{
fontSize: ['11px', '11px', '14px'],
textAlign: 'left',
lineHeight: '90%',
fontStyle: 'italic',
width: 'fit-content'
}}
>
Live from GitHub
</Text>
{gitHubData
.filter((data) => !data.user.endsWith('[bot]'))
.slice(0, 4)
.map((data, key) => {
return (
<GitHub
type={data.type}
img={data.userImage}
user={data.user}
time={data.time}
message={data.message}
key={key}
/>
)
})}
</Flex>
)}
</Flex>