Skip to content

Commit 3eaf605

Browse files
mwskwongmwskwong
committed
feat: first draft of blob listing page
1 parent c7fa36b commit 3eaf605

File tree

4 files changed

+88
-33
lines changed

4 files changed

+88
-33
lines changed

‎postcss.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const config = {
1717
'.rt-DataList',
1818
'.rt-BaseDialog',
1919
'.rt-HoverCard',
20+
'.rt-Inset',
2021
'.rt-Popover',
2122
'.rt-Progress',
2223
'.rt-BaseRadio',

‎src/app/blog/page.tsx‎

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,27 @@ const BlogPage: FC = async () => {
4141
<article>
4242
<div>
4343
<Box
44-
className="aspect-video overflow-hidden rounded-[var(--card-border-radius)]"
44+
className="aspect-video rounded-[var(--card-border-radius)]"
45+
overflow="hidden"
4546
position="relative"
47+
style={{ boxShadow: 'var(--base-card-surface-box-shadow)' }}
4648
>
4749
{featuredArticle.coverPhoto ? (
4850
<Image
4951
fill
5052
alt={featuredArticle.title}
5153
className="object-cover"
5254
src={featuredArticle.coverPhoto}
55+
sizes={[
56+
`(min-width: 1136px) ${1136 / 2}px`, // container size 4 max width = 1136px
57+
'(min-width: 768px) 50vw', // breakpoint sm = 768px
58+
'100vw',
59+
].join(',')}
5360
/>
5461
) : null}
5562
</Box>
5663
</div>
57-
<Flex direction="column" gap="3">
64+
<div>
5865
{featuredArticle.categories &&
5966
featuredArticle.categories.length > 0 ? (
6067
<Flex gap="3">
@@ -65,23 +72,74 @@ const BlogPage: FC = async () => {
6572
))}
6673
</Flex>
6774
) : null}
68-
<Heading size={{ initial: '4', xs: '6', md: '8' }}>
75+
<Heading mt="4" size={{ initial: '4', xs: '6', md: '8' }}>
6976
{featuredArticle.title}
7077
</Heading>
7178
<Text
7279
className="line-clamp-3"
80+
mt="2"
7381
size={{ initial: '3', md: '4' }}
7482
>
7583
{featuredArticle.description}
7684
</Text>
77-
<Text color="gray" size={{ initial: '2', md: '3' }}>
85+
<Text color="gray" mt="2" size={{ initial: '2', md: '3' }}>
7886
{dateFormatter.format(featuredArticle.createdAt)}
7987
</Text>
80-
</Flex>
88+
</div>
8189
</article>
8290
</Grid>
8391
</Link>
8492
</Card>
93+
<Grid columns={{ xs: '2', md: '3' }} gap="5" mt="8">
94+
{articles
95+
.filter(({ id }) => id !== featuredArticle.id)
96+
.map(
97+
({ id, createdAt, coverPhoto, slug, title, categories = [] }) => (
98+
<Card key={id} asChild variant="ghost">
99+
<Link href={`${routes.blog.pathname}/${slug}`}>
100+
<article>
101+
<Box
102+
className="aspect-video rounded-[var(--card-border-radius)]"
103+
overflow="hidden"
104+
position="relative"
105+
style={{
106+
boxShadow: 'var(--base-card-surface-box-shadow)',
107+
}}
108+
>
109+
{coverPhoto ? (
110+
<Image
111+
fill
112+
alt={title}
113+
className="object-cover"
114+
src={coverPhoto}
115+
sizes={[
116+
`(min-width: 1136px) ${1136 / 2}px`, // container size 4 max width = 1136px
117+
'(min-width: 1024px) 33vw', // breakpoint md = 1024px
118+
'(min-width: 768px) 50vw', // breakpoint sm = 768px
119+
'100vw',
120+
].join(',')}
121+
/>
122+
) : null}
123+
</Box>
124+
{categories.length > 0 ? (
125+
<Flex gap="2" mt="3" wrap="wrap">
126+
{categories.map((category) => (
127+
<Badge key={category}>{category}</Badge>
128+
))}
129+
</Flex>
130+
) : null}
131+
<Heading mt="3" size="3">
132+
{title}
133+
</Heading>
134+
<Text color="gray" mt="2" size="2">
135+
{dateFormatter.format(createdAt)}
136+
</Text>
137+
</article>
138+
</Link>
139+
</Card>
140+
),
141+
)}
142+
</Grid>
85143
</Section>
86144
</Container>
87145
);

‎src/components/home/featured-articles.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
Flex,
55
type FlexProps,
66
Heading,
7-
Inset,
87
Section,
98
Text,
109
} from '@radix-ui/themes';
@@ -39,19 +38,18 @@ export const FeaturedArticles: FC<FeaturedArticlesProps> = async (props) => {
3938
direction={{ initial: 'column-reverse', sm: 'row' }}
4039
gap="4"
4140
>
42-
<Card className="shrink-0">
43-
<Inset>
44-
{coverPhoto ? (
45-
<Image
46-
alt={title}
47-
className="h-[108px] w-[192px] sm:h-[90px] sm:w-[160px]"
48-
height={9 * 12}
49-
src={coverPhoto}
50-
width={16 * 12}
51-
/>
52-
) : null}
53-
</Inset>
54-
</Card>
41+
{coverPhoto ? (
42+
<Image
43+
alt={title}
44+
className="h-[108px] w-[192px] rounded-[var(--card-border-radius)] sm:h-[90px] sm:w-[160px]"
45+
height={9 * 12}
46+
src={coverPhoto}
47+
width={16 * 12}
48+
style={{
49+
boxShadow: 'var(--base-card-surface-box-shadow)',
50+
}}
51+
/>
52+
) : null}
5553
<Flex direction="column" gap="2">
5654
<Heading as="h3" size="4">
5755
{title}

‎src/components/timeline.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
type GridProps,
88
Heading,
99
type HeadingProps,
10-
Inset,
1110
Link,
1211
Text,
1312
} from '@radix-ui/themes';
@@ -88,19 +87,18 @@ export const Item: FC<ItemProps> = ({
8887
{media.map(({ name = '', url, thumbnail }) => (
8988
<Card key={name} asChild variant="ghost">
9089
<a aria-label={name} href={url} rel="noopener" target="_blank">
91-
<Card>
92-
<Inset>
93-
{thumbnail ? (
94-
<Image
95-
alt={name}
96-
className="object-cover"
97-
height={9 * 12}
98-
src={thumbnail}
99-
width={16 * 12}
100-
/>
101-
) : null}
102-
</Inset>
103-
</Card>
90+
{thumbnail ? (
91+
<Image
92+
alt={name}
93+
className="rounded-[var(--card-border-radius)] object-cover"
94+
height={9 * 12}
95+
src={thumbnail}
96+
width={16 * 12}
97+
style={{
98+
boxShadow: 'var(--base-card-surface-box-shadow)',
99+
}}
100+
/>
101+
) : null}
104102
</a>
105103
</Card>
106104
))}

0 commit comments

Comments
 (0)