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

src/pages/404.astro

@@ -17,12 +17,12 @@ import { Icon } from "astro-icon/components";
           404
         </h2>
         <h3
-          class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.3s]"
+          class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.1s]"
         >
           Content not found
         </h3>
       </div>
-      <div class="animate-reveal opacity-0 [animation-delay:0.6s]">
+      <div class="animate-reveal opacity-0 [animation-delay:0.2s]">
         <a
           href="/"
           class="flex items-center gap-1 rounded bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary"

src/pages/cv.astro

@@ -20,9 +20,7 @@ import Prose from "@components/Prose.astro";
       <div
         class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
       >
-        <div
+        <div class="flex animate-reveal items-center gap-2 opacity-0">
-          class="flex animate-reveal items-center gap-2 opacity-0 [animation-delay:0.3s]"
-        >
           <Icon name="mdi:email" />
           <Link href="mailto:hello@troylusty.com">
             <p>hello@troylusty.com</p>
@@ -35,7 +33,7 @@ import Prose from "@components/Prose.astro";
       </div>
     </div>
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
+  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
     <Prose>
       <h2>About me</h2>
       <p>
@@ -56,13 +54,13 @@ import Prose from "@components/Prose.astro";
       </p>
     </Prose>
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.5s]">
+  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
     <Prose>
       <h2>Education</h2>
       <Education />
     </Prose>
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.6s]">
+  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
     <Prose>
       <h2>Skills</h2>
       <p>
@@ -71,12 +69,11 @@ import Prose from "@components/Prose.astro";
         Engine. Using either real-time or offline rendering techniques. In
         addition to this, I am also very interested in web development.
       </p>
-      <p>Please note, this skills section is a only placeholder.</p>
       <Skills />
       <ul><li>Full drivers licence for cars and motorbikes</li></ul>
     </Prose>
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.7s]">
+  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
     <Prose>
       <h2>Experience</h2>
       <Work />

src/pages/index.astro

@@ -18,7 +18,7 @@ const projects = (await getCollection("projects"))
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <section class="mb-32" id="postHero" aria-labelledby="featured-projects">
-    <div class="flex flex-row items-center justify-between gap-6">
+    <div class="group flex flex-row items-center justify-between gap-6">
       <a href="/projects">
         <h2
           class="animate-reveal break-words text-4xl font-medium opacity-0"
@@ -29,7 +29,7 @@ const projects = (await getCollection("projects"))
       </a>
       <a
         href="/projects"
-        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.3s] hover:scale-90 hover:bg-tertiary"
+        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"
@@ -39,16 +39,16 @@ const projects = (await getCollection("projects"))
       </a>
     </div>
     <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"
     >
       {projects.map((project) => <Showcase collection={project} />)}
     </div>
   </section>
   <section aria-labelledby="recent-posts">
-    <div class="flex flex-row items-center justify-between gap-6">
+    <div class="group flex flex-row items-center justify-between gap-6">
       <a href="/posts">
         <h2
-          class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.5s]"
+          class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.2s]"
           id="recent-posts"
         >
           Recent posts
@@ -56,7 +56,7 @@ const projects = (await getCollection("projects"))
       </a>
       <a
         href="/posts"
-        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.8s] hover:scale-90 hover:bg-tertiary"
+        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.2s] group-hover:scale-90 group-hover:bg-tertiary"
       >
         <Icon
           name="mdi:arrow-right"
@@ -66,7 +66,7 @@ const projects = (await getCollection("projects"))
       </a>
     </div>
     <div
-      class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.9s] 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.3s] 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"
     >
       {posts.map((post) => <Showcase collection={post} />)}
     </div>

src/styles/tailwind.css

@@ -20,10 +20,4 @@
       --accent: 60deg 2.44% 16.08%;
     }
   }
-  :root[data-theme="tritanopia"] {
-    --primary: 216deg 27.78% 7.06%;
-    --secondary: 210deg 66.67% 96.47%;
-    --tertiary: 213.75deg 7.84% 60%;
-    --accent: 130.49deg 55.68% 36.27%;
-  }
 }