✨ feat: add backlinks to footnotes (#101)

config.toml

@@ -140,6 +140,9 @@ theme_switcher = true
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true
 
+# Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).
+footnote_backlinks = false
+
 # Date format used when listing posts (main page, /blog section, tag posts list…)
 # Default is "6th July 2049" in English and "%d %B %Y" in other languages.
 long_date_format = "%d %B %Y"

content/blog/javascript.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Sense JavaScript obligatori"
 date = 2023-01-06
-updated = 2023-08-01
+updated = 2023-08-02
 description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
 
 [taxonomies]
@@ -10,20 +10,25 @@ tags = ["funcionalitat", "tutorial"]
 
 Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles d'aconseguir amb HTML i CSS.
 
-### Opcions globals
+## Opcions globals
+
+Pots habilitar les següents opcions per a totes les pàgines:
 
 - **Canvi de mode clar/fosc**. Habilitat configurant `theme_switcher = true`. (~900 bytes)
 - **Còpia de blocs de codi amb un sol clic**. Habilitat configurant `copy_button = true`. (~700 bytes)
+- **Enllaços de retorn de notes a peu de pàgina**. Habilitats configurant `footnote_backlinks = true` (~500 bytes).
+
 
 Aquestes dues configuracions es poden aplicar a la secció `[extra]` del teu fitxer `config.toml`.
 
 - [**Comentaris**](@/blog/comments.ca.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant `enabled_for_all_posts = true` a la secció correcta de `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`).
 
-### Configuracions específiques de la pàgina
+## Configuracions específiques de la pàgina
 
 Les següents configuracions es poden habilitar en posts específics configurant certes variables a la secció `[extra]` del front matter de la publicació.
 
 - [**KaTeX**](@/blog/markdown.ca.md#katex) (274 KB) es pot habilitar amb `katex = true`.
-- [**Comentaris**](@/blog/comments.ca.md). Es poden habilitar a publicacions específiques assignant el nom del sistema `= true` (per exemple, `hyvortalk = true`).
+- [**Comentaris**](@/blog/comments.ca.md). Es poden habilitar assignant el nom del sistema `= true` (per exemple, `hyvortalk = true`).
+- **Enllaços de retorn de notes a peu de pàgina**. Es poden habilitar amb `footnote_backlinks = true`.
 
 A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)

content/blog/javascript.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Sin JavaScript obligatorio"
 date = 2023-01-06
-updated = 2023-08-01
+updated = 2023-08-02
 description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
 
 [taxonomies]
@@ -10,20 +10,24 @@ tags = ["funcionalidad", "tutorial"]
 
 Este tema no tiene JavaScript obligatorio. Opcionalmente, puede cargar una cantidad mínima para agregar algunas características que son imposibles de lograr con HTML y CSS.
 
-### Opciones globales
+## Opciones globales
+
+Puedes habilitar las siguientes opciones en todas las páginas:
 
 - **Interruptor de modo claro/oscuro**. Habilitado configurando `theme_switcher = true`. (~900 bytes)
 - **Copia de bloques de código con un solo clic**. Habilitado configurando `copy_button = true`. (~700 bytes)
+- **Enlaces de retorno de notas al pie**. Habilitados configurando `footnote_backlinks = true` (~500 bytes).
 
 Estas dos configuraciones se pueden aplicar en la sección `[extra]` de tu `config.toml`.
 
 - [**Comentarios**](@/blog/comments.es.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) se pueden habilitar globalmente configurando `enabled_for_all_posts = true` en la sección apropiada de tu archivo `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`).
 
-### Opciones para publicaciones individuales
+## Opciones para publicaciones individuales
 
 Las siguientes configuraciones se pueden habilitar en publicaciones específicas configurando ciertas variables en la sección `[extra]` del front matter del post.
 
 - [**KaTeX**](@/blog/markdown.es.md#katex) (274 KB) se puede habilitar con `katex = true`.
-- [**Comentarios**](@/blog/comments.es.md). Se pueden habilitar en posts específicos configurando el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`).
+- [**Comentarios**](@/blog/comments.es.md). Se pueden habilitar con el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`).
+- **Enlaces de retorno de notas al pie**. Se pueden habilitar con `footnote_backlinks = true`.
 
 Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Como debería ser (en su mayoría) la web :-)

content/blog/javascript.md

@@ -1,7 +1,7 @@
 +++
 title = "No mandatory JavaScript"
 date = 2023-01-06
-updated = 2023-08-01
+updated = 2023-08-02
 description = "JavaScript is only used when HTML and CSS aren't enough."
 
 [taxonomies]
@@ -10,20 +10,24 @@ tags = ["showcase", "tutorial"]
 
 This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.
 
-### Globally enabled settings
+## Globally enabled settings
+
+You can enable the following settings for all pages:
 
 - **Light/dark mode switch**. Enabled by setting `theme_switcher = true`. (~900 bytes)
 - **One-click copy of code blocks**. Enabled by setting `copy_button = true`. (~700 bytes)
+- **Footnote backlinks**. Enabled by setting `footnote_backlinks = true` (~500 bytes).
 
-These two settings can be applied in the `[extra]` section of your `config.toml` file.
+These settings can be applied in the `[extra]` section of your `config.toml` file.
 
 - [**Comments**](@/blog/comments.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting `enabled_for_all_posts = true` in the right section of your  `config.toml` (i.e. `[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` or `[extra.isso]`).
 
-### Page-specific settings
+## Page-specific settings
 
 The following settings can be enabled on specific posts by setting certain variables in the `[extra]` section of the post's front matter.
 
-- [**KaTeX** support](@/blog/markdown.md#katex) (274 KB) can be enabled it by setting `katex = true`.
+- [**KaTeX** support](@/blog/markdown.md#katex) (274 KB) can be enabled by setting `katex = true`.
-- [**Comments**](@/blog/comments.md) can be enabled on individual posts by setting the name of the system `= true` (e.g. `hyvortalk = true`).
+- [**Comments**](@/blog/comments.md) can be enabled by setting the name of the system `= true` (e.g. `hyvortalk = true`).
+- **Footnote backlinks** can be enabled by setting `footnote_backlinks = true`.
 
 Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)

content/blog/markdown.ca.md

@@ -9,6 +9,7 @@ tags = ["markdown", "funcionalitat"]
 
 [extra]
 katex = true
+footnote_backlinks = true
 +++
 
 ## $\KaTeX$

content/blog/markdown.es.md

@@ -9,6 +9,7 @@ tags = ["markdown", "funcionalidad"]
 
 [extra]
 katex = true
+footnote_backlinks = true
 +++
 
 ## $\KaTeX$

content/blog/markdown.md

@@ -9,6 +9,7 @@ tags = ["markdown", "showcase"]
 
 [extra]
 katex = true
+footnote_backlinks = true
 +++
 
 ## $\KaTeX$

sass/parts/_misc.scss

@@ -138,6 +138,11 @@ hr {
     }
 }
 
+.footnote-backlink {
+    font-size: 0.8rem;
+    margin-left: 0.2rem;
+}
+
 .references p {
     text-indent: -2.4rem;
     margin-left: 2.4rem;

static/js/footnoteBacklinks.js

@@ -0,0 +1,33 @@
+// Assign unique IDs to the footnote references based on their hashes.
+function assignReferenceIds() {
+    const references = document.querySelectorAll('.footnote-reference');
+    for (const ref of references) {
+        ref.id = `ref:${ref.children[0].hash.substring(1)}`;
+    }
+}
+
+// Create backlinks for each footnote definition if a corresponding reference exists.
+function createFootnoteBacklinks() {
+    const footnotes = document.querySelectorAll('.footnote-definition');
+    for (const footnote of footnotes) {
+        const backlinkId = `ref:${footnote.id}`;
+
+        // Skip if there's no corresponding reference in the text (i.e. the footnote doesn't reference anything).
+        if (!document.getElementById(backlinkId)) continue;
+
+        const backlink = document.createElement('a');
+        backlink.href = `#${backlinkId}`;
+        backlink.className = 'footnote-backlink';
+        backlink.textContent = '↩';
+        footnote.lastElementChild.appendChild(backlink);
+    }
+}
+
+// Initialise the handlers for the footnote references and definitions.
+function initFootnotes() {
+    assignReferenceIds();
+    createFootnoteBacklinks();
+}
+
+// Wait for the window to load, then execute the main function.
+window.addEventListener('load', initFootnotes);

static/js/footnoteBacklinks.min.js

@@ -0,0 +1 @@
+function assignReferenceIds(){for(const e of document.querySelectorAll(".footnote-reference"))e.id="ref:"+e.children[0].hash.substring(1)}function createFootnoteBacklinks(){for(const n of document.querySelectorAll(".footnote-definition")){var e,t="ref:"+n.id;document.getElementById(t)&&((e=document.createElement("a")).href="#"+t,e.className="footnote-backlink",e.textContent="↩",n.lastElementChild.appendChild(e))}}function initFootnotes(){assignReferenceIds(),createFootnoteBacklinks()}window.addEventListener("load",initFootnotes);

templates/base.html

@@ -33,6 +33,11 @@
     {%- if config.extra.copy_button and config.extra.copy_button == true -%}
         <script defer src="{{ get_url(path='js/copyCodeToClipboard.min.js', trailing_slash=false) | safe }}"/></script>
     {%- endif -%}
+
+    {# Add backlinks to footnotes #}
+    {%- if config.extra.footnote_backlinks and config.extra.footnote_backlinks == true or page.extra.footnote_backlinks and page.extra.footnote_backlinks == true -%}
+        <script defer src="{{ get_url(path='js/footnoteBacklinks.min.js', trailing_slash=false | safe )}}"/></script>
+    {%- endif -%}
 </body>
 
 </html>

theme.toml

@@ -33,6 +33,9 @@ theme_switcher = true
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true
 
+# Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).
+footnote_backlinks = false
+
 # Date format used when listing posts (main page, /blog section, tag posts list…)
 # Default is "6th July 2049" in English and "%d %B %Y" in other languages.
 long_date_format = "%d %B %Y"