docs: introduce custom version selector in api.html

Fixes: #27277

Signed-off-by: Martin Fischer <martin@push-f.com>
This commit is contained in:
Martin Fischer
2025-10-15 05:27:14 +02:00
parent fa5d6cc103
commit f87c8b9cba

View File

@@ -15,24 +15,67 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/*
* ReadTheDocs injects its version selector which is confusing on
* this page since it doesn't affect the API version. So we hide it.
*/
readthedocs-flyout {
display: none;
}
/* Our own version selector. */
#versionSelect {
position: fixed;
/*
* Like the ReadTheDocs selector we put it in the bottom-right corner.
* When the browser is narrow ReDoc puts its menu button in the same corner,
* the position here is chosen not to overlap with that.
*/
bottom: 14px;
right: 14px;
z-index: 99;
}
</style> </style>
</head> </head>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script> <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
<select id="versionSelect" aria-label="Version">
<option>latest</option>
</select>
<div id="redoc-container"></div> <div id="redoc-container"></div>
<script> <script type="module">
const versionSelect = document.getElementById("versionSelect");
const resp = await fetch("versions.json");
const versions = await resp.json();
for (const version of versions) {
const opt = document.createElement("option");
opt.textContent = "v" + version;
versionSelect.append(opt);
}
// get version from query (default to latest) // get version from query (default to latest)
var queryString = window.location.search; var queryString = window.location.search;
var query = new URLSearchParams(queryString); var query = new URLSearchParams(queryString);
var version = "latest"; var version = "latest";
if (query.has("version")) { if (query.has("version")) {
version = query.get("version"); versionSelect.value = query.get("version");
} }
Redoc.init("https://storage.googleapis.com/libpod-master-releases/swagger-" + version + ".yaml", { function load() {
sortPropsAlphabetically: true, // Note: We replace the whole container element because otherwise Redoc.init calls
sortOperationsAlphabetically: true, // after the initial Redoc.init call take a second rather than just a few ms.
}, document.getElementById("redoc-container")); let redocContainer = document.createElement('div');
redocContainer.id = 'redoc-container';
let oldContainer = document.getElementById("redoc-container");
oldContainer.parentNode.replaceChild(redocContainer, oldContainer);
Redoc.init("https://storage.googleapis.com/libpod-master-releases/swagger-" + versionSelect.value + ".yaml", {
sortPropsAlphabetically: true,
sortOperationsAlphabetically: true,
}, redocContainer);
history.pushState(null, '', '?version=' + versionSelect.value);
document.title = 'Reference ' + versionSelect.value;
}
load();
versionSelect.addEventListener('change', load);
</script> </script>
</body> </body>
</html> </html>