You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
matrix-spec/assets/js/versions.template.js

115 lines
4.3 KiB
JavaScript

/*
Copyright 2025 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// 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
{{- /**/ -}}
{{ else }}
{{- /**/ -}}
{{ printf "v%s.%s" .Site.Params.version.major .Site.Params.version.minor }}
{{- /**/ -}}
{{ 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, segment, url) {
// The list item
const li = document.createElement("li");
if (segment === selected) {
li.classList.add("version-picker-selected");
}
if (segment === "latest") {
li.classList.add("version-picker-latest");
}
parent.appendChild(li);
// The link
const a = document.createElement("a");
a.classList.add("dropdown-item");
a.setAttribute("href", url);
li.appendChild(a);
// Handle clicks manually to preserve the current path / fragment
a.addEventListener("click", (ev) => {
// If the URL is a relative link (i.e. the historical versions changelog), just
// let the browser load it
if (url.startsWith("/")) {
return;
}
// 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;
}
// Otherwise, stop further event handling and replace the segment
ev.preventDefault();
ev.stopPropagation();
window.location.href = href.replace(`/${currentSegment}/`, `/${segment}/`);
});
// The link text
const text = document.createTextNode(name);
a.appendChild(text);
}
// If we're in the unstable version, we're the latest thing and can just load
// versions.json from our own resources. Otherwise, we fall back to loading it
// from /unstable/versions.json, assuming we are on the spec.matrix.org deployment.
const url = currentVersion === "unstable"
? '{{ .Site.Home.Permalink }}versions.json'
: "/unstable/versions.json";
fetch(url)
.then(r => r.json())
.then(versions => {
// Find the surrounding list element
const ul = document.querySelector("ul#version-selector");
if (!ul) {
console.error("Cannot populate version selector: ul element not found");
return;
}
// Add a entries for the unstable version and the "latest" shortcut
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, version.name, `https://spec.matrix.org/${version.name}`);
}
// For historical versions, simply link to the changelog
appendVersion(ul, "historical", '{{ (site.GetPage "changelog/historical").RelPermalink }}');
});