claude@clouddev1
c86df95a0f
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
40 lines
1.8 KiB
Plaintext
40 lines
1.8 KiB
Plaintext
---
|
|
// 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>
|