Refine DonationBar component

docs/.vuepress/components/DonationBar.vue

@@ -1,18 +1,109 @@
 <template>
   <!-- similar to markdown "### X" -->
-  <h3 id="aktueller-spendenstand-—-ziel-1-200-€" tabindex="-1">
+  <h3 id="current-donation-total" tabindex="-1">
-    <a class="header-anchor" href="#aktueller-spendenstand-—-ziel-1-200-€">
+    <a class="header-anchor" href="#current-donation-total">
-      <span>Aktueller Spendenstand — Ziel: 1.200&thinsp;€</span>
+      <span>{{ title }}</span>
     </a>
   </h3>
-  <div style="width: 100%; border: 1px solid var(--notice-c-accent-bg); border-radius: 10px; margin: 20px 0 20px 0;">
+  <div class="donation-bar">
-    <div style="width: 12.5%; border-radius: 10px 0 0 10px; color: #000; background-color: var(--notice-c-accent-bg); font-size: 2em; text-align: right; padding-right: 10px;">
+    <div class="donation-bar-value" :style="{ width: (currentValue / target) * 100 + '%' }">
-      150&thinsp;€
+      {{ currentValueStr }}
     </div>
   </div>
   <p>
-    Stand 5.11.2025, wird wöchentlich aktualisiert.
+    {{ asOfDateStr }}
     <br/>
-     Das Crowdfunding läuft vom 5.11.2025 bis 2.1.2026.
+    {{ timeFrameStr }}
   </p>
 </template>
+
+<script setup>
+import { computed } from "vue"
+import { usePageLang, useRouteLocale } from "vuepress/client"
+
+const stripSlashes = s => s.replace(/^\/+|\/+$/g, '');
+
+const locale = stripSlashes(useRouteLocale().value) || 'de'
+const lang = usePageLang().value || 'de-DE' // Ref<string>, e.g. "de-DE" or "en-US"
+
+const props =  defineProps({
+  currentValue: { type: Number, required: true},
+  target: { type: Number, required: true},
+  startDate: { type: Date, required: true},
+  endDate: { type: Date, required: true},
+  asOfDate: { type: Date, required: true},
+})
+
+const title = computed(() => {
+  switch (locale) {
+    case 'de':
+      return 'Aktueller Spendenstand — Ziel: ' + props.target.toLocaleString(lang) + ' €' // &thinsp;€
+    case 'en':
+      return 'Current donation total — Target: ' + props.target.toLocaleString(lang) + ' €' // &thinsp;€
+    case 'es':
+      return 'Saldo actual de donaciones — Objetivo: ' + props.target.toLocaleString(lang) + ' €' // &thinsp;€
+    case 'fr':
+      return 'Montant actuel des dons — Objectif : ' + props.target.toLocaleString(lang) + ' €' // &thinsp;€
+  }
+})
+const currentValueStr = computed(() => {
+  return props.currentValue.toLocaleString(lang) + ' €' // &thinsp;€
+})
+const dateFormat = { year: "numeric", month: "short", day: "numeric" }
+const asOfDateStr = computed(() => {
+  switch (locale) {
+    case 'de':
+      return 'Stand ' + new Date(props.asOfDate).toLocaleDateString(lang, dateFormat) + ', wird wöchentlich aktualisiert.'
+    case 'en':
+      return 'As of ' + new Date(props.asOfDate).toLocaleDateString(lang, dateFormat) + ', updated weekly.'
+    case 'es':
+      return 'Situación a ' + new Date(props.asOfDate).toLocaleDateString(lang, dateFormat) + ', se actualiza semanalmente.'
+    case 'fr':
+      return 'Situation au ' + new Date(props.asOfDate).toLocaleDateString(lang, dateFormat) + ', mise à jour hebdomadaire.'
+  }
+})
+const timeFrameStr = computed(() => {
+  switch (locale) {
+    case 'de':
+      return 'Das Crowdfunding läuft vom ' + new Date(props.asOfDate).toLocaleDateString(lang, dateFormat) + ' bis ' + new Date(props.endDate).toLocaleDateString(lang, dateFormat) + '.'
+    case 'en':
+      return 'The crowdfunding campaign will run from ' + new Date(props.startDate).toLocaleDateString(lang, dateFormat) + ', to ' + new Date(props.endDate).toLocaleDateString(lang, dateFormat) + '.'
+    case 'es':
+      return 'La campaña de crowdfunding estará activa desde el ' + new Date(props.startDate).toLocaleDateString(lang, dateFormat) + ' hasta el ' + new Date(props.endDate).toLocaleDateString(lang, dateFormat) + '.'
+    case 'fr':
+      return 'Le financement participatif se déroulera du ' + new Date(props.startDate).toLocaleDateString(lang, dateFormat) + ' au ' + new Date(props.endDate).toLocaleDateString(lang, dateFormat) + '.'
+  }
+})
+</script>
+
+<style scoped>
+.donation-bar {
+  width: 100%;
+  border: 1px solid var(--notice-c-accent-bg);
+  border-radius: 10px;
+  margin: 20px 0 20px 0;
+}
+
+.donation-bar-value {
+  border-radius: 10px 0 0 10px;
+  color: #000;
+  background-color: var(--notice-c-accent-bg);
+  font-size: 2em;
+  text-align: right;
+  padding-right: 10px;
+}
+
+@media (max-width: 830px) {
+  .donation-bar-value {
+    font-size: 1.5em;
+    padding-right: 6px;
+  }
+}
+
+@media (max-width: 600px) {
+  .donation-bar-value {
+    font-size: 1em;
+    padding-right: 4px;
+  }
+}
+</style>

docs/.vuepress/components/MiniBlog.vue

@@ -71,6 +71,7 @@ const articleIndex = computed(() =>
   (locale.value === "/" ? "/article/" : `${locale.value}article/`)
 );
 
+// Wolle
 const formatDate = (d) =>
   d ? new Date(d).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }) : "";
 </script>

docs/de/news/2025-11-05-crowdfunding-feature-pinned-posts-in-groups/README.md

@@ -22,7 +22,13 @@ description: "Hilf mit deiner Spende, dass Beiträge in Gruppen angepinnt werden
 
 Hilf mit deiner Spende, dass Beiträge in Gruppen angepinnt werden können.
 
-<DonationBar/>
+<DonationBar
+  :currentValue="150"
+  :target="1200"
+  :startDate="new Date('2025-11-05')"
+  :endDate="new Date('2026-01-02')"
+  :asOfDate="new Date('2025-11-05')"
+/>
 
 ### Worum geht es
 
@@ -51,7 +57,13 @@ Da er keine kommerziellen Interessen verfolgt, wird die Weiterentwicklung der So
 Also auch über eine Spende von dir.
 
 <!-- markdownlint-disable no-duplicate-heading -->
-<DonationBar/>
+<DonationBar
+  :currentValue="150"
+  :target="1200"
+  :startDate="new Date('2025-11-05')"
+  :endDate="new Date('2026-01-02')"
+  :asOfDate="new Date('2025-11-05')"
+/>
 
 ### Spenden