80 lines
1.9 KiB
Plaintext
80 lines
1.9 KiB
Plaintext
---
|
|
import '@styles/prose.css';
|
|
|
|
import { getCollection, render } from 'astro:content';
|
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
|
|
|
// return all posts in dev, only non-draft in prod
|
|
let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.DEV );
|
|
entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
|
const posts = await Promise.all(entries.map(async entry => {
|
|
const { remarkPluginFrontmatter } = await render(entry);
|
|
return { ...entry, remarkPluginFrontmatter };
|
|
}));
|
|
---
|
|
|
|
<BaseLayout pageTitle="Posts">
|
|
<div class="prose">
|
|
<h1>All Posts</h1>
|
|
<ul>
|
|
{posts.map( (p, idx) =>
|
|
<li>
|
|
{idx > 0 && <hr></hr>}
|
|
<h2>
|
|
<a href={`/${p.id}`} data-astro-prefetch>
|
|
{p.data.title}
|
|
</a>
|
|
{p.data.draft && <span class="draft-notice">Draft</span>}
|
|
</h2>
|
|
<p>
|
|
{p.remarkPluginFrontmatter.description}
|
|
</p>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
div.prose {
|
|
max-width: var(--content-width);
|
|
padding: var(--content-padding);
|
|
margin: 0 auto;
|
|
|
|
& h2 a {
|
|
color: var(--content-color);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
h2 {
|
|
display: flex;
|
|
gap: 01rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.draft-notice {
|
|
font-size: 0.5em;
|
|
font-family: 'Figtree Variable', sans-serif;
|
|
background-color: var(--accent-color);
|
|
padding: 0.05em 0.5em;
|
|
border-radius: 20% / 50%;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
height: 1px;
|
|
margin: 2.5rem 0;
|
|
background-color: var(--content-color);
|
|
}
|
|
</style>
|