feat(i18n): add German language support and README (#145)

* Add German localisation

Add German language support and README file. Update README files from other languages.

* Update relative paths in localised README files

Update relative paths so that files are referenced correctly.

* Optimise German README translation

Optimise translation

* Optimize translation of German README

* Optimize translation of German README

* Optimize German translation

* docs(i18n): update PR references and fix documentation paths

* docs(i18n): convert translator list to table format

* fix(i18n): improve translations and fix typos across locales

---------

Co-authored-by: NekoAria <NekoAria@users.noreply.github.com>

Author: DonkeeeyKong

README.md

@@ -1,6 +1,6 @@
 # ReactFlux
 
-Read in other languages: [Español](docs/README.es-ES.md), [Français](docs/README.fr-FR.md), [简体中文](docs/README.zh-CN.md)
+Read in other languages: [Deutsch](docs/README.de-DE.md), [Español](docs/README.es-ES.md), [Français](docs/README.fr-FR.md), [简体中文](docs/README.zh-CN.md)
 
 ## Overview
 
@@ -31,7 +31,7 @@ Key features include:
   - Batch update the host of filtered subscription URLs (useful for replacing RSSHub instances)
   - Batch refresh errored subscriptions
   - Save articles to third-party services
-- I18n supports (English / Español / Français / 简体中文)
+- I18n supports (Deutsch / English / Español / Français / 简体中文)
 - Other features waiting for you to discover...
 
 ## Online Demo & Screenshots
@@ -101,13 +101,16 @@ Additionally, you need to add a README file for the respective language and refe
 
 You should also modify parts of the source code to include the i18n language packages for `Arco Design` and `Day.js`.
 
-For detailed changes, please refer to the modifications in [PR #120](https://github.com/electh/ReactFlux/pull/120).
+For detailed changes, please refer to the modifications in [PR #145](https://github.com/electh/ReactFlux/pull/145).
 
 ### Current Translators
 
-- Español by [Victorhck](https://github.com/victorhck)
-- Français by [MickGe](https://github.com/MickGe)
-- 简体中文 by [Neko Aria](https://github.com/NekoAria)
+| Language | Translator                                      |
+| -------- | ----------------------------------------------- |
+| Deutsch  | [DonkeeeyKong](https://github.com/donkeeeykong) |
+| Español  | [Victorhck](https://github.com/victorhck)       |
+| Français | [MickGe](https://github.com/MickGe)             |
+| 简体中文 | [Neko Aria](https://github.com/NekoAria)        |
 
 ## Contributors
 

docs/README.de-DE.md

@@ -0,0 +1,127 @@
+# ReactFlux
+
+In anderen Sprachen lesen: [English](../README.md), [Español](README.es-ES.md), [Français](README.fr-FR.md), [简体中文](README.zh-CN.md)
+
+## Überblick
+
+ReactFlux ist ein Drittanbieter-Web-Frontend für [Miniflux](https://github.com/miniflux/v2), das ein benutzerfreundlicheres Leseerlebnis bieten soll.
+
+Die wichtigsten Merkmale sind:
+
+- Modernes Oberflächendesign
+- Responsives Layout mit Unterstützung von Touch-Gesten
+- Unterstützung für Darkmode und benutzerdefinierte Designs
+- Anpassbare Leseerfahrung:
+  - Einstellungen für Schriftfamilie und -größe
+  - Anpassung der Artikelbreite
+  - Optionen für Titelausrichtung
+  - Bildbetrachter mit Zoom und Diashow
+  - Fußnoten-Verbesserung
+  - Quelltext-Syntax-Hervorhebung
+  - Geschätzte Lesezeit
+- Verwaltung von Artikeln und Abonnements (_Feeds_):
+  - Google-artige Syntax für die Suche
+  - Filtern von Artikeln nach Lesestatus, Veröffentlichungsdatum, Titel, Inhalt oder Autor
+  - Stapel-Operationen für Abonnements (_Feeds_)
+  - Unterstützung für Volltextabruf
+  - Artikel nach Hashsumme, Titel oder URL de-duplizieren
+  - Artikel beim Scrollen automatisch als gelesen markieren
+- Erweiterte Funktionen:
+  - Tastenkürzel (anpassbar)
+  - Stapelaktualisierung des Hosts von gefilterten Abonnement-URLs (nützlich für den Austausch von RSSHub-Instanzen)
+  - Stapelaktualisierung fehlerhafter Abonnements
+  - Speichern von Artikeln in Diensten von Drittanbietern
+- I18n-Unterstützung (Deutsch / English / Español / Français / 简体中文)
+- Andere Funktionen warten darauf, entdeckt zu werden…
+
+## Online-Demo & Screenshots
+
+ReactFlux mit unserer [Online-Demo-Instanz](https://reactflux.pages.dev) testen.
+
+So sieht ReactFlux in verschiedenen Designs aus:
+
+![screenshot](../images/screenshot.png)
+![devices](../images/devices.png)
+
+## Schnellstart
+
+1. Sicherstellen, dass eine funktionierende Miniflux-Instanz vorhanden ist
+2. Direkt unsere [Online-Demo-Instanz](https://reactflux.pages.dev) verwenden oder ReactFlux mit einer der folgenden Methoden einrichten
+3. Mit Miniflux-Benutzernamen und -Passwort oder mit API-Schlüssel (empfohlen) anmelden
+
+## Installation
+
+### Cloudflare Pages
+
+ReactFlux wird mit React erstellt und generiert nach der Erstellung eine Reihe von statischen Webdateien, die direkt auf Cloudflare Pages bereitgestellt werden können.
+
+ReactFlux kann auf Cloudflare Pages eingerichtet werden, indem man `Framework preset` als `Create React App` auswählt.
+
+### Vorgenerierte Dateien verwenden
+
+Fertige Dateien können aus dem `gh-pages`-Zweig heruntergeladen und bei jedem statischen Hosting-Service eingesetzt werden, der Single-Page-Webanwendungen (SPA: _single-page applications_) unterstützt.
+
+Es sollte sichergestellt werden, dass das URL-Rewriting so konfiguriert ist, dass alle Anfragen auf `index.html` umgeleitet werden.
+
+Wird Nginx verwendet, muss möglicherweise folgende Konfiguration hinzugefügt werden:
+
+```nginx
+location / {
+    try_files $uri $uri/ /index.html;
+}
+```
+
+### Vercel
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/electh/ReactFlux)
+
+### Docker
+
+[![dockeri.co](https://dockerico.blankenship.io/image/electh/reactflux)](https://hub.docker.com/r/electh/reactflux)
+
+```bash
+docker run -p 2000:2000 electh/reactflux
+```
+
+Oder mit [Docker Compose](../docker-compose.yml):
+
+```bash
+docker-compose up -d
+```
+
+<!-- ### Zeabur (Veraltet, nicht empfohlen)
+
+[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/OKXO3W) -->
+
+## Übersetzungsleitfaden
+
+Um uns bei der Übersetzung von ReactFlux in deine Sprache zu helfen, bitte den Ordner `locales` ergänzen und einen Pull-Request senden.
+
+Zusätzlich muss eine README-Datei für die jeweilige Sprache hinzufügt und diese in allen bestehenden README-Dateien referenziert werden.
+
+Es sollten auch Teile des Quellcodes geändert werden, um die i18n-Sprachpakete für `Arco Design` und `Day.js` einzubinden.
+
+Detaillierte Änderungen bitte [PR #145](https://github.com/electh/ReactFlux/pull/145) entnehmen.
+
+### Derzeit mit Übersetzungen Beitragende
+
+| Sprache  | Mitwirkende                                     |
+| -------- | ----------------------------------------------- |
+| Deutsch  | [DonkeeeyKong](https://github.com/donkeeeykong) |
+| Español  | [Victorhck](https://github.com/victorhck)       |
+| Français | [MickGe](https://github.com/MickGe)             |
+| 简体中文 | [Neko Aria](https://github.com/NekoAria)        |
+
+## Mitwirkende
+
+> Danke an alle Mitwirkenden, die dieses Projekt noch großartiger gemacht haben!
+
+<a href="https://github.com/electh/ReactFlux/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=electh/ReactFlux" alt="An ReactFlux Mitwirkende" />
+</a>
+
+Erstellt mit [contrib.rocks](https://contrib.rocks).
+
+## Sternverlauf
+
+[![Star History](https://starchart.cc/electh/ReactFlux.svg)](https://starchart.cc/electh/ReactFlux)

docs/README.es-ES.md

@@ -1,6 +1,6 @@
 # ReactFlux
 
-Lea este texto en otros idiomas: [English](../README.md), [Français](README.fr-FR.md), [简体中文](README.zh-CN.md)
+Lea este texto en otros idiomas: [Deutsch](README.de-DE.md), [English](../README.md), [Français](README.fr-FR.md), [简体中文](README.zh-CN.md)
 
 ## Descripción general
 
@@ -31,7 +31,7 @@ Las funcionalidades clave incluyen:
   - Actualización por lotes del host de URL de suscripción filtradas (útil para reemplazar instancias de RSSHub)
   - Actualización por lotes de suscripciones con errores
   - Guardar artículos en servicios de terceros
-- Disponible en varios idiomas (English / Español / Français / 简体中文)
+- Disponible en varios idiomas (Deutsch / English / Español / Français / 简体中文)
 - Otras características esperando que las descubras...
 
 ## Demostración en línea y capturas de pantalla
@@ -83,7 +83,7 @@ location / {
 docker run -p 2000:2000 electh/reactflux
 ```
 
-O usando [Docker Compose](docker-compose.yml):
+O usando [Docker Compose](../docker-compose.yml):
 
 ```bash
 docker-compose up -d
@@ -101,13 +101,16 @@ Además, necesita agregar un archivo README para el idioma respectivo y referenc
 
 También debe modificar partes del código fuente para incluir los paquetes de idiomas i18n para `Arco Design` y `Day.js`.
 
-Para cambios detallados, por favor consulte las modificaciones en [PR #120](https://github.com/electh/ReactFlux/pull/120).
+Para cambios detallados, por favor consulte las modificaciones en [PR #145](https://github.com/electh/ReactFlux/pull/145).
 
 ### Traductores Actuales
 
-- Español by [Victorhck](https://github.com/victorhck)
-- Français by [MickGe](https://github.com/MickGe)
-- 简体中文 by [Neko Aria](https://github.com/NekoAria)
+| Idioma   | Traductor                                       |
+| -------- | ----------------------------------------------- |
+| Deutsch  | [DonkeeeyKong](https://github.com/donkeeeykong) |
+| Español  | [Victorhck](https://github.com/victorhck)       |
+| Français | [MickGe](https://github.com/MickGe)             |
+| 简体中文 | [Neko Aria](https://github.com/NekoAria)        |
 
 ## Colaboradores
 

docs/README.fr-FR.md

@@ -1,6 +1,6 @@
 # ReactFlux
 
-Lire dans d'autres langues : [English](../README.md), [Español](README.es-ES.md), [简体中文](README.zh-CN.md)
+Lire dans d'autres langues : [Deutsch](README.de-DE.md), [English](../README.md), [Español](README.es-ES.md), [简体中文](README.zh-CN.md)
 
 ## Aperçu
 
@@ -31,7 +31,7 @@ Les fonctionnalités principales incluent :
   - Mise à jour par lot de l'hôte des URLs de souscription filtrées (utile pour remplacer les instances RSSHub)
   - Actualisation par lot des souscriptions récemment en erreur
   - Sauvegarde d'articles vers des services tiers
-- Support multilingue (English / Español / Français / 简体中文)
+- Support multilingue (Deutsch / English / Español / Français / 简体中文)
 - D'autres fonctionnalités à découvrir...
 
 ## Démo en ligne et captures d'écran
@@ -83,7 +83,7 @@ location / {
 docker run -p 2000:2000 electh/reactflux
 ```
 
-Ou en utilisant [Docker Compose](docker-compose.yml):
+Ou en utilisant [Docker Compose](../docker-compose.yml):
 
 ```bash
 docker-compose up -d
@@ -101,13 +101,16 @@ De plus, vous devez ajouter un fichier README pour la langue respective et le r
 
 Vous devez également modifier certaines parties du code source pour inclure les packages de langue i18n pour `Arco Design` et `Day.js`.
 
-Pour des modifications détaillées, veuillez vous référer aux modifications dans la [PR #120](https://github.com/electh/ReactFlux/pull/120).
+Pour des modifications détaillées, veuillez vous référer aux modifications dans la [PR #145](https://github.com/electh/ReactFlux/pull/145).
 
 ### Traducteurs actuels
 
-- Español by [Victorhck](https://github.com/victorhck)
-- Français by [MickGe](https://github.com/MickGe)
-- 简体中文 by [Neko Aria](https://github.com/NekoAria)
+| Langue   | Traducteur                                      |
+| -------- | ----------------------------------------------- |
+| Deutsch  | [DonkeeeyKong](https://github.com/donkeeeykong) |
+| Español  | [Victorhck](https://github.com/victorhck)       |
+| Français | [MickGe](https://github.com/MickGe)             |
+| 简体中文 | [Neko Aria](https://github.com/NekoAria)        |
 
 ## Contributeurs
 

docs/README.zh-CN.md

@@ -1,6 +1,6 @@
 # ReactFlux
 
-阅读其他语言版本： [English](../README.md), [Español](README.es-ES.md), [Français](README.fr-FR.md)
+阅读其他语言版本： [Deutsch](README.de-DE.md), [English](../README.md), [Español](README.es-ES.md), [Français](README.fr-FR.md)
 
 ## 概述
 
@@ -31,7 +31,7 @@ ReactFlux 是 [Miniflux](https://github.com/miniflux/v2) 的第三方 Web 前端
   - 批量更新过滤后的订阅 URL 的 host（适用于替换 RSSHub 实例）
   - 批量刷新最近更新错误的订阅源
   - 保存文章到第三方服务
-- 多语言支持 (English / Español / Français / 简体中文)
+- 多语言支持 (Deutsch / English / Español / Français / 简体中文)
 - 其他功能等您来发现...
 
 ## 在线演示和截图
@@ -83,7 +83,7 @@ location / {
 docker run -p 2000:2000 electh/reactflux
 ```
 
-或者使用 [Docker Compose](docker-compose.yml)：
+或者使用 [Docker Compose](../docker-compose.yml)：
 
 ```bash
 docker-compose up -d
@@ -101,13 +101,16 @@ docker-compose up -d
 
 您还需要修改部分源代码，以包含 `Arco Design` 和 `Day.js` 的 i18n 语言包。
 
-有关详细的更改，请参阅 [PR #120](https://github.com/electh/ReactFlux/pull/120) 中的修改。
+有关详细的更改，请参阅 [PR #145](https://github.com/electh/ReactFlux/pull/145) 中的修改。
 
 ### 当前翻译者
 
-- Español by [Victorhck](https://github.com/victorhck)
-- Français by [MickGe](https://github.com/MickGe)
-- 简体中文 by [Neko Aria](https://github.com/NekoAria)
+| 语言     | 译者                                            |
+| -------- | ----------------------------------------------- |
+| Deutsch  | [DonkeeeyKong](https://github.com/donkeeeykong) |
+| Español  | [Victorhck](https://github.com/victorhck)       |
+| Français | [MickGe](https://github.com/MickGe)             |
+| 简体中文 | [Neko Aria](https://github.com/NekoAria)        |
 
 ## 贡献者
 

src/components/Settings/General.jsx

@@ -7,6 +7,7 @@ import { polyglotState } from "@/hooks/useLanguage"
 import { settingsState, updateSettings } from "@/store/settingsState"
 
 const languageOptions = [
+  { label: "Deutsch", value: "de-DE" },
   { label: "English", value: "en-US" },
   { label: "Español", value: "es-ES" },
   { label: "Français", value: "fr-FR" },

src/hooks/useLanguage.js

@@ -1,5 +1,6 @@
 import { useStore } from "@nanostores/react"
 import dayjs from "dayjs"
+import "dayjs/locale/de"
 import "dayjs/locale/en"
 import "dayjs/locale/es"
 import "dayjs/locale/fr"
@@ -14,6 +15,7 @@ import createSetter from "@/utils/nanostores"
 
 const languageToLocale = {
   "zh-CN": "zh-cn",
+  de: "de",
   es: "es",
   fr: "fr",
 }
@@ -58,7 +60,7 @@ const useLanguage = () => {
       loadLanguage(language)
 
       const locale =
-        language.startsWith("es-") || language.startsWith("fr-")
+        language.startsWith("de-") || language.startsWith("es-") || language.startsWith("fr-")
           ? language.substring(0, 2)
           : languageToLocale[language] || "en"
       dayjs.locale(locale)