docs(website): tabbed per-OS install instructions with auto-detection
website / deploy (push) Successful in 33s
website / deploy (push) Successful in 33s
Split the install page into Linux / macOS / Windows tabs so each visitor sees only the commands that apply to them. A small InstallOsDetect component seeds Starlight's synced-tabs localStorage key with the detected OS before the tabs render, so the matching tab is pre-selected with no flash — and only when the visitor hasn't already picked a tab, so a manual choice wins. - installation.md -> .mdx (needs the Tabs/TabItem components) - detection covers navigator.userAgentData and the legacy platform/UA fallbacks; unknown platforms fall through to the default tab - piggybacks on Starlight's own restore mechanism rather than re-implementing tab switching
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
---
|
||||
// Pre-selects the install-instructions tab that matches the visitor's OS.
|
||||
//
|
||||
// This piggybacks on Starlight's synced-tabs mechanism rather than fighting it.
|
||||
// A `<Tabs syncKey="install-os">` restores its active tab from
|
||||
// `localStorage["starlight-synced-tabs__install-os"]` via a script Starlight
|
||||
// inlines *before* the tabs render (so there is no flash of the wrong tab). All
|
||||
// we do here is seed that same key with the detected OS — and only when the
|
||||
// visitor has not already chosen a tab themselves, so a manual choice always wins.
|
||||
//
|
||||
// Requirements (mirrors Starlight's own restore script):
|
||||
// - Must be placed *before* the `<Tabs>` it targets, so this runs first.
|
||||
// - The stored value must equal one of the TabItem labels exactly
|
||||
// ("Linux" / "macOS" / "Windows").
|
||||
// - Inlined, so it runs during parse before the restore script's
|
||||
// connectedCallback and paint.
|
||||
---
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const KEY = 'starlight-synced-tabs__install-os';
|
||||
try {
|
||||
// A previously stored value is a deliberate user choice — never override it.
|
||||
if (localStorage.getItem(KEY)) return;
|
||||
const data = navigator.userAgentData;
|
||||
const platform = ((data && data.platform) || navigator.platform || '').toLowerCase();
|
||||
const ua = (navigator.userAgent || '').toLowerCase();
|
||||
let os = null;
|
||||
if (platform.includes('win') || ua.includes('windows')) os = 'Windows';
|
||||
else if (platform.includes('mac') || ua.includes('mac os x')) os = 'macOS';
|
||||
else if (platform.includes('linux') || platform.includes('x11') || ua.includes('linux'))
|
||||
os = 'Linux';
|
||||
if (os) localStorage.setItem(KEY, os);
|
||||
} catch (e) {
|
||||
// localStorage unavailable (private mode, blocked cookies, …) — silently
|
||||
// fall back to the default first tab. No detection, no harm.
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user