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 ImageViewer from '@/components/ui/ImageViewer.astro'
12import GitHubCard from '@/components/ui/GitHubCard.astro'
13import XPOST from '@/components/ui/XPOST.astro'
14import CopyCode from '@/components/ui/CopyCode.astro'
15import BaseLayout from '@/layouts/BaseLayout.astro'
16
17import { themeConfig } from '@/config'
18
19const { title, pubDate, readingTime, toc } = Astro.props as PostLayoutProps
20---
21
22<BaseLayout
23 title={`${title} · ${themeConfig.site.title}`}
24 description={themeConfig.site.description}
25 type="post"
26>
27 <BaseHead
28 title={`${title} · ${themeConfig.site.title}`}
29 description={themeConfig.site.description}
30 slot="head"
31 />
32 <div class="post-container">
33 <main>
34 <div class="prose">
35 <GradientMask />
36 <BackButton />
37 {themeConfig.post.toc && <TableOfContents toc={toc} />}
38 <div class="title">
39 <h1>{title}</h1>
40 <div class="date">
41 <FormattedDate date={pubDate} context="post" />
42 {
43 themeConfig.post.readingTime && readingTime && (
44 <span class="reading-time">
45 <span class="separator">·</span>
46 {readingTime.text}
47 </span>
48 )
49 }
50 </div>
51 </div>
52 <slot />
53 </div>
54 </main>
55 <FootnoteScroll />
56 <CopyCode />
57 <GitHubCard />
58 <XPOST />
59 {themeConfig.post.imageViewer && <ImageViewer />}
60 {themeConfig.general.footer && <Footer />}
61 </div>
62</BaseLayout>
63
64<style>
65 .post-container {
66 display: flex;
67 flex-direction: column;
68 flex: 1;
69 }
70
71 .post-container main {
72 flex: 1;
73 }
74</style>