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