add prev & next article buttons (#3)

solution inspired by https://github.com/markhorn-dev/astro-sphere

src/components/Article.astro

@@ -4,6 +4,7 @@ import Prose from "@components/Prose.astro";
 import FormattedDate from "@components/FormattedDate.astro";
 import { readingTime } from "@lib/utils";
 import { Icon } from "astro-icon/components";
+import RelatedArticles from "@components/RelatedArticles.astro";
 
 const { article, isPost = false } = Astro.props;
 const { Content } = await article.render();
@@ -34,7 +35,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
       {article.data.title}
     </h1>
     <div
-      class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.3s]"
+      class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.1s]"
     >
       <div
         class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
@@ -97,10 +98,11 @@ const listFormatter = new Intl.ListFormat("en-GB", {
     </div>
   </div>
   <div
-    class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.6s]"
+    class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.2s]"
   >
     <Prose>
       <Content />
     </Prose>
   </div>
+  <RelatedArticles entry={article} />
 </Layout>

src/components/RelatedArticles.astro

@@ -0,0 +1,60 @@
+---
+import { Icon } from "astro-icon/components";
+
+import { type CollectionEntry, getCollection } from "astro:content";
+
+type Props = {
+  entry: CollectionEntry<"posts"> | CollectionEntry<"projects">;
+};
+
+const { entry } = Astro.props;
+const { collection } = entry;
+
+const items = (await getCollection(collection))
+  .filter((post) => !post.data.draft)
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+const index = items.findIndex((x) => x.slug === entry.slug);
+const prev = items[(index - 1 + items.length) % items.length];
+const next = items[(index + 1) % items.length];
+---
+
+<div
+  class="mx-auto mt-8 flex max-w-prose flex-col justify-between gap-4 md:flex-row md:gap-0"
+>
+  <div class="group flex w-fit flex-row items-center justify-between gap-6">
+    <a
+      href={`/${prev.collection}/${prev.slug}`}
+      class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
+    >
+      <Icon
+        name="mdi:arrow-left"
+        title="All projects"
+        class="h-4 w-auto text-primary"
+      />
+    </a>
+    <a href={`/${prev.collection}/${prev.slug}`}>
+      <p class="animate-reveal break-words text-2xl font-medium opacity-0">
+        {prev.data.title}
+      </p>
+    </a>
+  </div>
+  <div
+    class="group flex w-fit flex-row items-center justify-between gap-6 self-end"
+  >
+    <a href={`/${next.collection}/${next.slug}`}>
+      <p class="animate-reveal break-words text-2xl font-medium opacity-0">
+        {next.data.title}
+      </p>
+    </a>
+    <a
+      href={`/${next.collection}/${next.slug}`}
+      class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
+    >
+      <Icon
+        name="mdi:arrow-right"
+        title="All projects"
+        class="h-4 w-auto text-primary"
+      />
+    </a>
+  </div>
+</div>

src/components/ShowcasePage.astro

@@ -16,7 +16,7 @@ const { content, CONSTS } = Astro.props;
     {CONSTS.TITLE}
   </h1>
   <div
-    class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.4s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
+    class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
   >
     {content.map((article: any) => <Showcase collection={article} />)}
   </div>

src/components/Skills.astro

@@ -15,12 +15,13 @@ const skills = await Promise.all(
 <ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
   {
     skills.map((entry) => (
-      <li>
+      <li class="flex items-center gap-2 rounded border border-tertiary p-2">
         <Icon
           name={entry.data.icon}
           title={entry.data.title}
-          class="h-12 w-auto text-secondary"
+          class="h-6 w-auto text-secondary"
         />
+        <p class="m-0">{entry.data.title}</p>
       </li>
     ))
   }