Astro, Svelte, Vite

This site uses Astro and Starlight for documentation, Svelte for interactive components, and Vite as the frontend toolchain.

For the static FrontMark container, the build output is prepared as static files and served by Nginx.

%%{init: {"theme": "base", "flowchart": {"nodeSpacing": 64, "rankSpacing": 72, "padding": 18}, "themeVariables": {"fontSize": "14px", "lineColor": "#f8fafc"}, "themeCSS": ".cluster-label p{font-size:15px!important;font-weight:900!important}.flowchart-link{stroke:#f8fafc!important;stroke-width:4px!important;stroke-linecap:round!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}.marker{fill:#f8fafc!important;stroke:#f8fafc!important}.edgeLabel,.labelBkg,.edgeLabel span{background:transparent!important}.edgeLabel rect{fill:transparent!important;stroke:transparent!important}.edgeLabel p,.edgeLabel .labelBkg p,.edgeLabel span p{background:transparent!important;color:#f8fafc!important;padding:0!important;font-size:16px!important;font-weight:850!important;line-height:1.15!important;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.85)!important}"}}%%
flowchart LR
    classDef input fill:#fff4cc,stroke:#b7791f,stroke-width:2px,color:#111,font-size:14px,font-weight:800;
    classDef llm fill:#e8f0ff,stroke:#2b6cb0,stroke-width:2px,color:#111,font-size:14px,font-weight:800;
    classDef contract fill:#ede9fe,stroke:#6b46c1,stroke-width:2px,color:#111,font-size:14px,font-weight:800;
    classDef deterministic fill:#e6fffa,stroke:#2c7a7b,stroke-width:2px,color:#111,font-size:14px,font-weight:800;
    classDef container fill:#fef2f2,stroke:#c53030,stroke-width:2px,color:#111,font-size:14px,font-weight:800;
    classDef wasm fill:#ecfdf5,stroke:#2f855a,stroke-width:2px,color:#111,font-size:14px,font-weight:800;
    classDef runtime fill:#f7fafc,stroke:#2d3748,stroke-width:3px,color:#111,font-size:14px,font-weight:800;
    subgraph Source["Content source"]
        direction TB
        Markdown(["Markdown"]):::input
    end
    subgraph Framework["Site framework"]
        direction TB
        Astro{{"Astro"}}:::llm
        Starlight[/"Starlight"/]:::contract
    end
    subgraph Interactivity["Interactive islands"]
        direction TB
        Svelte["Svelte"]:::wasm
    end
    subgraph Tooling["Build toolchain"]
        direction TB
        Vite["Vite"]:::deterministic
    end
    subgraph Output["Delivery output"]
        direction TB
        Assets[["HTML · CSS · JS"]]:::container
        Nginx[("Nginx")]:::runtime
    end
    Markdown -->|"provides pages"| Astro
    Astro -->|"applies docs UI"| Starlight
    Astro -->|"mounts islands"| Svelte
    Vite -->|"serves dev mode"| Astro
    Vite -->|"bundles components"| Svelte
    Astro -->|"generates assets"| Assets
    Svelte -->|"adds behavior"| Assets
    Assets -->|"serves static output"| Nginx
    style Source fill:#b9f7ea,fill-opacity:0.58,stroke:#0891b2,stroke-width:2px,color:#000000
    style Framework fill:#a7f3d0,fill-opacity:0.54,stroke:#0f766e,stroke-width:2px,color:#000000
    style Interactivity fill:#ecfdf5,fill-opacity:0.52,stroke:#2f855a,stroke-width:2px,color:#000000
    style Tooling fill:#99f6e4,fill-opacity:0.52,stroke:#0d9488,stroke-width:2px,color:#000000
    style Output fill:#bae6fd,fill-opacity:0.56,stroke:#0284c7,stroke-width:2px,color:#000000
    linkStyle default stroke:#f8fafc,stroke-width:4px,color:#f8fafc

Compilation Process

The static container build is a two-stage process. The first stage uses Node to compile the site. The second stage copies only the prepared static output into an Nginx image.

Step	What happens	Main output
Install dependencies	`npm ci` installs the locked Node dependencies from `package-lock.json`.	Reproducible build environment.
Resolve build version	The Docker build computes `FRONTMARK_COMMIT_COUNT` from Git, unless it is passed as a build argument, then appends it to `VERSION`.	Version metadata available in the generated site.
Build Svelte bundle	`npm run svelte:build` runs Vite with `svelte-components/vite.config.mjs`. It compiles Svelte components as an ES module library.	`public/svelte/frontmark-svelte-components.js` and CSS.
Build tag index	`npm run tags` scans documentation content and writes the search/tag metadata.	`public/search/tags.json`.
Optimize images	`npm run optimize` prepares optimized image variants and a manifest when image optimization is enabled.	`public/_optimized/manifest.json` and image variants.
Build Astro site	`FRONTMARK_RUNTIME=static ... astro build` renders Starlight pages, routes, assets and static content. In static mode, the Node adapter is not used.	`dist/` with static client assets.
Prepare static runtime	`scripts/prepare-static-runtime.mjs` copies the Astro client output into `dist/static-root`, applies the configured base path, and writes an Nginx config.	`dist/static-root` and `dist/nginx.conf`.
Assemble runtime image	The final image is based on `nginx:1.27-alpine` and copies only `dist/static-root`, `dist/nginx.conf` and `VERSION`.	Small static container listening on port `4321`.

Tool	Precise role in this build
Astro	Converts Markdown/Starlight content and configured routes into static HTML and assets.
Starlight	Provides the documentation shell, navigation, table of contents and docs-oriented rendering.
Svelte	Provides interactive components that are compiled before the Astro build consumes them.
Vite	Bundles the Svelte component library and also powers Astro’s frontend asset pipeline.
Nginx	Serves the prepared static root; no Node server is required in the final image.

Astro

Astro logo

Astro is the site framework used to assemble pages, layouts, content collections and static routes.

In the sigMAX website, Astro is responsible for:

rendering documentation pages from Markdown and MDX-style content;
organizing routes such as documentation, tags and product pages;
integrating Starlight for the documentation experience;
producing static assets that can be served by Nginx or another web server.

Astro is a good fit when most pages are content-driven and only specific parts of the page need interactivity.

Common alternatives include:

Alternative	Typical use
Next.js	React applications with server rendering, API routes and broad ecosystem support
Nuxt	Vue applications with server rendering and convention-based routing
Eleventy	Static documentation or content sites with a smaller runtime surface
Docusaurus	Documentation portals with React-based customization

Svelte

Svelte logo

Svelte is the component framework used when a page needs client-side interaction.

In the sigMAX website, Svelte can be used for:

interactive widgets;
generated frontend components;
local state and user interactions;
focused UI islands inside mostly static documentation pages.

Svelte compiles components ahead of time, which keeps the browser payload small for interactive areas.

Common alternatives include:

Alternative	Typical use
React	Large component ecosystems and broad team familiarity
Vue	Progressive adoption and template-oriented components
Solid	Fine-grained reactivity with a JSX-oriented model
Web Components	Framework-independent reusable browser components

Vite

Vite logo

Vite is the frontend build tool used by Astro and the local development workflow.

In the sigMAX website, Vite is responsible for:

fast local development;
module resolution and dependency handling;
bundling frontend assets;
optimizing JavaScript, CSS and imported resources for production.

Vite is not the application framework. It is the build and development layer underneath the frontend stack.

Common alternatives include:

Alternative	Typical use
Webpack	Mature bundling setups with extensive legacy plugin support
Rollup	Library-oriented bundling and fine control over output
esbuild	Very fast low-level JavaScript and TypeScript bundling
Parcel	Zero-config application bundling