#3414 webpage: add blog overview page

Signed-off-by: Patrizio Bekerle <[email protected]>

Author: pbek

webpage/.gitignore

@@ -14,6 +14,7 @@ basement_dist
 .shared
 src/.vuepress/.cache
 src/.vuepress/.temp
+src/.vuepress/blog-data.json
 test-results
 playwright-report/
 

webpage/scripts/generate-blog-data.js

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+/**
+ * Blog Data Generator
+ *
+ * This script generates a JSON file containing blog post metadata from markdown files.
+ * It runs automatically before:
+ * - Development server starts (npm run dev)
+ * - Production build (npm run build)
+ *
+ * The generated file (src/.vuepress/blog-data.json) is:
+ * - Used by the BlogIndex.vue component to display blog posts
+ * - Ignored by git (listed in .gitignore)
+ * - Regenerated on each build/dev run
+ */
+
+import fs from "fs";
+import { globSync } from "glob";
+import markdownIt from "markdown-it";
+import meta from "markdown-it-meta";
+import { format, parse } from "date-fns";
+
+// Load all blog MD files
+const generateBlogData = () => {
+  const paths = globSync("src/blog/**/*.md");
+
+  const files = paths
+    .map((path) => {
+      // Skip the README file (Overview page)
+      if (path.endsWith("README.md")) {
+        return null;
+      }
+
+      // Read file content
+      const fileContent = fs.readFileSync(path, "utf8");
+
+      // Instantiate MarkdownIt
+      const md = new markdownIt();
+      // Add markdown-it-meta
+      md.use(meta);
+      md.render(fileContent);
+
+      // Extract title from first H1 heading
+      const h1Match = fileContent.match(/^#\s+(.+)$/m);
+      const title = md.meta.title || (h1Match ? h1Match[1] : "Untitled");
+
+      // Extract description from frontmatter or after title
+      const description = md.meta.description || "";
+
+      // Extract date from filename (format: YYYY-MM-DD)
+      const dateMatch = path.match(/(\d{4}-\d{2}-\d{2})/);
+      const dateFromFilename = dateMatch ? dateMatch[1] : "";
+
+      // Use frontmatter date if available, otherwise use filename date
+      const rawDate = md.meta.date || md.meta.order || dateFromFilename;
+
+      // Convert path to URL path
+      const urlPath = path.replace("src", "").replace(".md", ".html");
+
+      // Format date
+      let formattedDate = dateFromFilename;
+      if (rawDate) {
+        try {
+          // Try parsing with different formats
+          let parsedDate;
+          if (typeof rawDate === "string" && rawDate.includes("T")) {
+            parsedDate = parse(rawDate, "yyyy-MM-dd'T'HH", new Date());
+          } else if (dateFromFilename) {
+            parsedDate = parse(dateFromFilename, "yyyy-MM-dd", new Date());
+          }
+          if (parsedDate && !isNaN(parsedDate.getTime())) {
+            formattedDate = format(parsedDate, "yyyy-MM-dd");
+          }
+        } catch (e) {
+          // Keep date from filename if parsing fails
+        }
+      }
+
+      return {
+        path: urlPath,
+        title: title,
+        description: description,
+        date: formattedDate,
+        rawDate: dateFromFilename || rawDate,
+      };
+    })
+    .filter((item) => item !== null);
+
+  // Sort by date (newest first)
+  files.sort((a, b) => {
+    const dateA = a.rawDate || "";
+    const dateB = b.rawDate || "";
+    return String(dateB).localeCompare(String(dateA));
+  });
+
+  // Write to JSON file
+  const outputPath = "src/.vuepress/blog-data.json";
+  fs.writeFileSync(outputPath, JSON.stringify(files, null, 2));
+
+  console.log(
+    `✓ Generated blog data with ${files.length} entries at ${outputPath}`,
+  );
+};
+
+generateBlogData();

webpage/scripts/run-build.sh

@@ -17,6 +17,11 @@ echo "📦 Copying assets..."
 cp -R ../screenshots src/.vuepress/public 2>/dev/null || echo "⚠️  Screenshots not found, skipping"
 cp ../CHANGELOG.md src/changelog.md 2>/dev/null || echo "⚠️  CHANGELOG.md not found, skipping"
 
+echo ""
+echo "📝 Generating blog index data..."
+node scripts/generate-blog-data.js
+
+echo ""
 echo "🏗️  Building with VuePress 2..."
 echo ""
 

webpage/scripts/run-dev.sh

@@ -10,6 +10,11 @@ echo "📦 Copying assets..."
 cp -R ../screenshots src/.vuepress/public 2>/dev/null || echo "⚠️  Screenshots not found, skipping"
 cp ../CHANGELOG.md src/changelog.md 2>/dev/null || echo "⚠️  CHANGELOG.md not found, skipping"
 
+echo ""
+echo "📝 Generating blog index data..."
+node scripts/generate-blog-data.js
+
+echo ""
 echo "🚀 Starting VuePress dev server..."
 echo ""
 

webpage/src/.vuepress/components/BlogIndex.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
     <v-card
-      v-for="page in files"
+      v-for="page in blogPages"
       :key="page.path"
       class="mx-auto"
       variant="outlined"
     >
       <v-list-item>
         <template v-slot:default>
           <div class="overline mb-4">
-            {{ formatDate(page.frontmatter.date) }}
+            {{ page.date }}
           </div>
           <v-list-item-title class="text-h5 mb-1">
             <a :href="page.path">{{ page.title }}</a>
           </v-list-item-title>
           <v-list-item-subtitle>
-            {{ page.frontmatter.description }}
+            {{ page.description }}
           </v-list-item-subtitle>
         </template>
       </v-list-item>
@@ -24,30 +24,15 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
-import { usePageData, useSiteData } from "vuepress/client";
-import { format, parse } from "date-fns";
+import { ref, onMounted } from "vue";
+import blogData from "../blog-data.json";
 
-const siteData = useSiteData();
+const blogPages = ref([]);
 
-const files = computed(() => {
-  const pages = siteData.value.pages;
-  if (!pages || !Array.isArray(pages)) {
-    return [];
-  }
-  return [...pages]
-    .reverse()
-    .filter((p) => p.path.indexOf("/blog/") >= 0 && p.title !== "Overview");
+onMounted(() => {
+  // Load blog data from generated JSON file
+  blogPages.value = blogData;
 });
-
-const formatDate = (dateString) => {
-  try {
-    const date = parse(dateString, "yyyy-MM-dd'T'HH", new Date());
-    return format(date, "yyyy-MM-dd");
-  } catch (e) {
-    return dateString;
-  }
-};
 </script>
 
 <style scoped>

webpage/tests/blog.spec.js

@@ -7,6 +7,27 @@ test("blog overview page", async ({ page, config }) => {
   await expect(
     page.getByRole("heading", { level: 1, name: "Blog" }),
   ).toBeVisible();
+
+  // Check that blog entries are displayed
+  // There should be multiple blog post cards
+  const blogCards = page.locator(".v-card");
+  await expect(blogCards).not.toHaveCount(0);
+
+  // Check that the first blog entry has a title link
+  const firstCard = blogCards.first();
+  const firstLink = firstCard.locator("a");
+  await expect(firstLink).toBeVisible();
+  await expect(firstLink).toHaveAttribute("href", /\/blog\/.+\.html/);
+
+  // Check that blog entries have dates
+  const dateElement = firstCard.locator(".overline");
+  await expect(dateElement).toBeVisible();
+  // Date should be in YYYY-MM-DD format
+  await expect(dateElement).toHaveText(/\d{4}-\d{2}-\d{2}/);
+
+  // Verify we have at least a few blog entries (should have 80 based on generation)
+  const cardCount = await blogCards.count();
+  expect(cardCount).toBeGreaterThan(5);
 });
 
 test("blog entry - AI support", async ({ page, config }) => {