blog posts archive page

src/components/BlogPost.astro

···
     display: block;
     border: 10px double;
     text-decoration: none;
+    margin-bottom: 13px;
+  }
+
+  a:last-child {
+    margin-bottom: 0;
   }
 
   article {
     padding: 13px 15px;
+    overflow: hidden;
+  }
+
+  article h3 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   time {

src/layouts/SinglePage.astro

···
+---
+import "../styles/main.css";
+import Toolbar from "../components/Toolbar.astro";
+
+const { backlink } = Astro.props;
+---
+
+<Toolbar {backlink} />
+<div class="wrapper bwcontainer">
+  <header class="bwbox">
+    <slot name="header" />
+  </header>
+  <main class="bwbox">
+    <slot />
+  </main>
+</div>
+
+<style>
+  .wrapper {
+    max-width: 82ch;
+    margin: 0 auto;
+  }
+</style>

src/pages/blog.astro

···
+---
+import { getCollection } from "astro:content";
+import Base from "../components/Base.astro";
+import SinglePage from "../layouts/SinglePage.astro";
+import BlogPost from "../components/BlogPost.astro";
+
+const post = await getCollection("blog").then((x) =>
+  x.sort(
+    (a, b) =>
+      (b.data.pub as unknown as number) - (a.data.pub as unknown as number),
+  ),
+);
+---
+
+<Base
+  title="BLOG"
+  graph={{
+    description: "Blog posts and such.",
+  }}
+>
+  <SinglePage>
+    <h1 slot="header" class="center">Blog posts</h1>
+    {
+      post.map((post) => (
+        <BlogPost
+          url={`/blog/${post.id}`}
+          title={post.data.title}
+          time={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`}
+        />
+      ))
+    }
+  </SinglePage>
+</Base>

src/pages/home.astro

···
           title={post[0].data.title}
           time={`${post[0].data.pub.getFullYear()}-${post[0].data.pub.getMonth() + 1}-${post[0].data.pub.getDate()}`}
         />
+        <a href="/blog">View all posts</a>
       </div>
     </main>
   </div>

src/styles/main.css

···
   font-size: 1.5rem;
 }
 
+h3 {
+  font-size: 1.25rem;
+}
+
 p,
 li {
   font-size: 1rem;