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, image, atUri} = Astro.props as PostLayoutProps
23
24const postSlug = Astro.url.pathname.split('/').filter(Boolean).pop() || ''
25const backupImage = `/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={image ? image : backupImage}
33 slot="head"
34 atUri={atUri}
35 />
36 <div class="post-container">
37 <main>
38 <div class="prose">
39 <GradientMask />
40 <BackButton />
41 {themeConfig.post.toc && <TableOfContents toc={toc} />}
42 <div class="title">
43 <h1>{title}</h1>
44 <div class="date">
45 <FormattedDate date={pubDate} context="post" />
46 {
47 themeConfig.post.readingTime && readingTime && (
48 <span class="reading-time">
49 <span class="separator">·</span>
50 {readingTime.text}
51 </span>
52 )
53 }
54 </div>
55 </div>
56 <article class="content">
57 <slot />
58 </article>
59
60 <h2>Comments</h2>
61 <sequoia-comments />
62 <script>import '@/components/widgets/sequoia-comments.js'</script>
63 </div>
64 </main>
65 <ImageOptimizer />
66 <FootnoteScroll />
67 <CopyCode />
68 <GitHubCard />
69 <XPOST />
70 <NeoDBCard />
71 {themeConfig.post.imageViewer && <ImageViewer />}
72 {themeConfig.post.linkCard && <LinkCard />}
73 {themeConfig.general.footer && <Footer />}
74 </div>
75</BaseLayout>
76
77<style>
78 .post-container {
79 display: flex;
80 flex-direction: column;
81 flex: 1;
82 }
83
84 .post-container main {
85 flex: 1;
86 }
87</style>