WebHost: restore fragment links for glossary and faq and make titles …

…clickable (#4103) * WebHost: restore fragment links for glossary and faq such as /faq/en/#what-does-multi-game-mean * WebHost: faq, glossary: make markdown titles clickable
ArchipelagoMW · Oct 26, 2024 · 5d4684f · 5d4684f
1 parent cd7b1df
commit 5d4684f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/WebHostLib/misc.py b/WebHostLib/misc.py
@@ -77,7 +77,13 @@ def faq(lang: str):
     return render_template(
         "markdown_document.html",
         title="Frequently Asked Questions",
-        html_from_markdown=markdown.markdown(document,  extensions=["mdx_breakless_lists"]),
+        html_from_markdown=markdown.markdown(
+            document,
+            extensions=["toc", "mdx_breakless_lists"],
+            extension_configs={
+                "toc": {"anchorlink": True}
+            }
+        ),
     )
 
 
@@ -90,7 +96,13 @@ def glossary(lang: str):
     return render_template(
         "markdown_document.html",
         title="Glossary",
-        html_from_markdown=markdown.markdown(document,  extensions=["mdx_breakless_lists"]),
+        html_from_markdown=markdown.markdown(
+            document,
+            extensions=["toc", "mdx_breakless_lists"],
+            extension_configs={
+                "toc": {"anchorlink": True}
+            }
+        ),
     )
 
 

diff --git a/WebHostLib/static/styles/markdown.css b/WebHostLib/static/styles/markdown.css
@@ -28,7 +28,7 @@
     font-weight: normal;
     font-family: LondrinaSolid-Regular, sans-serif;
     text-transform: uppercase;
-    cursor: pointer;
+    cursor: pointer; /* TODO: remove once we drop showdown.js */
     width: 100%;
     text-shadow: 1px 1px 4px #000000;
 }
@@ -37,7 +37,7 @@
     font-size: 38px;
     font-weight: normal;
     font-family: LondrinaSolid-Light, sans-serif;
-    cursor: pointer;
+    cursor: pointer; /* TODO: remove once we drop showdown.js */
     width: 100%;
     margin-top: 20px;
     margin-bottom: 0.5rem;
@@ -50,7 +50,7 @@
     font-family: LexendDeca-Regular, sans-serif;
     text-transform: none;
     text-align: left;
-    cursor: pointer;
+    cursor: pointer; /* TODO: remove once we drop showdown.js */
     width: 100%;
     margin-bottom: 0.5rem;
 }
@@ -59,28 +59,37 @@
     font-family: LexendDeca-Regular, sans-serif;
     text-transform: none;
     font-size: 24px;
-    cursor: pointer;
+    cursor: pointer; /* TODO: remove once we drop showdown.js */
     margin-bottom: 24px;
 }
 
 .markdown h5, .markdown details summary.h5{
     font-family: LexendDeca-Regular, sans-serif;
     text-transform: none;
     font-size: 22px;
-    cursor: pointer;
+    cursor: pointer; /* TODO: remove once we drop showdown.js */
 }
 
 .markdown h6, .markdown details summary.h6{
     font-family: LexendDeca-Regular, sans-serif;
     text-transform: none;
     font-size: 20px;
-    cursor: pointer;;
+    cursor: pointer; /* TODO: remove once we drop showdown.js */
 }
 
 .markdown h4, .markdown h5, .markdown h6{
     margin-bottom: 0.5rem;
 }
 
+.markdown h1 > a,
+.markdown h2 > a,
+.markdown h3 > a,
+.markdown h4 > a,
+.markdown h5 > a,
+.markdown h6 > a {
+    color: inherit;
+}
+
 .markdown ul{
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;