blog
This commit is contained in:
parent
1292161664
commit
4171da453d
3 changed files with 90 additions and 0 deletions
38
astro/src/layouts/BlogPost.astro
Normal file
38
astro/src/layouts/BlogPost.astro
Normal file
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import FormattedDate from "../components/FormattedDate.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
|
||||
type Props = CollectionEntry<"blog">["data"];
|
||||
|
||||
const { title, description, pubDate, updatedDate } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={title}>
|
||||
<main>
|
||||
<div class="wrapper">
|
||||
<article>
|
||||
<div class="prose">
|
||||
<div class="content" style="text-align: center;">
|
||||
<h3>{description}</h3>
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
20
astro/src/pages/blog/[...slug].astro
Normal file
20
astro/src/pages/blog/[...slug].astro
Normal file
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import BlogPost from "../../layouts/BlogPost.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
type Props = CollectionEntry<"blog">;
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
---
|
||||
|
||||
<BlogPost {...post.data}>
|
||||
<Content />
|
||||
</BlogPost>
|
32
astro/src/pages/blog/index.astro
Normal file
32
astro/src/pages/blog/index.astro
Normal file
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
const posts = (await getCollection("blog")).sort(
|
||||
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<Layout title="blog">
|
||||
<div class="content">
|
||||
<main>
|
||||
<h3 class="subtitle" style="text-align: center;">
|
||||
This is where I post things and stuff
|
||||
</h3>
|
||||
<h4 style="text-align: center;">
|
||||
This list is in chronological order oldest first, newest last.
|
||||
</h4>
|
||||
<hr />
|
||||
<a href="/rss.xml"><h3 style="text-align: center;">RSS Feed</h3></a>
|
||||
<hr />
|
||||
{
|
||||
posts.map((post) => (
|
||||
<>
|
||||
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
|
||||
<br>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
Loading…
Reference in a new issue