Make link slugs more readable

package.json

@@ -47,6 +47,7 @@
     "satori": "^0.10.9",
     "satori-html": "^0.3.2",
     "sharp": "^0.32.6",
+    "slugify": "^1.6.6",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {

src/components/LinkCard.astro

@@ -2,6 +2,7 @@
 import getLinkDate from "@utils/getLinkDate";
 import type { CollectionEntry } from "astro:content";
 import formatPostDate from "../utils/formatPostDate";
+import getLinkSlug from "@utils/getLinkSlug";
 
 export type Props = {
     link: CollectionEntry<"links">;
@@ -22,7 +23,7 @@ const l = link;
     </hgroup>
     <Content />
     <p class="date u-slub">
-        <a href={`/links/${l.slug}`}>
+        <a href={`/links/${getLinkSlug(l)}`}>
             <time datetime={getLinkDate(l.slug).toISOString()}>
                 {formatPostDate(getLinkDate(l.slug))}
             </time>

src/pages/links/[slug].astro

@@ -3,13 +3,14 @@ import LinkCard from "@components/LinkCard.astro";
 import Layout from "@layouts/Base.astro";
 import formatPostDate from "@utils/formatPostDate";
 import getLinkDate from "@utils/getLinkDate";
+import getLinkSlug from "@utils/getLinkSlug";
 import { type CollectionEntry, getCollection } from "astro:content";
 import unMarkdown from "lib/utils/unMarkdown";
 
 export async function getStaticPaths() {
     const links = await getCollection("links");
-    return links.map((entry) => ({
-        params: { slug: entry.slug },
+    return links.map((entry: CollectionEntry<"links">) => ({
+        params: { slug: getLinkSlug(entry) },
         props: { entry },
     }));
 }

src/utils/getLinkSlug.ts

@@ -0,0 +1,12 @@
+import type { CollectionEntry } from "astro:content";
+import slugify from "slugify";
+import getLinkDate from "./getLinkDate";
+
+export default function getLinkSlug(link: CollectionEntry<'links'>) {
+    const date = getLinkDate(link.slug);
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+    return slugify(
+        `${date.getFullYear()}-${month}-${day}-${link.data.title}`,
+    ).toLowerCase();
+}