Merge 715e66fa00 into 13aa6e83ae

assets/js/versions.template.js

@@ -40,14 +40,14 @@ const currentSegment = segmentMatches ? segmentMatches[0] : undefined;
 // fall back to the version as defined in Hugo.
 const selected = currentSegment ?? currentVersion;
 
-function appendVersion(parent, name, url) {
+function appendVersion(parent, name, segment, url) {
     // The list item
     const li = document.createElement("li");
-    if (name === selected) {
-        li.classList.add("selected");
+    if (segment === selected) {
+        li.classList.add("version-picker-selected");
     }
-    if (name === "latest") {
-        li.classList.add("latest");
+    if (segment === "latest") {
+        li.classList.add("version-picker-latest");
     }
     parent.appendChild(li);
 
@@ -74,7 +74,7 @@ function appendVersion(parent, name, url) {
         // Otherwise, stop further event handling and replace the segment
         ev.preventDefault();
         ev.stopPropagation();
-        window.location.href = href.replace(`/${currentSegment}/`, `/${name}/`);
+        window.location.href = href.replace(`/${currentSegment}/`, `/${segment}/`);
     });
 
     // The link text
@@ -100,12 +100,13 @@ fetch(url)
         }
 
         // Add a entries for the unstable version and the "latest" shortcut
-        appendVersion(ul, "unstable", "https://spec.matrix.org/unstable");
-        appendVersion(ul, "latest", "https://spec.matrix.org/latest");
+        appendVersion(ul, "unstable", "unstable", "https://spec.matrix.org/unstable");
+        const latestName = versions?.length ? `latest (${versions[0].name})` : "latest";
+        appendVersion(ul, latestName, "latest", "https://spec.matrix.org/latest");
 
         // Add an entry for each proper version
         for (const version of versions) {
-            appendVersion(ul, version.name, `https://spec.matrix.org/${version.name}`);
+            appendVersion(ul, version.name, version.name, `https://spec.matrix.org/${version.name}`);
         }
 
         // For historical versions, simply link to the changelog

assets/scss/_styles_project.scss

@@ -51,17 +51,17 @@ Custom SCSS for the Matrix spec
     color: $black;
   }
 
-  /* Make the version dropdown scroll if its too large */
+  /* Make the version dropdown scroll if it's too large */
   ul#version-selector {
     max-height: 80vh;
     overflow-y: auto;
   }
 
-  ul#version-selector li.selected a {
+  ul#version-selector li.version-picker-selected a {
     font-weight: bold;
   }
 
-  ul#version-selector li.latest a {
+  ul#version-selector li.version-picker-latest a {
     color: $secondary;
   }
 }

changelogs/internal/newsfragments/2260.clarification

@@ -0,0 +1 @@
+Add version picker in the navbar.

changelogs/internal/newsfragments/2261.clarification

@@ -0,0 +1 @@
+Add version picker in the navbar.

changelogs/internal/newsfragments/2264.clarification

@@ -0,0 +1 @@
+Add version picker in the navbar.

postcss.config.js

@@ -16,6 +16,9 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
             extensions: ["json"],
         },
     ],
+    // As these classes are only applied by JavaScript, PurgeCSS doesn't see them
+    // in the source code and removes them unless we explicitly tell it not to.
+    safelist: ['version-picker-selected', 'version-picker-latest']
 });
 
 module.exports = {