Navigation

Plain <a href> links just work: the framework intercepts clicks, fetches the page, and re-renders in the browser. Pages are prefetched on hover and touch, and back/forward buttons are handled. Everything still works without JavaScript.

Programmatic navigation

Use load to render a page from code, and reload to re-run the loads for the current page:

import { load, reload } from "@torpor/build/nav";

await load("/posts");
await reload();

Building URLs

Use route to build URLs from route paths. Params are checked at compile time and URI-encoded:

import { route } from "@torpor/build/nav";

route("/posts/[id]", { id: 5 }); // "/posts/5"

The $page state object

$page is a global reactive object describing the current page. Import it from @torpor/build/state:

import { $page } from "@torpor/build/state";

• $page.url — the current URL
• $page.status — the response status code
• $page.form — the result of the last form action
• $page.flash — one-item values set by the last action, e.g. { message: "Post created" }. See Actions
• $page.error?.message — the current error, if any

It is used by the sidebar of this very site to highlight the active link, and by error pages to show the status.

View transitions and scrolling

Scroll position is reset when moving to another page, kept for same-page navigations like query changes and form actions, and restored when going back and forward.

Navigations can run inside the view transitions API — so pages cross-fade and can be animated with CSS — by opting in:

// site.config.ts
site.viewTransitions = true;

/* in a stylesheet, to slow the page transition down */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.3s;
}

Pages that scroll inside their own container (like this site's sidebar section) can reset that container themselves, e.g. with a $run on $page.url.