fixed warnings and added archive sorting

src/pages/archive.astro

@@ -1,13 +1,40 @@
 ---
 import { getCollection } from "astro:content";
+const sortParam = Astro.url.search.split("=")[1];
 
 import Layout from "@layouts/Layout.astro";
 import FormattedDate from "@components/FormattedDate.astro";
 
 const posts = await getCollection("blog");
+
+switch (sortParam) {
+  case "date-des":
+    posts.sort(
+      (a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
+    );
+    break;
+  case "date-asc":
+    posts.sort(
+      (a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate)
+    );
+    break;
+  case "title":
+    posts.sort((a, b) => a.data.title - b.data.title);
+  default:
+    break;
+}
 ---
 
 <Layout title="Blog Archive">
+  <div class="archive-options">
+    <div class="select-container">
+      <select name="sort by" id="sort-by">
+        <option value="title">Title (Alphabetically)</option>
+        <option value="date-des">Publish Date (Newest First)</option>
+        <option value="date-asc">Publish Date (Oldest First)</option>
+      </select>
+    </div>
+  </div>
   {
     posts.map(({ slug, data }) => (
       <div>
@@ -17,3 +44,21 @@ const posts = await getCollection("blog");
     ))
   }
 </Layout>
+
+<script is:inline>
+  const sort = location.search.split("=")[1];
+  const sortEl = document.querySelector("#sort-by");
+
+  sortEl.value = sort || "title";
+
+  sortEl.addEventListener(
+    "change",
+    () => (window.location.href = `/archive?sort=${sortEl.value}`)
+  );
+</script>
+
+<style>
+  .archive-options {
+    padding: 10px 0 20px;
+  }
+</style>

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+export const prerender = true;
 import { getCollection } from "astro:content";
 
 import Layout from "@layouts/Layout.astro";

src/pages/posts/[slug].astro

@@ -1,5 +1,6 @@
 ---
-import { getCollection, getEntryBySlug } from "astro:content";
+export const prerender = true;
+import { getCollection } from "astro:content";
 
 import Layout from "@layouts/Layout.astro";
 import BlogHeader from "@components/BlogHeader.astro";
@@ -28,6 +29,8 @@ const { Content } = await post.render();
 
 <style is:global>
   article img {
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
     display: block;
     margin: auto;
   }