From 9acf093872435eff9076752be7c7bf1114675b8e Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Fri, 14 Mar 2025 15:43:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20:=20translate=20table=20of=20con?=
 =?UTF-8?q?tents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/toc.js                        | 32 +++++++++++++++++++++++++
 i18n/en.yml                             |  4 +++-
 i18n/fr.yml                             |  4 +++-
 layouts/partials/table_of_contents.html |  6 +++++
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/toc.js
 create mode 100644 layouts/partials/table_of_contents.html

diff --git a/assets/js/toc.js b/assets/js/toc.js
new file mode 100644
index 0000000..8d92ed1
--- /dev/null
+++ b/assets/js/toc.js
@@ -0,0 +1,32 @@
+/*
+    Original Author: Bramus Van Damme
+    Link to original: https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/
+
+    Most of this code comes courtesy of Bramus Van Damme, with some minor tweaks
+    to get it working for my use case.  Thanks, Bramus!
+*/
+
+let activeElement = null;
+window.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (activeElement) {
+                document.querySelectorAll("nav[id='TableOfContents'] li").forEach((node) => {
+                    node.classList.add('inactive');
+                    node.classList.replace('active', 'inactive');
+                });
+            }
+            if (entry.intersectionRatio > 0) {
+                activeElement = entry.target.getAttribute('id');
+            }
+            if (activeElement) {
+                document.querySelector(`nav[id='TableOfContents'] li a[href="#${activeElement}"]`).parentElement.classList.replace('inactive', 'active');
+            }
+        });
+    });
+
+    const post = document.querySelector(".post");
+    post.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").forEach((section) => {
+        observer.observe(section);
+    });
+});
diff --git a/i18n/en.yml b/i18n/en.yml
index 361497b..b713328 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -12,4 +12,6 @@ series-other: 'Other posts in this series: '
 translations: Translations
 
 previous: « Previous
-next: Next »
\ No newline at end of file
+next: Next »
+
+toc: Contents
\ No newline at end of file
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 0beaf1b..b84cf67 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -12,4 +12,6 @@ series-other: "Autres posts de cette série : "
 translations: Traductions
 
 previous: « Précédent
-next: Suivant »
\ No newline at end of file
+next: Suivant »
+
+toc: Sommaire
\ No newline at end of file
diff --git a/layouts/partials/table_of_contents.html b/layouts/partials/table_of_contents.html
new file mode 100644
index 0000000..3ed4007
--- /dev/null
+++ b/layouts/partials/table_of_contents.html
@@ -0,0 +1,6 @@
+<div class="article-toc {{if .Site.Params.layoutReverse}}layout-reverse{{end}}">
+    <div class="toc-wrapper">
+      <h4 id="contents">{{ i18n "toc" }}</h4>
+      {{ .TableOfContents }}
+    </div>
+</div>
-- 
2.51.2