fixed warnings and added archive sorting

src/components/BlogHeader.astro

@@ -1,5 +1,4 @@
 ---
-import { format, add } from "date-fns";
 import FormattedDate from "@components/FormattedDate.astro";
 
 interface Props {

src/components/FormattedDate.astro

@@ -2,7 +2,7 @@
 import { format, add } from "date-fns";
 
 interface Props {
-  date: String;
+  date: Date;
 }
 
 const { date } = Astro.props;

src/components/Header.astro

@@ -1,6 +1,5 @@
 ---
 const { pathname } = Astro.url;
-console.log(pathname);
 
 const navLinks = [
   { label: "Blog", icon: "website-with-texticonImage24px", path: "/" },

src/layouts/About.astro

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

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;
   }

src/styles/global.css

@@ -178,7 +178,7 @@ li {
   margin: 0.5rem 0;
 }
 
-/* Button Styles */
+/* Input Styles */
 button,
 .link-button {
   background-color: gray;
@@ -202,6 +202,39 @@ button:active,
   scale: 0.98;
 }
 
+select {
+  /* appearance: none;
+  padding: 6px 40px 6px 10px;
+  border-radius: var(--radius);
+  border: none; */
+  font-size: 1rem;
+  /* background: none;
+  z-index: 10; */
+}
+
+/* .select-container {
+  position: relative;
+  width: max-content;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.select-container::before {
+  position: absolute;
+  content: "▾";
+  top: 0px;
+  right: 0px;
+  height: 10px;
+  width: 10px;
+  color: white;
+  font-size: 1rem;
+  height: 100%;
+  width: 30px;
+  background-color: var(--blue);
+  text-align: center;
+} */
+
 /* Text Inputs */
 
 input,