mirror of
https://github.com/zoriya/v10.git
synced 2026-08-15 10:23:32 +00:00
64 lines
2.4 KiB
Plaintext
64 lines
2.4 KiB
Plaintext
---
|
|
import { FRAMEWORK_STYLES, getDefaultStyle, SUPPORTED_FRAMEWORKS } from '@/types/docs';
|
|
|
|
const STYLE_KEY_PREFIX = 'vjs_docs_style_';
|
|
|
|
// Derive values from the single source of truth (FRAMEWORK_STYLES)
|
|
// Pass as plain objects since define:vars serializes to JSON
|
|
const frameworkStylesConfig = Object.fromEntries(SUPPORTED_FRAMEWORKS.map((fw) => [fw, [...FRAMEWORK_STYLES[fw]]]));
|
|
const defaultStyleConfig = getDefaultStyle(SUPPORTED_FRAMEWORKS[0]);
|
|
|
|
// Collect all unique styles across all frameworks for CSS generation
|
|
const allStyles = [...new Set(Object.values(FRAMEWORK_STYLES).flat())];
|
|
---
|
|
|
|
{/* Style visibility CSS rules - generated from FRAMEWORK_STYLES to stay in sync */}
|
|
<style set:html={`
|
|
[data-for-style] { display: none; }
|
|
${allStyles.map(style => `html[data-style='${style}'] [data-for-style~='${style}'] { display: contents; }`).join('\n ')}
|
|
`}></style>
|
|
|
|
{/*
|
|
Style initialization script - runs before paint to prevent FOUC.
|
|
|
|
Supports ?style= query param for deep-linking (e.g., ?style=tailwind).
|
|
This allows external links to specify a style preference. The style is
|
|
validated against valid styles for the current framework and persisted
|
|
to localStorage.
|
|
*/}
|
|
<script
|
|
is:inline
|
|
define:vars={{ keyPrefix: STYLE_KEY_PREFIX, frameworkStyles: frameworkStylesConfig, defaultStyle: defaultStyleConfig }}
|
|
>
|
|
if (typeof localStorage !== 'undefined' && typeof document !== 'undefined') {
|
|
// Extract framework from URL: /docs/framework/{framework}/...
|
|
const pathMatch = window.location.pathname.match(/\/docs\/framework\/([^/]+)/);
|
|
const framework = pathMatch?.[1];
|
|
|
|
const validStyles = frameworkStyles[framework];
|
|
if (framework && validStyles) {
|
|
const storageKey = keyPrefix + framework;
|
|
|
|
// Check for ?style= query param (enables deep-linking)
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const queryStyle = urlParams.get('style');
|
|
|
|
let style;
|
|
if (queryStyle && validStyles.includes(queryStyle)) {
|
|
// Query param overrides and persists to localStorage for this framework
|
|
style = queryStyle;
|
|
localStorage.setItem(storageKey, style);
|
|
} else {
|
|
// Fall back to localStorage or default
|
|
style = localStorage.getItem(storageKey);
|
|
if (!style || !validStyles.includes(style)) {
|
|
style = defaultStyle;
|
|
localStorage.setItem(storageKey, style);
|
|
}
|
|
}
|
|
|
|
document.documentElement.dataset.style = style;
|
|
}
|
|
}
|
|
</script>
|