Skip to content

Commit 8fb9cee

Browse files
andersy005andersy005
authored
Update social share cards (#319)
1 parent d250e84 commit 8fb9cee

File tree

6 files changed

+59
-78
lines changed

6 files changed

+59
-78
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"dependencies": {
1919
"@chakra-ui/icons": "^2.0.9",
2020
"@chakra-ui/react": "^2.3.1",
21+
"@chakra-ui/system": "^2.2.9",
2122
"@emotion/react": "^11.10.0",
2223
"@emotion/styled": "^11.10.0",
2324
"@fontsource/inter": "^4.5.12",

‎public/cards/czi-eoss-grant-conclusion.png‎

32.5 KB
Loading

‎src/pages/blog/[id].js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export default function Post({ source, frontmatter, postId }) {
7171
src={`https://github.com/${author.github}.png`}
7272
name={author.name}
7373
my={2}
74+
size={'lg'}
7475
/>
7576
<Text fontWeight={600}>{author.name}</Text>
7677
</Flex>

‎src/pages/blog/index.js‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import {
22
Avatar,
3+
AvatarGroup,
34
Box,
45
Container,
56
Divider,
6-
Flex,
77
Heading,
88
Spacer,
99
Stack,
1010
StackDivider,
1111
Text,
1212
useColorModeValue,
1313
VStack,
14-
Wrap,
15-
WrapItem,
1614
} from '@chakra-ui/react'
1715

1816
import { Layout } from '@/components/layout'
@@ -79,26 +77,17 @@ export default function Blog({ allPostsData }) {
7977
</Box>
8078
<Spacer />
8179
<Box>
82-
<Wrap spacing={2}>
80+
<AvatarGroup size={'lg'}>
8381
{page.authors.map((author) => {
8482
return (
85-
<WrapItem key={author.name}>
86-
<Flex
87-
align={'center'}
88-
mt={1}
89-
direction={'column'}
90-
key={author.name}
91-
>
92-
<Avatar
93-
src={`https://github.com/${author.github}.png`}
94-
name={author.name}
95-
mb={1}
96-
/>
97-
</Flex>
98-
</WrapItem>
83+
<Avatar
84+
key={author.name}
85+
src={`https://github.com/${author.github}.png`}
86+
name={author.name}
87+
/>
9988
)
10089
})}
101-
</Wrap>
90+
</AvatarGroup>
10291
</Box>
10392
</Stack>
10493
</Stack>

‎src/pages/cards/[id].js‎

Lines changed: 48 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { formatDate } from '@/lib/date-formatting'
55
import { getAllPostsIds, getPostData } from '@/lib/posts'
66
import {
77
Avatar,
8+
AvatarGroup,
9+
Box,
810
Container,
911
Flex,
1012
Heading,
1113
Icon,
1214
Stack,
1315
Text,
14-
Wrap,
15-
WrapItem,
1616
} from '@chakra-ui/react'
1717
import fs from 'fs'
1818
import matter from 'gray-matter'
@@ -23,67 +23,57 @@ const Card = ({ frontmatter, id }) => {
2323
const date = new Date(frontmatter.date)
2424

2525
return (
26-
<Container
27-
my={20}
28-
id='post'
29-
sx={{ bg: boxBackground, color: 'invert' }}
30-
maxW={{ base: '900px', md: '930px' }}
31-
>
32-
<Flex direction='column' fontSize={'2xl'}>
33-
<Stack direction={'row'} spacing={8} justify='space-between'>
34-
<Stack>
35-
<Text my={8} fontWeight={'bold'} opacity={0.5}>
36-
xarray.dev / blog
37-
</Text>
38-
</Stack>
39-
<Flex
40-
direction={'row'}
41-
alignItems={'center'}
42-
justify={'right'}
43-
align={'right'}
44-
>
45-
<Image
26+
<Box sx={{ bg: boxBackground, color: 'invert' }} h={'100vh'} w={'100vw'}>
27+
<Container id='post' maxW={{ base: '900px', md: '930px' }}>
28+
<Flex direction='column' fontSize={'2xl'}>
29+
<Stack direction={'row'} spacing={8} justify='space-between'>
30+
<Stack>
31+
<Text my={8} fontWeight={'bold'} opacity={0.7}>
32+
xarray.dev / blog
33+
</Text>
34+
</Stack>
35+
<Flex
36+
direction={'row'}
37+
alignItems={'center'}
4638
justify={'right'}
4739
align={'right'}
48-
w={40}
49-
src={'/dataset-diagram-logo.png'}
50-
alt={'xarray logo'}
51-
/>
52-
</Flex>
53-
</Stack>
54-
<Heading as={'h1'} size={'2xl'} my={8}>
55-
{frontmatter.title}
56-
</Heading>
40+
>
41+
<Image
42+
justify={'right'}
43+
align={'right'}
44+
w={40}
45+
src={'/dataset-diagram-logo.png'}
46+
alt={'xarray logo'}
47+
/>
48+
</Flex>
49+
</Stack>
50+
<Heading as={'h1'} size={'2xl'} my={8}>
51+
{frontmatter.title}
52+
</Heading>
5753

58-
<Stack direction={'row'} my={4} align={'center'}>
59-
<Icon as={MdOutlineCalendarToday} w='8' h='8' />
60-
<Text>{formatDate(date)}</Text>
61-
</Stack>
54+
<Stack direction={'row'} my={4} align={'center'}>
55+
<Icon as={MdOutlineCalendarToday} w='8' h='8' />
56+
<Text>{formatDate(date)}</Text>
57+
</Stack>
6258

63-
<Stack direction={'row'} my={4} align={'center'}>
64-
<Icon as={MdPeopleOutline} w='8' h='8' />
59+
<Stack direction={'row'} my={8} align={'center'}>
60+
<Icon as={MdPeopleOutline} w='8' h='8' />
6561

66-
<Wrap spacing={3} my={8}>
67-
{frontmatter.authors.map((author) => {
68-
return (
69-
<WrapItem key={author.name}>
70-
<Flex align={'center'} direction={'column'}>
71-
<Avatar
72-
src={`https://github.com/${author.github}.png`}
73-
name={author.name}
74-
size={'lg'}
75-
/>
76-
<Text fontWeight={'bold'} fontSize={'md'}>
77-
{author.name}
78-
</Text>
79-
</Flex>
80-
</WrapItem>
81-
)
82-
})}
83-
</Wrap>
84-
</Stack>
85-
</Flex>
86-
</Container>
62+
<AvatarGroup size={'xl'}>
63+
{frontmatter.authors.map((author) => {
64+
return (
65+
<Avatar
66+
key={author.name}
67+
src={`https://github.com/${author.github}.png`}
68+
name={author.name}
69+
/>
70+
)
71+
})}
72+
</AvatarGroup>
73+
</Stack>
74+
</Flex>
75+
</Container>
76+
</Box>
8777
)
8878
}
8979

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -862,7 +862,7 @@
862862
dependencies:
863863
"@chakra-ui/checkbox" "2.1.8"
864864

865-
"@chakra-ui/[email protected]":
865+
"@chakra-ui/[email protected]", "@chakra-ui/system@^2.2.9":
866866
version "2.2.9"
867867
resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.2.9.tgz#d6e7dfb9a954b8ab03c28e14c69aad56a9fcffbd"
868868
integrity sha512-SyTeIGm+goyYK8vqX4dU6oeLhxUAeGI3Cl+mxA+aiKIX01YTALhTWhpbrsuMYBevV+l9EGK12egPUQE+Mo3WlQ==

0 commit comments

Comments
 (0)