Ajout d'une table des matières dans A propos #36

src/assets/style.css

@@ -253,3 +253,84 @@ summary > h3 {
     display: none !important;
   }
 }
+
+/* CSS for the /a-propos page Layout and Table of Contents */
+
+.a-propos-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.a-propos-content {
+  flex: 1 1 70%;
+  max-width: 75%;
+  padding-right: 40px;
+}
+
+.a-propos-toc {
+  flex: 0 0 25%;
+  max-width: 25%;
+  /* Keeps it from growing too large */
+  position: sticky;
+  top: 40px;
+  /* Sticks 40px from the top of the viewport */
+  border-left: 2px solid #333;
+  /* Dark vertical line like hedgedoc */
+  padding-left: 15px;
+  margin-top: 40px;
+  background-color: #fff;
+  /* Aligns visually with the first header */
+}
+
+/* Hide TOC on smaller screens */
+@media (max-width: 992px) {
+  .a-propos-content {
+    max-width: 100%;
+    padding-right: 0;
+    flex: 1 1 100%;
+  }
+
+  .a-propos-toc {
+    display: none;
+  }
+}
+
+/* Styling for TOC links */
+.toc-link {
+  display: block;
+  color: #666;
+  text-decoration: none;
+  font-size: 0.9em;
+  padding: 2px 0;
+  transition: color 0.2s, font-weight 0.2s;
+  line-height: 1.4;
+}
+
+.toc-link:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+.toc-active {
+  color: #000;
+  font-weight: bold;
+}
+
+/* Indentation for H5 levels (Level 2 in our simplified TOC) */
+/* Using specific classes if I generate them, or just generic hierarchy if nested */
+.toc-level-2 {
+  margin-left: 15px;
+  font-size: 0.85em;
+}
+
+/* Header title for TOC (optional) */
+.toc-header {
+  font-weight: bold;
+  margin-bottom: 10px;
+  display: block;
+  color: #333;
+}

src/pages/a-propos.py

@@ -17,11 +17,17 @@ register_page(
     order=5,
 )
 
-layout = [
+layout = html.Div(
-    html.Div(
     className="container",
     children=[
         html.H2(name),
+        html.Div(
+            className="a-propos-container",
+            children=[
+                # Main Content Column
+                html.Div(
+                    className="a-propos-content",
+                    children=[
                         dcc.Markdown(
                             """Outil d'exploration libre et gratuit des données de marchés publics, développé par Colin Maudry.
 
@@ -34,33 +40,37 @@ les fonctionnalités actuelles de decp.info. Il est ainsi possible de rajouter
 - de nombreuses visualisations de données (cartes, graphiques, tableaux) sur des thématiques variées (vivacité de la concurrence, secteurs d'activité, insertion par l'activité économique (IAE), distance acheteur-titulaire...)
 - des alertes par email si des marchés correspondant à certains critères
 - ...et toutes les fonctionnalités auxquelles vous pourrez penser
-
+"""
-#### Consommer les données brutes
+                        ),
-
+                        html.H4("Consommer les données brutes", id="donnees-brutes"),
+                        dcc.Markdown(
+                            """
 Vous pouvez consommer les données qui alimentent decp.info
 
 - en les téléchargeant [sur data.gouv.fr](https://www.data.gouv.fr/datasets/donnees-essentielles-de-la-commande-publique-consolidees-format-tabulaire) (Parquet, CSV), pensez à lire la description du jeu de données
 - en interrogeant l'[API REST ouverte](https://www.data.gouv.fr/datasets/donnees-essentielles-de-la-commande-publique-consolidees-format-tabulaire#user-content-api-rest)
-
 """
                         ),
                         html.H4("Contact", id="contact"),
-            dcc.Markdown("""
+                        dcc.Markdown(
-
+                            """
 - Email : [colin@colmo.tech](mailto:colin@colmo.tech)
 - Bluesky : [@col1m.bsky.social](https://bsky.app/profile/col1m.bsky.social)
 - Mastodon : [col1m@mamot.fr](https://mamot.fr/@col1m)
 - LinkedIn : [colinmaudry](https://www.linkedin.com/in/colinmaudry/)
-
+"""
-   """),
+                        ),
                         html.H4("Pour contribuer", id="contribuer"),
-            dcc.Markdown("""
+                        dcc.Markdown(
+                            """
 - via l'achat d'une prestation de service (devis, prestation, facture), vous pouvez financer le développement de [fonctionnalités prévues](https://github.com/ColinMaudry/decp.info/issues), ou d'autres !
 - ma société accepte aussi les dons (pas de réduction d'impôt possible)
 - écrivez-moi et on discute !
-
+"""
-#### Pour explorer le projet
+                        ),
-
+                        html.H4("Pour explorer le projet", id="explorer"),
+                        dcc.Markdown(
+                            """
 - ✉️  [inscription à la liste de diffusion](https://6254d9a3.sibforms.com/serve/MUIFAEonUVkoSVrdgey18CTgLyI16xw4yeu-M-YOUzhWE_AgfQfbgkyT7GvA_RYLro9MfuRqkzQxSvu7-uzbMSv2a2ZQPsliM7wtiiqIL8kR2zOvl6m11fb5qjcOxMAYsLiY_YBi3P7NY95CTJ8vRY4CpsDclF2iLooOElKkTgIgi5nePe7zAIrgiYM5v2EuALlGJZMEG9vBP-Cu) (annonces des mises à jour et évènements, maximum une fois par mois)
 - 💾  [données consolidées en Open Data](https://www.data.gouv.fr/datasets/donnees-essentielles-de-la-commande-publique-consolidees-format-tabulaire/)
 - 🗞️  [mon blog](https://colin.maudry.com)
@@ -68,9 +78,14 @@ Vous pouvez consommer les données qui alimentent decp.info
 - 🚰  code source
     - [de decp.info](https://github.com/ColinMaudry/decp.info)
     - [du traitement des données](https://github.com/ColinMaudry/decp-processing)
-    """),
+"""
-            html.H4("Qualité et exhaustivité des données", id="qualite-exhausitivite"),
+                        ),
-            dcc.Markdown("""Les données visibles sur ce site proviennent exclusivement de la publication de données ouvertes par les acheteurs publics ou en leur nom, régie par [l'arrêté du 22 décembre 2022](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000046850496). Leur qualité est donc principalement liée à la qualité de leur saisie par les agents publics, parfois peu aidé·es par la qualité des outils à leur disposition. Je pense que l'analyse de marchés individuels et le comptage de marchés sur des critères autres que financiers sont plutôt fiables. En revanche, certains montants de marché estimés à des valeurs farfelues ([1 euro](https://decp.info/marches/432766947000192025S01301), [1 milliard](https://decp.info/marches/2459004280001320210000000271)) faussent les calculs par aggrégation (sommes, moyennes, médianes) et donc la production de statistiques financières fiables. Acheteurs, acheteuses : s'il vous plaît, essayez d'estimer les montants des marchés publics attribués de manière plus précise.
+                        html.H4(
+                            "Qualité et exhaustivité des données",
+                            id="qualite-exhausitivite",
+                        ),
+                        dcc.Markdown(
+                            """Les données visibles sur ce site proviennent exclusivement de la publication de données ouvertes par les acheteurs publics ou en leur nom, régie par [l'arrêté du 22 décembre 2022](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000046850496). Leur qualité est donc principalement liée à la qualité de leur saisie par les agents publics, parfois peu aidé·es par la qualité des outils à leur disposition. Je pense que l'analyse de marchés individuels et le comptage de marchés sur des critères autres que financiers sont plutôt fiables. En revanche, certains montants de marché estimés à des valeurs farfelues ([1 euro](https://decp.info/marches/432766947000192025S01301), [1 milliard](https://decp.info/marches/2459004280001320210000000271)) faussent les calculs par aggrégation (sommes, moyennes, médianes) et donc la production de statistiques financières fiables. Acheteurs, acheteuses : s'il vous plaît, essayez d'estimer les montants des marchés publics attribués de manière plus précise.
 
 Quant à l'exhaustivité, je consolide toutes les sources de données exploitables que j'ai pu identifier (voir [statistiques](/statistiques)). Certains profils d'acheteurs ne publient pas leurs données malgré l'obligation réglementaire :
 
@@ -79,21 +94,24 @@ Quant à l'exhaustivité, je consolide toutes les sources de données exploitabl
 
 **marches-publics.info** (AWS) publie ses données de manière assez sporadique depuis début 2023. Compte tenu de son poids dans le secteur, c'est assez dommageable pour la transparence des marchés publics.
 
-Au milieu de ces mauvaises nouvelles, je tiens à souligner la belle continuité de la publication par la DGFiP des données des marchés publics remontées via le [protocole PES](https://www.collectivites-locales.gouv.fr/finances-locales/le-protocole-dechange-standard-pes). Merci à leurs équipes."""),
+Au milieu de ces mauvaises nouvelles, je tiens à souligner la belle continuité de la publication par la DGFiP des données des marchés publics remontées via le [protocole PES](https://www.collectivites-locales.gouv.fr/finances-locales/le-protocole-dechange-standard-pes). Merci à leurs équipes."""
+                        ),
                         html.H4("Sources de données ", id="sources"),
                         get_sources_tables(os.getenv("SOURCE_STATS_CSV_PATH")),
                         html.H4("Mentions légales", id="mentions-legales"),
-            dcc.Markdown("""
+                        html.H5("Publication", id="publication"),
-##### Publication
+                        dcc.Markdown(
-
+                            """
 Site Web développé et édité par [SAS Colmo](https://annuaire-entreprises.data.gouv.fr/entreprise/colmo-989393350), 989 393 350 RCS Rennes au capital de 3 000 euros.
 
 Siège social : 1 carrefour Jouaust, 35000 Rennes
 
 Hébergement : serveur situé en France et administré par Scaleway, 8 rue de la Ville l’Evêque, 75008 Paris
-
+"""
-##### Suivi d'audience
+                        ),
-
+                        html.H5("Suivi d'audience", id="audience"),
+                        dcc.Markdown(
+                            """
 Ce site dépose un petit fichier texte (un « cookie ») sur votre ordinateur lorsque vous le consultez ([Wikipédia](https://fr.wikipedia.org/wiki/Cookie_(informatique))). Cela me permet de mesurer le nombre de visites, de distinguer les nouveaux visiteurs des utilisateurs réguliers et ainsi de communiquer sur l'impact de decp.info.
 
 **Ce site n’affiche pas de bannière de consentement aux cookies, pourquoi ?**
@@ -102,21 +120,64 @@ C’est vrai, vous n’avez pas eu à cliquer sur un bloc qui recouvre la moiti
 
 Rien d’exceptionnel, je respecte simplement la loi, qui dit que certains outils de suivi d’audience, correctement configurés pour respecter la vie privée, sont exemptés d’autorisation préalable.
 
-J’utilise pour cela [Matomo](https://matomo.org/), un outil [libre](https://matomo.org/free-software/), paramétré pour être en conformité avec [la recommandation « Cookies »](https://www.cnil.fr/fr/solutions-pour-les-cookies-de-mesure-daudience) de la CNIL. Cela signifie que votre adresse IP, par exemple, est anonymisée avant d’être enregistrée. Il m’est donc impossible d’associer vos visites sur ce site à votre personne."""),
+J’utilise pour cela [Matomo](https://matomo.org/), un outil [libre](https://matomo.org/free-software/), paramétré pour être en conformité avec [la recommandation « Cookies »](https://www.cnil.fr/fr/solutions-pour-les-cookies-de-mesure-daudience) de la CNIL. Cela signifie que votre adresse IP, par exemple, est anonymisée avant d’être enregistrée. Il m’est donc impossible d’associer vos visites sur ce site à votre personne."""
-            # Matomo propose cependant ce formulaire si vous souhaitez totalement désactiver le suivi de vos sessions sur ce site :"""),
+                        ),
-            #             html.Div(
+                    ],
-            #                 id="matomo-opt-out",
+                ),
-            #                 style={
+                # Table of Contents Column
-            #                     "border": "1pt solid lightgrey",
+                html.Div(
-            #                     "padding": "12px",
+                    className="a-propos-toc",
-            #                     "margin": "auto 0 auto 12px",
+                    children=[
-            #                     "width": "80%",
+                        html.Div(
-            #                 },
+                            [
-            #                 children=["Vous utilisez un bloqueur de suivi de trafic."],
+                                html.A(
-            #             ),
+                                    "Consommer les données brutes",
-            #             html.Script(
+                                    href="#donnees-brutes",
-            #                 src="https://analytics.maudry.com/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&showIntro=1"
+                                    className="toc-link",
-            #             ),
+                                ),
+                                html.A(
+                                    "Contact", href="#contact", className="toc-link"
+                                ),
+                                html.A(
+                                    "Pour contribuer",
+                                    href="#contribuer",
+                                    className="toc-link",
+                                ),
+                                html.A(
+                                    "Pour explorer le projet",
+                                    href="#explorer",
+                                    className="toc-link",
+                                ),
+                                html.A(
+                                    "Qualité et exhaustivité des données",
+                                    href="#qualite-exhausitivite",
+                                    className="toc-link",
+                                ),
+                                html.A(
+                                    "Sources de données",
+                                    href="#sources",
+                                    className="toc-link",
+                                ),
+                                html.A(
+                                    "Mentions légales",
+                                    href="#mentions-legales",
+                                    className="toc-link",
+                                ),
+                                html.A(
+                                    "Publication",
+                                    href="#publication",
+                                    className="toc-link toc-level-2",
+                                ),
+                                html.A(
+                                    "Suivi d'audience",
+                                    href="#audience",
+                                    className="toc-link toc-level-2",
+                                ),
+                            ]
+                        ),
+                    ],
+                ),
+            ],
+        ),
     ],
 )
-]