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