orbital-ui 0.1.1

Leptos component library and design system for focused, accessible product UIs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//! First-paint baseline CSS in the document `<head>`.
//!
//! Renders inline baseline CSS (streaming SSR safe) plus a linked copy for caching.
//! Consuming apps must serve [`orbital_theme::BASELINE_STYLESHEET_FILENAME`] from their
//! static assets directory (generated by `orbital` `build.rs` into `public/`).

use leptos::prelude::*;
use orbital_theme::{baseline_asset_path, baseline_primary_font_preload_path, ROOT_THEME_SCOPE_ID};

const BASELINE_CSS: &str = include_str!(env!("ORBITAL_THEME_BASELINE_CSS"));

/// Injects theme baseline CSS for styled first paint before WASM hydration.
///
/// Wire into [`crate::orbital_shell`] or a custom document shell **before**
/// `<meta name="orbital-style"/>`. Ensure `assets-dir` includes the generated
/// `public/orbital-theme-baseline.css` file (produced when building the `orbital` crate).
#[component]
pub fn OrbitalFirstPaintHeadAssets(
    /// Site base path (defaults to compile-time `LEPTOS_BASE_PATH`, empty for local dev).
    #[prop(optional, into)]
    base_path: Option<String>,
) -> impl IntoView {
    let base = base_path.unwrap_or_else(|| super::shell_site_base().to_string());
    let stylesheet_href = baseline_asset_path(&base);
    let font_preload_href = baseline_primary_font_preload_path(&base);
    let scope_id = ROOT_THEME_SCOPE_ID;

    view! {
        <style data-orbital-theme-baseline=scope_id>
            {BASELINE_CSS}
        </style>
        <link
            rel="stylesheet"
            href=stylesheet_href.clone()
            data-orbital-theme-baseline=scope_id
        />
        <link rel="preload" href=stylesheet_href r#as="style" />
        <link rel="preload" href=font_preload_href r#as="font" crossorigin="anonymous" />
    }
}