Implement mini blog on home page, third try

docs/.vuepress/client.js

@@ -0,0 +1,8 @@
+import { defineClientConfig } from "vuepress/client";
+import MiniBlog from "./components/MiniBlog.vue";
+
+export default defineClientConfig({
+  enhance({ app }) {
+    app.component("MiniBlog", MiniBlog);
+  },
+});

docs/.vuepress/components/MiniBlog.vue

@@ -1,64 +1,138 @@
 <script setup>
 import { computed } from "vue";
-import { useBlogType } from "vuepress-plugin-blog2/client"; // Theme Hope Blog-Plugin
+import { useRouteLocale } from "vuepress/client";
-import { useRouteLocale, RouteLink } from "vuepress/client";
+import articles from "@temp/mini-blog.articles.json"; // kommt aus dem Build-Hook
 
-// Alle Blog-Artikel (Type "article") holen
-const articles = useBlogType("article");
-
-// Aktuelles Locale ("/" oder z. B. "/de/")
 const locale = useRouteLocale();
 
-// Nur Posts unter /news/ für das aktuelle Locale
+// Nur Artikel des aktuellen Locales + Top 3
-const newsPrefix = computed(() => `${locale.value}news/`);
-
 const items = computed(() => {
-  const list = (articles.value?.items ?? [])
+  const loc = locale.value || "/";
-    .filter((p) => p.path.startsWith(newsPrefix.value))
+  const list = (articles || []).filter(a => a.locale === loc);
-    .sort((a, b) => {
+  return list.slice(0, 3);
-      const ta = a.info?.date ? new Date(a.info.date).getTime() : 0;
-      const tb = b.info?.date ? new Date(b.info.date).getTime() : 0;
-      return tb - ta; // neueste zuerst
-    })
-    .slice(0, 3);
-  return list;
 });
 
+const articleIndex = computed(() =>
+  (locale.value === "/" ? "/article/" : `${locale.value}article/`)
+);
+
 const formatDate = (d) =>
   d ? new Date(d).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }) : "";
 </script>
 
 <template>
   <section class="mini-blog">
-    <h2 class="mini-blog__title">Neueste News</h2>
+    <h2 class="mini-blog__title">Neueste Artikel</h2>
 
-    <ul class="mini-blog__list">
+    <div v-if="items.length" class="mini-blog__grid">
-      <li v-for="post in items" :key="post.path" class="mini-blog__item">
+      <article v-for="post in items" :key="post.path" class="card">
-        <RouteLink :to="post.path" class="mini-blog__link">
+        <RouterLink :to="post.path" class="card__media" aria-label="Zum Artikel">
-          <strong class="mini-blog__headline">{{ post.info?.title }}</strong>
+          <img v-if="post.cover" :src="post.cover" :alt="post.title" loading="lazy" />
-          <span v-if="post.info?.date" class="mini-blog__date">— {{ formatDate(post.info.date) }}</span>
+          <div v-else class="card__placeholder" aria-hidden="true"></div>
-        </RouteLink>
+        </RouterLink>
 
-        <div
+        <div class="card__body">
-          v-if="post.info?.excerpt"
+          <RouterLink :to="post.path" class="card__title">
-          class="mini-blog__excerpt"
+            {{ post.title }}
-          v-html="post.info.excerpt"
+          </RouterLink>
-        />
-      </li>
-    </ul>
 
-    <RouteLink :to="newsPrefix" class="mini-blog__more">Mehr News →</RouteLink>
+          <div class="card__meta">
+            <time v-if="post.date" class="card__date">{{ formatDate(post.date) }}</time>
+            <ul v-if="post.tags?.length" class="card__tags">
+              <li v-for="t in post.tags" :key="t" class="card__tag">#{{ t }}</li>
+            </ul>
+          </div>
+
+          <p v-if="post.excerpt" class="card__excerpt" v-html="post.excerpt"></p>
+
+          <RouterLink :to="post.path" class="card__more">Weiterlesen →</RouterLink>
+        </div>
+      </article>
+    </div>
+
+    <div v-else class="mini-blog__empty">
+      <p>Keine Artikel im aktuellen Locale gefunden.</p>
+    </div>
+
+    <div class="mini-blog__footer">
+      <RouterLink :to="articleIndex" class="mini-blog__all">Alle Artikel ansehen</RouterLink>
+    </div>
   </section>
 </template>
 
 <style scoped>
+/* Abschnitt */
 .mini-blog { margin-top: 2rem; }
-.mini-blog__title { font-size: 1.25rem; margin-bottom: .75rem; }
+.mini-blog__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
-.mini-blog__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
+
-.mini-blog__item { padding: .75rem 1rem; border: 1px solid var(--vp-c-divider); border-radius: .5rem; }
+/* Grid */
-.mini-blog__link { text-decoration: none; display: inline-flex; align-items: baseline; gap: .35rem; }
+.mini-blog__grid {
-.mini-blog__headline { font-weight: 600; }
+  display: grid;
-.mini-blog__date { opacity: .7; }
+  gap: 1rem;
-.mini-blog__excerpt { margin-top: .35rem; opacity: .9; }
+  grid-template-columns: 1fr;
-.mini-blog__more { display: inline-block; margin-top: .75rem; }
+}
+@media (min-width: 720px) {
+  .mini-blog__grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+/* Card */
+.card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid var(--vp-c-divider, rgba(0,0,0,.08));
+  background: var(--vp-c-bg, #fff);
+  box-shadow: var(--vp-shadow-1, 0 1px 2px rgba(0,0,0,.05));
+  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
+}
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--vp-shadow-2, 0 8px 24px rgba(0,0,0,.12));
+  border-color: var(--vp-c-brand-1, rgba(0,0,0,.14));
+}
+
+/* Media */
+.card__media {
+  display: block;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
+}
+.card__media img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+}
+.card__placeholder {
+  width: 100%; height: 100%;
+  background: repeating-linear-gradient(45deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 10px, rgba(0,0,0,.03) 10px, rgba(0,0,0,.03) 20px);
+}
+
+/* Body */
+.card__body { padding: .9rem 1rem 1rem; display: grid; gap: .5rem; }
+.card__title {
+  font-weight: 700; line-height: 1.25; text-decoration: none;
+  color: var(--vp-c-text-1, inherit);
+}
+.card__title:hover { text-decoration: underline; }
+
+/* Meta */
+.card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; }
+.card__date { opacity: .75; }
+.card__tags { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0; }
+.card__tag {
+  padding: .1rem .45rem; border-radius: 999px; font-size: .75rem;
+  background: var(--vp-c-brand-soft, rgba(0,0,0,.06)); color: var(--vp-c-brand-1, inherit);
+}
+
+/* Excerpt */
+.card__excerpt { margin: .25rem 0 0; opacity: .9; }
+
+/* Footer */
+.card__more { margin-top: .25rem; font-weight: 600; text-decoration: none; }
+.card__more:hover { text-decoration: underline; }
+.mini-blog__footer { margin-top: 1rem; }
+.mini-blog__all { text-decoration: none; font-weight: 600; }
+
+/* Empty */
+.mini-blog__empty { opacity: .8; }
 </style>

docs/.vuepress/config.js

@@ -33,5 +33,38 @@ export default defineUserConfig({
     '/fr/': {
       lang: 'fr-FR',
     },
-  }
+  },
+  plugins: [
+    {
+      name: "collect-article-true",
+      async onPrepared(app) {
+        const rows = app.pages
+          .filter((p) => p.frontmatter?.article === true || p.frontmatter?.article === "true")
+          .map((p) => {
+            const fm = p.frontmatter || {};
+            // gängige Cover-Keys im Theme Hope Umfeld:
+            const cover = fm.cover || fm.image || fm.banner || fm.heroImage || null;
+            // kurze Beschreibung / Excerpt
+            const excerpt = p.excerpt || fm.description || "";
+            return {
+              path: p.path,
+              title: p.title || fm.title || "",
+              date: fm.date || null,          // ISO empfohlen
+              tags: Array.isArray(fm.tags) ? fm.tags : (fm.tag ? [].concat(fm.tag) : []),
+              category: Array.isArray(fm.category) ? fm.category : (fm.categories ? fm.categories : []),
+              cover,
+              excerpt,
+              locale: p.pathLocale || "/",
+            };
+          })
+          .sort((a, b) => {
+            const ta = a.date ? Date.parse(a.date) : 0;
+            const tb = b.date ? Date.parse(b.date) : 0;
+            return tb - ta;
+          });
+
+        await app.writeTemp("mini-blog.articles.json", JSON.stringify(rows, null, 2));
+      },
+    },
+  ],
 })

docs/.vuepress/styles/palette.scss

@@ -240,7 +240,7 @@ h2.large-header {
   line-height: 1.2em;
   text-align: center;
   margin-top: 0;
-  padding-top: 1.8em;
+  padding-top: 2.8em !important;
   border: 0;
 }