From 1cbb2a40c886603a2e2ccc883179cc2d196280e1 Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Sun, 11 May 2025 21:38:22 -0600
Subject: make rules in html linkable

---
 html/Makefile                 | 13 ++++++++++++-
 html/link.svg                 |  1 +
 html/template.html            | 25 ++++++++++++++++++++++++
 scripts/prepare_html_rules.py | 44 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 html/link.svg
 create mode 100755 scripts/prepare_html_rules.py

diff --git a/html/Makefile b/html/Makefile
index e28c9dee..5c462103 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -26,6 +26,8 @@ GENERATE_CARD_LISTING := $(GAME_ROOT)/scripts/generate_card_listing.py
 
 GENERATE_HOVER_LINKS := $(GAME_ROOT)/scripts/generate_card_hover_links.py
 
+PREPARE_RULES := $(GAME_ROOT)/scripts/prepare_html_rules.py
+
 SETS := $(shell find $(CARDS_YML_DIR) -mindepth 1 -type d -printf "%f\n")
 SETS_SOURCEDIRS := $(foreach set, $(SETS), $(addprefix $(CARDS_YML_DIR)/, $(set)))
 
@@ -123,6 +125,15 @@ $(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS)
 		else $(GENERATE_HOVER_LINKS) $$< | pandoc $(PANDOC_FLAGS) $(2) -o $$@; fi
 endef
 
+define generateRulesHtml
+$(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS)
+	@echo "building		$$@"
+	@if test \( ! \( -d $$(@D) \) \); then mkdir -p $$(@D);fi
+	$(VERBOSE) if [[ $$$$(cat $$< | wc -l) -gt 80 ]]; \
+		then $(GENERATE_HOVER_LINKS) $$< | pandoc --toc $(PANDOC_FLAGS) $(2) | $(PREPARE_RULES) > $$@; \
+		else $(GENERATE_HOVER_LINKS) $$< | pandoc $(PANDOC_FLAGS) $(2) | $(PREPARE_RULES) > $$@; fi
+endef
+
 $(eval $(call generateHtml, $(BUILDDIR),))
-$(eval $(call generateHtml, $(BUILDDIR)/rules, -N))
+$(eval $(call generateRulesHtml, $(BUILDDIR)/rules, -N))
 $(eval $(call generateHtml, $(BUILDDIR)/blog,))
diff --git a/html/link.svg b/html/link.svg
new file mode 100644
index 00000000..f0fdbf4f
--- /dev/null
+++ b/html/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>
\ No newline at end of file
diff --git a/html/template.html b/html/template.html
index bae64042..6d58af7d 100644
--- a/html/template.html
+++ b/html/template.html
@@ -250,6 +250,11 @@ $if(toc)$
   padding-left: 10px;
 }
 $endif$
+
+li.linkable-rule:active, li.linkable-rule:hover {
+  background-color: #d79921;
+  list-style-image: url(link.svg);
+}
   </style>
 
 $for(css)$
@@ -265,6 +270,26 @@ $endif$
 $for(header-includes)$
   $header-includes$
 $endfor$
+<script>
+window.onload = function() {
+  for (let e of document.querySelectorAll(".rule")) {
+    // Add class via js to ensure there is no wrong
+    // sense of functionality in browsers without js
+    e.classList.add("linkable-rule");
+    // TODO: support nested lists
+    e.onclick = function() {
+      if (e.matches(':hover') || e.matches(':active')) {
+        const origin = window.location.origin;
+        const path = window.location.pathname;
+        const anchor = e.id;
+        let url = origin + '/' + path + '#' + anchor;
+        navigator.clipboard.writeText(url);
+        // document.getElementsByTagName("body")[0].focus();
+      }
+    }
+  }
+}
+</script>
 </head>
 <body>
 $for(include-before)$
diff --git a/scripts/prepare_html_rules.py b/scripts/prepare_html_rules.py
new file mode 100755
index 00000000..4d533bec
--- /dev/null
+++ b/scripts/prepare_html_rules.py
@@ -0,0 +1,44 @@
+#!/usr/bin/env python3
+# TODO: support nested lists
+
+import sys
+import re
+
+def add_ids(ol):
+    """add ids to all li"""
+    id = ""
+    for s in ol.previous_siblings:
+        if not s.name:
+            continue
+        if s.name.startswith("h"):
+            id = s.attrs["data-number"]
+            break
+
+    for i, li in enumerate(ol.find_all("li")):
+        li["id"] = f"{id}-{i+1}"
+        li["class"] = "rule"
+
+header_re = re.compile(r'<h\d')
+data_number_re = re.compile(r'data\-number="([^"]*)"')
+def extract_headline_nr(line: str) -> str:
+    m = data_number_re.search(line)
+    if m:
+        return m.group(1)
+    else:
+        return ""
+
+headline = ""
+i = 0
+for line in sys.stdin.readlines():
+    if header_re.match(line):
+        headline = extract_headline_nr(line)
+        h_idx = line.find('<h') + 3
+        line = line[:h_idx] + ' class="rule"' + line[h_idx:]
+    if '<ol' in line and headline:
+        i = 1
+    if '<li' in line and i:
+        line = line.replace('<li', f'<li id="{headline}-{i}" class="rule"')
+        i = i + 1
+    if '</ol' in line:
+        i = 0
+    print(line, end="")
-- 
cgit v1.2.3