60 lines
4.3 KiB
Plaintext
60 lines
4.3 KiB
Plaintext
---
|
|
import { render } from 'astro:content';
|
|
import BaseLayout from '@/layouts/BaseLayout.astro';
|
|
import Masthead from '@/components/Masthead.astro';
|
|
import { getContentCacheKey, getExcerpt, getPostCardImage, getPostPath, getPostTaxonomy, getPublicPosts, slugify } from '@/lib/content';
|
|
import { siteConfig } from '@/site.config';
|
|
import EngagementTabs from '@/components/EngagementTabs.astro';
|
|
import TableOfContents from '@/components/TableOfContents.astro';
|
|
import Mermaid from '@/components/Mermaid.astro';
|
|
import ImageLightbox from '@/components/ImageLightbox.astro';
|
|
export async function getStaticPaths() {
|
|
const posts = await getPublicPosts();
|
|
return posts.map((post, index) => ({
|
|
params: { slug: getPostPath(post).replace(/^\/posts\//, '').replace(/\/$/, '') },
|
|
props: { post, newer: posts[index - 1], older: posts[index + 1] },
|
|
cacheKey: getContentCacheKey('post', [post, posts[index - 1], posts[index + 1]].filter(Boolean))
|
|
}));
|
|
}
|
|
const { post, newer, older } = Astro.props;
|
|
const { Content, headings } = await render(post);
|
|
const cover = getPostCardImage(post, siteConfig.cards.defaultCovers, siteConfig.site.url);
|
|
const toc = typeof post.data.toc === 'boolean' ? { enabled: post.data.toc, position: 'right' as const } : post.data.toc;
|
|
const taxonomy = getPostTaxonomy(post);
|
|
const tags = taxonomy.tags;
|
|
const date = {
|
|
year: String(post.data.pubDate.getFullYear()),
|
|
month: String(post.data.pubDate.getMonth() + 1).padStart(2, '0'),
|
|
day: String(post.data.pubDate.getDate()).padStart(2, '0')
|
|
};
|
|
const dateText = `${date.year} 年 ${date.month} 月 ${date.day} 日`;
|
|
---
|
|
<BaseLayout title={post.data.title} description={getExcerpt(post)} image={cover} type="article" math={post.data.math} webmention={post.data.webmention} navbarOverlay={Boolean(cover)}>
|
|
<Fragment slot="masthead"><Masthead article={{ title: post.data.title, date, categories: taxonomy.categories, image: cover, textTone: post.data.textTone }} /></Fragment>
|
|
<article class:list={['article-shell', 'relative pt-8 pb-14 md:pt-10 md:pb-20', { 'has-toc': toc.enabled, [`toc-${toc.position}`]: toc.enabled }]}>
|
|
<div class="sr-only" aria-hidden="true">
|
|
<time data-pagefind-meta="date" datetime={post.data.pubDate.toISOString()}>{dateText}</time>
|
|
{taxonomy.categories.length > 0 && <span data-pagefind-meta="categories">{taxonomy.categories.join(', ')}</span>}
|
|
{tags.length > 0 && <span data-pagefind-meta="tags">{tags.join(', ')}</span>}
|
|
{cover && <span data-pagefind-meta="cover">{cover}</span>}
|
|
</div>
|
|
{toc.enabled && <TableOfContents headings={headings} position={toc.position} />}
|
|
<div class="prose" data-pagefind-body><Content /></div>
|
|
<ImageLightbox />
|
|
{tags.length > 0 && <div class="mt-10 flex flex-wrap justify-center gap-2 border-t border-line pt-5 text-sm" aria-label="标签">
|
|
{tags.map((tag) => <a class="rounded-[3px] bg-[var(--color-post-tag-bg)] px-2.5 py-1 no-underline" href={`/tags/${slugify(tag)}/`}>#{tag}</a>)}
|
|
</div>}
|
|
<nav class="mt-10 grid grid-cols-1 overflow-hidden rounded-[4px] border border-line bg-raised sm:grid-cols-2" aria-label="相邻文章" data-pagefind-ignore="all">
|
|
{older ? <a class="grid min-h-24 content-center p-4 no-underline sm:border-r sm:border-line" href={getPostPath(older)}><span class="text-xs text-subtle">上一篇</span><strong class="mt-1 font-sans text-base font-normal">{older.data.title}</strong></a> : <span class="grid min-h-24 content-center p-4 sm:border-r sm:border-line"><span class="text-xs text-subtle">上一篇</span><strong class="mt-1 font-sans text-base font-normal">没有更多了</strong></span>}
|
|
{newer ? <a class="grid min-h-24 content-center border-t border-line p-4 no-underline sm:border-t-0 sm:text-right" href={getPostPath(newer)}><span class="text-xs text-subtle">下一篇</span><strong class="mt-1 font-sans text-base font-normal">{newer.data.title}</strong></a> : <span class="grid min-h-24 content-center border-t border-line p-4 sm:border-t-0 sm:text-right"><span class="text-xs text-subtle">下一篇</span><strong class="mt-1 font-sans text-base font-normal">没有更多了</strong></span>}
|
|
</nav>
|
|
<EngagementTabs
|
|
commentsEnabled={post.data.comments}
|
|
webmentionEnabled={post.data.webmention}
|
|
path={Astro.url.pathname}
|
|
target={new URL(Astro.url.pathname, siteConfig.site.url).href}
|
|
/>
|
|
</article>
|
|
<Mermaid enabled={post.data.mermaid} />
|
|
</BaseLayout>
|