Merge pull request #254 from Ocelot-Social-Community/247-create-donation-bar-component

feat(other): create donation bar component

docs/.vuepress/client.js

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

docs/.vuepress/components/DonationBar.vue

@@ -0,0 +1,158 @@
+<template>
+  <!-- similar to markdown "### X" -->
+  <h3 id="current-donation-total" tabindex="-1">
+    <a class="header-anchor" href="#current-donation-total">
+      <span>{{ title }}</span>
+    </a>
+  </h3>
+  <div class="donation-bar">
+    <div class="donation-bar-value" :style="{ width: (currentValue / target) * 100 + '%' }">
+      {{ currentValueStr }}
+    </div>
+  </div>
+  <p>
+    {{ asOfDateStr }}
+    <br/>
+    {{ 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'
+
+const throwError = (message) => {
+  console.error(message)
+  throw new Error(message)
+}
+
+const props = defineProps({
+  currentValue: {
+    type: Number,
+    required: true
+  },
+  target: {
+    type: Number,
+    required: true
+  },
+  startDate: {
+    type: String,
+    required: true
+  },
+  endDate: {
+    type: String,
+    required: true
+  },
+  asOfDate: {
+    type: String,
+    required: true
+  },
+})
+
+if (!isFinite(props.currentValue)) {
+  throwError(`[DonationBar] Prop "currentValue" must be a finite number, received: ${props.currentValue}`)
+}
+if (props.currentValue < 0) {
+  throwError(`[DonationBar] Prop "currentValue" must be >= 0, received: ${props.currentValue}`)
+}
+
+if (!isFinite(props.target)) {
+  throwError(`[DonationBar] Prop "target" must be a finite number, received: ${props.target}`)
+}
+if (props.target <= 0) {
+  throwError(`[DonationBar] Prop "target" must be > 0, received: ${props.target}`)
+}
+
+const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/
+
+const validateDate = (value, propName) => {
+  if (!ISO_DATE_REGEX.test(value)) {
+    throwError(`[DonationBar] Prop "${propName}" must be in ISO 8601 format (YYYY-MM-DD), received: ${value}`)
+  }
+  if (isNaN(new Date(value).getTime())) {
+    throwError(`[DonationBar] Prop "${propName}" has invalid date value: ${value}`)
+  }
+}
+
+validateDate(props.startDate, 'startDate')
+validateDate(props.endDate, 'endDate')
+validateDate(props.asOfDate, 'asOfDate')
+
+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: "long", 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.startDate).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

@@ -1,31 +1,3 @@
-<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},
-  readMoreLinkTitle: { 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>
@@ -75,6 +47,35 @@ const formatDate = (d) =>
   </div>
 </template>
 
+<script setup>
+import { computed } from "vue";
+import { usePageLang, useRouteLocale } from "vuepress/client";
+import articles from "@temp/mini-blog.articles.json"; // kommt aus dem Build-Hook
+
+const locale = useRouteLocale()
+const lang = usePageLang().value || 'de-DE' // Ref<string>, e.g. "de-DE" or "en-US"
+
+const props =  defineProps({
+  title: { type: String},
+  readMoreLinkTitle: { 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(lang, { year: "numeric", month: "short", day: "numeric" }) : "";
+</script>
+
 <style scoped>
 /* Abschnitt */
 .mini-blog {

docs/de/news/2025-10-28-release-3-13-0-add-call-to-action-on-comment-list/README.md

@@ -18,7 +18,7 @@ Die neue Version 3.13.0 macht es dir einfacher, das Kommentieren freizuschalten.
 
 ## Worum geht es?
 
-In eingen Fällen ist bei Beiträgen die Kommentarfunktion deaktiviert:
+In einigen Fällen ist bei Beiträgen die Kommentarfunktion deaktiviert:
 
 - Wenn du den Autor des Beitrags blockiert hast.
 - Wenn du nicht Mitglied der Gruppe bist, in welcher der Beitrag erscheint.

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

@@ -18,18 +18,17 @@ title: "Unser erstes Crowdfunding! 🪄✨"
 description: "Hilf mit deiner Spende, dass Beiträge in Gruppen angepinnt werden können."
 ---
 
+<!-- markdownlint-disable no-inline-html first-line-heading -->
+
 Hilf mit deiner Spende, dass Beiträge in Gruppen angepinnt werden können.
 
-### Aktueller Spendenstand — Ziel: 1.200&thinsp;€
+<DonationBar
-
+  :currentValue="180"
-<div style="width: 100%; border: 1px solid var(--notice-c-accent-bg); border-radius: 10px; margin: 20px 0 20px 0;">
+  :target="1200"
-  <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;">
+  startDate="2025-11-05"
-    150&thinsp;€
+  endDate="2026-01-02"
-  </div>
+  asOfDate="2025-11-10"
-</div>
+/>
-
-Stand 5.11.2025, wird wöchentlich aktualisiert.  
-Das Crowdfunding läuft vom 5.11.2025 bis 2.1.2026.
 
 ### Worum geht es
 
@@ -57,16 +56,14 @@ Der busFaktor() e.V. als Betreuer der freien Open-Source-Software *ocelot.social
 Da er keine kommerziellen Interessen verfolgt, wird die Weiterentwicklung der Software rein über ehrenamtliche Arbeit, über Spenden und Mitgliedsbeiträge sowie über Aufträge der Betreiber von *ocelot.social*-Netzwerken an freie Entwickler finanziert.
 Also auch über eine Spende von dir.
 
-### Aktueller Spendenstand — Ziel: 1.200&thinsp;€
+<!-- markdownlint-disable no-duplicate-heading -->
-
+<DonationBar
-<div style="width: 100%; border: 1px solid var(--notice-c-accent-bg); border-radius: 10px; margin: 20px 0 20px 0;">
+  :currentValue="180"
-  <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;">
+  :target="1200"
-    150&thinsp;€
+  startDate="2025-11-05"
-  </div>
+  endDate="2026-01-02"
-</div>
+  asOfDate="2025-11-10"
-
+/>
-Stand 5.11.2025, wird wöchentlich aktualisiert.  
-Das Crowdfunding läuft vom 5.11.2025 bis 2.1.2026.
 
 ### Spenden