Adding tags pages

9 files changed, 179 insertions, 6 deletions

diff --git a/articles/data-privacy.md b/articles/data-privacy.md
index 707a39b..eef97f7 100644
--- a/articles/data-privacy.md
+++ b/articles/data-privacy.md
@@ -1,6 +1,7 @@
 ---
 date: 25-06-2023
 description: Les bonnes pratiques pour la vie privée et l'améliorer
+tags: vie privée, bonne pratique 
 ---
 
 # Données et vie privée
@@ -90,7 +91,7 @@ Pour plus d'informations sur les sauvegardes et comment en réaliser proprement
 
 ### Decentralisation
 
-Les systèmes décentralisés & fédérer permettent une grande amélioration de la vie privée, j'ai parlé du fédiverse précédemment mais il en existe plein d'autres (Matrix, mail..).  
+Les systèmes décentralisés et fédérer permettent une grande amélioration de la vie privée, j'ai parlé du fédiverse précédemment mais il en existe plein d'autres (Matrix, mail..).  
   
 Pourquoi ce système est mieux pour la vie privée ? Car vous pouvez choisir le serveur qui héberge vos données, et fort probablement l'hébergé vous mêmes. Alors attention tout ceux qui auront   échangés avec vous et qui ne sont pas sur le même serveur auront les données de cet échange enregistré sur le serveur qui les héberge.  
   
diff --git a/assets/css/style.css b/assets/css/style.css
index 5724c47..44ae3e6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -110,6 +110,12 @@ main blockquote
 	border-left: 2px solid var(--quote-border);
 }
 
+/* Tags */
+main .tags li
+{
+	display: inline;
+}
+
 /*
 	FOOTER
 */
diff --git a/index.html b/index.html
index cf30587..20f702b 100644
--- a/index.html
+++ b/index.html
@@ -40,13 +40,20 @@
             <ul>
 				<li><a href="pages/data-privacy.html">Données et vie privée</a><p>25-06-2023</p></li>
 			</ul>
+			<h2>Tags:</h2>
+			<div class="tags">
+				<ul>
+					<li><a href="pages/tags/vie_privée.html">vie privée</a></li>
+					<li><a href="pages/tags/bonne_pratique.html">bonne pratique</a></li>
+				</ul>
+			</div>
         </article>
     </main>
 
     <!-- Bas de page -->
     <hr>
     <footer>
-        <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
 
         <!-- Réseaux sociaux-->
         <div id="social">
diff --git a/pages/about.html b/pages/about.html
index b17f931..0da9129 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -52,7 +52,7 @@
     <!-- Bas de page -->
     <hr>
     <footer>
-        <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
 
         <!-- Réseaux sociaux-->
         <div id="social">
diff --git a/pages/data-privacy.html b/pages/data-privacy.html
index c2009af..ff690ec 100644
--- a/pages/data-privacy.html
+++ b/pages/data-privacy.html
@@ -85,7 +85,7 @@
 <p>Pour cela il vous faudra effectuer des sauvegardes hebdomadaire, sur un disque dur externe et non dans le cloud (ne gâchons pas tout ce travail sur la vie privée pour tout stockée chez un GAFAM..).</p>
 <p>Pour plus d'informations sur les sauvegardes et comment en réaliser proprement je vous redirige vers mon <a href="">article</a> sur ce sujet.</p>
 <h3>Decentralisation</h3>
-<p>Les systèmes décentralisés & fédérer permettent une grande amélioration de la vie privée, j'ai parlé du fédiverse précédemment mais il en existe plein d'autres (Matrix, mail..).</p>
+<p>Les systèmes décentralisés et fédérer permettent une grande amélioration de la vie privée, j'ai parlé du fédiverse précédemment mais il en existe plein d'autres (Matrix, mail..).</p>
 <p>Pourquoi ce système est mieux pour la vie privée ? Car vous pouvez choisir le serveur qui héberge vos données, et fort probablement l'hébergé vous mêmes. Alors attention tout ceux qui auront   échangés avec vous et qui ne sont pas sur le même serveur auront les données de cet échange enregistré sur le serveur qui les héberge.</p>
 <p>L'autre avantage de la décentralisation est la redondance et l'indépendance, imaginer que demain Meta fasse faillite, Facebook, Instagram et autre ne fonctionnent plus du tout, et toutes vos données seront perdus. Alors qu'avec un système décentralisé, si le serveur ferme vous pourrez toujours utiliser le service sur un autre serveur. De même que si le service fait une mise à jour qui ne plait pas à l'hébergeur du serveur il peut ne pas la faire tout en continuant à être lié aux autres s'ils le souhaitent (pratique pour des mises à jour contre la vie privée).</p>
 <h3>Conclusion</h3>
@@ -120,7 +120,7 @@
     <!-- Bas de page -->
     <hr>
     <footer>
-        <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
 
         <!-- Réseaux sociaux-->
         <div id="social">
diff --git a/pages/how-to-read.html b/pages/how-to-read.html
index 62d75e8..4eef2d4 100644
--- a/pages/how-to-read.html
+++ b/pages/how-to-read.html
@@ -49,7 +49,7 @@
     <!-- Bas de page -->
     <hr>
     <footer>
-        <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
 
         <!-- Réseaux sociaux-->
         <div id="social">
diff --git a/pages/tags/bonne_pratique.html b/pages/tags/bonne_pratique.html
new file mode 100644
index 0000000..140a2a3
--- /dev/null
+++ b/pages/tags/bonne_pratique.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <!-- Metadonnées -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="alternate" href="../../atom.xml" type="application/atom+xml" title="RSS">
+    <link rel="stylesheet" href="../../assets/css/style.css">
+    <link rel="shortcut icon" href="../../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Tag: bonne pratique</title>
+</head>
+<body>
+    <!-- En tête -->
+    <header>
+        <nav>
+            <ul>
+                <li><a href="../../index.html">Accueil</a></li>
+                <li><a href="../../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../../pages/about.html">À Propos</a></li>
+                <li><a href="../../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Contenu principale -->
+    <main>
+        <article>
+            <h1>bonne pratique</h1>
+            <ul>
+				<li><a href="../../pages/data-privacy.html">Données et vie privée</a></li>
+			</ul>
+
+        </article>
+    </main>
+
+    <!-- Bas de page -->
+    <hr>
+    <footer>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/pages/tags/vie_privée.html b/pages/tags/vie_privée.html
new file mode 100644
index 0000000..60dff05
--- /dev/null
+++ b/pages/tags/vie_privée.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <!-- Metadonnées -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="alternate" href="../../atom.xml" type="application/atom+xml" title="RSS">
+    <link rel="stylesheet" href="../../assets/css/style.css">
+    <link rel="shortcut icon" href="../../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Tag: vie privée</title>
+</head>
+<body>
+    <!-- En tête -->
+    <header>
+        <nav>
+            <ul>
+                <li><a href="../../index.html">Accueil</a></li>
+                <li><a href="../../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../../pages/about.html">À Propos</a></li>
+                <li><a href="../../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Contenu principale -->
+    <main>
+        <article>
+            <h1>vie privée</h1>
+            <ul>
+				<li><a href="../../pages/data-privacy.html">Données et vie privée</a></li>
+			</ul>
+
+        </article>
+    </main>
+
+    <!-- Bas de page -->
+    <hr>
+    <footer>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/templates/tags_template.html b/templates/tags_template.html
new file mode 100644
index 0000000..6e84ddf
--- /dev/null
+++ b/templates/tags_template.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <!-- Metadonnées -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS & Atom -->
+    <link rel="alternate" href="../../atom.xml" type="application/atom+xml" title="RSS">
+    <link rel="stylesheet" href="../../assets/css/style.css">
+    <link rel="shortcut icon" href="../../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Tag: $TITLE</title>
+</head>
+<body>
+    <!-- En tête -->
+    <header>
+        <nav>
+            <ul>
+                <li><a href="../../index.html">Accueil</a></li>
+                <li><a href="../../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../../pages/about.html">À Propos</a></li>
+                <li><a href="../../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Contenu principale -->
+    <main>
+        <article>
+            <h1>$TITLE</h1>
+            $CONTENT
+        </article>
+    </main>
+
+    <!-- Bas de page -->
+    <hr>
+    <footer>
+        <p>Contactez-moi pour toute question ou discussion, je réponds assez vite en général.</p>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
+        </div>
+    </footer>
+</body>
+</html>