Adding navigation

Author: shawn-mcgee

idea/yet_another_test.mdx

@@ -0,0 +1,6 @@
+---
+title: "Yet another test"
+pubDate: 2025-03-24
+---
+
+Published in the future! Spooky!

src/content.config.ts

@@ -5,7 +5,7 @@ import { glob } from "astro/loaders"
 const ideas = defineCollection({
   loader: glob({ pattern: "**/*.{md,mdx}", base: "./idea" }),
   schema: rssSchema.extend({
-    tags: z.array(z.string()).optional()
+    tags : z.array(z.string()).optional()
   })
 });
 

src/pages/idea/[...slug].astro

@@ -4,23 +4,42 @@ import Layout from "@layouts/Layout.astro";
 import Drawer from "@layouts/Drawer.astro";
 
 import Tags from "@components/Tags.astro";
+import { ArrowLeft, ArrowRight } from "lucide-astro";
+
+function slugOf(idea: any) {
+  let slug = idea.filePath
+  slug = slug?.replace(/^idea\//, "");
+  slug = slug?.replace(/\.mdx?$/, "");
+  return slug;
+}
 
 export async function getStaticPaths() {
-  const ideas = await getCollection("ideas");
+  const ideas = (await getCollection("ideas"))
+    .filter(idea => idea.data.pubDate)
+    .sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf())  
   
   return ideas.map(idea => {
-    let slug = idea.filePath
-    slug = slug?.replace(/^idea\//, "");
-    slug = slug?.replace(/\.mdx?$/, "");
+    function slugOf(idea: any) {
+      let slug = idea.filePath
+      slug = slug?.replace(/^idea\//, "");
+      slug = slug?.replace(/\.mdx?$/, "");
+      return slug;
+    }
+
+    const i = ideas.findIndex(each => slugOf(each) === slugOf(idea))
+    const prev = i >                0 ? ideas[i - 1] : undefined
+    const next = i < ideas.length - 1 ? ideas[i + 1] : undefined
+    const slug = slugOf(idea)
+
     return {
-      params: { slug },
-      props : { idea },
+      params: { slug             },
+      props : { idea, prev, next },
     }
   });
 }
 
-const { idea    } = Astro.props;
-const { Content } = await render(idea);
+const { idea, prev, next } = Astro.props;
+const { Content }  =  await render(idea);
 ---
 
 <Layout>
@@ -53,5 +72,40 @@ const { Content } = await render(idea);
         <Content/>
       </div>
     </div>
+
+    <!-- Footer -->
+    <div class="flex flex-col w-full items-center">
+      <!-- Spacing -->
+      <div class="h-4"></div>
+
+      <div class="flex flex-row w-3xs sm:w-2xl justify-center gap-2">
+        { prev && (
+          <a href={`/idea/${slugOf(prev)}`} class="flex flex-row flex-1 items-center rounded-lg hover:bg-base-200">
+            <ArrowLeft class="w-10 h-10"/>
+            <div class="divider divider-horizontal"></div>
+            <div class="flex flex-col flex-1 items-start">
+              <span class="text-lg sm:text-xl font-bold">
+                { prev.data.title }
+              </span>
+            </div>
+          </a>
+        )}
+  
+        { next && (
+          <a href={`/idea/${slugOf(next)}`} class="flex flex-row flex-1 items-center rounded-lg hover:bg-base-200">
+            <div class="flex flex-col flex-1 items-end">
+              <span class="text-lg sm:text-xl font-bold">
+                { next.data.title }
+              </span>
+            </div>
+            <div class="divider divider-horizontal"></div>
+            <ArrowRight class="w-10 h-10"/> 
+          </a>
+        )}
+      </div>
+
+      <!-- Spacing -->
+      <div class="h-4"></div>
+    </div>
   </Drawer>
 </Layout>

src/pages/index.astro

@@ -17,7 +17,7 @@ function slug(idea: any) {
 
 const ideas = (await getCollection("ideas"))
   .filter(idea => idea.data.pubDate)
-  .sort((a, b) => a.data.pubDate! !== b.data.pubDate! ? (a.data.pubDate! > b.data.pubDate!) ? -1 : 1 : 0)
+  .sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf())
   .slice(0, 3)
 ---
 
@@ -70,7 +70,7 @@ const ideas = (await getCollection("ideas"))
               <span class="text-lg sm:text-xl font-bold">{idea.data.title }</span>
               <div class="text-sm sm:text-lg flex flex-row gap-1 ">
                 <span>{idea.data.author                 }</span>
-                { (idea.data.author && idea.data.pubDate) ? "|" : "" }
+                { idea.data.author && "|" }
                 <span>{idea.data.pubDate?.toDateString()}</span>
               </div>
             </div>