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
29 title={`${title} · ${themeConfig.site.title}`}
30 description={themeConfig.site.description}
31 type="post"
32>
33 <BaseHead
34 title={`${title} · ${themeConfig.site.title}`}
35 description={themeConfig.site.description}
36 ogImage={ogImage}
37 slot="head"
38 />
39 <div class="post-container">
40 <main>
41 <div class="prose">
42 <GradientMask />
43 <BackButton />
44 {themeConfig.post.toc && <TableOfContents toc={toc} />}
45 <div class="title">
46 <h1>{title}</h1>
47 <div class="date">
48 <FormattedDate date={pubDate} context="post" />
49 {
50 themeConfig.post.readingTime && readingTime && (
51 <span class="reading-time">
52 <span class="separator">·</span>
53 {readingTime.text}
54 </span>
55 )
56 }
57 </div>
58 </div>
59 <slot />
60 </div>
61 </main>
62 <ImageOptimizer />
63 <FootnoteScroll />
64 <CopyCode />
65 <GitHubCard />
66 <XPOST />
67 <NeoDBCard />
68 {themeConfig.post.imageViewer && <ImageViewer />}
69 {themeConfig.post.linkCard && <LinkCard />}
70 {themeConfig.general.footer && <Footer />}
71 </div>
72</BaseLayout>
73
74<style>
75 .post-container {
76 display: flex;
77 flex-direction: column;
78 flex: 1;
79 }
80
81 .post-container main {
82 flex: 1;
83 }
84</style>