-
Notifications
You must be signed in to change notification settings - Fork 0
/
[...slug].astro
47 lines (41 loc) · 1.29 KB
/
[...slug].astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
---
import { type CollectionEntry, getCollection } from 'astro:content';
import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
import Layout from '@/layouts/Layout.astro';
import Main from '@/components/Main.astro';
import Article from '@/components/Article.astro';
import Toc from '@/components/Toc.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug },
props: post,
}));
}
type Props = CollectionEntry<'blog'>;
const post = Astro.props;
const { Content, headings } = await post.render();
const pageTitle = `${post.data.title} | ${SITE_TITLE}`;
const pageDescription = post.data.description || SITE_DESCRIPTION;
const ogImage =
new Date(post.data.pubDate) >= new Date('2024-01-01')
? new URL(`/og/${post.slug}.png`, Astro.url.origin).toString()
: new URL('/og.jpg', Astro.url.origin).toString();
---
<Layout title={pageTitle} description={pageDescription} isHome={false} image={ogImage}>
<Main>
<Article {...post.data}>
<Toc headings={headings} />
<Content />
</Article>
</Main>
</Layout>
<style lang="scss">
@use '@/styles/variables' as var;
@use '@/styles/extension' as *;
:global(img) {
display: block;
max-width: 100%;
height: auto;
}
</style>