112 lines
3.4 KiB
Text
112 lines
3.4 KiB
Text
---
|
|
import { IconStar } from "@tabler/icons-react";
|
|
import { fetchAllPosts } from "@data/posts.js";
|
|
import { fetchAnalyticsData } from "@data/analytics.js";
|
|
import { fetchLinks } from "@data/links.js";
|
|
import { fetchGlobalData } from "@utils/data/global/index.js";
|
|
import { md } from "@utils/helpers/general.js";
|
|
import { getPopularPosts } from "@utils/getPopularPosts.js";
|
|
|
|
const analytics = await fetchAnalyticsData();
|
|
const links = await fetchLinks();
|
|
const posts = await fetchAllPosts();
|
|
const popularPosts = getPopularPosts(posts, analytics);
|
|
|
|
import AddonLinks from "@components/blocks/links/AddonLinks.astro";
|
|
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
|
|
import BlockRenderer from "@components/blocks/BlockRenderer.astro";
|
|
import Coffee from "@components/blocks/banners/Coffee.astro";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Mastodon from "@components/blocks/banners/Mastodon.astro";
|
|
import OldPost from "@components/blocks/banners/OldPost.astro";
|
|
|
|
export const prerender = true;
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await fetchAllPosts();
|
|
|
|
return posts.map((post) => {
|
|
const match = post.url.match(/^\/posts\/(\d{4})\/(.+)$/);
|
|
if (!match) throw new Error(`Invalid post URL: ${post.url}`);
|
|
|
|
const [, year, title] = match;
|
|
|
|
return {
|
|
params: { year, title },
|
|
props: { post },
|
|
};
|
|
});
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
const { globals } = await fetchGlobalData(Astro);
|
|
const { year, title } = Astro.params;
|
|
const currentUrl = Astro.url.pathname;
|
|
const htmlContent = md(post.content);
|
|
---
|
|
|
|
<Layout
|
|
pageTitle={post.title}
|
|
description={post.description}
|
|
ogImage={post.open_graph_image}
|
|
updated={post.updated}
|
|
currentUrl={currentUrl}
|
|
>
|
|
<article class="standalone">
|
|
<div class="post-meta">
|
|
{post.featured && <IconStar size={16} />}
|
|
<time datetime={post.date}>
|
|
{
|
|
new Date(post.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})
|
|
}
|
|
</time>
|
|
</div>
|
|
<h3>{post.title}</h3>
|
|
<div>
|
|
{post.old_post && <OldPost />}
|
|
{
|
|
post.image && (
|
|
<img
|
|
srcset={`
|
|
${globals.cdn_url}${post.image}?class=w200&type=webp 200w,
|
|
${globals.cdn_url}${post.image}?class=w400&type=webp 400w,
|
|
${globals.cdn_url}${post.image}?class=w800&type=webp 800w,
|
|
${globals.cdn_url}${post.image}?class=w1600&type=webp 1600w
|
|
`}
|
|
sizes="(max-width: 450px) 200px,
|
|
(max-width: 850px) 400px,
|
|
(max-width: 1000px) 800px,
|
|
1200px"
|
|
src={`${globals.cdn_url}${post.image}?class=w200`}
|
|
alt={post.image_alt?.replace(/['"]/g, "")}
|
|
class="image-banner"
|
|
loading="eager"
|
|
decoding="async"
|
|
width="200"
|
|
height="auto"
|
|
/>
|
|
)
|
|
}
|
|
<div set:html={htmlContent} />
|
|
{
|
|
post.blocks &&
|
|
post.blocks.map((block) => <BlockRenderer block={block} />)
|
|
}
|
|
{post.mastodon_url && <Mastodon url={post.mastodon_url} />}
|
|
<AssociatedMedia
|
|
artists={post.artists}
|
|
books={post.books}
|
|
genres={post.genres}
|
|
movies={post.movies}
|
|
posts={post.posts}
|
|
shows={post.shows}
|
|
/>
|
|
<Coffee />
|
|
<AddonLinks popularPosts={popularPosts} links={links} />
|
|
</div>
|
|
</article>
|
|
</Layout>
|