Website
Compose a complete site from layouts, navigation, collections, and search.
The real page shell in its own frame. Change the site identity, menus, metadata, and search configuration. The example content belongs to the page slot.
Layout
Preview loads when it becomes visible.
Component parameters
Source code
---
import Layout from "@alkemdotdev/alkemist-components/layout";
---
<Layout
title={"Research notes"}
description={"A place for experiments and explanations."}
section={"docs"}
preview={false}
theme={"default"}
siteName={"My lab"}
tagline={"research in public"}
faviconHref={"/favicon.svg"}
navigation={[{"label":"Home","href":"/"},{"label":"Docs","href":"/docs/"}]}
moreNavigation={[{"label":"Labs","href":"/labs/"}]}
footerNavigation={[{"label":"About","href":"/info/"}]}
search={false}>
<h1>Research notes</h1>
<p>A place for experiments and explanations.</p>
</Layout>Edit heading records, then scroll inside the frame. The preview supplies matching content so the links and active section can be exercised.
TableOfContents
Preview loads when it becomes visible.
Component parameters
Source code
---
import TableOfContents from "@alkemdotdev/alkemist-components/table-of-contents";
---
<TableOfContents
headings={[{"depth":2,"slug":"introduction","text":"Introduction"},{"depth":3,"slug":"first-example","text":"First example"},{"depth":2,"slug":"reference","text":"Reference"}]}
label={"On this page"}
showLabel={true}
/>Edit the collection, featured item, and layout. Covers accept src, alt, fit, focalX, and focalY. Use public image URLs in JSON; Astro image imports work in authored pages.
PostList
Preview loads when it becomes visible.
Component parameters
Source code
---
import PostList from "@alkemdotdev/alkemist-components/post-list";
---
<PostList
items={[{"href":"/blog/","title":"Making ideas visible","description":"An experiment in publishing research.","date":"2026-09-13","cover":{"src":"/test/torus-knot.svg","alt":"A torus knot","fit":"contain"}},{"href":"/labs/","title":"An interactive notebook","description":"Small experiments you can inspect.","date":"2026-09-12"},{"href":"/docs/","title":"Document the useful parts","description":"A reference that grows with the work.","date":"2026-09-11","cover":{"src":"/test/torus-knot.svg","alt":"Knot diagram"}}]}
layout={"featured-grid"}
selectable={true}
featuredHref={""}
label={"Recent work"}
/>Try the built site index. Change the placeholder, accessible label, or presentation, then search again. Pagefind needs a production build; plain development mode has no index.
Search
Preview loads when it becomes visible.
Component parameters
Source code
---
import Search from "@alkemdotdev/alkemist-components/search";
---
<Search
indexUrl={"/pagefind/pagefind.js"}
placeholder={"Search the documentation"}
label={"Search this site"}
variant={"standalone"}
/>