From 93808cb16d25d56dde64617facd56d0884693d72 Mon Sep 17 00:00:00 2001
From: mrtoine <anthony.violet@outlook.be>
Date: Mon, 15 Dec 2025 07:12:11 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20des=20blocs=20de=20titre=20dynamique=20?=
 =?UTF-8?q?et=20des=20balises=20meta=20pour=20am=C3=A9liorer=20le=20SEO.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/courses/lesson.html |  1 +
 templates/courses/show.html   |  1 +
 templates/layout.html         | 85 ++++++++++-------------------------
 3 files changed, 25 insertions(+), 62 deletions(-)
diff --git a/templates/courses/lesson.html b/templates/courses/lesson.html
index 1b98dd1..a73ee1b 100644
--- a/templates/courses/lesson.html
+++ b/templates/courses/lesson.html
@@ -1,4 +1,5 @@
 {% extends 'layout.html' %}
+{% block title %}{{ course.name }} : {{ lesson.name }}{% endblock %}
 
 {% block content %}
 <section>
diff --git a/templates/courses/show.html b/templates/courses/show.html
index 08f20ae..a74171f 100644
--- a/templates/courses/show.html
+++ b/templates/courses/show.html
@@ -1,4 +1,5 @@
 {% extends 'layout.html' %}
+{% block title %}{{ course.name }}{% endblock %}
 
 {% block content %}
 <section>
diff --git a/templates/layout.html b/templates/layout.html
index c162cb4..61b721c 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -3,16 +3,36 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     {% load static %}
+
+    <title>PartirDeZero - {% block title %}{% endblock %}</title>
+
+    <meta name="description" content="{% block description %}Apprendre le développement web et la programmation en partant de zéro.{% endblock %}">
+
+    <meta name="author" content="PartirDeZero">
+
+    <link rel="canonical" href="{% block canonical %}{{ request.build_absolute_uri }}{% endblock %}">
+
+    <meta property="og:title" content="{% block og_title %}{{ self.title }}{% endblock %}">
+    <meta property="og:description" content="{% block og_description %}Apprendre le développement web et la programmation.{% endblock %}">
+    <meta property="og:image" content="{% block og_image %}{% static 'img/default-share-image.jpg' %}{% endblock %}">
+    <meta property="og:url" content="{{ request.build_absolute_uri }}">
+    <meta property="og:type" content="website">
+
+    <meta name="twitter:card" content="summary_large_image">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="{% static 'css/app.css' %}">
     <link id="theme-css" rel="stylesheet" href="{% static 'css/colors_dark.css' %}">
     <link rel="stylesheet" href="{% static 'highlight/styles/agate.min.css' %}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
-    <!-- <script src="{% static 'js/night_day.js' %}" defer></script> -->
+
+    {% block extra_head %}{% endblock %}
+
     <script src="{% static 'js/functions.js' %}" defer></script>
     <script>
         // Theme bootstrap: apply saved preference ASAP to avoid flash
@@ -22,7 +42,6 @@
                 var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
                 var theme = stored || (prefersLight ? 'light' : 'dark');
                 document.documentElement.setAttribute('data-theme', theme);
-                // If light, switch the theme stylesheet href before paint
                 if (theme === 'light') {
                     var link = document.getElementById('theme-css');
                     if (link) link.href = "{% static 'css/colors_light.css' %}";
@@ -32,71 +51,12 @@
     </script>
     <script src="{%static 'highlight/highlight.min.js' %}"></script>
     <script defer>hljs.highlightAll();</script>
-    <title>PartirDeZero</title>
 </head>
 <body>
     {% block header %}
         {% include "partials/_header.html" %}
     {% endblock %}
-            <!-- Décor saisonnier (désactivé par défaut) -->
-            <!--
-            <div class="seasonal-banner">
-                Guirlande de Noël
-                <svg width="100%" height="200px" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg">
-                    <path id="wire" d="M0,100 Q250,200 500,100 T1000,100" stroke="black" stroke-width="2" fill="none" pathLength="100"/>
-                    <circle class="light" r="10" fill="red">
-                        <animateMotion repeatCount="indefinite" dur="0s">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="green">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.1;0.1" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="blue">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.2;0.2" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="yellow">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.3;0.3" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="purple">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.4;0.4" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="red">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.5;0.5" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="green">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.6;0.6" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="blue">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.7;0.7" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="yellow">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.8;0.8" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                    <circle class="light" r="10" fill="purple">
-                        <animateMotion repeatCount="indefinite" dur="0s" keyPoints="0.9;0.9" keyTimes="0;1">
-                            <mpath href="#wire"/>
-                        </animateMotion>
-                    </circle>
-                </svg>
-            </div>
-            -->
+
     <main>
         {% if messages %}
             <ul class="flash_messages">
@@ -105,6 +65,7 @@
                 {% endfor %}
             </ul>
         {% endif %}
+
         {% block content %}{% endblock %}
     </main>
 
