navara-lp

Installation
SKILL.md

Navara landing page

The marketing LP is a single Astro component with a global <style> block, driven by data files for theme/config, copy, and images. Design reference: design_handoff_navara_landing_page.

Files & the three-way split

  • docs/src/components/LandingPage.astro — the whole page (markup + <style is:global> + reveal/showcase scripts). Rendered per locale by pages that do <LandingPage locale="..." />.
  • docs/src/components/LpHeader.astro — the site header, shared with the docs site and the brand assets page: variant="lp" (fixed/transparent, frosts via lp-header-solid toggled by LandingPage's script, carries the ?color switcher markup — its behavior script stays in LandingPage), variant="site" (the same fixed header, frosted from the start, for other site-root pages; pass sitePath so the language switcher lands on the same page) and variant="docs" (Starlight Header override wraps it, inside Starlight's header shell, with a search slot; its LP vars are pinned from --nv-navy/--nv-cream set in docs/src/styles/theme.css). Header markup/styles/lang-select script live here, not in LandingPage. The brand logo always links to the LP (/ or /<locale>/) in every variant; on the LP the link itself is visibility: hidden until lp-header-solid, so it stays out of the tab order while the hero lockup carries the branding. The examples gallery mirrors the same design in React (web/navara_three/example/components/SiteHeader.tsx, logo linking to the LP via siteUrl(lang)).
  • docs/src/components/LpFooter.astro — the site footer (Docs / GitHub / Discord / Brand Assets + license credit), shared by the LP and the brand assets page. Transparent and unpositioned by itself: the LP lays it over the closing globe still (.lp-close .lp-footer { position: absolute } in LandingPage), the brand assets page sits it on its primary canvas under a --line-dark hairline. The examples get the same links (and hairline) from web/navara_three/example/components/SiteFooter.tsx; the docs site links to the brand page from the guide instead (guides/Community/brand-assets.md, en + ja), not from its footer.
  • docs/src/components/lp-shared.ts — what the LP, brand assets page, header and footer all need: ROOT_LOCALE/DOCS_LOCALES, DOCS_BASE, the lp-locales loader (getLpLocale), docsHref(locale, href) (docs-internal links: base + locale segment), siteHref(locale, path) (site-root pages that exist per locale: the LP is "", the brand page "brand-assets/") and lpRootStyle (the theme as the <html> inline style). docs/src/styles/lp-base.css holds the theme-derived custom properties (--ink*, --on-dark*, --line*, --on-band*, --lp-safe-*), the body canvas, .lp a link defaults and .lp-container; both pages import it, the LP's own <style is:global> starts after it.
  • docs/src/data/lp.json — theme colors, image slots, external links (not copy). Colors: primary/accent/sub/maplibre (fed as CSS vars --pri/--acc/--sub/--ml; the derived --ink*/--on-dark*/--line* vars come from these). themeVariants lists candidate primary/sub/accent sets (verbatim from the design palette sheet) for the header preview switcher, revealed only by ?color in the URL (?color=<name> preselects one). Switching rewrites --pri/--sub/--acc at runtime; roles a candidate can't fill without losing contrast fall back to plain black/white via --pri-ink (always-dark ink/scrim source, = --pri normally), --on-band (text on --pri bands) and --on-acc — and a synthetic resize re-samples the adaptive gallery inks. images.<slot>.src is a repo-root-relative path into docs/src/assets or web/navara_three/example/public/screenshots, resolved by resolveImage.
  • docs/src/data/lp-locales/<locale>.json — all copy, per locale. en is ROOT_LOCALE (served at /, others under /<locale>/). Image alt text lives here, in imageAlts keyed by the lp.json slot id (a missing alt throws at build).

To add a locale: add its lp-locales/<code>.json and a page rendering <LandingPage locale="code" />.

Conventions

Installs
3
Repository
maplibre/navara
GitHub Stars
388
First Seen
Sep 10, 2026