blog archive page

src/pages/archive.astro

@@ -0,0 +1,25 @@
+---
+import { format } from "date-fns";
+import Layout from "../layouts/Layout.astro";
+
+const response = await fetch(
+  `https://api.cosmicjs.com/v2/buckets/${
+    import.meta.env.BUCKET_SLUG
+  }/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${
+    import.meta.env.BUCKET_READ_KEY
+  }&skip=5&limit=25`
+);
+
+const posts = await response.json();
+---
+
+<Layout title="Blog Archive">
+  {
+    posts.objects.map((post) => (
+      <div>
+        <a href={`/${post.slug}`}>{post.title}</a> -{" "}
+        {format(new Date(post.published_at), "MMM do, y")}
+      </div>
+    ))
+  }
+</Layout>

src/pages/index.astro

@@ -9,7 +9,7 @@ const response = await fetch(
     import.meta.env.BUCKET_SLUG
   }/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${
     import.meta.env.BUCKET_READ_KEY
-  }&limit=10`
+  }&limit=5`
 );
 
 const posts = await response.json();
@@ -33,5 +33,6 @@ const posts = await response.json();
         </article>
       ))
     }
+    {posts.objects.length < 5 ? null : <a href="/archive">More Posts</a>}
   </div>
 </Layout>