#3414 webpage: add more blog overview page styling

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

Author: pbek

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

@@ -1,25 +1,14 @@
 <template>
-  <div>
-    <v-card
-      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">
-            {{ 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.description }}
-          </v-list-item-subtitle>
-        </template>
-      </v-list-item>
-    </v-card>
+  <div class="blog-index">
+    <article v-for="page in blogPages" :key="page.path" class="blog-post">
+      <time class="blog-date">{{ page.date }}</time>
+      <h2 class="blog-title">
+        <a :href="page.path" class="blog-link">{{ page.title }}</a>
+      </h2>
+      <p v-if="page.description" class="blog-description">
+        {{ page.description }}
+      </p>
+    </article>
   </div>
 </template>
 
@@ -36,7 +25,56 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.v-card {
-  margin: 10px 0;
+.blog-index {
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+
+  h2 {
+    padding-top: 0;
+  }
+}
+
+.blog-post {
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--c-border, #eaecef);
+}
+
+.blog-post:last-child {
+  border-bottom: none;
+}
+
+.blog-date {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--c-text-lighter, #7f8c8d);
+  margin-bottom: 0.15rem;
+}
+
+.blog-title {
+  margin: 0 0 0.15rem;
+  font-size: 1.35rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.blog-link {
+  color: var(--c-text, #2c3e50);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: border-color 0.3s;
+}
+
+.blog-link:hover {
+  color: var(--c-brand, #3eaf7c);
+  border-bottom-color: var(--c-brand, #3eaf7c);
+}
+
+.blog-description {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--c-text, #2c3e50);
 }
 </style>

webpage/tests/blog.spec.js

@@ -9,25 +9,25 @@ test("blog overview page", async ({ page, config }) => {
   ).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);
+  // There should be multiple blog post articles
+  const blogPosts = page.locator("article.blog-post");
+  await expect(blogPosts).not.toHaveCount(0);
 
   // Check that the first blog entry has a title link
-  const firstCard = blogCards.first();
-  const firstLink = firstCard.locator("a");
+  const firstPost = blogPosts.first();
+  const firstLink = firstPost.locator("a.blog-link");
   await expect(firstLink).toBeVisible();
   await expect(firstLink).toHaveAttribute("href", /\/blog\/.+\.html/);
 
   // Check that blog entries have dates
-  const dateElement = firstCard.locator(".overline");
+  const dateElement = firstPost.locator("time.blog-date");
   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);
+  const postCount = await blogPosts.count();
+  expect(postCount).toBeGreaterThan(5);
 });
 
 test("blog entry - AI support", async ({ page, config }) => {