ocelot-Social-Community/ocelot.social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/ocelot.social.git synced 2025-12-12 23:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat(other): create donation bar component
This commit is contained in:
Wolfgang Huß 2025-11-12 14:04:45 +01:00 committed by GitHub
commit 9f8f0d45d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 207 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vuepress/client.js
View File

@ -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);
},
});

158
docs/.vuepress/components/DonationBar.vue Normal file
View File

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

57
docs/.vuepress/components/MiniBlog.vue
View File

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

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

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

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

@ -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;€
<div style="width: 100%; border: 1px solid var(--notice-c-accent-bg); border-radius: 10px; margin: 20px 0 20px 0;">
<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;">
150&thinsp;€
</div>
</div>
Stand 5.11.2025, wird wöchentlich aktualisiert.
Das Crowdfunding läuft vom 5.11.2025 bis 2.1.2026.
<DonationBar
:currentValue="180"
:target="1200"
startDate="2025-11-05"
endDate="2026-01-02"
asOfDate="2025-11-10"
/>
### 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;€
<div style="width: 100%; border: 1px solid var(--notice-c-accent-bg); border-radius: 10px; margin: 20px 0 20px 0;">
<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;">
150&thinsp;€
</div>
</div>
Stand 5.11.2025, wird wöchentlich aktualisiert.
Das Crowdfunding läuft vom 5.11.2025 bis 2.1.2026.
<!-- markdownlint-disable no-duplicate-heading -->
<DonationBar
:currentValue="180"
:target="1200"
startDate="2025-11-05"
endDate="2026-01-02"
asOfDate="2025-11-10"
/>
### Spenden