Limit the dropdown's height and make it scrollable

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

assets/js/versions.template.js

@@ -14,9 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// This oddity is an attempt at producing a readable Hugo template while avoiding
+// JS syntax errors in your IDE
+const currentVersion = `{{ if eq .Site.Params.version.status "unstable" }}
+    {{- /**/ -}}
+    unstable
+    {{- /**/ -}}
+{{ else }}
+    {{- /**/ -}}
+    {{ printf "v%s.%s" .Site.Params.version.major .Site.Params.version.minor }}
+    {{- /**/ -}}
+{{ end }}`;
+
 function appendVersion(parent, name, url) {
     // The list item
     const li = document.createElement("li");
+    if (name === currentVersion) {
+        li.classList.add("selected")
+    }
+    if (name === "unstable") {
+        li.classList.add("unstable")
+    }
     parent.appendChild(li);
 
     // The link
@@ -74,5 +92,5 @@ fetch("/versions.json")
         }
 
         // For historical versions, simply link to the changelog
-        appendVersion(ul, "historical", "/changelog/historical/");
+        appendVersion(ul, "historical", '{{ (site.GetPage "changelog/historical").RelPermalink }}');
     });

assets/scss/_styles_project.scss

@@ -50,6 +50,20 @@ Custom SCSS for the Matrix spec
   a {
     color: $black;
   }
+
+  /* Make the version dropdown scroll if its too large */
+  ul#version-selector {
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  ul#version-selector li.selected a {
+    color: $secondary;
+  }
+
+  ul#version-selector li.unstable:not(.selected) a {
+    color: $warning;
+  }
 }
 
 /* Styles for the sidebar nav */

layouts/_partials/hooks/body-end.html

@@ -8,5 +8,10 @@
 */}}
 {{ $toc := resources.Get "js/toc.js" -}}
 <script defer src="{{ $toc.RelPermalink }}"></script>
-{{ $versions := resources.Get "js/versions.js" -}}
+
-<script defer src="{{ $versions.RelPermalink }}"></script>
+{{- /* Load the versions script template, run and publish it */ -}}
+{{ with resources.Get "js/versions.template.js" }}
+  {{ with resources.ExecuteAsTemplate "js/versions.js" $ . }}
+    <script defer src="{{ .RelPermalink }}"></script>
+  {{ end }}
+{{ end }}

layouts/_partials/navbar-version-selector.html

@@ -13,6 +13,6 @@
         All Versions
     </a>
     <ul class="dropdown-menu" id="version-selector">
-        {{- /* The menu is built by version.js */ -}}
+        {{- /* The menu is built by versions.template.js */ -}}
     </ul>
 </div>