feat: Provide active CSS class to the current page

This replaces the old method of checking based on the page name, which generally increased the size of all pages (and the CSS) by a couple dozen bytes and is less flexible. Nav pages are also determined programmatically from the data file. Autoformatter hit the default layout, sorry about that.
AgoraNomic · Feb 8, 2025 · 4929bdb · 4929bdb
1 parent 9cfbc8c
commit 4929bdb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -0,0 +1,18 @@
+- url: ""
+  label: Home
+- url: /join
+  label: Join
+- url: /play
+  label: Play
+- url: /ruleset/
+  label: Rules
+- url: /judgements
+  label: Judgements
+- url: /glossary
+  label: Glossary
+- url: /calendar
+  label: Calendar
+- url: /archives
+  label: Archives
+- url: /Herald/
+  label: Herald
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,26 +1,16 @@
+---
+---
 <div class="nvbr desktop">
-  <a class="home" href="/index">Home</a>
-  <a class="join" href="/join">Join</a>
-  <a class="play" href="/play">How To Play</a>
-  <a class="rules" href="/ruleset/">Rules</a>
-  <a class="judgments" href="/judgments">Judgments</a>
-  <a class="glossary" href="/glossary">Glossary</a>
-  <a class="calendar" href="/calendar">Calendar</a>
-  <a class="archives" href="/archives">Archives</a>
-  <a class="herald" href="/Herald/">Herald</a>
+  {% for item in site.data.nav %}
+  <a class="{% if item.url == page.url %}active{% endif %}" href="{{ item.url }}">{{ item.label }}</a>
+  {% endfor %}
 </div>
 <div class="nvbr mobile dropdown">
   <center><button class="dropbtn">Menu</br>☰</button></center>
   <div class="dropdown-content">
-    <a class="home" href="/index">Home</a>
-    <a class="join" href="/join">Join</a>
-    <a class="play" href="/play">How to Play</a>
-    <a class="rules" href="https://agoranomic.org/ruleset/">Rules</a>
-    <a class="judgments" href="/judgments">Judgments</a>
-    <a class="glossary" href="/glossary">Glossary</a>
-    <a class="calendar" href="/calendar">Calendar</a>
-    <a class="archives" href="/archives">Archives</a>
-    <a class="herald" href="/Herald/">Herald</a>
+    {% for item in site.data.nav %}
+    <a class="{% if item.url == page.url %}active{% endif %}" href="{{ item.url }}">{{ item.label }}</a>
+    {% endfor %}
   </div>
 </div>
 

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -19,7 +19,7 @@
     crossorigin="anonymous"></script>
 </head>
 
-<body class="{{page.title}}">
+<body>
   {% include nav.html %}
 
   <div class="container">