Add implemention mini blog to all languages

docs/.vuepress/components/MiniBlog.vue

@@ -5,6 +5,11 @@ import articles from "@temp/mini-blog.articles.json"; // kommt aus dem Build-Hoo
 
 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 || "/";
@@ -21,6 +26,9 @@ const formatDate = (d) =>
 </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">
@@ -55,24 +63,25 @@ const formatDate = (d) =>
       <!-- <div id="hero-button" class="mini-blog__footer">
         <RouterLink :to="articleIndex" class="mini-blog__all">Alle Artikel ansehen</RouterLink>
       </div> -->
+      <div class="center">
         <a id="hero-button mini-blog__footer" :href="articleIndex">
-      <Button class="mini-blog__all">
+          <Button>
-        Alle Artikel ansehen
+            {{ showAllPostsButtonTitle }}
           </Button>
         </a>
+      </div>
     </section>
+  </div>
 </template>
 
 <style scoped>
 /* Abschnitt */
 .mini-blog {
   max-width: 1100px;
-  margin-top: 2rem;
+  margin: 2rem auto 0 auto;
 }
-.mini-blog__title {
+.mini-blog__div {
-  font-size: 1.25rem;
+  padding-top: 2.8em;
-  font-weight: 700;
-  margin-bottom: 1rem;
 }
 
 /* Grid */
@@ -83,7 +92,7 @@ const formatDate = (d) =>
   grid-template-columns: 1fr;
 }
 @media (min-width: 720px) {
-  .mini-blog__grid { grid-template-columns: repeat(3, 1fr); }
+  .mini-blog__grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* Card */
@@ -142,7 +151,6 @@ const formatDate = (d) =>
 .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; }

docs/de/README.md

@@ -287,9 +287,11 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
 
 XXX -->
 
-<h2 class="large-header">Neueste Beiträge</h2>
+<MiniBlog
-
+   class="large-header"
-<MiniBlog />
+  :title="'Neueste Beiträge'"
+  :show-all-posts-button-title="'Alle Beiträge ansehen'"
+/>
 
 <h2 class="large-header">Spenden</h2>
 

docs/en/README.md

@@ -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/es/README.md

@@ -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/fr/README.md

@@ -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">