Add images; update urls

app/pages/articles/[slug].vue

@@ -83,9 +83,10 @@
       </div>
 
       <!-- Article Body -->
-      <div class="prose prose-lg dark:prose-invert max-w-none">
-        <ContentRenderer :value="article" />
-      </div>
+      <ContentRenderer
+        :value="article"
+        class="prose prose-lg prose-gray dark:prose-invert max-w-none"
+      />
 
       <!-- Tags -->
       <div
@@ -122,25 +123,13 @@
 const route = useRoute();
 const slug = route.params.slug;
 
-const getArticleSlug = (article) => {
-  if (!article) return "";
-  const candidate =
-    article.slug ||
-    article.stem ||
-    article._path ||
-    article._id ||
-    article.id ||
-    "";
-  const segments = candidate.split("/").filter(Boolean);
-  return segments[segments.length - 1] || "";
-};
-
 // Fetch article from Nuxt Content
 const { data: article, pending } = await useAsyncData(
   `article-${slug}`,
   async () => {
+    // Query for the specific article by stem (filename without extension)
     const articles = await queryCollection("articles").all();
-    return articles.find((a) => getArticleSlug(a) === slug);
+    return articles.find((a) => a.stem === slug);
   },
 );
 

app/pages/articles/index.vue

@@ -43,7 +43,9 @@
               {{ article.title }}
             </NuxtLink>
 
-            <p class="text-gray-600 dark:text-gray-400 mt-2">
+            <p
+              class="text-gray-600 dark:text-gray-400 mt-2 font-serif text-lg leading-relaxed"
+            >
               {{ article.description }}
             </p>
 
@@ -117,20 +119,14 @@ const getArticleTitle = (article) => {
 // Resolve the correct Nuxt route for an article entry
 const getArticleSlug = (article) => {
   if (!article) return "";
-  const candidate =
-    article.slug ||
-    article.stem ||
-    article._path ||
-    article._id ||
-    article.id ||
-    "";
-  const segments = candidate.split("/").filter(Boolean);
-  return segments[segments.length - 1] || "";
+  // stem is the filename without extension
+  return article.stem || "";
 };
 
 const getArticlePath = (article) => {
+  if (!article) return "/articles";
   const slug = getArticleSlug(article);
-  return slug ? `/articles/${slug}` : "/articles";
+  return `/articles/${slug}`;
 };
 
 // Filter and search articles