Skip to content
Dirwell

Examples

Open the example closest to your use case. Each item links to the live page and the source directory that generates it.

  • Portable folder: basic keeps SSG and relative URLs at their defaults. Live page · Source
  • Fixed project-site path: base uses mode: "mpa", base, and urls: "base" for shared assets under a known prefix. Live page · Source
  • Completely different page: custom-theme renders a release catalog with its own HTML and CSS. Live page · Source
  • New colors and icons with the same explorer: default-theme-override uses Catppuccin Latte and Macchiato with icons and components. Live page · Source
  • Bundled file-type artwork: file-icons shows the unmodified default theme used on the homepage. Live page · Source
  • No-script list: plain uses createPlainTheme() and renders complete HTML. Live page · Source

The source directories include their own dirwell.config.ts and input files/ trees. The documentation build reads those configs and passes them as one array to Dirwell([...]) in a Vite build. It writes each explorer to docs/public/examples/ before Astro copies them into the publish tree. The homepage embeds the generated file-icons page, so its preview uses the same HTML and assets as the live example.

Build and inspect locally

Section titled “Build and inspect locally”

From the repository root:

Terminal window
SITE_BASE=/dirwell/ pnpm run site:build

Open the resulting site/examples/ directories with a local static server. SITE_BASE sets the documentation base path; the base example uses it for its generated links. For local iteration, pnpm run docs:dev builds the examples, starts Astro, watches source and example files, and reloads the embedded preview after a successful rebuild.

PUBLIC_REPOSITORY_URL controls the source links on the landing page. GitHub Actions supplies the repository URL when it deploys Pages.