From 1fca3bce13c26eb9042b5e7d3419d2892cf4e976 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Mon, 26 Aug 2024 16:38:34 +0200
Subject: [PATCH] feat: improve footnote display and data attributes

Added functionality in `app.py` to propagate `data-mw-group` attribute classes to `mw-reflink-text` spans, enhancing footnote grouping. Updated CSS to properly style these footnotes, accounting for various numeral systems (alpha, roman, decimal) and ensuring consistent display of references.

Fixes #33.
---
 src/wikimore/app.py               |  5 +++++
 src/wikimore/static/css/style.css | 34 +++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/src/wikimore/app.py b/src/wikimore/app.py
index 73b17b7..45388b5 100644
--- a/src/wikimore/app.py
+++ b/src/wikimore/app.py
@@ -336,6 +336,11 @@ def wiki_article(
         if any(cls in li.get("class", []) for cls in ["nv-view", "nv-talk", "nv-edit"]):
             li.decompose()
 
+    for span in soup.find_all(class_="mw-reflink-text"):
+        parent = span.parent
+        if parent.attrs.get("data-mw-group", None):
+            span["class"] = span.get("class", []) + [parent.attrs["data-mw-group"]]
+
     processed_html = str(body)
 
     rtl = bool(soup.find("div", class_="mw-parser-output", dir="rtl"))
diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css
index b3a5626..5e1a3c5 100644
--- a/src/wikimore/static/css/style.css
+++ b/src/wikimore/static/css/style.css
@@ -919,6 +919,40 @@ Currently blocked by implementation of comments retrieval in the backend
 }
 */
 
+/* Footnote weirdness */
+.mw-reflink-text.lower-alpha::before {
+    content: "[" counter(mw-Ref, lower-alpha) "]";
+}
+
+.mw-reflink-text.upper-alpha::before {
+    display: inline;
+    content: "[" counter(mw-Ref, upper-alpha) "]";
+}
+
+.mw-reflink-text.lower-roman::before {
+    content: "[" counter(mw-Ref, lower-roman) "]";
+}
+
+.mw-reflink-text.upper-roman::before {
+    content: "[" counter(mw-Ref, upper-roman) "]";
+}
+
+.mw-reflink-text.decimal::before {
+    content: "[" counter(mw-Ref, decimal) "]";;
+}
+
+.mw-reflink-text::before {
+    font-size: 1rem;
+}
+
+.mw-reflink-text.lower-alpha,
+.mw-reflink-text.upper-alpha,
+.mw-reflink-text.lower-roman,
+.mw-reflink-text.upper-roman,
+.mw-reflink-text.decimal {
+    font-size: 0;
+}
+
 /* Media query for devices with a max width of 768px */
 @media (max-width: 768px) {
     #header {