94 lines
2.4 KiB
Plaintext
94 lines
2.4 KiB
Plaintext
---
|
|
import type { GetStaticPaths } from "astro";
|
|
import { getCollection } from "astro:content";
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import dayjs from "dayjs";
|
|
import utc from "dayjs/plugin/utc";
|
|
|
|
export const getStaticPaths = (async () => {
|
|
const fics = await getCollection("fics");
|
|
return fics.map(fic => ({
|
|
params: { ficId: fic.id },
|
|
props: { fic },
|
|
}));
|
|
}) satisfies GetStaticPaths;
|
|
|
|
const { fic } = Astro.props;
|
|
const chapters = await getCollection("chapters", ({ id }) => {
|
|
return id.startsWith(fic.id);
|
|
});
|
|
chapters.length = Math.min(chapters.length, 5);
|
|
chapters.sort((a, b) => a.data.sortOrder - b.data.sortOrder);
|
|
dayjs.extend(utc);
|
|
---
|
|
<Layout title={fic.data.title}>
|
|
<Fragment slot="header" set:html={`<link rel="alternate" type="application/rss+xml" title="${fic.data.title}" href=${new URL(`/fics/${Astro.params.ficId}/rss.xml`, Astro.site)} />`} />
|
|
<main>
|
|
<section>
|
|
<h1>{fic.data.title}</h1>
|
|
<header class="info">
|
|
<p>
|
|
<span class="title">Fandom</span>
|
|
<span class="data">{fic.data.series.join(", ")}</span>
|
|
</p>
|
|
<time datetime={dayjs(fic.data.publishedAt).utc(true).toISOString()}>
|
|
<span class="title">Date</span>
|
|
<span class="data">{dayjs(fic.data.publishedAt).utc(true).format("MMMM DD, YYYY")}</span>
|
|
</time>
|
|
<div>
|
|
<span class="title">Summary</span>
|
|
<blockquote class="data">
|
|
<Fragment set:html={fic.data.summary} />
|
|
</blockquote>
|
|
</div>
|
|
<div class="links">
|
|
<a class="button" href={`/fics/${chapters[0].id}`}>start reading</a>
|
|
<a class="button" href={`/fics/${Astro.params.ficId}/rss.xml`}>rss feed</a>
|
|
</div>
|
|
</header>
|
|
|
|
<h2>chapters</h2>
|
|
<ul>
|
|
{chapters.map(chapter => (
|
|
<li><a href={chapter.id}>{chapter.data.title}</a></li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
</Layout>
|
|
|
|
<style>
|
|
main {
|
|
display: grid;
|
|
place-content: center;
|
|
|
|
section {
|
|
max-width: 80ch;
|
|
|
|
.info {
|
|
> * {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.data {
|
|
flex: 2;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 1rem 2rem;
|
|
}
|
|
|
|
.links {
|
|
align-content: center;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |