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  position: relative;
937  margin: 20px 0;
938  overflow: hidden;
939  border: 1px solid color-mix(in srgb, var(--rp-code-bg) 78%, var(--rp-line));
940  border-radius: 8px;
941  background: var(--rp-code-bg);
942  box-shadow: var(--rp-shadow);
943}
944.rp-code-header {
945  display: flex;
946  align-items: center;
947  min-height: 34px;
948  padding: 0 54px 0 14px;
949  border-bottom: 1px solid rgb(255 255 255 / 8%);
950  background: color-mix(in srgb, var(--rp-code-bg) 82%, black);
951  color: rgb(237 247 246 / 72%);
952  font-size: 12px;
953  font-weight: 700;
954  line-height: 1;
955}
956.rp-code-copy {
957  appearance: none;
958  -webkit-appearance: none;
959  position: absolute;
960  top: 8px;
961  right: 8px;
962  z-index: 2;
963  width: 30px;
964  height: 30px;
965  display: inline-grid;
966  place-items: center;
967  padding: 0;
968  border: 1px solid rgb(255 255 255 / 16%);
969  border-radius: 7px;
970  background: color-mix(in srgb, var(--rp-code-bg) 78%, white);
971  color: rgb(237 247 246 / 76%);
972  cursor: pointer;
973  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, opacity 140ms ease;
974}
975.rp-code-copy svg {
976  width: 16px;
977  height: 16px;
978  fill: none;
979  stroke: currentColor;
980  stroke-width: 2;
981  stroke-linecap: round;
982  stroke-linejoin: round;
983}
984.rp-code-copy-check {
985  display: none;
986}
987.rp-code-copy:hover,
988.rp-code-copy:focus-visible {
989  border-color: var(--rp-accent);
990  background: color-mix(in srgb, var(--rp-code-bg) 64%, var(--rp-accent));
991  color: var(--rp-code-text);
992}
993.rp-code-copy:focus-visible {
994  outline: 2px solid var(--rp-accent);
995  outline-offset: 2px;
996}
997.rp-code-copy:disabled {
998  cursor: default;
999  opacity: 0.9;
1000}
1001.rp-code-copy[data-rp-copied="true"] {
1002  border-color: var(--rp-accent);
1003  background: var(--rp-accent-soft);
1004  color: var(--rp-accent);
1005}
1006.rp-code-copy[data-rp-copied="true"] .rp-code-copy-icon {
1007  display: none;
1008}
1009.rp-code-copy[data-rp-copied="true"] .rp-code-copy-check {
1010  display: block;
1011}
1012.rp-code pre {
1013  margin: 0;
1014  padding-right: 56px;
1015  border-radius: 0;
1016  box-shadow: none;
1017}
1018.rp-code code {
1019  display: block;
1020  min-width: max-content;
1021}
1022.rp-doc pre.mermaid {
1023  background: var(--rp-mermaid-bg);
1024  color: var(--rp-mermaid-text);
1025  border: 1px solid var(--rp-mermaid-cluster-border);
1026}
1027.rp-doc pre.mermaid svg {
1028  max-width: 100%;
1029  height: auto;
1030}
1031.heading-anchor {
1032  display: inline-block;
1033  width: 0.85em;
1034  margin-left: -0.85em;
1035  opacity: 0;
1036  color: var(--rp-accent);
1037}
1038h1:hover .heading-anchor,
1039h2:hover .heading-anchor,
1040h3:hover .heading-anchor,
1041h4:hover .heading-anchor,
1042h5:hover .heading-anchor,
1043h6:hover .heading-anchor { opacity: 1; text-decoration: none; }
1044.rp-toc {
1045  position: sticky;
1046  top: 88px;
1047  height: max-content;
1048  max-height: calc(100vh - 112px);
1049  overflow: auto;
1050  padding-left: 16px;
1051  border-left: 1px solid var(--rp-line);
1052}
1053.rp-toc-link {
1054  display: block;
1055  padding: 4px 0;
1056  color: var(--rp-muted);
1057  font-size: 13px;
1058  line-height: 1.35;
1059}
1060.rp-toc-level-3 { padding-left: 14px; }
1061
1062.rp-search::backdrop { background: rgb(20 28 31 / 45%); }
1063.rp-search {
1064  width: min(720px, calc(100vw - 32px));
1065  max-height: min(720px, calc(100vh - 48px));
1066  border: 1px solid var(--rp-line);
1067  border-radius: 8px;
1068  padding: 0;
1069  background: var(--rp-panel);
1070  color: var(--rp-text);
1071  box-shadow: var(--rp-shadow);
1072}
1073.rp-search-box {
1074  display: flex;
1075  gap: 8px;
1076  padding: 12px;
1077  border-bottom: 1px solid var(--rp-line);
1078}
1079.rp-search-box input {
1080  flex: 1;
1081  min-width: 0;
1082  border: 1px solid var(--rp-line);
1083  border-radius: 8px;
1084  padding: 0 12px;
1085  font: inherit;
1086}
1087.rp-search-results {
1088  display: grid;
1089  gap: 4px;
1090  padding: 8px;
1091}
1092.rp-search-result {
1093  display: block;
1094  padding: 10px 12px;
1095  border-radius: 8px;
1096  color: var(--rp-text);
1097}
1098.rp-search-result:hover {
1099  background: var(--rp-accent-soft);
1100  text-decoration: none;
1101}
1102.rp-search-result span {
1103  display: block;
1104  color: var(--rp-muted);
1105  font-size: 13px;
1106}
1107.rp-access-mask {
1108  position: fixed;
1109  inset: 0;
1110  z-index: 40;
1111  display: grid;
1112  place-items: center;
1113  padding: 24px;
1114  background: color-mix(in srgb, var(--rp-bg) 86%, transparent);
1115  backdrop-filter: blur(14px);
1116}
1117.rp-access-mask.is-unlocked { display: none; }
1118.rp-access-panel {
1119  width: min(420px, 100%);
1120  padding: 24px;
1121  background: var(--rp-panel);
1122  border: 1px solid var(--rp-line);
1123  border-radius: 8px;
1124  box-shadow: var(--rp-shadow);
1125}
1126.rp-access-panel h2 {
1127  margin: 0 0 8px;
1128  font-size: 22px;
1129}
1130.rp-access-panel p {
1131  margin: 0 0 18px;
1132  color: var(--rp-muted);
1133}
1134.rp-access-panel input {
1135  width: 100%;
1136  height: 40px;
1137  border: 1px solid var(--rp-line);
1138  border-radius: 8px;
1139  padding: 0 10px;
1140  font: inherit;
1141}
1142.rp-access-panel input[aria-invalid="true"] {
1143  border-color: var(--rp-danger);
1144}
1145.rp-access-error {
1146  margin: 8px 0 0;
1147  color: var(--rp-danger);
1148  font-size: 13px;
1149  line-height: 1.4;
1150}
1151.rp-access-panel button {
1152  margin-top: 12px;
1153  width: 100%;
1154  height: 40px;
1155  border: 0;
1156  border-radius: 8px;
1157  background: var(--rp-accent);
1158  color: white;
1159  font-weight: 700;
1160  cursor: pointer;
1161}
1162
1163@media (max-width: 1080px) {
1164  .rp-main { grid-template-columns: minmax(0, 1fr); }
1165  .rp-toc { display: none; }
1166}
1167
1168@media (max-width: 760px) {
1169  .rp-topbar { padding: 0 12px; }
1170  .rp-topnav { display: none; }
1171  .rp-select-button { min-width: 74px; max-width: 96px; padding: 0 28px 0 8px; }
1172  .rp-language-select .rp-select-button { min-width: 92px; max-width: 112px; }
1173  .rp-select-label { display: none; }
1174  .rp-select-menu { right: 0; }
1175  .rp-select-option { min-width: 118px; }
1176  .rp-menu-button { display: inline-grid; }
1177  .rp-shell { display: block; }
1178  .rp-sidebar {
1179    display: none;
1180    position: fixed;
1181    inset: 64px 0 auto 0;
1182    z-index: 18;
1183    height: calc(100vh - 64px);
1184    background: var(--rp-panel);
1185    border-right: 0;
1186    border-bottom: 1px solid var(--rp-line);
1187    padding: 16px;
1188  }
1189  .rp-sidebar.is-open { display: block; }
1190  .rp-main { padding: 32px 18px 72px; }
1191  .rp-doc h1 { font-size: 32px; }
1192  .rp-doc h2 { font-size: 24px; }
1193  .heading-anchor { margin-left: 0; width: auto; opacity: 1; margin-right: 6px; }
1194}
1195"#
1196}
1197
1198fn js(site: &SiteRender) -> String {
1199    format!(
1200        r##"const base = {base:?};
1201const defaultSkin = {skin:?};
1202const accessPassword = {access_password:?};
1203const supportedSkins = ["light", "dark"];
1204
1205const root = document.documentElement;
1206const savedSkin = localStorage.getItem("rustpress:skin");
1207root.dataset.rpSkin = supportedSkins.includes(savedSkin) ? savedSkin : defaultSkin;
1208if (!supportedSkins.includes(root.dataset.rpSkin)) root.dataset.rpSkin = "light";
1209
1210const selectMenus = Array.from(document.querySelectorAll("[data-rp-select]"));
1211for (const selectMenu of selectMenus) {{
1212  const trigger = selectMenu.querySelector("[data-rp-select-trigger]");
1213  if (!trigger) continue;
1214  trigger.addEventListener("click", event => {{
1215    event.stopPropagation();
1216    const wasOpen = selectMenu.classList.contains("is-open");
1217    closeSelectMenus();
1218    if (!wasOpen) openSelectMenu(selectMenu);
1219  }});
1220}}
1221document.addEventListener("click", closeSelectMenus);
1222document.addEventListener("keydown", event => {{
1223  if (event.key === "Escape") closeSelectMenus();
1224}});
1225
1226const skinSelect = document.querySelector("[data-rp-skin-select]");
1227if (skinSelect) {{
1228  const skinCurrent = skinSelect.querySelector("[data-rp-skin-current]");
1229  const skinOptions = Array.from(skinSelect.querySelectorAll("[data-rp-skin-option]"));
1230  setSkin(root.dataset.rpSkin, false);
1231  for (const option of skinOptions) {{
1232    option.addEventListener("click", event => {{
1233      event.stopPropagation();
1234      setSkin(option.dataset.rpSkinValue, true);
1235      closeSelectMenus();
1236    }});
1237  }}
1238
1239  function setSkin(skin, persist) {{
1240    if (!supportedSkins.includes(skin)) skin = "light";
1241    const previousSkin = root.dataset.rpSkin;
1242    root.dataset.rpSkin = skin;
1243    if (skinCurrent) skinCurrent.textContent = skin === "dark" ? "Dark" : "Light";
1244    for (const option of skinOptions) {{
1245      const selected = option.dataset.rpSkinValue === skin;
1246      option.classList.toggle("is-selected", selected);
1247      option.setAttribute("aria-selected", selected ? "true" : "false");
1248    }}
1249    if (persist) localStorage.setItem("rustpress:skin", skin);
1250    if (previousSkin !== skin) {{
1251      document.dispatchEvent(new CustomEvent("rustpress:skinchange", {{ detail: {{ skin }} }}));
1252    }}
1253  }}
1254}}
1255
1256const languageSelect = document.querySelector("[data-rp-language-select]");
1257if (languageSelect) {{
1258  for (const option of languageSelect.querySelectorAll("[data-rp-language-option]")) {{
1259    option.addEventListener("click", event => {{
1260      event.stopPropagation();
1261      if (option.dataset.rpLanguageHref) window.location.href = option.dataset.rpLanguageHref;
1262    }});
1263  }}
1264}}
1265
1266function openSelectMenu(selectMenu) {{
1267  selectMenu.classList.add("is-open");
1268  const trigger = selectMenu.querySelector("[data-rp-select-trigger]");
1269  if (trigger) trigger.setAttribute("aria-expanded", "true");
1270}}
1271
1272function closeSelectMenus() {{
1273  for (const selectMenu of selectMenus) {{
1274    selectMenu.classList.remove("is-open");
1275    const trigger = selectMenu.querySelector("[data-rp-select-trigger]");
1276    if (trigger) trigger.setAttribute("aria-expanded", "false");
1277  }}
1278}}
1279
1280const menu = document.querySelector("[data-rp-menu]");
1281const sidebar = document.querySelector("[data-rp-sidebar]");
1282if (menu && sidebar) {{
1283  menu.addEventListener("click", () => sidebar.classList.toggle("is-open"));
1284}}
1285
1286const codeCopyButtons = Array.from(document.querySelectorAll("[data-rp-copy-code]"));
1287for (const button of codeCopyButtons) {{
1288  button.addEventListener("click", async () => {{
1289    const codeBlock = button.closest(".rp-code");
1290    const codeContent = codeBlock ? codeBlock.querySelector(".rp-code-content") : null;
1291    if (!codeContent) return;
1292    try {{
1293      await copyCodeText(codeContent.textContent || "");
1294      showCodeCopied(button);
1295    }} catch (error) {{
1296      console.warn("RustPress copy code failed", error);
1297    }}
1298  }});
1299}}
1300
1301async function copyCodeText(text) {{
1302  if (window.navigator && navigator.clipboard && typeof navigator.clipboard.writeText === "function") {{
1303    try {{
1304      await navigator.clipboard.writeText(text);
1305      return;
1306    }} catch (error) {{
1307      fallbackCopyText(text);
1308      return;
1309    }}
1310  }}
1311  fallbackCopyText(text);
1312}}
1313
1314function fallbackCopyText(text) {{
1315  const textarea = document.createElement("textarea");
1316  textarea.value = text;
1317  textarea.setAttribute("readonly", "");
1318  textarea.style.position = "fixed";
1319  textarea.style.top = "-1000px";
1320  textarea.style.left = "-1000px";
1321  textarea.style.opacity = "0";
1322  document.body.appendChild(textarea);
1323  textarea.focus();
1324  textarea.select();
1325  textarea.setSelectionRange(0, textarea.value.length);
1326  let copied = false;
1327  try {{
1328    copied = typeof document.execCommand === "function" && document.execCommand("copy");
1329  }} finally {{
1330    textarea.remove();
1331  }}
1332  if (!copied) throw new Error("copy command failed");
1333}}
1334
1335function showCodeCopied(button) {{
1336  button.dataset.rpCopied = "true";
1337  button.disabled = true;
1338  button.setAttribute("aria-label", "Copied");
1339  button.setAttribute("title", "Copied");
1340  window.clearTimeout(button.rpCopyReset);
1341  button.rpCopyReset = window.setTimeout(() => {{
1342    delete button.dataset.rpCopied;
1343    button.disabled = false;
1344    button.setAttribute("aria-label", "Copy code");
1345    button.setAttribute("title", "Copy code");
1346  }}, 1500);
1347}}
1348
1349const mask = document.querySelector("[data-rp-access-mask]");
1350const accessForm = document.querySelector("[data-rp-access-form]");
1351const accessInput = document.querySelector("[data-rp-access-input]");
1352const accessError = document.querySelector("[data-rp-access-error]");
1353if (mask && accessForm) {{
1354  const key = "rustpress:access:" + location.pathname;
1355  if (sessionStorage.getItem(key) === "unlocked") mask.classList.add("is-unlocked");
1356  accessForm.addEventListener("submit", event => {{
1357    event.preventDefault();
1358    if (!accessInput || accessInput.value !== accessPassword) {{
1359      if (accessError) accessError.hidden = false;
1360      if (accessInput) {{
1361        accessInput.setAttribute("aria-invalid", "true");
1362        accessInput.focus();
1363      }}
1364      return;
1365    }}
1366    sessionStorage.setItem(key, "unlocked");
1367    mask.classList.add("is-unlocked");
1368  }});
1369  if (accessInput) {{
1370    accessInput.addEventListener("input", () => {{
1371      accessInput.removeAttribute("aria-invalid");
1372      if (accessError) accessError.hidden = true;
1373    }});
1374  }}
1375}}
1376
1377const searchDialog = document.querySelector("[data-rp-search]");
1378const searchOpen = document.querySelector("[data-rp-search-open]");
1379const searchInput = document.querySelector("[data-rp-search-input]");
1380const searchResults = document.querySelector("[data-rp-search-results]");
1381let searchIndexPromise;
1382
1383if (searchDialog && searchOpen && searchInput && searchResults) {{
1384  let lastShiftPress = 0;
1385
1386  searchOpen.addEventListener("click", () => {{
1387    openSearch();
1388  }});
1389
1390  document.addEventListener("keydown", event => {{
1391    if (event.key !== "Shift" || event.repeat) return;
1392    const now = Date.now();
1393    if (now - lastShiftPress <= 500) {{
1394      event.preventDefault();
1395      openSearch();
1396      lastShiftPress = 0;
1397    }} else {{
1398      lastShiftPress = now;
1399    }}
1400  }});
1401
1402  function openSearch() {{
1403    if (typeof searchDialog.showModal === "function") searchDialog.showModal();
1404    else searchDialog.setAttribute("open", "");
1405    searchInput.focus();
1406    loadSearchIndex();
1407  }}
1408
1409  searchInput.addEventListener("input", () => runSearch(searchInput.value));
1410}}
1411
1412function loadSearchIndex() {{
1413  if (!searchIndexPromise) {{
1414    searchIndexPromise = fetch(joinBase("assets/search-index.json"))
1415      .then(response => response.ok ? response.json() : Promise.reject(new Error("search index missing")))
1416      .catch(() => ({{ pages: [] }}));
1417  }}
1418  return searchIndexPromise;
1419}}
1420
1421function runSearch(query) {{
1422  const normalized = query.trim().toLowerCase();
1423  if (!normalized) {{
1424    searchResults.innerHTML = "";
1425    return;
1426  }}
1427  loadSearchIndex().then(index => {{
1428    const tokens = tokenize(normalized);
1429    const results = index.pages
1430      .map(page => ({{ page, score: scorePage(page, tokens), snippet: snippet(page, tokens) }}))
1431      .filter(result => result.score > 0)
1432      .sort((a, b) => b.score - a.score)
1433      .slice(0, 12);
1434    searchResults.innerHTML = results.length
1435      ? results.map(renderResult).join("")
1436      : "<p class=\"rp-search-empty\">No results</p>";
1437  }});
1438}}
1439
1440function scorePage(page, tokens) {{
1441  const title = (page.title || "").toLowerCase();
1442  const body = (page.body || "").toLowerCase();
1443  let score = 0;
1444  for (const token of tokens) {{
1445    if (title.includes(token)) score += 8;
1446    if (body.includes(token)) score += 2;
1447  }}
1448  return score;
1449}}
1450
1451function snippet(page, tokens) {{
1452  const body = page.body || "";
1453  const lower = body.toLowerCase();
1454  const first = tokens.map(token => lower.indexOf(token)).filter(index => index >= 0).sort((a, b) => a - b)[0] || 0;
1455  const start = Math.max(0, first - 56);
1456  const text = body.slice(start, start + 150);
1457  return (start > 0 ? "..." : "") + text;
1458}}
1459
1460function renderResult(result) {{
1461  const page = result.page;
1462  return `<a class="rp-search-result" href="${{escapeHtml(page.url || "#")}}">${{escapeHtml(page.title || "Untitled")}}<span>${{escapeHtml(result.snippet || page.url || "")}}</span></a>`;
1463}}
1464
1465function tokenize(input) {{
1466  const latin = input.match(/[a-z0-9]+/g) || [];
1467  const cjk = Array.from(input.matchAll(/[\u3400-\u9fff]/g)).map(match => match[0]);
1468  return [...latin, ...cjk].filter(Boolean);
1469}}
1470
1471function joinBase(path) {{
1472  return base.replace(/\/$/, "") + "/" + path.replace(/^\//, "");
1473}}
1474
1475function escapeHtml(value) {{
1476  return String(value).replace(/[&<>"']/g, char => ({{
1477    "&": "&amp;",
1478    "<": "&lt;",
1479    ">": "&gt;",
1480    "\"": "&quot;",
1481    "'": "&#39;"
1482  }}[char]));
1483}}
1484"##,
1485        base = site.base,
1486        skin = site.theme.skin,
1487        access_password = site.access_password
1488    )
1489}
1490
1491fn escape_html(input: &str) -> String {
1492    input
1493        .replace('&', "&amp;")
1494        .replace('<', "&lt;")
1495        .replace('>', "&gt;")
1496}
1497
1498fn escape_attr(input: &str) -> String {
1499    escape_html(input).replace('"', "&quot;")
1500}
1501
1502#[cfg(test)]
1503mod tests {
1504    use super::*;
1505
1506    fn site() -> SiteRender {
1507        SiteRender {
1508            title: "Docs".to_string(),
1509            lang: "en-US".to_string(),
1510            base: "/".to_string(),
1511            home_href: "/".to_string(),
1512            theme: ThemeConfig {
1513                skin: "light".to_string(),
1514                allow_switch: true,
1515                github_url: "https://github.com/ZenithInc/rust-press".to_string(),
1516            },
1517            search_enabled: true,
1518            access_enabled: true,
1519            access_password: "rustpress".to_string(),
1520            password_hint: "Password".to_string(),
1521            top_nav: vec![
1522                TopNavItem {
1523                    title: "Guide".to_string(),
1524                    href: Some("/guide/".to_string()),
1525                    items: vec![TopNavLink {
1526                        title: "CLI".to_string(),
1527                        href: "/guide/cli/".to_string(),
1528                    }],
1529                },
1530                TopNavItem {
1531                    title: "Reference".to_string(),
1532                    href: Some("/reference/".to_string()),
1533                    items: vec![],
1534                },
1535            ],
1536            nav: vec![NavItem {
1537                title: "Home".to_string(),
1538                href: "/".to_string(),
1539                active_prefix: "/".to_string(),
1540                items: Vec::new(),
1541            }],
1542            languages: vec![
1543                LanguageOption {
1544                    label: "English".to_string(),
1545                    href: "/".to_string(),
1546                    current: true,
1547                },
1548                LanguageOption {
1549                    label: "Deutsch".to_string(),
1550                    href: "/de/".to_string(),
1551                    current: false,
1552                },
1553            ],
1554        }
1555    }
1556
1557    #[test]
1558    fn renders_theme_switcher_and_mask() {
1559        let html = render_page(
1560            &site(),
1561            &PageRender {
1562                title: "Home".to_string(),
1563                route: "/".to_string(),
1564                html: "<h1>Home</h1>".to_string(),
1565                headings: vec![],
1566                masked: true,
1567                search: true,
1568            },
1569        );
1570
1571        assert!(html.contains("data-rp-skin-select"));
1572        assert!(html.contains(r#"data-rp-skin-value="light">Light</button>"#));
1573        assert!(html.contains(r#"data-rp-skin-value="dark">Dark</button>"#));
1574        assert!(!html.contains("classic"));
1575        assert!(!html.contains("dense"));
1576        assert!(html.contains(r#"<html lang="en-US""#));
1577        assert!(html.contains("data-rp-language-select"));
1578        assert!(!html.contains("<select"));
1579        assert!(!html.contains("<option"));
1580        assert!(html.contains(r#"data-rp-language-href="/">English</button>"#));
1581        assert!(html.contains(r#"class="rp-icon-button rp-github-link""#));
1582        assert!(html.contains(r#"href="https://github.com/ZenithInc/rust-press""#));
1583        assert!(html.contains(r#"aria-label="GitHub repository""#));
1584        assert!(html.contains("data-rp-access-mask"));
1585        assert!(html.contains("data-rp-access-error"));
1586        assert!(html.contains("autocomplete=\"current-password\""));
1587        assert!(html.contains("front-end viewing mask"));
1588        assert!(html.contains("rp-topnav-group"));
1589        assert!(html.contains("rp-topnav-trigger"));
1590        assert!(html.contains("Reference"));
1591        assert!(!html.contains("<details"));
1592        assert!(html.contains("theme: \"base\""));
1593        assert!(html.contains("themeVariables"));
1594        assert!(html.contains("mermaid.run({ nodes: mermaidBlocks })"));
1595        assert!(!html.contains("startOnLoad: true"));
1596
1597        let js = js(&site());
1598        assert!(js.contains("lastShiftPress"));
1599        assert!(js.contains(r#"const accessPassword = "rustpress";"#));
1600        assert!(js.contains("accessInput.value !== accessPassword"));
1601        assert!(js.contains(r#"accessInput.setAttribute("aria-invalid", "true")"#));
1602        assert!(js.contains(r#"event.key !== "Shift""#));
1603        assert!(js.contains("rustpress:skinchange"));
1604        assert!(js.contains(r#"new CustomEvent("rustpress:skinchange""#));
1605    }
1606
1607    #[test]
1608    fn css_includes_mermaid_theme_colors() {
1609        let styles = css();
1610        assert!(styles.contains("--rp-mermaid-bg: #ffffff;"));
1611        assert!(styles.contains("--rp-mermaid-text: #1d2528;"));
1612        assert!(styles.contains("--rp-mermaid-line: #6c7a80;"));
1613        assert!(styles.contains("--rp-mermaid-bg: #151a20;"));
1614        assert!(styles.contains("--rp-mermaid-text: #edf2f4;"));
1615        assert!(styles.contains("--rp-mermaid-line: #9fb4bd;"));
1616        assert!(styles.contains(".rp-doc pre.mermaid svg"));
1617        assert!(styles.contains(".rp-github-link svg"));
1618        assert!(styles.contains("max-width: 100%;"));
1619    }
1620
1621    #[test]
1622    fn css_and_js_include_code_copy_support() {
1623        let styles = css();
1624        assert!(styles.contains(".rp-code-copy"));
1625        assert!(styles.contains(".rp-code-copy[data-rp-copied=\"true\"]"));
1626        assert!(styles.contains(".rp-code-copy:disabled"));
1627        assert!(styles.contains("padding-right: 56px;"));
1628
1629        let script = js(&site());
1630        assert!(script.contains("[data-rp-copy-code]"));
1631        assert!(script.contains(".rp-code-content"));
1632        assert!(script.contains("navigator.clipboard.writeText"));
1633        assert!(script.contains("fallbackCopyText"));
1634        assert!(script.contains("document.execCommand(\"copy\")"));
1635        assert!(script.contains("1500"));
1636    }
1637
1638    #[test]
1639    fn omits_github_link_without_theme_url() {
1640        let mut site = site();
1641        site.theme.github_url.clear();
1642
1643        let html = render_page(
1644            &site,
1645            &PageRender {
1646                title: "Home".to_string(),
1647                route: "/".to_string(),
1648                html: "<h1>Home</h1>".to_string(),
1649                headings: vec![],
1650                masked: false,
1651                search: true,
1652            },
1653        );
1654
1655        assert!(!html.contains("rp-github-link"));
1656        assert!(!html.contains("GitHub repository"));
1657    }
1658}
rustpress_theme/lib.rs

rustpress_theme/
lib.rs
