Filip/matrix-spec
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-spec synced 2025-12-27 11:28:38 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use bold for the select item, remove red for the unstable item and add a latest item in blue

Browse source 
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
This commit is contained in:
Johannes Marbach 2025-12-04 08:50:24 +01:00
parent 77b37cb9a9
commit 70904ff1a8
2 changed files with 33 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
assets/js/versions.template.js
View file

@ -14,8 +14,11 @@ 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
// Determine the current version as defined in hugo.toml. This will either be
// "unstable" or "vX.X" and doesn't depend on the current URL.
//
// The oddity below 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
@ -26,20 +29,31 @@ const currentVersion = `{{ if eq .Site.Params.version.status "unstable" }}
{{- /**/ -}}
{{ end }}`;
// Determine the current version segment by regex matching the URL. This will either
// be "unstable", "latest", "vX.X" (production) or undefined (local & netlify).
const href = window.location.href;
const segmentMatches = href.match(/(?<=\/)unstable|latest|v\d+.\d+(?=\/)/);
const currentSegment = segmentMatches ? segmentMatches[0] : undefined;
// Determine the selected menu element. If we were able to obtain the version
// segment from the URL (production), use that. Otherwise (local & netlify),
// fall back to the version as defined in Hugo.
const selected = currentSegment ?? currentVersion;
function appendVersion(parent, name, url) {
// The list item
const li = document.createElement("li");
if (name === currentVersion) {
li.classList.add("selected")
if (name === selected) {
li.classList.add("selected");
}
if (name === "unstable") {
li.classList.add("unstable")
if (name === "latest") {
li.classList.add("latest");
}
parent.appendChild(li);
// The link
const a = document.createElement("a");
a.classList.add("dropdown-item")
a.classList.add("dropdown-item");
a.setAttribute("href", url);
li.appendChild(a);
@ -51,20 +65,16 @@ function appendVersion(parent, name, url) {
return;
}
// Stop further event handling
ev.preventDefault();
ev.stopPropagation();
// Try to find the current version segment
const href = window.location.href;
const matches = href.match(/\/unstable\/|\/latest\/|\/v\d+.\d+\//g);
if (!matches) {
window.location.href = url;
// If we couldn't determine the current segment, we cannot safely replace
// it and have to let the browser load the (root) URL instead
if (!currentSegment) {
return;
}
// Replace the segment
window.location.href = href.replace(matches[0], `/${name}/`);
// Otherwise, stop further event handling and replace the segment
ev.preventDefault();
ev.stopPropagation();
window.location.href = href.replace(`/${currentSegment}/`, `/${name}/`);
});
// The link text
@ -83,8 +93,9 @@ fetch("/versions.json")
return;
}
// Add an entry for the unstable version
// 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");
// Add an entry for each proper version
for (const version of versions) {

6
assets/scss/_styles_project.scss
View file

@ -58,11 +58,11 @@ Custom SCSS for the Matrix spec
}
ul#version-selector li.selected a {
color: $secondary;
font-weight: bold;
}
ul#version-selector li.unstable:not(.selected) a {
color: $warning;
ul#version-selector li.latest a {
color: $secondary;
}
}