Skip to main content
LisibleDocumentation
Live previewer

Features

Search and navigation

Configure Pagefind, the command palette, Astro transitions, pagination and reading paths.

Lisible combines static multi-page HTML with lightweight client navigation. Links remain standard and work without JavaScript; ClientRouter adds transitions and preserves selected state.1

Pagefind

Pagefind analyzes dist/ after Astro generation. The index is segmented by language through each page’s <html lang> attribute.

Diagram
100%
Rendering diagram...
Scroll to zoom, drag to pan

During development the index does not exist yet. The local Vite plugin provides a fallback module so bun run dev does not fail and the palette keeps its actions.

Command palette

The palette brings together:

  • full-text search;
  • theme and language switching;
  • accent reset;
  • page URL copying;
  • shortcuts to Blog, Tags, Archives, Series, About and RSS.

It supports arrow keys, Enter and Escape.

Astro transitions

<ClientRouter /> intercepts internal links. Any script that depends on the DOM must reinitialize on astro:page-load, emitted on initial display and after every navigation.2

document.addEventListener("astro:page-load", initFeature);
document.addEventListener("astro:before-swap", cleanupFeature);

Editorial navigation

Pagination limits list size. Tags provide a thematic path, archives a chronological path and series an ordered path. Archives stays in every variant’s top navigation. Series appears there only when at least one published post in the locale defines series; neither link is placed in the footer. The /series/ index then exposes the available reading paths. Read Images, tags and series for the associated frontmatter.

References

Footnotes

  1. Astro keeps real pages and adds an optional client router; content is still served as static HTML.

  2. Bundled module scripts do not automatically execute again after each client navigation.

Documentation maintained with LisibleEdit this page ↗

Actions

Search for an API, a command or a concept.