Merge pull request #224 from Ocelot-Social-Community/220-refine-blog

feat(content): refine blog

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

@@ -0,0 +1,159 @@
+<script setup>
+import { computed } from "vue";
+import { useRouteLocale } from "vuepress/client";
+import articles from "@temp/mini-blog.articles.json"; // kommt aus dem Build-Hook
+
+const locale = useRouteLocale();
+
+const props =  defineProps({
+  title: { type: String},
+  showAllPostsButtonTitle: { type: String},
+});
+
+// Nur Artikel des aktuellen Locales + Top 3
+const items = computed(() => {
+  const loc = locale.value || "/";
+  const list = (articles || []).filter(a => a.locale === loc);
+  return list.slice(0, 3);
+});
+
+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>
+  <div class="mini-blog__div" v-if="items.length">
+    <h2 class="large-header">{{ title }}</h2>
+
+    <section class="mini-blog">
+      <div v-if="items.length" class="mini-blog__grid">
+        <article v-for="post in items" :key="post.path" class="card">
+          <RouterLink :to="post.path" class="card__media" aria-label="Zum Artikel">
+            <img v-if="post.cover" :src="post.cover" :alt="post.title" loading="lazy" />
+            <div v-else class="card__placeholder" aria-hidden="true"></div>
+          </RouterLink>
+
+          <div class="card__body">
+            <RouterLink :to="post.path" class="card__title">
+              {{ post.title }}
+            </RouterLink>
+
+            <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> -->
+      <div class="center mini-blog__footer">
+        <a :href="articleIndex">
+          <Button>
+            {{ showAllPostsButtonTitle }}
+          </Button>
+        </a>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* Abschnitt */
+.mini-blog {
+  max-width: 1100px;
+  margin: 2rem auto 0 auto;
+}
+.mini-blog__div {
+  padding-top: 2.8em;
+}
+
+/* Grid */
+.mini-blog__grid {
+  margin: auto 20px;
+  display: grid;
+  gap: 1.8rem 1.2rem;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 720px) {
+  .mini-blog__grid { grid-template-columns: repeat(2, 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: 1.0rem;
+}
+
+/* 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

@@ -85,6 +85,7 @@ h1, h2, h3, h4 {
   border-style: solid;
   border-radius: 5px;
   padding: 12px 16px;
+  margin-top: 12px;
   cursor: grab;
 
   html[data-theme="dark"] & {
@@ -240,7 +241,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;
 }
 

docs/de/README.md

@@ -184,7 +184,7 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
 </div>
 
 <div class="all-features">
-  <a id="hero-button" href="/de/features/">
+  <a href="/de/features/">
     <Button>
       Alle Funktionen ansehen
     </Button>
@@ -276,7 +276,7 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
     <i>Ocelot.social</i> kannst du auf einem eigenen Server hosten oder es hosten lassen.<br>
     Schau dir an, welche Möglichkeiten es gibt:
   </p>
-  <a id="hero-button" href="/de/get-started/">
+  <a href="/de/get-started/">
     <Button>
       Los geht’s
     </Button>
@@ -287,6 +287,12 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
 
 XXX -->
 
+<MiniBlog
+   class="large-header"
+  :title="'Neueste Beiträge'"
+  :show-all-posts-button-title="'Alle Beiträge ansehen'"
+/>
+
 <h2 class="large-header">Spenden</h2>
 
 <div class="center">

docs/de/news/2025-07-05-release-3-11-0-with-numerous-improvements/README.md

@@ -9,6 +9,7 @@ category:
 tag:
   - Releases
 cover: /blog/ocelot-social-release-v3-11-0.jpg
+coverAlt: "Ocelot.social Version 3.11.0"
 title: "Version 3.11.0 mit zahlreichen Verbesserungen"
 description: "Diese Version der ocelot.social-Software verbessert die Stabilität und Nutzung des Chats und behebt einige Fehler."
 ---

docs/de/news/2025-08-18-tech-day-fusion-von-utopia-und-ocelot/README.md

@@ -9,6 +9,7 @@ category:
 tag:
   - Releases
 cover: /blog/fusion-of-utopia-and-ocelot.jpeg
+coverAlt: "Fusion von Utopia und Ocelot"
 title: "Tech-Day – Fusion von Utopia und Ocelot!?"
 description: "An diesem Tech-Day vom 21.8.2025 beleuchten wir die Frage, ob Utopia Map und ocelot.social zusammengebracht werden können. Wir freuen uns auf deine Teilnahme."
 ---
@@ -18,7 +19,12 @@ Diese Woche findet im Rahmen des [**Tech-Days**](https://www.busfaktor.org/de/pr
 **Fusion von Utopia und Ocelot!?**  
 Referent: Anton Tranelis
 
-Am Donnerstag, den 21.8.2025, um 14 Uhr (MESZ), [**online**](https://cloud.mfwerk.de/index.php/apps/bbb/b/E794JMdzi3iQc4xE) (wird aufgezeichnet)
+Am Donnerstag, den 21.8.2025, um 14 Uhr (MESZ), **online**
+
+## Veröffentlichung
+
+- Aufzeichnung auf [Youtube](https://www.youtube.com/watch?v=NI-nAeYkmQk&list=PL5Xhli7oRz_UvRSDp61oTloWM0fc5e8Yy)
+- [Präsentation](https://hack.utopia-lab.org/s/vYs1BNmFi)
 
 ## Worum geht es?
 

docs/de/news/README.md

@@ -1,7 +1,7 @@
 ---
 home: true
 article: false
-layout: Blog
+layout: BlogHome
 sidebar: false
 lang: de-DE
 title: News

docs/en/README.md

@@ -183,7 +183,7 @@ description: A free and open source software with which you can operate a social
 </div>
 
 <div class="all-features">
-  <a id="hero-button" href="/en/features/">
+  <a href="/en/features/">
     <Button>
       View all functions
     </Button>
@@ -277,7 +277,7 @@ description: A free and open source software with which you can operate a social
     You can host <i>ocelot.social</i> on your own server or have it hosted.<br>
     Take a look at the options available:
   </p>
-  <a id="hero-button" href="/en/get-started/">
+  <a href="/en/get-started/">
     <Button>
       Let’s go
     </Button>
@@ -288,6 +288,11 @@ description: A free and open source software with which you can operate a social
 
 XXX -->
 
+<MiniBlog
+  :title="'Latest posts'"
+  :show-all-posts-button-title="'Show all posts'"
+/>
+
 <h2 class="large-header">Donate</h2>
 
 <div class="center">

docs/en/news/2025-07-05-release-3-11-0-with-numerous-improvements/README.md

@@ -9,6 +9,7 @@ category:
 tag:
   - Releases
 cover: /blog/ocelot-social-release-v3-11-0.jpg
+coverAlt: "Ocelot.social version 3.11.0"
 title: "Version 3.11.0 with numerous improvements"
 description: "This version of the ocelot.social software improves the stability and usability of the chat and fixes several bugs."
 ---

docs/en/news/2025-08-18-tech-day-fusion-von-utopia-und-ocelot/README.md

@@ -9,6 +9,7 @@ category:
 tag:
   - Releases
 cover: /blog/fusion-of-utopia-and-ocelot.jpeg
+coverAlt: "Fusion of Utopia and Ocelot"
 title: "Tech-Day – Fusion of Utopia and Ocelot!?"
 description: "On this Tech Day on August 21, 2025, we will explore the question of whether Utopia Map and ocelot.social can be brought together. We look forward to your participation."
 ---
@@ -19,7 +20,12 @@ This week, another lecture will take place as part of [**Tech Day**](https://www
 Speaker: Anton Tranelis  
 Language: German
 
-Thursday, August 21, 2025, at 2 p.m. CEST, [**online**](https://cloud.mfwerk.de/index.php/apps/bbb/b/E794JMdzi3iQc4xE) (will be recorded)
+Thursday, August 21, 2025, at 2 p.m. CEST, **online**
+
+## Publication
+
+- Recording on [YouTube](https://www.youtube.com/watch?v=NI-nAeYkmQk&list=PL5Xhli7oRz_UvRSDp61oTloWM0fc5e8Yy)
+- [Presentation](https://hack.utopia-lab.org/s/vYs1BNmFi)
 
 ## What is it about?
 

docs/en/news/README.md

@@ -1,7 +1,7 @@
 ---
 home: true
 article: false
-layout: Blog
+layout: BlogHome
 sidebar: false
 lang: en-US
 title: News

docs/es/README.md

@@ -184,7 +184,7 @@ description: "Un software libre y de código abierto con el que puedes gestionar
 </div>
 
 <div class="all-features">
-  <a id="hero-button" href="/es/features/">
+  <a href="/es/features/">
     <Button>
       Ver todas las funciones
     </Button>
@@ -245,7 +245,7 @@ description: "Un software libre y de código abierto con el que puedes gestionar
     Puedes alojar <i>ocelot.social</i> en tu propio servidor o hacer que lo alojen por ti.<br>
     Echa un vistazo a las opciones disponibles:
   </p>
-  <a id="hero-button" href="/es/get-started/">
+  <a href="/es/get-started/">
     <Button>
       Vamos allá
     </Button>
@@ -256,6 +256,11 @@ description: "Un software libre y de código abierto con el que puedes gestionar
 
 XXX -->
 
+<MiniBlog
+  :title="'Últimas publicaciones'"
+  :show-all-posts-button-title="'Mostrar todas las publicaciones'"
+/>
+
 <h2 class="large-header">Donar</h2>
 
 <div class="center">

docs/es/news/2025-07-05-release-3-11-0-with-numerous-improvements/README.md

@@ -9,6 +9,7 @@ category:
 tag:
   - Releases
 cover: /blog/ocelot-social-release-v3-11-0.jpg
+coverAlt: "Ocelot.social versión 3.11.0"
 title: "Versión 3.11.0 con numerosas mejoras"
 description: "Esta versión del software ocelot.social mejora la estabilidad y el uso del chat y corrige algunos errores."
 ---

docs/es/news/README.md

@@ -1,7 +1,7 @@
 ---
 home: true
 article: false
-layout: Blog
+layout: BlogHome
 sidebar: false
 lang: es-ES
 title: Noticias

docs/fr/README.md

@@ -183,7 +183,7 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
 </div>
 
 <div class="all-features">
-  <a id="hero-button" href="/fr/features/">
+  <a href="/fr/features/">
     <Button>
       Toutes les fonctions
     </Button>
@@ -277,7 +277,7 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
     Tu peux héberger <i>ocelot.social</i> sur ton propre serveur ou le faire héberger.<br>
     Jetes un coup d’œil aux options disponibles :
   </p>
-  <a id="hero-button" href="/fr/get-started/">
+  <a href="/fr/get-started/">
     <Button>
       C’est parti !
     </Button>
@@ -288,6 +288,11 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
 
 XXX -->
 
+<MiniBlog
+  :title="'Derniers articles'"
+  :show-all-posts-button-title="'Afficher tous les messages'"
+/>
+
 <h2 class="large-header">Faire un don</h2>
 
 <div class="center">

docs/fr/news/2025-07-05-release-3-11-0-with-numerous-improvements/README.md

@@ -9,6 +9,7 @@ category:
 tag:
   - Releases
 cover: /blog/ocelot-social-release-v3-11-0.jpg
+coverAlt: "Ocelot.social version 3.11.0"
 title: "Version 3.11.0 avec de nombreuses améliorations"
 description: "Cette version du logiciel ocelot.social améliore la stabilité et l’utilisation du chat et corrige quelques bugs."
 ---

docs/fr/news/README.md

@@ -1,7 +1,7 @@
 ---
 home: true
 article: false
-layout: Blog
+layout: BlogHome
 sidebar: false
 lang: fr-FR
 title: Actualités