forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import '@/styles/global.css'
3import type { PostLayoutProps } from '@/types'
4import FormattedDate from '@/components/widgets/FormattedDate.astro'
5import FootnoteScroll from '@/components/widgets/FootnoteScroll.astro'
6import BaseHead from '@/components/layout/BaseHead.astro'
7import Footer from '@/components/layout/Footer.astro'
8import BackButton from '@/components/ui/BackButton.astro'
9import TableOfContents from '@/components/ui/TableOfContents.astro'
10import GradientMask from '@/components/ui/GradientMask.astro'
11import ImageOptimizer from '@/components/ui/ImageOptimizer.astro'
12import ImageViewer from '@/components/ui/ImageViewer.astro'
13import GitHubCard from '@/components/ui/GitHubCard.astro'
14import LinkCard from '@/components/ui/LinkCard.astro'
15import NeoDBCard from '@/components/ui/NeoDBCard.astro'
16import XPOST from '@/components/ui/XPOST.astro'
17import CopyCode from '@/components/ui/CopyCode.astro'
18import BaseLayout from '@/layouts/BaseLayout.astro'
19
20import { themeConfig } from '@/config'
21
22const { title, pubDate, readingTime, toc } = Astro.props as PostLayoutProps
23
24const postSlug = Astro.url.pathname.split('/').filter(Boolean).pop() || ''
25const ogImage = `/open-graph/${postSlug}.png`
26---
27
28<BaseLayout title={`${title} · ${themeConfig.site.title}`} description={themeConfig.site.description} type="post">
29 <BaseHead
30 title={`${title} · ${themeConfig.site.title}`}
31 description={themeConfig.site.description}
32 ogImage={ogImage}
33 slot="head"
34 />
35 <div class="post-container">
36 <main>
37 <div class="prose">
38 <GradientMask />
39 <BackButton />
40 {themeConfig.post.toc && <TableOfContents toc={toc} />}
41 <div class="title">
42 <h1>{title}</h1>
43 <div class="date">
44 <FormattedDate date={pubDate} context="post" />
45 {
46 themeConfig.post.readingTime && readingTime && (
47 <span class="reading-time">
48 <span class="separator">·</span>
49 {readingTime.text}
50 </span>
51 )
52 }
53 </div>
54 </div>
55 <article class="content">
56 <slot />
57 </article>
58 </div>
59 </main>
60 <ImageOptimizer />
61 <FootnoteScroll />
62 <CopyCode />
63 <GitHubCard />
64 <XPOST />
65 <NeoDBCard />
66 {themeConfig.post.imageViewer && <ImageViewer />}
67 {themeConfig.post.linkCard && <LinkCard />}
68 {themeConfig.general.footer && <Footer />}
69 </div>
70</BaseLayout>
71
72<style>
73 .post-container {
74 display: flex;
75 flex-direction: column;
76 flex: 1;
77 }
78
79 .post-container main {
80 flex: 1;
81 }
82</style>