rustpress_theme/
lib.rs

1use std::fs;
2use std::path::Path;
3
4use anyhow::{Context, Result};
5use rustpress_md::Heading;
6
7#[derive(Debug, Clone, PartialEq, Eq)]
8pub struct ThemeConfig {
9    pub skin: String,
10    pub allow_switch: bool,
11    pub github_url: String,
12}
13
14#[derive(Debug, Clone, PartialEq, Eq)]
15pub struct SiteRender {
16    pub title: String,
17    pub lang: String,
18    pub base: String,
19    pub home_href: String,
20    pub theme: ThemeConfig,
21    pub search_enabled: bool,
22    pub access_enabled: bool,
23    pub access_password: String,
24    pub password_hint: String,
25    pub top_nav: Vec<TopNavItem>,
26    pub nav: Vec<NavItem>,
27    pub languages: Vec<LanguageOption>,
28}
29
30#[derive(Debug, Clone, PartialEq, Eq)]
31pub struct TopNavItem {
32    pub title: String,
33    pub href: Option<String>,
34    pub items: Vec<TopNavLink>,
35}
36
37#[derive(Debug, Clone, PartialEq, Eq)]
38pub struct TopNavLink {
39    pub title: String,
40    pub href: String,
41}
42
43#[derive(Debug, Clone, PartialEq, Eq)]
44pub struct NavItem {
45    pub title: String,
46    pub href: String,
47    pub active_prefix: String,
48    pub items: Vec<NavItem>,
49}
50
51#[derive(Debug, Clone, PartialEq, Eq)]
52pub struct LanguageOption {
53    pub label: String,
54    pub href: String,
55    pub current: bool,
56}
57
58#[derive(Debug, Clone, PartialEq, Eq)]
59pub struct PageRender {
60    pub title: String,
61    pub route: String,
62    pub html: String,
63    pub headings: Vec<Heading>,
64    pub masked: bool,
65    pub search: bool,
66}
67
68pub fn write_theme_assets(out_dir: &Path, site: &SiteRender) -> Result<()> {
69    let assets = out_dir.join("assets");
70    fs::create_dir_all(&assets)
71        .with_context(|| format!("failed to create {}", assets.display()))?;
72    fs::write(assets.join("rustpress.css"), css())?;
73    fs::write(assets.join("rustpress.js"), js(site))?;
74    Ok(())
75}
76
77pub fn render_page(site: &SiteRender, page: &PageRender) -> String {
78    let title = if page.title == site.title {
79        site.title.clone()
80    } else {
81        format!("{} | {}", page.title, site.title)
82    };
83    let base = site.base.trim_end_matches('/');
84    let asset_base = if base.is_empty() { "" } else { base };
85    let search_markup = if site.search_enabled {
86        r#"<button class="rp-icon-button" data-rp-search-open aria-label="Open search" title="Search">
87<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg>
88</button>"#
89    } else {
90        ""
91    };
92    let skin_switcher = if site.theme.allow_switch {
93        render_skin_switcher(site)
94    } else {
95        String::new()
96    };
97    let github_link = render_github_link(site);
98    let language_switcher = render_language_switcher(site);
99    let access_mask = if site.access_enabled && page.masked {
100        render_access_mask(site)
101    } else {
102        String::new()
103    };
104
105    format!(
106        r#"<!doctype html>
107<html lang="{lang}" data-rp-skin="{skin}">
108<head>
109<meta charset="utf-8">
110<meta name="viewport" content="width=device-width, initial-scale=1">
111<title>{title}</title>
112<link rel="stylesheet" href="{asset_base}/assets/rustpress.css">
113</head>
114<body data-rp-route="{route}" data-rp-masked="{masked}">
115<header class="rp-topbar">
116  <a class="rp-brand" href="{base_href}">{site_title}</a>
117  {top_nav}
118  <div class="rp-topbar-actions">
119    {search_markup}
120    {language_switcher}
121    {skin_switcher}
122    <button class="rp-icon-button rp-menu-button" data-rp-menu aria-label="Toggle navigation" title="Navigation">
123      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"></path></svg>
124    </button>
125    {github_link}
126  </div>
127</header>
128<div class="rp-shell">
129  <aside class="rp-sidebar" data-rp-sidebar>
130    <nav aria-label="Main navigation">
131      {nav}
132    </nav>
133  </aside>
134  <main class="rp-main" data-rp-content>
135    <article class="rp-doc">
136      {content}
137    </article>
138    {toc}
139  </main>
140</div>
141{search_dialog}
142{access_mask}
143<script type="module" src="{asset_base}/assets/rustpress.js"></script>
144{mermaid_script}
145</body>
146</html>
147"#,
148        lang = escape_attr(&site.lang),
149        skin = escape_attr(&site.theme.skin),
150        title = escape_html(&title),
151        asset_base = asset_base,
152        route = escape_attr(&page.route),
153        masked = page.masked,
154        base_href = escape_attr(&href_for(site, &site.home_href)),
155        site_title = escape_html(&site.title),
156        top_nav = render_top_nav(site, page),
157        search_markup = search_markup,
158        language_switcher = language_switcher,
159        skin_switcher = skin_switcher,
160        github_link = github_link,
161        nav = render_nav(site, page),
162        content = page.html,
163        toc = render_toc(page),
164        search_dialog = render_search_dialog(site),
165        access_mask = access_mask,
166        mermaid_script = mermaid_script(),
167    )
168}
169
170fn mermaid_script() -> &'static str {
171    r##"<script type="module">
172import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
173
174const mermaidBlocks = Array.from(document.querySelectorAll("pre.mermaid"));
175const mermaidSources = new Map(mermaidBlocks.map(block => [block, block.textContent || ""]));
176
177function mermaidColor(name, fallback) {
178  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
179  return value || fallback;
180}
181
182function mermaidConfig() {
183  const isDark = document.documentElement.dataset.rpSkin === "dark";
184  const background = mermaidColor("--rp-mermaid-bg", isDark ? "#151a20" : "#ffffff");
185  const text = mermaidColor("--rp-mermaid-text", isDark ? "#edf2f4" : "#1d2528");
186  const line = mermaidColor("--rp-mermaid-line", isDark ? "#9fb4bd" : "#6c7a80");
187  const node = mermaidColor("--rp-mermaid-node-bg", isDark ? "#17382f" : "#e8f5f1");
188  const nodeBorder = mermaidColor("--rp-mermaid-node-border", isDark ? "#66c2a5" : "#176b5b");
189  const cluster = mermaidColor("--rp-mermaid-cluster-bg", isDark ? "#101820" : "#f2f8f6");
190  const clusterBorder = mermaidColor("--rp-mermaid-cluster-border", isDark ? "#3d5c54" : "#b7ccc5");
191  const label = mermaidColor("--rp-mermaid-label-bg", isDark ? "#181d23" : "#ffffff");
192
193  return {
194    startOnLoad: false,
195    theme: "base",
196    themeVariables: {
197      darkMode: isDark,
198      background,
199      primaryColor: node,
200      primaryTextColor: text,
201      primaryBorderColor: nodeBorder,
202      secondaryColor: cluster,
203      secondaryTextColor: text,
204      secondaryBorderColor: clusterBorder,
205      tertiaryColor: label,
206      tertiaryTextColor: text,
207      tertiaryBorderColor: clusterBorder,
208      mainBkg: node,
209      nodeBorder,
210      nodeTextColor: text,
211      textColor: text,
212      titleColor: text,
213      lineColor: line,
214      defaultLinkColor: line,
215      clusterBkg: cluster,
216      clusterBorder,
217      edgeLabelBackground: label,
218      labelTextColor: text,
219      actorBkg: node,
220      actorBorder: nodeBorder,
221      actorTextColor: text,
222      actorLineColor: line,
223      signalColor: line,
224      signalTextColor: text,
225      noteBkg: label,
226      noteTextColor: text,
227      noteBorderColor: clusterBorder
228    }
229  };
230}
231
232async function renderMermaid() {
233  if (mermaidBlocks.length === 0) return;
234  for (const block of mermaidBlocks) {
235    block.removeAttribute("data-processed");
236    block.textContent = mermaidSources.get(block) || "";
237  }
238  mermaid.initialize(mermaidConfig());
239  try {
240    await mermaid.run({ nodes: mermaidBlocks });
241  } catch (error) {
242    console.warn("RustPress Mermaid render failed", error);
243  }
244}
245
246renderMermaid();
247document.addEventListener("rustpress:skinchange", renderMermaid);
248</script>"##
249}
250
251fn render_top_nav(site: &SiteRender, page: &PageRender) -> String {
252    if site.top_nav.is_empty() {
253        return String::new();
254    }
255
256    let items = site
257        .top_nav
258        .iter()
259        .map(|item| {
260            if item.items.is_empty() {
261                let Some(href) = &item.href else {
262                    return String::new();
263                };
264                let active = link_is_active(&page.route, href);
265                return format!(
266                    r#"<a class="rp-topnav-link{active}" href="{href}">{title}</a>"#,
267                    active = if active { " is-active" } else { "" },
268                    href = href_for(site, href),
269                    title = escape_html(&item.title)
270                );
271            }
272
273            let active = item
274                .href
275                .as_ref()
276                .is_some_and(|href| link_is_active(&page.route, href))
277                || item
278                    .items
279                    .iter()
280                    .any(|child| link_is_active(&page.route, &child.href));
281            let trigger = if let Some(href) = &item.href {
282                format!(
283                    r#"<a class="rp-topnav-trigger" href="{href}" aria-haspopup="true">{title}</a>"#,
284                    href = href_for(site, href),
285                    title = escape_html(&item.title)
286                )
287            } else {
288                format!(
289                    r#"<span class="rp-topnav-trigger" tabindex="0" aria-haspopup="true">{title}</span>"#,
290                    title = escape_html(&item.title)
291                )
292            };
293            let links = item
294                .items
295                .iter()
296                .map(|child| {
297                    let child_active = link_is_active(&page.route, &child.href);
298                    format!(
299                        r#"<a class="rp-topnav-menu-link{active}" href="{href}">{title}</a>"#,
300                        active = if child_active { " is-active" } else { "" },
301                        href = href_for(site, &child.href),
302                        title = escape_html(&child.title)
303                    )
304                })
305                .collect::<Vec<_>>()
306                .join("\n");
307
308            format!(
309                r#"<div class="rp-topnav-group{active}">{trigger}<div class="rp-topnav-menu">{links}</div></div>"#,
310                active = if active { " is-active" } else { "" },
311                trigger = trigger,
312                links = links
313            )
314        })
315        .filter(|item| !item.is_empty())
316        .collect::<Vec<_>>()
317        .join("\n");
318
319    format!(r#"<nav class="rp-topnav" aria-label="Top navigation">{items}</nav>"#)
320}
321
322fn render_nav(site: &SiteRender, page: &PageRender) -> String {
323    render_nav_items(site, page, &site.nav, 0)
324}
325
326fn render_nav_items(
327    site: &SiteRender,
328    page: &PageRender,
329    items: &[NavItem],
330    level: usize,
331) -> String {
332    items
333        .iter()
334        .map(|item| {
335            let active = nav_item_is_active(item, &page.route);
336            if item.items.is_empty() {
337                return format!(
338                    r#"<a class="rp-nav-link rp-nav-level-{level}{active}" href="{href}">{title}</a>"#,
339                    level = level,
340                    active = if active { " is-active" } else { "" },
341                    href = href_for(site, &item.href),
342                    title = escape_html(&item.title)
343                );
344            }
345
346            let children = render_nav_items(site, page, &item.items, level + 1);
347            format!(
348                r#"<div class="rp-nav-group{active}"><a class="rp-nav-group-title" href="{href}">{title}</a><div class="rp-nav-children">{children}</div></div>"#,
349                active = if active { " is-active" } else { "" },
350                href = href_for(site, &item.href),
351                title = escape_html(&item.title),
352                children = children
353            )
354        })
355        .collect::<Vec<_>>()
356        .join("\n")
357}
358
359fn nav_item_is_active(item: &NavItem, route: &str) -> bool {
360    route == item.href
361        || (item.href != "/" && route.starts_with(&item.active_prefix))
362        || item
363            .items
364            .iter()
365            .any(|child| nav_item_is_active(child, route))
366}
367
368fn render_toc(page: &PageRender) -> String {
369    let links = page
370        .headings
371        .iter()
372        .filter(|heading| heading.level > 1 && heading.level < 4)
373        .map(|heading| {
374            format!(
375                r##"<a class="rp-toc-link rp-toc-level-{level}" href="#{anchor}">{title}</a>"##,
376                level = heading.level,
377                anchor = escape_attr(&heading.anchor),
378                title = escape_html(&heading.text)
379            )
380        })
381        .collect::<Vec<_>>()
382        .join("\n");
383
384    if links.is_empty() {
385        String::new()
386    } else {
387        format!(r#"<aside class="rp-toc" aria-label="On this page">{links}</aside>"#)
388    }
389}
390
391fn render_skin_switcher(site: &SiteRender) -> String {
392    let options = ["light", "dark"]
393        .iter()
394        .map(|skin| {
395            let selected = skin == &site.theme.skin.as_str();
396            format!(
397                r#"<button class="rp-select-option{selected}" type="button" role="option" aria-selected="{aria_selected}" data-rp-skin-option data-rp-skin-value="{value}">{label}</button>"#,
398                value = escape_attr(skin),
399                selected = if selected { " is-selected" } else { "" },
400                aria_selected = selected,
401                label = skin_label(skin)
402            )
403        })
404        .collect::<Vec<_>>()
405        .join("");
406    format!(
407        r#"<div class="rp-select rp-skin-select" data-rp-select data-rp-skin-select title="Color theme"><button class="rp-select-button" type="button" data-rp-select-trigger data-rp-skin-trigger aria-haspopup="listbox" aria-expanded="false"><span class="rp-select-label">Theme</span><span class="rp-select-value" data-rp-skin-current>{current}</span></button><div class="rp-select-menu" role="listbox">{options}</div></div>"#,
408        current = skin_label(&site.theme.skin)
409    )
410}
411
412fn render_github_link(site: &SiteRender) -> String {
413    let href = site.theme.github_url.trim();
414    if href.is_empty() {
415        return String::new();
416    }
417
418    format!(
419        r#"<a class="rp-icon-button rp-github-link" href="{href}" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository" title="GitHub">
420<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.59 2 12.25c0 4.53 2.87 8.37 6.84 9.72.5.09.68-.22.68-.49 0-.24-.01-.88-.01-1.72-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.55-1.14-4.55-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.32 9.32 0 0 1 12 7.01c.85 0 1.71.12 2.51.35 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.05.36.32.68.95.68 1.91 0 1.38-.01 2.49-.01 2.83 0 .27.18.59.69.49A10.22 10.22 0 0 0 22 12.25C22 6.59 17.52 2 12 2Z"></path></svg>
421</a>"#,
422        href = escape_attr(href)
423    )
424}
425
426fn skin_label(skin: &str) -> &'static str {
427    match skin {
428        "dark" => "Dark",
429        _ => "Light",
430    }
431}
432
433fn render_language_switcher(site: &SiteRender) -> String {
434    if site.languages.is_empty() {
435        return String::new();
436    }
437
438    let options = site
439        .languages
440        .iter()
441        .map(|language| {
442            let selected = language.current;
443            format!(
444                r#"<button class="rp-select-option{selected}" type="button" role="option" aria-selected="{aria_selected}" data-rp-language-option data-rp-language-href="{value}">{label}</button>"#,
445                value = escape_attr(&href_for(site, &language.href)),
446                selected = if selected { " is-selected" } else { "" },
447                aria_selected = selected,
448                label = escape_html(&language.label)
449            )
450        })
451        .collect::<Vec<_>>()
452        .join("");
453    let current = site
454        .languages
455        .iter()
456        .find(|language| language.current)
457        .map(|language| language.label.as_str())
458        .unwrap_or("Language");
459    format!(
460        r#"<div class="rp-select rp-language-select" data-rp-select data-rp-language-select title="Language"><button class="rp-select-button" type="button" data-rp-select-trigger data-rp-language-trigger aria-haspopup="listbox" aria-expanded="false"><span class="rp-select-label">Language</span><span class="rp-select-value" data-rp-language-current>{current}</span></button><div class="rp-select-menu" role="listbox">{options}</div></div>"#,
461        current = escape_html(current)
462    )
463}
464
465fn render_search_dialog(site: &SiteRender) -> String {
466    if !site.search_enabled {
467        return String::new();
468    }
469
470    r#"<dialog class="rp-search" data-rp-search>
471  <form method="dialog" class="rp-search-box">
472    <input data-rp-search-input type="search" autocomplete="off" placeholder="Search docs">
473    <button class="rp-icon-button" value="close" aria-label="Close search" title="Close">
474      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>
475    </button>
476  </form>
477  <div class="rp-search-results" data-rp-search-results></div>
478</dialog>"#
479        .to_string()
480}
481
482fn render_access_mask(site: &SiteRender) -> String {
483    format!(
484        r#"<div class="rp-access-mask" data-rp-access-mask>
485  <form class="rp-access-panel" data-rp-access-form>
486    <h2>Masked content</h2>
487    <p>This is a front-end viewing mask. Static files still contain the page content.</p>
488    <input data-rp-access-input type="password" placeholder="{hint}" aria-label="{hint}" autocomplete="current-password" required>
489    <p class="rp-access-error" data-rp-access-error hidden>Incorrect password.</p>
490    <button type="submit">View page</button>
491  </form>
492</div>"#,
493        hint = escape_attr(&site.password_hint)
494    )
495}
496
497fn href_for(site: &SiteRender, href: &str) -> String {
498    if href.starts_with("http://")
499        || href.starts_with("https://")
500        || href.starts_with("mailto:")
501        || href.starts_with('#')
502    {
503        href.to_string()
504    } else if href == "/" {
505        site.base.clone()
506    } else if href.starts_with('/') {
507        format!("{}{}", site.base, href.trim_start_matches('/'))
508    } else {
509        format!("{}{}", site.base, href)
510    }
511}
512
513fn link_is_active(route: &str, href: &str) -> bool {
514    href.starts_with('/') && (route == href || (href != "/" && route.starts_with(href)))
515}
516
517fn css() -> &'static str {
518    r#":root {
519  color-scheme: light;
520  --rp-bg: #f7f7f4;
521  --rp-panel: #ffffff;
522  --rp-text: #1d2528;
523  --rp-muted: #607179;
524  --rp-line: #dbe1de;
525  --rp-accent: #176b5b;
526  --rp-accent-soft: #dff0eb;
527  --rp-danger: #b42318;
528  --rp-code-bg: #172026;
529  --rp-code-text: #edf7f6;
530  --rp-shadow: 0 12px 30px rgb(27 40 42 / 12%);
531  --rp-grid-line: rgb(23 107 91 / 5%);
532  --rp-mermaid-bg: #ffffff;
533  --rp-mermaid-text: #1d2528;
534  --rp-mermaid-line: #6c7a80;
535  --rp-mermaid-node-bg: #e8f5f1;
536  --rp-mermaid-node-border: #176b5b;
537  --rp-mermaid-cluster-bg: #f2f8f6;
538  --rp-mermaid-cluster-border: #b7ccc5;
539  --rp-mermaid-label-bg: #ffffff;
540  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
541}
542
543[data-rp-skin="dark"] {
544  color-scheme: dark;
545  --rp-bg: #111418;
546  --rp-panel: #181d23;
547  --rp-text: #edf2f4;
548  --rp-muted: #a0abb3;
549  --rp-line: #2d3741;
550  --rp-accent: #66c2a5;
551  --rp-accent-soft: #12392f;
552  --rp-danger: #fca5a5;
553  --rp-code-bg: #0b1117;
554  --rp-code-text: #f2fbff;
555  --rp-shadow: 0 14px 34px rgb(0 0 0 / 34%);
556  --rp-grid-line: rgb(255 255 255 / 5%);
557  --rp-mermaid-bg: #151a20;
558  --rp-mermaid-text: #edf2f4;
559  --rp-mermaid-line: #9fb4bd;
560  --rp-mermaid-node-bg: #17382f;
561  --rp-mermaid-node-border: #66c2a5;
562  --rp-mermaid-cluster-bg: #101820;
563  --rp-mermaid-cluster-border: #3d5c54;
564  --rp-mermaid-label-bg: #181d23;
565}
566
567* { box-sizing: border-box; }
568html { scroll-padding-top: 88px; }
569body {
570  margin: 0;
571  background:
572    linear-gradient(var(--rp-grid-line) 1px, transparent 1px),
573    linear-gradient(90deg, var(--rp-grid-line) 1px, transparent 1px),
574    var(--rp-bg);
575  background-size: 32px 32px;
576  color: var(--rp-text);
577  line-height: 1.65;
578  font-size: 16px;
579}
580a { color: var(--rp-accent); text-decoration: none; }
581a:hover { text-decoration: underline; }
582
583.rp-topbar {
584  position: sticky;
585  top: 0;
586  z-index: 20;
587  height: 64px;
588  display: flex;
589  align-items: center;
590  justify-content: space-between;
591  padding: 0 24px;
592  border-bottom: 1px solid var(--rp-line);
593  background: color-mix(in srgb, var(--rp-panel) 92%, transparent);
594  backdrop-filter: blur(16px);
595}
596.rp-brand {
597  min-width: 0;
598  color: var(--rp-text);
599  font-weight: 750;
600  font-size: 18px;
601  overflow: hidden;
602  text-overflow: ellipsis;
603  white-space: nowrap;
604}
605.rp-topnav {
606  flex: 0 1 auto;
607  min-width: 0;
608  display: flex;
609  align-items: center;
610  justify-content: flex-end;
611  gap: 4px;
612  margin: 0 12px 0 auto;
613}
614.rp-topnav-link,
615.rp-topnav-trigger {
616  height: 36px;
617  display: flex;
618  align-items: center;
619  padding: 0 10px;
620  border-radius: 8px;
621  color: var(--rp-muted);
622  font-size: 14px;
623  line-height: 1;
624  white-space: nowrap;
625  cursor: pointer;
626}
627.rp-topnav-link:hover,
628.rp-topnav-link.is-active,
629.rp-topnav-group.is-active > .rp-topnav-trigger,
630.rp-topnav-group:hover > .rp-topnav-trigger,
631.rp-topnav-group:focus-within > .rp-topnav-trigger {
632  background: var(--rp-accent-soft);
633  color: var(--rp-accent);
634  text-decoration: none;
635}
636.rp-topnav-group {
637  position: relative;
638  height: 64px;
639  display: flex;
640  align-items: center;
641}
642.rp-topnav-trigger::after {
643  content: "";
644  width: 6px;
645  height: 6px;
646  margin-left: 8px;
647  border-right: 1.5px solid currentColor;
648  border-bottom: 1.5px solid currentColor;
649  transform: translateY(-2px) rotate(45deg);
650}
651.rp-topnav-menu {
652  position: absolute;
653  top: 100%;
654  right: 0;
655  z-index: 30;
656  min-width: 190px;
657  display: none;
658  gap: 2px;
659  padding: 8px;
660  border: 1px solid var(--rp-line);
661  border-radius: 8px;
662  background: var(--rp-panel);
663  box-shadow: var(--rp-shadow);
664}
665.rp-topnav-group:hover > .rp-topnav-menu,
666.rp-topnav-group:focus-within > .rp-topnav-menu {
667  display: grid;
668}
669.rp-topnav-menu-link {
670  display: block;
671  padding: 8px 10px;
672  border-radius: 8px;
673  color: var(--rp-muted);
674  font-size: 14px;
675  line-height: 1.35;
676}
677.rp-topnav-menu-link:hover,
678.rp-topnav-menu-link.is-active {
679  background: var(--rp-accent-soft);
680  color: var(--rp-accent);
681  text-decoration: none;
682}
683.rp-topbar-actions {
684  display: flex;
685  gap: 8px;
686  align-items: center;
687  min-width: 0;
688}
689.rp-icon-button {
690  width: 36px;
691  height: 36px;
692  display: inline-grid;
693  place-items: center;
694  border: 1px solid var(--rp-line);
695  background: var(--rp-panel);
696  color: var(--rp-text);
697  border-radius: 8px;
698  cursor: pointer;
699}
700.rp-icon-button svg {
701  width: 18px;
702  height: 18px;
703  fill: none;
704  stroke: currentColor;
705  stroke-width: 2;
706  stroke-linecap: round;
707}
708.rp-icon-button:hover {
709  border-color: var(--rp-accent);
710  color: var(--rp-accent);
711  text-decoration: none;
712}
713.rp-github-link svg {
714  fill: currentColor;
715  stroke: none;
716}
717.rp-select {
718  position: relative;
719  flex: 0 0 auto;
720}
721.rp-select-button {
722  appearance: none;
723  -webkit-appearance: none;
724  min-width: 124px;
725  height: 36px;
726  display: flex;
727  align-items: center;
728  justify-content: space-between;
729  gap: 8px;
730  padding: 0 32px 0 10px;
731  border: 1px solid color-mix(in srgb, var(--rp-line) 82%, var(--rp-muted));
732  background: linear-gradient(180deg, var(--rp-panel), color-mix(in srgb, var(--rp-panel) 88%, var(--rp-bg)));
733  border-radius: 8px;
734  color: var(--rp-muted);
735  font-size: 13px;
736  line-height: 1;
737  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 4%);
738  cursor: pointer;
739  transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
740}
741.rp-language-select .rp-select-button { min-width: 152px; }
742.rp-select-button:hover,
743.rp-select.is-open .rp-select-button,
744.rp-select-button:focus-visible {
745  border-color: var(--rp-accent);
746  color: var(--rp-accent);
747  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-accent-soft) 72%, transparent);
748  outline: 0;
749}
750.rp-select-button::after {
751  content: "";
752  position: absolute;
753  right: 12px;
754  top: 50%;
755  width: 7px;
756  height: 7px;
757  border-right: 1.5px solid currentColor;
758  border-bottom: 1.5px solid currentColor;
759  transform: translateY(-65%) rotate(45deg);
760  pointer-events: none;
761}
762.rp-select-label {
763  color: currentColor;
764  font-size: 12px;
765  font-weight: 650;
766}
767.rp-select-value {
768  min-width: 0;
769  overflow: hidden;
770  color: var(--rp-text);
771  text-overflow: ellipsis;
772  white-space: nowrap;
773}
774.rp-select-menu {
775  position: absolute;
776  top: calc(100% + 8px);
777  right: 0;
778  z-index: 35;
779  min-width: 100%;
780  display: none;
781  gap: 2px;
782  padding: 6px;
783  border: 1px solid var(--rp-line);
784  border-radius: 8px;
785  background: var(--rp-panel);
786  box-shadow: var(--rp-shadow);
787}
788.rp-select.is-open .rp-select-menu { display: grid; }
789.rp-select-option {
790  width: 100%;
791  min-width: 132px;
792  min-height: 32px;
793  display: block;
794  padding: 7px 10px;
795  border: 0;
796  border-radius: 7px;
797  background: transparent;
798  color: var(--rp-muted);
799  font: inherit;
800  font-size: 13px;
801  line-height: 1.35;
802  text-align: left;
803  white-space: nowrap;
804  cursor: pointer;
805}
806.rp-select-option:hover,
807.rp-select-option:focus-visible,
808.rp-select-option.is-selected {
809  background: var(--rp-accent-soft);
810  color: var(--rp-accent);
811  outline: 0;
812}
813.rp-menu-button { display: none; }
814
815.rp-shell {
816  display: grid;
817  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
818  max-width: 1440px;
819  margin: 0 auto;
820}
821.rp-sidebar {
822  position: sticky;
823  top: 64px;
824  height: calc(100vh - 64px);
825  padding: 24px 16px 24px 24px;
826  border-right: 1px solid var(--rp-line);
827  overflow: auto;
828}
829.rp-nav-group {
830  display: grid;
831  gap: 4px;
832  margin: 4px 0 12px;
833}
834.rp-nav-group-title {
835  display: block;
836  padding: 7px 10px;
837  color: var(--rp-text);
838  border-radius: 8px;
839  font-size: 13px;
840  font-weight: 750;
841  line-height: 1.35;
842}
843.rp-nav-group-title:hover,
844.rp-nav-group.is-active > .rp-nav-group-title {
845  background: var(--rp-accent-soft);
846  color: var(--rp-accent);
847  text-decoration: none;
848}
849.rp-nav-children {
850  display: grid;
851  gap: 2px;
852  margin-left: 10px;
853  padding-left: 10px;
854  border-left: 1px solid var(--rp-line);
855}
856.rp-nav-link {
857  display: block;
858  padding: 8px 10px;
859  color: var(--rp-muted);
860  border-radius: 8px;
861  font-size: 14px;
862  line-height: 1.35;
863}
864.rp-nav-level-1 {
865  font-size: 13px;
866}
867.rp-nav-link:hover,
868.rp-nav-link.is-active {
869  background: var(--rp-accent-soft);
870  color: var(--rp-accent);
871  text-decoration: none;
872}
873
874.rp-main {
875  display: grid;
876  grid-template-columns: minmax(0, 820px) minmax(180px, 240px);
877  gap: 42px;
878  min-width: 0;
879  padding: 48px 32px 96px;
880}
881.rp-doc {
882  min-width: 0;
883}
884.rp-doc > :first-child { margin-top: 0; }
885.rp-doc h1,
886.rp-doc h2,
887.rp-doc h3,
888.rp-doc h4 {
889  line-height: 1.2;
890  margin: 2em 0 0.65em;
891  overflow-wrap: anywhere;
892}
893.rp-doc h1 { font-size: 42px; margin-top: 0; }
894.rp-doc h2 { font-size: 28px; padding-top: 12px; border-top: 1px solid var(--rp-line); }
895.rp-doc h3 { font-size: 22px; }
896.rp-doc p,
897.rp-doc li { color: var(--rp-text); }
898.rp-doc blockquote {
899  margin: 20px 0;
900  padding: 4px 18px;
901  border-left: 4px solid var(--rp-accent);
902  background: var(--rp-accent-soft);
903}
904.rp-doc table {
905  width: 100%;
906  border-collapse: collapse;
907  display: block;
908  overflow-x: auto;
909}
910.rp-doc th,
911.rp-doc td {
912  border: 1px solid var(--rp-line);
913  padding: 8px 10px;
914}
915.rp-doc code {
916  padding: 2px 5px;
917  background: var(--rp-accent-soft);
918  border-radius: 5px;
919  font-size: 0.9em;
920}
921.rp-doc pre {
922  overflow: auto;
923  padding: 16px;
924  border-radius: 8px;
925  background: var(--rp-code-bg);
926  color: var(--rp-code-text);
927  box-shadow: var(--rp-shadow);
928}
929.rp-doc pre code {
930  padding: 0;
931  background: transparent;
932  color: inherit;
933  border-radius: 0;
934}
935.rp-code {
936  margin: 20px 0;
937  overflow: hidden;
938  border: 1px solid color-mix(in srgb, var(--rp-code-bg) 78%, var(--rp-line));
939  border-radius: 8px;
940  background: var(--rp-code-bg);
941  box-shadow: var(--rp-shadow);
942}
943.rp-code-header {
944  display: flex;
945  align-items: center;
946  min-height: 34px;
947  padding: 0 14px;
948  border-bottom: 1px solid rgb(255 255 255 / 8%);
949  background: color-mix(in srgb, var(--rp-code-bg) 82%, black);
950  color: rgb(237 247 246 / 72%);
951  font-size: 12px;
952  font-weight: 700;
953  line-height: 1;
954}
955.rp-code pre {
956  margin: 0;
957  border-radius: 0;
958  box-shadow: none;
959}
960.rp-code code {
961  display: block;
962  min-width: max-content;
963}
964.rp-doc pre.mermaid {
965  background: var(--rp-mermaid-bg);
966  color: var(--rp-mermaid-text);
967  border: 1px solid var(--rp-mermaid-cluster-border);
968}
969.rp-doc pre.mermaid svg {
970  max-width: 100%;
971  height: auto;
972}
973.heading-anchor {
974  display: inline-block;
975  width: 0.85em;
976  margin-left: -0.85em;
977  opacity: 0;
978  color: var(--rp-accent);
979}
980h1:hover .heading-anchor,
981h2:hover .heading-anchor,
982h3:hover .heading-anchor,
983h4:hover .heading-anchor,
984h5:hover .heading-anchor,
985h6:hover .heading-anchor { opacity: 1; text-decoration: none; }
986.rp-toc {
987  position: sticky;
988  top: 88px;
989  height: max-content;
990  max-height: calc(100vh - 112px);
991  overflow: auto;
992  padding-left: 16px;
993  border-left: 1px solid var(--rp-line);
994}
995.rp-toc-link {
996  display: block;
997  padding: 4px 0;
998  color: var(--rp-muted);
999  font-size: 13px;
1000  line-height: 1.35;
1001}
1002.rp-toc-level-3 { padding-left: 14px; }
1003
1004.rp-search::backdrop { background: rgb(20 28 31 / 45%); }
1005.rp-search {
1006  width: min(720px, calc(100vw - 32px));
1007  max-height: min(720px, calc(100vh - 48px));
1008  border: 1px solid var(--rp-line);
1009  border-radius: 8px;
1010  padding: 0;
1011  background: var(--rp-panel);
1012  color: var(--rp-text);
1013  box-shadow: var(--rp-shadow);
1014}
1015.rp-search-box {
1016  display: flex;
1017  gap: 8px;
1018  padding: 12px;
1019  border-bottom: 1px solid var(--rp-line);
1020}
1021.rp-search-box input {
1022  flex: 1;
1023  min-width: 0;
1024  border: 1px solid var(--rp-line);
1025  border-radius: 8px;
1026  padding: 0 12px;
1027  font: inherit;
1028}
1029.rp-search-results {
1030  display: grid;
1031  gap: 4px;
1032  padding: 8px;
1033}
1034.rp-search-result {
1035  display: block;
1036  padding: 10px 12px;
1037  border-radius: 8px;
1038  color: var(--rp-text);
1039}
1040.rp-search-result:hover {
1041  background: var(--rp-accent-soft);
1042  text-decoration: none;
1043}
1044.rp-search-result span {
1045  display: block;
1046  color: var(--rp-muted);
1047  font-size: 13px;
1048}
1049.rp-access-mask {
1050  position: fixed;
1051  inset: 0;
1052  z-index: 40;
1053  display: grid;
1054  place-items: center;
1055  padding: 24px;
1056  background: color-mix(in srgb, var(--rp-bg) 86%, transparent);
1057  backdrop-filter: blur(14px);
1058}
1059.rp-access-mask.is-unlocked { display: none; }
1060.rp-access-panel {
1061  width: min(420px, 100%);
1062  padding: 24px;
1063  background: var(--rp-panel);
1064  border: 1px solid var(--rp-line);
1065  border-radius: 8px;
1066  box-shadow: var(--rp-shadow);
1067}
1068.rp-access-panel h2 {
1069  margin: 0 0 8px;
1070  font-size: 22px;
1071}
1072.rp-access-panel p {
1073  margin: 0 0 18px;
1074  color: var(--rp-muted);
1075}
1076.rp-access-panel input {
1077  width: 100%;
1078  height: 40px;
1079  border: 1px solid var(--rp-line);
1080  border-radius: 8px;
1081  padding: 0 10px;
1082  font: inherit;
1083}
1084.rp-access-panel input[aria-invalid="true"] {
1085  border-color: var(--rp-danger);
1086}
1087.rp-access-error {
1088  margin: 8px 0 0;
1089  color: var(--rp-danger);
1090  font-size: 13px;
1091  line-height: 1.4;
1092}
1093.rp-access-panel button {
1094  margin-top: 12px;
1095  width: 100%;
1096  height: 40px;
1097  border: 0;
1098  border-radius: 8px;
1099  background: var(--rp-accent);
1100  color: white;
1101  font-weight: 700;
1102  cursor: pointer;
1103}
1104
1105@media (max-width: 1080px) {
1106  .rp-main { grid-template-columns: minmax(0, 1fr); }
1107  .rp-toc { display: none; }
1108}
1109
1110@media (max-width: 760px) {
1111  .rp-topbar { padding: 0 12px; }
1112  .rp-topnav { display: none; }
1113  .rp-select-button { min-width: 74px; max-width: 96px; padding: 0 28px 0 8px; }
1114  .rp-language-select .rp-select-button { min-width: 92px; max-width: 112px; }
1115  .rp-select-label { display: none; }
1116  .rp-select-menu { right: 0; }
1117  .rp-select-option { min-width: 118px; }
1118  .rp-menu-button { display: inline-grid; }
1119  .rp-shell { display: block; }
1120  .rp-sidebar {
1121    display: none;
1122    position: fixed;
1123    inset: 64px 0 auto 0;
1124    z-index: 18;
1125    height: calc(100vh - 64px);
1126    background: var(--rp-panel);
1127    border-right: 0;
1128    border-bottom: 1px solid var(--rp-line);
1129    padding: 16px;
1130  }
1131  .rp-sidebar.is-open { display: block; }
1132  .rp-main { padding: 32px 18px 72px; }
1133  .rp-doc h1 { font-size: 32px; }
1134  .rp-doc h2 { font-size: 24px; }
1135  .heading-anchor { margin-left: 0; width: auto; opacity: 1; margin-right: 6px; }
1136}
1137"#
1138}
1139
1140fn js(site: &SiteRender) -> String {
1141    format!(
1142        r##"const base = {base:?};
1143const defaultSkin = {skin:?};
1144const accessPassword = {access_password:?};
1145const supportedSkins = ["light", "dark"];
1146
1147const root = document.documentElement;
1148const savedSkin = localStorage.getItem("rustpress:skin");
1149root.dataset.rpSkin = supportedSkins.includes(savedSkin) ? savedSkin : defaultSkin;
1150if (!supportedSkins.includes(root.dataset.rpSkin)) root.dataset.rpSkin = "light";
1151
1152const selectMenus = Array.from(document.querySelectorAll("[data-rp-select]"));
1153for (const selectMenu of selectMenus) {{
1154  const trigger = selectMenu.querySelector("[data-rp-select-trigger]");
1155  if (!trigger) continue;
1156  trigger.addEventListener("click", event => {{
1157    event.stopPropagation();
1158    const wasOpen = selectMenu.classList.contains("is-open");
1159    closeSelectMenus();
1160    if (!wasOpen) openSelectMenu(selectMenu);
1161  }});
1162}}
1163document.addEventListener("click", closeSelectMenus);
1164document.addEventListener("keydown", event => {{
1165  if (event.key === "Escape") closeSelectMenus();
1166}});
1167
1168const skinSelect = document.querySelector("[data-rp-skin-select]");
1169if (skinSelect) {{
1170  const skinCurrent = skinSelect.querySelector("[data-rp-skin-current]");
1171  const skinOptions = Array.from(skinSelect.querySelectorAll("[data-rp-skin-option]"));
1172  setSkin(root.dataset.rpSkin, false);
1173  for (const option of skinOptions) {{
1174    option.addEventListener("click", event => {{
1175      event.stopPropagation();
1176      setSkin(option.dataset.rpSkinValue, true);
1177      closeSelectMenus();
1178    }});
1179  }}
1180
1181  function setSkin(skin, persist) {{
1182    if (!supportedSkins.includes(skin)) skin = "light";
1183    const previousSkin = root.dataset.rpSkin;
1184    root.dataset.rpSkin = skin;
1185    if (skinCurrent) skinCurrent.textContent = skin === "dark" ? "Dark" : "Light";
1186    for (const option of skinOptions) {{
1187      const selected = option.dataset.rpSkinValue === skin;
1188      option.classList.toggle("is-selected", selected);
1189      option.setAttribute("aria-selected", selected ? "true" : "false");
1190    }}
1191    if (persist) localStorage.setItem("rustpress:skin", skin);
1192    if (previousSkin !== skin) {{
1193      document.dispatchEvent(new CustomEvent("rustpress:skinchange", {{ detail: {{ skin }} }}));
1194    }}
1195  }}
1196}}
1197
1198const languageSelect = document.querySelector("[data-rp-language-select]");
1199if (languageSelect) {{
1200  for (const option of languageSelect.querySelectorAll("[data-rp-language-option]")) {{
1201    option.addEventListener("click", event => {{
1202      event.stopPropagation();
1203      if (option.dataset.rpLanguageHref) window.location.href = option.dataset.rpLanguageHref;
1204    }});
1205  }}
1206}}
1207
1208function openSelectMenu(selectMenu) {{
1209  selectMenu.classList.add("is-open");
1210  const trigger = selectMenu.querySelector("[data-rp-select-trigger]");
1211  if (trigger) trigger.setAttribute("aria-expanded", "true");
1212}}
1213
1214function closeSelectMenus() {{
1215  for (const selectMenu of selectMenus) {{
1216    selectMenu.classList.remove("is-open");
1217    const trigger = selectMenu.querySelector("[data-rp-select-trigger]");
1218    if (trigger) trigger.setAttribute("aria-expanded", "false");
1219  }}
1220}}
1221
1222const menu = document.querySelector("[data-rp-menu]");
1223const sidebar = document.querySelector("[data-rp-sidebar]");
1224if (menu && sidebar) {{
1225  menu.addEventListener("click", () => sidebar.classList.toggle("is-open"));
1226}}
1227
1228const mask = document.querySelector("[data-rp-access-mask]");
1229const accessForm = document.querySelector("[data-rp-access-form]");
1230const accessInput = document.querySelector("[data-rp-access-input]");
1231const accessError = document.querySelector("[data-rp-access-error]");
1232if (mask && accessForm) {{
1233  const key = "rustpress:access:" + location.pathname;
1234  if (sessionStorage.getItem(key) === "unlocked") mask.classList.add("is-unlocked");
1235  accessForm.addEventListener("submit", event => {{
1236    event.preventDefault();
1237    if (!accessInput || accessInput.value !== accessPassword) {{
1238      if (accessError) accessError.hidden = false;
1239      if (accessInput) {{
1240        accessInput.setAttribute("aria-invalid", "true");
1241        accessInput.focus();
1242      }}
1243      return;
1244    }}
1245    sessionStorage.setItem(key, "unlocked");
1246    mask.classList.add("is-unlocked");
1247  }});
1248  if (accessInput) {{
1249    accessInput.addEventListener("input", () => {{
1250      accessInput.removeAttribute("aria-invalid");
1251      if (accessError) accessError.hidden = true;
1252    }});
1253  }}
1254}}
1255
1256const searchDialog = document.querySelector("[data-rp-search]");
1257const searchOpen = document.querySelector("[data-rp-search-open]");
1258const searchInput = document.querySelector("[data-rp-search-input]");
1259const searchResults = document.querySelector("[data-rp-search-results]");
1260let searchIndexPromise;
1261
1262if (searchDialog && searchOpen && searchInput && searchResults) {{
1263  let lastShiftPress = 0;
1264
1265  searchOpen.addEventListener("click", () => {{
1266    openSearch();
1267  }});
1268
1269  document.addEventListener("keydown", event => {{
1270    if (event.key !== "Shift" || event.repeat) return;
1271    const now = Date.now();
1272    if (now - lastShiftPress <= 500) {{
1273      event.preventDefault();
1274      openSearch();
1275      lastShiftPress = 0;
1276    }} else {{
1277      lastShiftPress = now;
1278    }}
1279  }});
1280
1281  function openSearch() {{
1282    if (typeof searchDialog.showModal === "function") searchDialog.showModal();
1283    else searchDialog.setAttribute("open", "");
1284    searchInput.focus();
1285    loadSearchIndex();
1286  }}
1287
1288  searchInput.addEventListener("input", () => runSearch(searchInput.value));
1289}}
1290
1291function loadSearchIndex() {{
1292  if (!searchIndexPromise) {{
1293    searchIndexPromise = fetch(joinBase("assets/search-index.json"))
1294      .then(response => response.ok ? response.json() : Promise.reject(new Error("search index missing")))
1295      .catch(() => ({{ pages: [] }}));
1296  }}
1297  return searchIndexPromise;
1298}}
1299
1300function runSearch(query) {{
1301  const normalized = query.trim().toLowerCase();
1302  if (!normalized) {{
1303    searchResults.innerHTML = "";
1304    return;
1305  }}
1306  loadSearchIndex().then(index => {{
1307    const tokens = tokenize(normalized);
1308    const results = index.pages
1309      .map(page => ({{ page, score: scorePage(page, tokens), snippet: snippet(page, tokens) }}))
1310      .filter(result => result.score > 0)
1311      .sort((a, b) => b.score - a.score)
1312      .slice(0, 12);
1313    searchResults.innerHTML = results.length
1314      ? results.map(renderResult).join("")
1315      : "<p class=\"rp-search-empty\">No results</p>";
1316  }});
1317}}
1318
1319function scorePage(page, tokens) {{
1320  const title = (page.title || "").toLowerCase();
1321  const body = (page.body || "").toLowerCase();
1322  let score = 0;
1323  for (const token of tokens) {{
1324    if (title.includes(token)) score += 8;
1325    if (body.includes(token)) score += 2;
1326  }}
1327  return score;
1328}}
1329
1330function snippet(page, tokens) {{
1331  const body = page.body || "";
1332  const lower = body.toLowerCase();
1333  const first = tokens.map(token => lower.indexOf(token)).filter(index => index >= 0).sort((a, b) => a - b)[0] || 0;
1334  const start = Math.max(0, first - 56);
1335  const text = body.slice(start, start + 150);
1336  return (start > 0 ? "..." : "") + text;
1337}}
1338
1339function renderResult(result) {{
1340  const page = result.page;
1341  return `<a class="rp-search-result" href="${{escapeHtml(page.url || "#")}}">${{escapeHtml(page.title || "Untitled")}}<span>${{escapeHtml(result.snippet || page.url || "")}}</span></a>`;
1342}}
1343
1344function tokenize(input) {{
1345  const latin = input.match(/[a-z0-9]+/g) || [];
1346  const cjk = Array.from(input.matchAll(/[\u3400-\u9fff]/g)).map(match => match[0]);
1347  return [...latin, ...cjk].filter(Boolean);
1348}}
1349
1350function joinBase(path) {{
1351  return base.replace(/\/$/, "") + "/" + path.replace(/^\//, "");
1352}}
1353
1354function escapeHtml(value) {{
1355  return String(value).replace(/[&<>"']/g, char => ({{
1356    "&": "&amp;",
1357    "<": "&lt;",
1358    ">": "&gt;",
1359    "\"": "&quot;",
1360    "'": "&#39;"
1361  }}[char]));
1362}}
1363"##,
1364        base = site.base,
1365        skin = site.theme.skin,
1366        access_password = site.access_password
1367    )
1368}
1369
1370fn escape_html(input: &str) -> String {
1371    input
1372        .replace('&', "&amp;")
1373        .replace('<', "&lt;")
1374        .replace('>', "&gt;")
1375}
1376
1377fn escape_attr(input: &str) -> String {
1378    escape_html(input).replace('"', "&quot;")
1379}
1380
1381#[cfg(test)]
1382mod tests {
1383    use super::*;
1384
1385    fn site() -> SiteRender {
1386        SiteRender {
1387            title: "Docs".to_string(),
1388            lang: "en-US".to_string(),
1389            base: "/".to_string(),
1390            home_href: "/".to_string(),
1391            theme: ThemeConfig {
1392                skin: "light".to_string(),
1393                allow_switch: true,
1394                github_url: "https://github.com/ZenithInc/rust-press".to_string(),
1395            },
1396            search_enabled: true,
1397            access_enabled: true,
1398            access_password: "rustpress".to_string(),
1399            password_hint: "Password".to_string(),
1400            top_nav: vec![
1401                TopNavItem {
1402                    title: "Guide".to_string(),
1403                    href: Some("/guide/".to_string()),
1404                    items: vec![TopNavLink {
1405                        title: "CLI".to_string(),
1406                        href: "/guide/cli/".to_string(),
1407                    }],
1408                },
1409                TopNavItem {
1410                    title: "Reference".to_string(),
1411                    href: Some("/reference/".to_string()),
1412                    items: vec![],
1413                },
1414            ],
1415            nav: vec![NavItem {
1416                title: "Home".to_string(),
1417                href: "/".to_string(),
1418                active_prefix: "/".to_string(),
1419                items: Vec::new(),
1420            }],
1421            languages: vec![
1422                LanguageOption {
1423                    label: "English".to_string(),
1424                    href: "/".to_string(),
1425                    current: true,
1426                },
1427                LanguageOption {
1428                    label: "Deutsch".to_string(),
1429                    href: "/de/".to_string(),
1430                    current: false,
1431                },
1432            ],
1433        }
1434    }
1435
1436    #[test]
1437    fn renders_theme_switcher_and_mask() {
1438        let html = render_page(
1439            &site(),
1440            &PageRender {
1441                title: "Home".to_string(),
1442                route: "/".to_string(),
1443                html: "<h1>Home</h1>".to_string(),
1444                headings: vec![],
1445                masked: true,
1446                search: true,
1447            },
1448        );
1449
1450        assert!(html.contains("data-rp-skin-select"));
1451        assert!(html.contains(r#"data-rp-skin-value="light">Light</button>"#));
1452        assert!(html.contains(r#"data-rp-skin-value="dark">Dark</button>"#));
1453        assert!(!html.contains("classic"));
1454        assert!(!html.contains("dense"));
1455        assert!(html.contains(r#"<html lang="en-US""#));
1456        assert!(html.contains("data-rp-language-select"));
1457        assert!(!html.contains("<select"));
1458        assert!(!html.contains("<option"));
1459        assert!(html.contains(r#"data-rp-language-href="/">English</button>"#));
1460        assert!(html.contains(r#"class="rp-icon-button rp-github-link""#));
1461        assert!(html.contains(r#"href="https://github.com/ZenithInc/rust-press""#));
1462        assert!(html.contains(r#"aria-label="GitHub repository""#));
1463        assert!(html.contains("data-rp-access-mask"));
1464        assert!(html.contains("data-rp-access-error"));
1465        assert!(html.contains("autocomplete=\"current-password\""));
1466        assert!(html.contains("front-end viewing mask"));
1467        assert!(html.contains("rp-topnav-group"));
1468        assert!(html.contains("rp-topnav-trigger"));
1469        assert!(html.contains("Reference"));
1470        assert!(!html.contains("<details"));
1471        assert!(html.contains("theme: \"base\""));
1472        assert!(html.contains("themeVariables"));
1473        assert!(html.contains("mermaid.run({ nodes: mermaidBlocks })"));
1474        assert!(!html.contains("startOnLoad: true"));
1475
1476        let js = js(&site());
1477        assert!(js.contains("lastShiftPress"));
1478        assert!(js.contains(r#"const accessPassword = "rustpress";"#));
1479        assert!(js.contains("accessInput.value !== accessPassword"));
1480        assert!(js.contains(r#"accessInput.setAttribute("aria-invalid", "true")"#));
1481        assert!(js.contains(r#"event.key !== "Shift""#));
1482        assert!(js.contains("rustpress:skinchange"));
1483        assert!(js.contains(r#"new CustomEvent("rustpress:skinchange""#));
1484    }
1485
1486    #[test]
1487    fn css_includes_mermaid_theme_colors() {
1488        let styles = css();
1489        assert!(styles.contains("--rp-mermaid-bg: #ffffff;"));
1490        assert!(styles.contains("--rp-mermaid-text: #1d2528;"));
1491        assert!(styles.contains("--rp-mermaid-line: #6c7a80;"));
1492        assert!(styles.contains("--rp-mermaid-bg: #151a20;"));
1493        assert!(styles.contains("--rp-mermaid-text: #edf2f4;"));
1494        assert!(styles.contains("--rp-mermaid-line: #9fb4bd;"));
1495        assert!(styles.contains(".rp-doc pre.mermaid svg"));
1496        assert!(styles.contains(".rp-github-link svg"));
1497        assert!(styles.contains("max-width: 100%;"));
1498    }
1499
1500    #[test]
1501    fn omits_github_link_without_theme_url() {
1502        let mut site = site();
1503        site.theme.github_url.clear();
1504
1505        let html = render_page(
1506            &site,
1507            &PageRender {
1508                title: "Home".to_string(),
1509                route: "/".to_string(),
1510                html: "<h1>Home</h1>".to_string(),
1511                headings: vec![],
1512                masked: false,
1513                search: true,
1514            },
1515        );
1516
1517        assert!(!html.contains("rp-github-link"));
1518        assert!(!html.contains("GitHub repository"));
1519    }
1520}
rustpress_theme/lib.rs

rustpress_theme/
lib.rs
