Skip to content

Commit 50d2f07

Browse files
coderdiazcoderdiaz
authored
Merge pull request #2 from rxtsel/refactor/container-component-enhancement
refactor: enhance `Container` component with `as` prop for better semantic markup
2 parents 6bfc05b + d5b6324 commit 50d2f07

File tree

6 files changed

+133
-143
lines changed

6 files changed

+133
-143
lines changed

‎src/components/Container.astro

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
---
2-
const { class: className } = Astro.props;
2+
import type { Polymorphic } from 'astro/types';
3+
4+
type LayoutTag = 'section' | 'div' | 'article' | 'header' | 'footer' | 'code';
5+
6+
type Props<Tag extends LayoutTag> = Polymorphic<{
7+
as: Tag;
8+
class?: string;
9+
}>;
10+
11+
const { as: Tag = 'div', class: className } = Astro.props as Props<LayoutTag>;
312
---
413

5-
<div class:list={[
14+
<Tag class:list={[
615
'max-w-[40rem] mx-auto px-4',
716
className,
817
]}>
918
<slot />
10-
</div>
19+
</Tag>

‎src/components/partials/Footer.astro

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
import Container from '@/components/Container.astro';
33
---
44

5-
<footer class="pt-24">
6-
<Container>
7-
<p class="text-center text-muted-foreground text-sm">
8-
&copy; {new Date().getFullYear()}. Powered by <a href="https://astro.build" target="_blank" rel="noopener noreferrer">Astro</a> and CVfolio.
9-
</p>
10-
</Container>
11-
</footer>
5+
<Container as='footer' class='pt-24'>
6+
<p class="text-center text-muted-foreground text-sm">
7+
&copy; {new Date().getFullYear()}. Powered by <a href="https://astro.build" target="_blank" rel="noopener noreferrer">Astro</a> and CVfolio.
8+
</p>
9+
</Container>

‎src/components/partials/Header.astro

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,25 @@ const isWritingPage = pathname.startsWith('/writing');
88
99
---
1010

11-
<header class="w-full">
12-
<Container class="max-w-full flex justify-center items-center">
13-
<div class="w-max fixed top-0 mt-5 bg-muted-foreground/40 backdrop-blur-md border border-border rounded-full p-1">
14-
<nav class="flex items-center">
15-
<ul class="flex items-center gap-1">
16-
<li>
17-
<a href="/" class:list={[
18-
'font-medium transition-colors block px-5 py-2',
19-
'hover:text-headings',
20-
isHomePage && 'text-headings bg-muted-foreground/40 rounded-full',
21-
]}>Home</a>
22-
</li>
23-
<li>
24-
<a href="/writing" class:list={[
25-
'font-medium transition-colors block px-5 py-2',
26-
'hover:text-headings',
27-
isWritingPage && 'text-headings bg-muted-foreground/40 rounded-full',
28-
]}>Writing</a>
29-
</li>
30-
</ul>
31-
</nav>
32-
</div>
33-
</Container>
34-
</header>
11+
<Container as='header' class="w-full max-w-full flex justify-center items-center">
12+
<div class="w-max fixed top-0 mt-5 bg-muted-foreground/40 backdrop-blur-md border border-border rounded-full p-1">
13+
<nav class="flex items-center">
14+
<ul class="flex items-center gap-1">
15+
<li>
16+
<a href="/" class:list={[
17+
'font-medium transition-colors block px-5 py-2',
18+
'hover:text-headings',
19+
isHomePage && 'text-headings bg-muted-foreground/40 rounded-full',
20+
]}>Home</a>
21+
</li>
22+
<li>
23+
<a href="/writing" class:list={[
24+
'font-medium transition-colors block px-5 py-2',
25+
'hover:text-headings',
26+
isWritingPage && 'text-headings bg-muted-foreground/40 rounded-full',
27+
]}>Writing</a>
28+
</li>
29+
</ul>
30+
</nav>
31+
</div>
32+
</Container>

‎src/pages/index.astro

Lines changed: 57 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -18,83 +18,74 @@ const talks = await getCollection('talks');
1818
---
1919

2020
<BaseLayout seo={entry.data.seo}>
21-
<section class="py-6">
22-
<Container>
23-
<Author {...DEFAULT_CONFIGURATION.author} />
24-
</Container>
25-
</section>
26-
<section class="py-6">
27-
<Container>
28-
<div class="flex flex-col gap-6">
29-
<div class="flex items-center">
30-
<span class="text-headings">About</span>
31-
</div>
32-
<div class="prose dark:prose-invert">
33-
<Content />
34-
</div>
21+
<Container as='section' class='py-6'>
22+
<Author {...DEFAULT_CONFIGURATION.author} />
23+
</Container>
24+
25+
<Container as='section' class='py-6'>
26+
<div class="flex flex-col gap-6">
27+
<div class="flex items-center">
28+
<span class="text-headings">About</span>
29+
</div>
30+
<div class="prose dark:prose-invert">
31+
<Content />
3532
</div>
36-
</Container>
37-
</section>
33+
</div>
34+
</Container>
3835
{
3936
links.length > 0 && (
40-
<section class="py-8">
41-
<Container>
42-
<div class="flex flex-col gap-5">
43-
<span class="text-headings">Contact</span>
44-
<ul class="flex flex-col gap-3">
45-
{links.map((link) => (
46-
<li class="py-0.5">
47-
<div class="flex items-center gap-5">
48-
<span class="min-w-28 text-muted-foreground">
49-
{link.data.label}
50-
</span>
51-
<a
52-
class="text-headings font-medium"
53-
rel="noopener noreferrer"
54-
target="_blank"
55-
href={link.data.url}
56-
>
57-
{link.data.name}
58-
</a>
59-
</div>
60-
</li>
61-
))}
62-
</ul>
63-
</div>
64-
</Container>
65-
</section>
37+
<Container as='section' class='py-8'>
38+
<div class="flex flex-col gap-5">
39+
<span class="text-headings">Contact</span>
40+
<ul class="flex flex-col gap-3">
41+
{links.map((link) => (
42+
<li class="py-0.5">
43+
<div class="flex items-center gap-5">
44+
<span class="min-w-28 text-muted-foreground">
45+
{link.data.label}
46+
</span>
47+
<a
48+
class="text-headings font-medium"
49+
rel="noopener noreferrer"
50+
target="_blank"
51+
href={link.data.url}
52+
>
53+
{link.data.name}
54+
</a>
55+
</div>
56+
</li>
57+
))}
58+
</ul>
59+
</div>
60+
</Container>
6661
)
6762
}
6863
{
6964
sortedJobs.length > 0 && (
70-
<section class="py-6">
71-
<Container>
72-
<div class="flex flex-col gap-5">
73-
<span class="text-headings">Work Experience</span>
74-
<ul class="flex flex-col gap-8">
75-
{sortedJobs.map((job) => (
76-
<WorkExperience entry={job} />
77-
))}
78-
</ul>
79-
</div>
80-
</Container>
81-
</section>
65+
<Container as='section' class='py-6'>
66+
<div class="flex flex-col gap-5">
67+
<span class="text-headings">Work Experience</span>
68+
<ul class="flex flex-col gap-8">
69+
{sortedJobs.map((job) => (
70+
<WorkExperience entry={job} />
71+
))}
72+
</ul>
73+
</div>
74+
</Container>
8275
)
8376
}
8477
{
8578
talks.length > 0 && (
86-
<section class="py-6">
87-
<Container>
88-
<div class="flex flex-col gap-5">
89-
<span class="text-headings">Speaking</span>
90-
<ul class="flex flex-col gap-8">
91-
{talks.map((talk) => (
92-
<Talk entry={talk} />
93-
))}
94-
</ul>
95-
</div>
96-
</Container>
97-
</section>
79+
<Container as='section' class='py-6'>
80+
<div class="flex flex-col gap-5">
81+
<span class="text-headings">Speaking</span>
82+
<ul class="flex flex-col gap-8">
83+
{talks.map((talk) => (
84+
<Talk entry={talk} />
85+
))}
86+
</ul>
87+
</div>
88+
</Container>
9889
)
9990
}
10091
</BaseLayout>

‎src/pages/writing/[...slug].astro

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,31 @@ const { Content } = await render(entry);
2020
---
2121

2222
<BaseLayout seo={entry.data.seo}>
23-
<section>
24-
<Container>
25-
<article class="flex flex-col gap-6">
26-
<div class="flex flex-col gap-2">
27-
<a href="/writing" class="transition-all text-muted-foreground hover:text-foreground pb-4 text-sm w-max">
28-
Back to writing
29-
</a>
30-
<div class="flex flex-col gap-1.5">
31-
<Avatar />
32-
<span class="text-foreground">{DEFAULT_CONFIGURATION.author.name}</span>
33-
</div>
34-
<h1 class="text-3xl font-semibold text-headings">{entry.data.title}</h1>
23+
<Container as='section'>
24+
<article class="flex flex-col gap-6">
25+
<div class="flex flex-col gap-2">
26+
<a href="/writing" class="transition-all text-muted-foreground hover:text-foreground pb-4 text-sm w-max">
27+
Back to writing
28+
</a>
29+
<div class="flex flex-col gap-1.5">
30+
<Avatar />
31+
<span class="text-foreground">{DEFAULT_CONFIGURATION.author.name}</span>
3532
</div>
36-
{entry.data.image && (
37-
<div class="relative aspect-video overflow-hidden rounded-lg">
38-
<Image
39-
src={entry.data.image}
40-
alt={entry.data.title}
41-
class="object-cover"
42-
/>
43-
</div>
44-
)}
45-
<div class="prose dark:prose-invert">
46-
<Content />
33+
<h1 class="text-3xl font-semibold text-headings">{entry.data.title}</h1>
34+
</div>
35+
{entry.data.image && (
36+
<div class="relative aspect-video overflow-hidden rounded-lg">
37+
<Image
38+
src={entry.data.image}
39+
alt={entry.data.title}
40+
class="object-cover"
41+
/>
4742
</div>
48-
</article>
49-
</Container>
50-
</section>
43+
)}
44+
<div class="prose dark:prose-invert">
45+
<Content />
46+
</div>
47+
</article>
48+
</Container>
5149
</BaseLayout>
52-
50+

‎src/pages/writing/index.astro

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,15 @@ const posts = await getCollection('posts');
1111
---
1212

1313
<BaseLayout seo={entry.data.seo}>
14-
<section class="py-6">
15-
<Container>
16-
<Author {...DEFAULT_CONFIGURATION.author} />
17-
</Container>
18-
</section>
19-
<section class="py-6">
20-
<Container>
21-
<div class="flex flex-col gap-6">
22-
<span class="text-headings">Latest posts</span>
23-
<ul class="flex flex-col gap-3">
24-
{posts.map((post) => <PostPreview entry={post} />)}
25-
</ul>
26-
</div>
27-
</Container>
28-
</section>
29-
</BaseLayout>
14+
<Container as='section' class='py-6'>
15+
<Author {...DEFAULT_CONFIGURATION.author} />
16+
</Container>
17+
<Container as='section' class='py-6'>
18+
<div class="flex flex-col gap-6">
19+
<span class="text-headings">Latest posts</span>
20+
<ul class="flex flex-col gap-3">
21+
{posts.map((post) => <PostPreview entry={post} />)}
22+
</ul>
23+
</div>
24+
</Container>
25+
</BaseLayout>

0 commit comments

Comments
 (0)