feat: render description links (#22)

Author: JacobCoffee

src/components/BaseHead.astro

@@ -5,8 +5,9 @@ interface Props {
   image?: string;
 }
 
-import { withBase } from "../lib/utils";
-const { title, description = "The official blog of the Python core development team.", image } = Astro.props;
+import { withBase, stripDescriptionLinks } from "../lib/utils";
+const { title, description: rawDescription = "The official blog of the Python core development team.", image } = Astro.props;
+const description = stripDescriptionLinks(rawDescription);
 const baseUrl = import.meta.env.DEV ? Astro.url.origin : Astro.site;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const ogImage = image ? new URL(image, baseUrl) : new URL(withBase("/og-default.png"), baseUrl);

src/components/BlogPostCard.astro

@@ -1,5 +1,5 @@
 ---
-import { formatDate, postUrl, slugify, withBase } from "../lib/utils";
+import { formatDate, postUrl, slugify, withBase, renderDescriptionLinks } from "../lib/utils";
 
 interface Props {
   slug: string;
@@ -29,7 +29,7 @@ const { slug, title, publishDate, author, description, tags, showEditLink = true
         <time datetime={publishDate}>{formatDate(publishDate)}</time>
       </div>
       {description && (
-        <p class="mt-1.5 line-clamp-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">{description}</p>
+        <p class="mt-1.5 line-clamp-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400" set:html={renderDescriptionLinks(description)} />
       )}
       {tags && tags.length > 0 && (
         <div class="mt-2.5 flex flex-wrap gap-1.5">

src/lib/utils.ts

@@ -34,6 +34,23 @@ export function postUrl(slug: string, publishDate: string | Date): string {
   return `/${year}/${month}/${slug}`;
 }
 
+/**
+ * Converts markdown-style links [text](url) in a description to HTML anchor tags.
+ */
+export function renderDescriptionLinks(desc: string): string {
+  return desc.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" class="text-amber-700 underline hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300">$1</a>',
+  );
+}
+
+/**
+ * Strips markdown-style links [text](url) to plain text for meta tags.
+ */
+export function stripDescriptionLinks(desc: string): string {
+  return desc.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
+}
+
 export function slugify(text: string): string {
   return text
     .normalize("NFD")

src/pages/index.astro

@@ -3,7 +3,7 @@ export const prerender = true;
 
 import BaseLayout from "../layouts/BaseLayout.astro";
 import PythonLogo from "../components/PythonLogo.astro";
-import { formatDate, postUrl, withBase } from "../lib/utils";
+import { formatDate, postUrl, withBase, renderDescriptionLinks } from "../lib/utils";
 import { getCollection } from "astro:content";
 
 const allPosts = await getCollection("posts");
@@ -66,9 +66,7 @@ const authors = new Set(posts.map((p) => p.data.author));
             </div>
 
             {featured.data.description && (
-              <p class="mt-3 max-w-2xl text-base leading-relaxed text-zinc-600 dark:text-zinc-400 sm:text-lg">
-                {featured.data.description}
-              </p>
+              <p class="mt-3 max-w-2xl text-base leading-relaxed text-zinc-600 dark:text-zinc-400 sm:text-lg" set:html={renderDescriptionLinks(featured.data.description)} />
             )}
           </a>
 
@@ -132,7 +130,7 @@ const authors = new Set(posts.map((p) => p.data.author));
               <time datetime={post.data.publishDate.toISOString()}>{formatDate(post.data.publishDate.toISOString())}</time>
             </div>
             {post.data.description && (
-              <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">{post.data.description}</p>
+              <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400" set:html={renderDescriptionLinks(post.data.description)} />
             )}
           </article>
         ))}