feat(i18n): add French language support and README (#120)

* i8n: create fr_FR translation

* feat(i18n): add French language support and README

---------

Co-authored-by: Neko Aria <990879119@qq.com>

README.es-ES.md

@@ -1,10 +1,10 @@
 # ReactFlux
 
-Lea este texto en otros idiomas: [English](README.md), [简体中文](README.zh-CN.md)
+Lea este texto en otros idiomas: [English](README.md), [Français](README.fr-FR.md), [简体中文](README.zh-CN.md)
 
 ## Descripción general
 
-ReactFlux es una interfaz web de terceros para [Miniflux](https://github.com/miniflux/miniflux), cuyo objetivo es proporcionar una experiencia de lectura más fácil de usar.
+ReactFlux es una interfaz web de terceros para [Miniflux](https://github.com/miniflux/v2), cuyo objetivo es proporcionar una experiencia de lectura más fácil de usar.
 
 Las funcionalidades clave incluyen:
 
@@ -26,8 +26,8 @@ Las funcionalidades clave incluyen:
 
 ## Capturas de pantalla
 
-![Interfaz](images/light.png)
-![Ajustes](images/dark.png)
+![Modo Claro](images/light.png)
+![Modo Oscuro](images/dark.png)
 
 ## Demo
 

README.fr-FR.md

@@ -0,0 +1,102 @@
+# ReactFlux
+
+Lire dans d'autres langues : [English](README.md), [Español](README.es-ES.md), [简体中文](README.zh-CN.md)
+
+## Aperçu
+
+ReactFlux est une interface web tierce pour [Miniflux](https://github.com/miniflux/v2), visant à offrir une expérience de lecture plus conviviale.
+
+Les fonctionnalités principales incluent :
+
+- Design d'interface moderne
+- Mise en page responsive
+- Prise en charge du mode sombre et des thèmes personnalisés
+- Recherche d'articles et de flux avec une syntaxe similaire à Google
+- Filtrage des articles par date de publication
+- Gestion des flux et des groupes
+- Raccourcis clavier (personnalisables)
+- Marquage automatique des articles comme lus lors du défilement
+- 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
+- Dédoublonnage des articles par hash, titre ou URL lors du chargement de la liste
+- Support multilingue (inclut : Anglais / Español / 简体中文)
+- Sauvegarde d'articles vers des services tiers
+- Coloration syntaxique pour les blocs de code
+- D'autres fonctionnalités à découvrir...
+
+## Captures d'écran
+
+![Mode Clair](images/light.png)
+![Mode Sombre](images/dark.png)
+
+## Démo
+
+[Instance de démonstration en ligne](https://reactflux.pages.dev/login)
+
+## Déploiement
+
+### Cloudflare Pages
+
+ReactFlux est construit avec React et génère un ensemble de fichiers web statiques après la compilation, qui peuvent être directement déployés sur Cloudflare Pages.
+
+Vous pouvez également le déployer vous-même sur Cloudflare Pages en sélectionnant `Framework preset` comme `Create React App`.
+
+### Vercel
+
+[![Déployer sur Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/electh/ReactFlux)
+
+### Zeabur
+
+[![Déployer sur Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/OKXO3W)
+
+### Docker
+
+```bash
+docker run -p 2000:2000 electh/reactflux
+```
+
+## Configuration
+
+Vous avez besoin d'une instance Miniflux fonctionnelle pour utiliser ce projet, qui prend en charge les deux méthodes de connexion suivantes :
+
+1. Se connecter en utilisant le nom d'utilisateur et le mot de passe de l'instance (non recommandé) ;
+2. Se connecter en utilisant un jeton Miniflux, qui peut être généré dans "Paramètres > Clés API > Créer une nouvelle clé API".
+
+## Branches
+
+- Branche `main` : Fournit les fonctionnalités les plus complètes. Les nouvelles fonctionnalités sont généralement publiées d'abord sur cette branche, adaptée à la plupart des utilisateurs.
+- Branche `next` : Initialement créée pour améliorer la compatibilité avec les appareils mobiles, offrant une meilleure expérience et performance pour les appareils mobiles tout en restant compatible avec les ordinateurs de bureau. Cette branche manque actuellement de fonctionnalités comme les raccourcis clavier et migrera sélectivement les fonctionnalités de la branche `main`.
+- Branche `gh-pages` : Utilisée pour compiler et déployer la branche `main` sur GitHub Pages.
+
+Si vous souhaitez rapidement essayer la branche `next`, voici une [instance en ligne](https://arcoflux.pages.dev/login).
+
+## Contributeurs
+
+> Merci à tous les contributeurs qui ont rendu ce projet possible !
+
+<table>
+<tr>
+    <td align="center">
+        <a href="https://github.com/NekoAria">
+            <img src="https://avatars.githubusercontent.com/u/23137034?v=4" width="90" alt="NekoAria" style="border-radius: 4px"/>
+        </a>
+        <br />
+        <sub><b>NekoAria</b></sub>
+        <br />
+        <sub><b>Contributeur Principal</b></sub>
+    </td>
+    <td align="center">
+        <a href="https://github.com/electh">
+            <img src="https://avatars.githubusercontent.com/u/83588235?v=4" width="90" alt="electh" style="border-radius: 4px"/>
+        </a>
+        <br />
+        <sub><b>electh</b></sub>
+        <br />
+        <sub><b>Initiateur du Projet</b></sub>
+    </td>
+</tr>
+</table>
+
+## Historique des étoiles
+
+[![Historique des étoiles](https://starchart.cc/electh/ReactFlux.svg)](https://starchart.cc/electh/ReactFlux)

README.md

@@ -1,10 +1,10 @@
 # ReactFlux
 
-Read in other languages: [Español](README.es-ES.md), [简体中文](README.zh-CN.md)
+Read in other languages: [Español](README.es-ES.md), [Français](README.fr-FR.md), [简体中文](README.zh-CN.md)
 
 ## Overview
 
-ReactFlux is a third-party web frontend for [Miniflux](https://github.com/miniflux/miniflux), aimed at providing a more user-friendly reading experience.
+ReactFlux is a third-party web frontend for [Miniflux](https://github.com/miniflux/v2), aimed at providing a more user-friendly reading experience.
 
 Key features include:
 

README.zh-CN.md

@@ -1,10 +1,10 @@
 # ReactFlux
 
-阅读其他语言版本： [English](README.md), [Español](README.es-ES.md)
+阅读其他语言版本： [English](README.md), [Español](README.es-ES.md), [Français](README.fr-FR.md)
 
 ## 概述
 
-Reactflux 是 [Miniflux](https://github.com/miniflux/miniflux) 的第三方 Web 前端，旨在提供更加友好的阅读体验。
+Reactflux 是 [Miniflux](https://github.com/miniflux/v2) 的第三方 Web 前端，旨在提供更加友好的阅读体验。
 
 主要特性包括：
 
@@ -26,8 +26,8 @@ Reactflux 是 [Miniflux](https://github.com/miniflux/miniflux) 的第三方 Web
 
 ## 截图
 
-![Light Mode](images/light.png)
-![Dark Mode](images/dark.png)
+![浅色模式](images/light.png)
+![深色模式](images/dark.png)
 
 ## 演示
 

src/components/Settings/General.jsx

@@ -7,6 +7,7 @@ import SettingItem from "./SettingItem";
 const languageOptions = [
   { label: "English", value: "en-US" },
   { label: "Español", value: "es-ES" },
+  { label: "Français", value: "fr-FR" },
   { label: "简体中文", value: "zh-CN" },
 ];
 

src/hooks/useLanguage.js

@@ -2,6 +2,7 @@ import { useStore } from "@nanostores/react";
 import dayjs from "dayjs";
 import "dayjs/locale/en";
 import "dayjs/locale/es";
+import "dayjs/locale/fr";
 import "dayjs/locale/zh-cn";
 import { map } from "nanostores";
 import Polyglot from "node-polyglot";
@@ -10,6 +11,12 @@ import { settingsState, updateSettings } from "../store/settingsState";
 import { getBrowserLanguage } from "../utils/locales";
 import { createSetter } from "../utils/nanostores";
 
+const languageToLocale = {
+  "zh-CN": "zh-cn",
+  es: "es",
+  fr: "fr",
+};
+
 export const polyglotState = map({
   polyglot: null,
 });
@@ -49,13 +56,11 @@ const useLanguage = () => {
     } else {
       loadLanguage(language);
 
-      if (language === "zh-CN") {
-        dayjs.locale("zh-cn");
-      } else if (language === "es" || language.startsWith("es-")) {
-        dayjs.locale("es");
-      } else {
-        dayjs.locale("en");
-      }
+      const locale =
+        language.startsWith("es-") || language.startsWith("fr-")
+          ? language.substring(0, 2)
+          : languageToLocale[language] || "en";
+      dayjs.locale(locale);
     }
   }, [language]);
 };