Initial translation/update french guides and add fixes

content/posts/customizing/customize-css/index.fr.md

@@ -0,0 +1,102 @@
+---
+title: "Personnalisation CSS"
+date: 2024-01-13T22:00:50+06:00
+author:
+  name: Nicolas Dietlin
+  image: images/author/nicolas.jpg
+menu:
+  sidebar:
+    name: Personnaliser les CSS
+    identifier: customize-css
+    parent: customizing
+    weight: 407
+---
+
+Ce thème vous permet de personnaliser l'apparence de votre site et ses composants par une surcharge du CSS par defaut. Ce guide vous montrera comment surcharger le schéma de couleurs et personnaliser les CSS des composants individuels.
+
+Le thème utilise [Sass](https://sass-lang.com/) pour générer du CSS. Si vous n'êtes pas familier avec Sass, vous pouvez en apprendre plus à son sujet [ici](https://sass-lang.com/guide).
+
+## Surcharger les variables des couleurs du thème
+
+Si vous voulez changer le schéma de couleurs par défaut de votre thème, vous pouvez surcharger les variables de couleur du thème. Pour surcharger les variables de couleur du thème, vous devrez créer un fichier nommé `variables.scss` dans le répertoire `assets/styles` de votre site. Puis copiez le contenu du fichier [variables.scss](https://github.com/hugo-toha/toha/blob/main/assets/styles/variables.scss) par défaut et collez le dans votre fichier de personnalisation `variables.scss`. Ici, seule la section `$theme` du fichier `variables.scss` par defaut est montré ci-dessous:
+
+```scss
+// themes
+$themes: (
+  'light': (
+    // cyan 600
+    'accent-color': #0891b2,
+    // cyan 500
+    'hover-over-accent-color': #06b6d4,
+    // zinc 200
+    'text-over-accent-color': #e4e4e7,
+    // slate 50
+    'bg-primary': #f8fafc,
+    // slate 900
+    'bg-primary-inverse': #0f172a,
+    // slate 200
+    'bg-secondary': #e2e8f0,
+    'bg-card': #fff,
+    // slate 800
+    'heading-color': #1e293b,
+    // slate 700
+    'text-color': #334155,
+    // slate 300
+    'inverse-text-color': #cbd5e1,
+    // slate 500
+    'muted-text-color': #64748b,
+    // red 600
+    'inline-code-color': #dc2626,
+    // amber 200
+    'highlight-color': #fde68a,
+    // slate 900
+    'footer-color': #0f172a,
+  ),
+  'dark': (
+    // cyan 600
+    'accent-color': #0891b2,
+    // cyan 500
+    'hover-over-accent-color': #06b6d4,
+    // zinc 200
+    'text-over-accent-color': #e4e4e7,
+    // gray-800
+    'bg-primary': #1f2937,
+    // slate 900
+    'bg-primary-inverse': #0f172a,
+    // gray 900
+    'bg-secondary': #111827,
+    // slate 800
+    'bg-card': #1e293b,
+    // slate 100
+    'heading-color': #f1f5f9,
+    // slate 300
+    'text-color': #cbd5e1,
+    // slate 900
+    'inverse-text-color': #0f172a,
+    // slate 500
+    'muted-text-color': #64748b,
+    // red 600
+    'inline-code-color': #dc2626,
+    // amber 200
+    'highlight-color': #fde68a,
+    // slate 900
+    'footer-color': #0f172a,
+  ),
+);
+```
+
+Les champs `light` et `dark` dans la cartopgraphie de couleur représentent respectivement les schémas de couleur pour le mode lumière et le mode sombre. En modifiant les codes couleurs dans ces champs, vous pouvez personnaliser l'apparence de votre site.
+
+## Surcharger un composant CSS
+
+Pour surcharger le CSS d'un composant, créez un fichier `override.scss` dans le répertoire `assets/styles` de votre site. Puis, placez le nouveau CSS pour ce composant ici. Vous n'avez pas besoin de réécrire l'ensemble du CSS du composant. Vous pouvez juste mettre les champs modifiés.
+
+Par exemple, pour désactiver l'effet flou de l'image d'arrière plan sur la page d'accueil, vous pouvez ajouter le code SCSS suivant dans votre fichier `override.scss`:
+
+```scss
+.home{
+  .background{
+    filter: none;
+  }
+}
+```

content/posts/customizing/new-section/index.fr.md

@@ -36,7 +36,7 @@ Si vous voulez ajouter un CSS personnalisé pour votre nouvelle section, vous po
 @import "your-style-file-name";
 ```
 
-### Step 3: Ajouter JavaScript
+### Etape 3: Ajouter JavaScript
 
 De façon similaire, si votre nouvelle section requiert un JavaScript supplémentaire, la méthode recommandée est d'ajouter le JavaScript dans le fichier de mise en page lui-même avec le tag `<script>`. Si vous voulez ajouter le JavaScript dans un fichier séparé, alors placez le fichier JavaScript dans le répertoire `assets/scripts` de votre dépôt et l'inclure dans le fichier de mise en page comme suit:
 

content/posts/translation/content/index.fr.md

@@ -0,0 +1,31 @@
+---
+title: "Comment traduire des billets ?"
+date: 2024-01-15T06:20:50+06:00
+author:
+  name: Nicolas Dietlin
+  image: images/author/nicolas.jpg
+menu:
+  sidebar:
+    name: Traduire des billets
+    identifier: translation-posts
+    parent: translation
+    weight: 520
+---
+
+Ce thème prend en charge plusieurs langues.
+
+Avant de commencer la traduction d'un billet, assurez-vous que vous avez activé la langue sur votre site. Si ce n'est pas le cas, vous pouvez suivre la section `Ajout d'une langue à votre site` du guide [Comment traduire les données du site ?](/fr/posts/translation/site-data/).
+
+## Création du billet
+
+Lorsque vous avez ajouté la langue désirée à votre site web, sachez que vous pouvez traduire un billet vers cette langue. Nous allons supposer que vous voulez traduire un billet existant.
+
+### Création du fichier index
+
+La première étape est de localiser le fichier `index.md` du billet que vous voulez traduire. Puis vous allez créer un fichier dans le même répertoire (ou bien vous pouvez juste dupliquer le fichier `index.md`), et le nommer `index.<code_langue>.md`, où `<code_langue>` est le code du langage que vous pouvez retrouver dans le tableau des langages sur [Comment traduire les données du site ?](/fr/posts/translation/site-data/).
+
+### Traduction du billet
+
+Maintenant, vous pouvez démarrer la traduction du billet, de la même façon que vous écrivez un nouveau billet.
+
+> INFO : Si vous avez affaire à des références internes, vous devez ajouter le prefix `/<code_langue>` devant votre chemin relatif. Par exemple, si vous voulez créer un lien pointant vers `/posts/translation/site-data/`, le lien vers le billet traduit sera `/<code_langue>/posts/translation/site-data/`.

content/posts/translation/site-data/index.fr.md

@@ -0,0 +1,88 @@
+---
+title: "Comment traduire les données du site ?"
+date: 2024-01-15T06:20:50+06:00
+author:
+  name: Nicolas Dietlin
+  image: images/author/nicolas.jpg
+menu:
+  sidebar:
+    name: Traduction Page d'accueil
+    identifier: translation-homepage
+    parent: translation
+    weight: 510
+---
+
+Ce thème prend en charge plusieurs langues.
+
+## Ajouter une langue à votre site
+
+L'ajout d'une langue à votre site traduira l'interface dans cette langue (incluant les boutons, la barre de navigation, etc.).
+
+### Obtenir le code de la langue
+
+Pour traduire votre site, vous aurez besoin du code de la langue. Le tableau suivant contient lzs langues supportées ainsi que leurs codes:
+
+| Languages            | Code              |
+|----------------------|-------------------|
+| English              | `en` / none       |
+| বাংলা                 | `bn`              |
+| Français             | `fr`              |
+| Indonesian           | `id`              |
+| Deutsch              | `de`              |
+| Español              | `es`              |
+| 简体中文              | `zh-cn` / `zh-tw` |
+| हिन्दी                  | `hi`              |
+| Italiano             | `it`              |
+| 日本語                | `jp`              |
+| 한국어                | `ko`              |
+| русский              | `ru`              |
+| suomi                | `fi`              |
+| Tiếng Việt           | `vn`              |
+| Turkish              | `tr`              |
+| Arabic (العربية)        | `ar`              |
+| Português Europeu    | `pt-pt`           |
+| Català               | `ad`              |
+| Português Brasileiro | `pt-br`           |
+| Dutch                | `nl`              |
+
+</br>
+
+Pour la liste complète des langages supportés, consultez s'il vous plaît le fichier README du [dépôt Toha](https://github.com/hugo-toha/toha).
+
+Si la langue désirée pour la traduction du votre contenu n'est pas disponible, consultez s'il vous plaît le guide [Comment ajouter un langage non supporté ?](/fr/posts/translation/new-language/)
+
+### Ajouter la langue dans `config.yaml`
+
+Après avoir identifié le code de la langue pour laquelle vous voulez traduire votre site, ouvrez le fichier `config.yaml`, et sous la section `languages` ajoutez ce qui suit:
+
+```yaml
+languages:
+  en:
+    languageName: English
+    weight: 1
+  <code_langue>:
+    languageName: <Nom de la langue>
+    weight: 2 # Vous pouvez paramètrer l'ordre des langues avec cette valeur
+```
+
+Par exemple, si vous voulez configurer `Français` comme nouvelle langue, la section devrait ressembler à ça:
+
+```yaml
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2 # Vous pouvez paramètrer l'ordre des langues avec cette valeur
+```
+
+## Translating the Main Page
+
+Vous pouvez traduire la page principale en créant un nouveau répertoire dans le répertoire `data`. Le nom de ce nouveau répertoire devra être `<code_langue>`. Par exemple, si nous voulons traduire vers le français, nous devrons créer le répertoire `fr` dans le répertoire `data`.
+
+Ensuite, vous pouvez créer votre fichier de données habituel tel que `about.yaml` ou `education.yaml`, en conservant la même structure et le même nom de fichier. Dans ces fichiers, vous pouvez simplement traduire le contenu des champs dans la langue désirée.
+
+## Et ensuite ?
+
+Vous pouvez consulter le guide suivant [Comment traduire des billets ?](/fr/posts/translation/content).

content/posts/writing-posts/front-matter/index.fr.md

@@ -0,0 +1,12 @@
+---
+title: "Front Matter"
+date: 2020-06-08T06:15:45+06:00
+menu:
+  sidebar:
+    name: Front Matter
+    identifier: writing-post-front-matter
+    parent: writing-post
+    weight: 20
+---
+
+### Article complet à venir...

content/posts/writing-posts/mermaid/index.es.md

@@ -40,6 +40,22 @@ El shortcode de `mermaid` acepta los siguientes parámetros:
 - **align**: Permite alinear el diagrama a la izquierda, derecha o centro. La alineación predeterminada es el centro.
 - **background:** Permite cambiar el color de fondo del diagrama.
 
+Además, también puedes personalizar el tema de tus diagramas, por ejemplo:
+
+```bash
+{{</* mermaid align="center" */>}}
+%%{init: {'theme':'default'}}%%
+  # your mermaid content here
+{{</* mermaid */>}}
+```
+
+El parámetro `theme` acepta los siguientes valores:
+- `default`
+- `neutral`
+- `dark`
+- `forest`
+- `base`
+
 ## Ejemplos
 
 Aquí hay algunos ejemplos de distintos diagramas usando mermaid.
@@ -197,21 +213,21 @@ merge newbranch
 
 {{< mermaid background="black" align="right" >}}
 gitGraph:
-options
-{
+  options
+  {
     "nodeSpacing": 150,
     "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
+  }
+  end
+  commit
+  branch newbranch
+  checkout newbranch
+  commit
+  commit
+  checkout master
+  commit
+  commit
+  merge newbranch
 {{< /mermaid >}}
 
 <hr>

content/posts/writing-posts/mermaid/index.fr.md

@@ -10,7 +10,7 @@ menu:
 mermaid: true
 ---
 
-Ce thème est construit avec le support de Mermaid propulsé par [maemaidj-js](https://mermaid-js.github.io/mermaid). Pour activer mermail pour une page, vous devez mettre `mermaid: true` dans le front-matter de votre page. Par exemple, cette page à le front-matter suivant:
+Ce thème est construit avec le support de Mermaid propulsé par [mermaid-js](https://mermaid-js.github.io/mermaid). Pour activer mermaid pour une page, vous devez mettre `mermaid: true` dans le front-matter de votre page. Par exemple, cette page à le front-matter suivant:
 
 ```yaml
 title: "Support de Mermaid"
@@ -37,6 +37,22 @@ Le short code `mermaid` accepte les paramètres suivants:
 - **align**: aligne votre diagramme à gauche, à droite, ou au centre. L'alignement par défaut est le centre.
 - **background:** change la couleur d'arrière plan de votre diagramme.
 
+De plus, vous pouvez également personnaliser le thème de vos diagrammes, par exemple:
+
+```bash
+{{</* mermaid align="center" */>}}
+%%{init: {'theme':'default'}}%%
+  # your mermaid content here
+{{</* mermaid */>}}
+```
+
+Le paramètre `theme` accepte les valeurs suivantes:
+- `default`
+- `neutral`
+- `dark`
+- `forest`
+- `base`
+
 ## Exemples
 
 Voici quelques exemples de différents diagramme utilisant mermaid.
@@ -172,43 +188,17 @@ classDiagram
 #### Graphique de Git
 
 ```bash
-{{</* mermaid background="black" align="right" */>}}
-gitGraph:
-options
-{
-    "nodeSpacing": 150,
-    "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
-{{</* /mermaid */>}}
-```
-
 {{< mermaid background="black" align="right" >}}
 gitGraph:
-options
-{
-    "nodeSpacing": 150,
-    "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
+  commit
+  branch newbranch
+  checkout newbranch
+  commit
+  commit
+  checkout master
+  commit
+  commit
+  merge newbranch
 {{< /mermaid >}}
 
 <hr>