mirror of
https://github.com/Ocelot-Social-Community/ocelot.social.git
synced 2025-12-12 23:35:59 +00:00
Merge pull request #224 from Ocelot-Social-Community/220-refine-blog
feat(content): refine blog
This commit is contained in:
Wolfgang Huß
GitHub
commit
a13a05cc21
8
docs/.vuepress/client.js
Normal file
8
docs/.vuepress/client.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { defineClientConfig } from "vuepress/client";
|
||||
import MiniBlog from "./components/MiniBlog.vue";
|
||||
|
||||
export default defineClientConfig({
|
||||
enhance({ app }) {
|
||||
app.component("MiniBlog", MiniBlog);
|
||||
},
|
||||
});
|
||||
159
docs/.vuepress/components/MiniBlog.vue
Normal file
159
docs/.vuepress/components/MiniBlog.vue
Normal file
@ -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>
|
||||
@ -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));
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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."
|
||||
---
|
||||
|
||||
@ -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?
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
home: true
|
||||
article: false
|
||||
layout: Blog
|
||||
layout: BlogHome
|
||||
sidebar: false
|
||||
lang: de-DE
|
||||
title: News
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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."
|
||||
---
|
||||
|
||||
@ -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?
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
home: true
|
||||
article: false
|
||||
layout: Blog
|
||||
layout: BlogHome
|
||||
sidebar: false
|
||||
lang: en-US
|
||||
title: News
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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."
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
home: true
|
||||
article: false
|
||||
layout: Blog
|
||||
layout: BlogHome
|
||||
sidebar: false
|
||||
lang: es-ES
|
||||
title: Noticias
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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."
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
home: true
|
||||
article: false
|
||||
layout: Blog
|
||||
layout: BlogHome
|
||||
sidebar: false
|
||||
lang: fr-FR
|
||||
title: Actualités
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user