101 lines
3.1 KiB
Plaintext
101 lines
3.1 KiB
Plaintext
---
|
|
import "../../styles/post.scss";
|
|
import BaseLayout from "../../layouts/BaseLayout.astro";
|
|
import { type CollectionEntry, getCollection } from "astro:content";
|
|
import Timestamp from "../../components/Timestamp.astro";
|
|
import { getImage } from "astro:assets";
|
|
import TocWrapper from "../../components/TocWrapper.astro";
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getCollection("posts");
|
|
return posts.map((post) => ({
|
|
params: { slug: post.slug },
|
|
props: post,
|
|
}));
|
|
}
|
|
|
|
type Props = CollectionEntry<"posts">;
|
|
|
|
const post = Astro.props;
|
|
const { Content, remarkPluginFrontmatter, headings } = await post.render();
|
|
const { title, toc, heroImage: heroImagePath, heroAlt } = post.data;
|
|
|
|
let heroImage;
|
|
if (heroImagePath) {
|
|
heroImage = await getImage({ src: heroImagePath });
|
|
}
|
|
const datestamp = post.data.date.toLocaleDateString(undefined, {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
const excerpt = remarkPluginFrontmatter.excerpt.replaceAll("\n", "");
|
|
console.log("except", excerpt);
|
|
---
|
|
|
|
<BaseLayout title={title} pad={false} toc={toc}>
|
|
<meta slot="head" property="og:title" content={post.data.title} />
|
|
<meta slot="head" property="og:url" content={Astro.url} />
|
|
<meta slot="head" property="og:description" content={excerpt} />
|
|
<meta slot="head" property="og:type" content="article" />
|
|
<meta slot="head" property="og:locale" content="en_US" />
|
|
{heroImage && <meta slot="head" property="og:image" content={heroImage.src} />}
|
|
{heroAlt && <meta slot="head" property="og:image:alt" content={heroAlt} />}
|
|
|
|
<meta slot="head" property="keywords" content={post.data.tags.join(", ")} />
|
|
<meta slot="head" property="description" content={excerpt} />
|
|
<meta slot="head" property="article:published_time" content={datestamp} />
|
|
<meta slot="head" property="article:author" content="Michael Zhang" />
|
|
|
|
<TocWrapper toc={toc} headings={headings}>
|
|
<div class="post-container">
|
|
<h1 class="post-title">{post.data.title}</h1>
|
|
|
|
<span class="tags">
|
|
{
|
|
post.data.draft && (
|
|
<a href="/drafts" class="tag draft">
|
|
<i class="fa fa-warning" aria-hidden="true" />
|
|
<span class="text">draft</span>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
{
|
|
post.data.tags.map((tag) => (
|
|
<a href={`/tags/${tag}`} class="tag">
|
|
<i class="fa fa-tag" aria-hidden="true" />
|
|
<span class="text">{tag}</span>
|
|
</a>
|
|
))
|
|
}
|
|
</span>
|
|
|
|
<small class="post-meta">
|
|
Posted on <Timestamp timestamp={post.data.date} />
|
|
- {remarkPluginFrontmatter.minutesRead}
|
|
</small>
|
|
|
|
{
|
|
heroImage && heroAlt && (
|
|
<div style={`background-image: url(${heroImage.src});`} title={heroAlt} class="hero" />
|
|
)
|
|
}
|
|
|
|
<div class="post-content" id="post-content">
|
|
<Content />
|
|
|
|
<hr />
|
|
|
|
<script
|
|
src="https://utteranc.es/client.js"
|
|
repo="iptq/blog-comments"
|
|
issue-term="og:title"
|
|
theme="github-light"
|
|
crossorigin="anonymous"
|
|
async></script>
|
|
</div>
|
|
</div>
|
|
</TocWrapper>
|
|
</BaseLayout>
|