Refactoring boutons et liens

- Nouveau template pour les boutons - Utilisation des variables globales pour les liens - Corrections typographiques
ai-safety-saclay · Nov 14, 2024 · 04444f6 · 04444f6
1 parent 714baec
commit 04444f6
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -7,8 +7,8 @@ TODO:
   - récupérer le RSS depuis https://blog.piaf-saclay.org/index.xml
   - créer un carousel
 - écrire la liste des exposés sur le blog
+- créer une classe pour `d-flex flex-column align-items-center`
 - boutons :
-  - pour éviter de se répéter : inclure du HTML ou du Markdown dans du Markdown, potentiellement via Pandoc
   - faut-il utiliser les boutons officiels de YouTube et de Discord ? 
 - régler les bugs de `style.scss`
 - définir le thème du site

diff --git a/__main__.py b/__main__.py
@@ -12,7 +12,7 @@
 
 MAIN_SITE_URL = 'https://piaf-saclay.org'
 BLOG_URL = 'https://blog.piaf-saclay.org'
-YOUTUBE_CHANNEL = 'https://www.youtube.com/channel/UC3edW_hy2Ri_yilIiM3LTDA'
+YOUTUBE_CHANNEL = 'https://www.youtube.com/@GROUPE-PIAF'
 GITHUB_PAGE = 'https://github.com/ai-safety-saclay'
 DISCORD_SERVER = 'https://discord.gg/pWRjGuP4nE'
 
@@ -74,13 +74,13 @@ def generate_page(title, template_path, **globals):
 ]
 
 md_configs = {
-                'mdx_wikilink_plus': {
-                    "url_whitespace": "%20",
-                },
-                "mdx_math": {
-                    "enable_dollar_delimiter": True
-                }
-             }
+    'mdx_wikilink_plus': {
+        "url_whitespace": "%20",
+    },
+    "mdx_math": {
+        "enable_dollar_delimiter": True
+    }
+}
 
 md = Markdown(extensions=['mdx_math', 'fenced_code', 'tables', 'full_yaml_metadata', 'mdx_wikilink_plus', 'markdown_gfm_admonition', 'nl2br'], extension_configs=md_configs)
 
@@ -132,15 +132,15 @@ def generate_blog():
     dir_util.copy_tree('./bootstrap-icons/font/fonts', './build/fonts')
 
     generate_home()
-    generate_page("Asimov: les dangers du numérique", "asimov.html", video_ids=ASIMOV_VIDEO_IDS)
+    generate_page("Asimov : les dangers du numérique", "asimov.html", video_ids=ASIMOV_VIDEO_IDS)
 
     lectures = reversed(read_yml('lectures.yml'))
     generate_page("Notre groupe de lecture", "groupe-de-lecture.html", lectures=lectures)
 
     generate_page("Politique de confidentialité", "confidentialite.md")
     generate_page("Mentions légales", "mentions-legales.md")
     generate_page("Nous aider", "nous-aider.md")
-    generate_page("À propos du piaf", "presentation.md")
+    generate_page("À propos du PIAF", "presentation.md")
     generate_page("Hackathons", "hackathons.md")
     generate_page("Contact", "contact.md")
 

diff --git a/components/button.html b/components/button.html
@@ -0,0 +1,8 @@
+<div class="flex-container">
+    <a class="btn" href="{{link}}">
+        {% if link_icon_class %}
+            <i class="bi {{link_icon_class}} me-2"></i>
+        {% endif %}
+        {{ btn_text|default('En savoir plus') }}
+    </a>
+</div>
diff --git a/components/footer.html b/components/footer.html
@@ -5,13 +5,24 @@
         <li class="list-inline-item"><a class="nav-link" href="/nous-aider.html">Nous aider</a></li>
     </ul>
 </div>
-<div class="footer-social"><a class="icon-link" href="https://github.com/ai-safety-saclay"><i
-            class="bi bi-github h4"></i></a><a class="icon-link"
-        href="https://www.youtube.com/channel/UC3edW_hy2Ri_yilIiM3LTDA"><i class="bi bi-youtube h4"></i></a><a
-        class="icon-link" href="https://discord.gg/pWRjGuP4nE"><i class="bi bi-discord h4"></i></a></div>
+<div class="footer-social">
+    <a class="icon-link" href="{{GITHUB_PAGE}}">
+        <i class="bi bi-github h4"></i>
+    </a>
+    <a class="icon-link" href="{{YOUTUBE_CHANNEL}}">
+        <i class="bi bi-youtube h4"></i>
+    </a>
+    <a class="icon-link" href="{{DISCORD_SERVER}}">
+        <i class="bi bi-discord h4"></i>
+    </a>
+</div>
 <div class="footer-org">
-    <div class="footer-piaf"><a class="navbar-brand" href="/"><img class="piaf-icon" src="./piaf_gray.svg"
-                width="60em" height="40em"><b class="piaf-icon-title">PIAF</b></a></div>
+    <div class="footer-piaf">
+        <a class="navbar-brand" href="/">
+            <img class="piaf-icon" src="./piaf_gray.svg" width="60em" height="40em">
+            <b class="piaf-icon-title">PIAF</b>
+        </a>
+    </div>
     <div class="footer-copyright">
         <p>© 2024 <strong>Pour une Intelligence Artificielle Fiable - PIAF</strong></p>
     </div>

diff --git a/components/home_card.html b/components/home_card.html
@@ -3,7 +3,12 @@
         <div class="card-body">
             <h2>{{title}}</h2>
             <p>{{content}}</p>
-            <a href="{{link}}">En savoir plus</a>
+            <a href="{{link}}">
+                {% if link_icon_class %}
+                    <i class="bi {{link_icon_class}} me-2"></i>
+                {% endif %}
+                {{ btn_text|default('En savoir plus') }}
+            </a>
         </div>
     </div>
 </div>
diff --git a/pages/asimov.html b/pages/asimov.html
@@ -21,11 +21,10 @@
 
 {% endmarkdown %}
 
-<div class="flex-container">
-    <a class="btn" href="https://www.youtube.com/@GROUPE-PIAF">
-        <i class="bi bi-youtube me-2"></i> Chaîne YouTube
-    </a>
-</div>
+{% set link="{{YOUTUBE_CHANNEL}}" %}
+{% set link_icon_class="bi-youtube" %}
+{% set btn_text="Chaîne YouTube" %}
+{% include "button.html" %}
 
 {% markdown %}
 
@@ -48,17 +47,15 @@
 
 Nous proposons de l'aide aux étudiants du plateau de Saclay pour mettre en place des conférences dans leurs écoles : le contact des intervenants, la communication et de l'aide pour la logistique le jour J. Nous pouvons également vous fournir un budget pour l'évènement.
 
-Pour contacter le responsable : [antonin.peronnet@piaf-saclay.org](mailto: antonin.peronnet@piaf-saclay.org).
+Pour contacter le responsable : [antonin.peronnet@telecom-paris.fr](mailto: antonin.peronnet@telecom-paris.fr).
 
 Vous pouvez également rejoindre l'association :
 
 {% endmarkdown %}
 
-<div class="flex-container">
-    <a class="btn" href="/contact.html#nous-rejoindre">
-        Nous rejoindre
-    </a>
-</div>
+{% set link="/contact.html#nous-rejoindre" %}
+{% set btn_text="Nous rejoindre" %}
+{% include "button.html" %}
 
 <br>
 <p>

diff --git a/pages/confidentialite.md b/pages/confidentialite.md
@@ -5,7 +5,7 @@
 
 ## À propos de ce site
 
-Cette politique de confidentialité s'applique au site principal du PIAF, [piaf-saclay.org](https://piaf-saclay.org), ainsi qu'au blog [blog.piaf-saclay.org](https://blog.piaf-saclay.org).
+Cette politique de confidentialité s'applique au site principal du PIAF, [piaf-saclay.org]({{MAIN_SITE_URL}}), ainsi qu'au blog [blog.piaf-saclay.org]({{BLOG_URL}}).
 
 ### Données personnelles
 

diff --git a/pages/contact.md b/pages/contact.md
@@ -12,11 +12,10 @@ Vous pouvez venir discuter avec nous, pour approfondir la sûreté de l'IA et pa
 
 Nous communiquons principalement sur Discord :
 
-<div class="flex-container">
-    <a class="btn" href="https://discord.gg/pWRjGuP4nE">
-        <i class="bi bi-discord me-2"></i> Rejoindre la discussion
-    </a>
-</div>
+{% set link="{{DISCORD_SERVER}}" %}
+{% set link_icon_class="bi-discord" %}
+{% set btn_text="Rejoindre la discussion" %}
+{% include "button.html" %}
 
 <br>
 

diff --git a/pages/groupe-de-lecture.html b/pages/groupe-de-lecture.html
@@ -20,9 +20,10 @@
 {% endmarkdown %}
 </div>
 
-<a class="btn" href="https://discord.gg/pWRjGuP4nE">
-    <i class="bi bi-discord me-2"></i> Rejoindre la discussion
-</a>
+{% set link="{{DISCORD_SERVER}}" %}
+{% set link_icon_class="bi-discord" %}
+{% set btn_text="Rejoindre la discussion" %}
+{% include "button.html" %}
 
 </section>
 

diff --git a/pages/home.html b/pages/home.html
@@ -43,20 +43,26 @@
         <h2 class="display-4 m-3"> Rejoindre la communauté</h2>
         <div class="row card-container">
             {% set title="Discord" %}
-            {% set link="https://discord.gg/pWRjGuP4nE" %}
+            {% set link="{{DISCORD_SERVER}}" %}
             {% set content="Rejoignez la communauté, discutez avec les membres de l'association et tenez-vous au courant des activités du PIAF." %}
+            {% set link_icon_class="bi-discord" %}
+            {% set btn_text="Rejoindre la discussion "%}
             {% include "home_card.html" %}
 
 
             {% set title="Github" %}
-            {% set link="https://github.com/ai-safety-saclay" %}
+            {% set link="{{GITHUB_PAGE}}" %}
             {% set content="Contribuez à notre projet sur la sécurité de l'IA dans les écoles de Paris-Saclay." %}
+            {% set link_icon_class="bi-github" %}
+            {% set btn_text="Notre organisation"%}
             {% include "home_card.html" %}
 
 
             {% set title="Nous contacter" %}
             {% set link="/contact.html" %}
             {% set content="Nous sommes ravis de collaborez avec vous et de répondre à vos questions." %}
+            {% set link_icon_class="bi-envelope-at" %}
+            {% set btn_text="Contact"%}
             {% include "home_card.html" %}
         </div>
     </section>

diff --git a/pages/mentions-legales.md b/pages/mentions-legales.md
@@ -20,11 +20,10 @@ Prins Bernhardplein 200, Amsterdam 1097JB, Pays-Bas
 
 Rendez-vous sur la page dédiée.
 
-<div class="flex-container">
-    <a class="btn" href="/contact.html">
-        <i class="bi bi-envelope-at me-2"></i> Contact
-    </a>
-</div>
+{% set link="/contact.html" %}
+{% set link_icon_class="bi-envelope-at" %}
+{% set btn_text="Contact" %}
+{% include "button.html" %}
 
 {% endmarkdown %}
 {% endblock %}
diff --git a/pages/presentation.md b/pages/presentation.md
@@ -33,11 +33,9 @@ Nous ne sommes pas militants pour une cause particulière. Notre but, c'est que
 
 Nous sommes véritablement passionnés par le sujet de la fiabilité de l'IA, mais nous avons besoin de vous pour avoir le plus d'impact possible.
 
-<div class="flex-container">
-    <a class="btn" href="/nous-aider.html">
-        Nous aider
-    </a>
-</div>
+{% set link="/nous-aider.html" %}
+{% set btn_text="Nous aider" %}
+{% include "button.html" %}
 
 {% endmarkdown %}
 {% endblock %}