diff --git a/apps/docs/src/components/Layout.tsx b/apps/docs/src/components/Layout.tsx
index 899295c..df43e67 100644
--- a/apps/docs/src/components/Layout.tsx
+++ b/apps/docs/src/components/Layout.tsx
@@ -23,9 +23,7 @@ export const Layout: FC<LayoutProps> = ({ title, children, client }) => {
 						name="viewport"
 						content="width=device-width, initial-scale=1.0"
 					/>
-					{client.map((tags) => {
-						return tags;
-					})}
+					{client.map((tags) => tags)}
 					<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 					<meta
 						name="description"
@@ -37,8 +35,8 @@ export const Layout: FC<LayoutProps> = ({ title, children, client }) => {
 					<drab-prefetch trigger="a[href^='/']" class="contents">
 						<main class="flex flex-col lg:flex-row">
 							<Nav />
-							<div class="prose mx-6 my-6 md:max-w-screen-md xl:mx-auto">
-								{children}
+							<div class="grow justify-center md:flex">
+								<div class="prose m-6 max-w-screen-md">{children}</div>
 							</div>
 						</main>
 					</drab-prefetch>
diff --git a/apps/docs/src/components/Nav.tsx b/apps/docs/src/components/Nav.tsx
index de226f5..da8c8e4 100644
--- a/apps/docs/src/components/Nav.tsx
+++ b/apps/docs/src/components/Nav.tsx
@@ -1,4 +1,4 @@
-import { BookSvg, EarthSvg, FuncSvg, PlugSvg } from "./svg";
+import { BookSvg, EarthSvg, FuncSvg, HomeSvg, PlugSvg, XSvg } from "./svg";
 import type { FC } from "hono/jsx";
 
 export const Nav: FC = () => {
@@ -17,11 +17,16 @@ type NavLinkProps = {
 
 const SideBar: FC = () => {
 	return (
-		<nav class="bg-muted-background sticky top-0 hidden h-screen overflow-y-auto lg:block">
-			<div class="p-6">
-				<HomeLink />
+		<nav class="bg-muted-background sticky top-0 hidden h-screen w-[20vw] min-w-52 justify-end overflow-y-auto lg:flex">
+			<div class="flex flex-col py-6 pl-6 pr-12">
+				<div class="pb-6">
+					<HomeLink />
+				</div>
+				<div class="flex grow flex-col justify-between">
+					<InternalLinks />
+					<ExternalLinks />
+				</div>
 			</div>
-			<NavContents />
 		</nav>
 	);
 };
@@ -32,20 +37,6 @@ const HomeLink = () => (
 	</a>
 );
 
-const NavContents: FC = () => {
-	return (
-		<div class="flex h-[90%] min-w-64 flex-col justify-between">
-			<ul class="px-6">
-				<NavListItems />
-			</ul>
-			<div class="flex items-center gap-1 p-6">
-				<RepoLink />
-				<NpmLink />
-			</div>
-		</div>
-	);
-};
-
 const TopBar: FC = () => {
 	return (
 		<drab-dialog
@@ -77,36 +68,28 @@ const TopBar: FC = () => {
 
 			<dialog
 				data-content
-				class="bg-muted-background my-0 ml-0 h-full max-h-dvh max-w-[100vw] backdrop:backdrop-blur"
+				class="bg-muted-background my-0 ml-0 h-full max-h-dvh shadow-sm backdrop:backdrop-blur"
 			>
-				<nav class="flex items-center justify-between p-3 pl-6">
-					<HomeLink />
-
-					<button data-trigger type="button" class="ghost" title="Close">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M18 6 6 18" />
-							<path d="m6 6 12 12" />
-						</svg>
-					</button>
+				<nav class="flex h-full min-w-64 flex-col p-6">
+					<div class="flex items-center justify-between pb-6">
+						<HomeLink />
+						<button data-trigger type="button" class="ghost" title="Close">
+							<XSvg />
+						</button>
+					</div>
+					<div class="flex grow flex-col justify-between">
+						<InternalLinks />
+						<ExternalLinks />
+					</div>
 				</nav>
-				<NavContents />
 			</dialog>
 		</drab-dialog>
 	);
 };
 
-export const NavListItems: FC = () => {
+export const InternalLinks: FC = () => {
 	const items: NavLinkProps[] = [
+		{ title: "Overview", Icon: HomeSvg },
 		{ title: "Tutorial", Icon: BookSvg },
 		{
 			title: "Migrate",
@@ -123,23 +106,38 @@ export const NavListItems: FC = () => {
 	];
 
 	return (
-		<>
-			{items.map(({ title, Icon }) => (
-				<li>
-					<a
-						class="flex items-center gap-3 py-1.5 no-underline data-[current]:font-bold"
-						href={`/${title.split(" ").join("-").toLowerCase()}`}
-					>
-						<Icon />
-						{title}
-					</a>
-				</li>
-			))}
-		</>
+		<ul>
+			{items.map(({ title, Icon }) => {
+				const href =
+					title === "Overview"
+						? "/"
+						: `/${title.split(" ").join("-").toLowerCase()}`;
+				return (
+					<li>
+						<a
+							class="flex items-center gap-3 py-1.5 no-underline data-[current]:font-bold"
+							href={href}
+						>
+							<Icon />
+							{title}
+						</a>
+					</li>
+				);
+			})}
+		</ul>
+	);
+};
+
+const ExternalLinks: FC = () => {
+	return (
+		<div class="flex items-center gap-1">
+			<RepoLink />
+			<NpmLink />
+		</div>
 	);
 };
 
-export const RepoLink: FC = () => {
+const RepoLink: FC = () => {
 	return (
 		<a
 			href="https://github.com/rossrobino/domco"
@@ -164,7 +162,7 @@ export const RepoLink: FC = () => {
 	);
 };
 
-export const NpmLink: FC = () => {
+const NpmLink: FC = () => {
 	return (
 		<a href="https://www.npmjs.com/package/domco" class="button ghost icon">
 			<svg
diff --git a/apps/docs/src/components/svg.tsx b/apps/docs/src/components/svg.tsx
index e175166..ad40008 100644
--- a/apps/docs/src/components/svg.tsx
+++ b/apps/docs/src/components/svg.tsx
@@ -1,5 +1,24 @@
 import type { FC } from "hono/jsx";
 
+export const XSvg: FC = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M18 6 6 18" />
+			<path d="m6 6 12 12" />
+		</svg>
+	);
+};
+
 export const BookSvg: FC = () => {
 	return (
 		<svg
@@ -12,7 +31,6 @@ export const BookSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-violet-700"
 		>
 			<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
 			<path d="m8 13 4-7 4 7" />
@@ -33,7 +51,6 @@ export const PlugSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-orange-700"
 		>
 			<path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z" />
 			<path d="m2 22 3-3" />
@@ -56,7 +73,6 @@ export const EarthSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-teal-700"
 		>
 			<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
 			<path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" />
@@ -78,7 +94,6 @@ export const FuncSvg: FC = () => {
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-sky-700"
 		>
 			<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
 			<path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3" />
@@ -86,3 +101,22 @@ export const FuncSvg: FC = () => {
 		</svg>
 	);
 };
+
+export const HomeSvg: FC = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+			<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+		</svg>
+	);
+};
diff --git a/apps/docs/src/generated/globals.md b/apps/docs/src/generated/globals.md
index 9f2cea8..4bc8f44 100644
--- a/apps/docs/src/generated/globals.md
+++ b/apps/docs/src/generated/globals.md
@@ -8,6 +8,16 @@
 
 #### Type declaration
 
+<a id="devmiddleware" name="devmiddleware"></a>
+
+##### devMiddleware?
+
+> `optional` **devMiddleware**: `MiddlewareHandler`[]
+
+Middleware to apply in `dev` mode.
+For production middleware, export it from the adapter module,
+and then import into the entry point.
+
 <a id="entry" name="entry"></a>
 
 ##### entry
@@ -32,6 +42,16 @@ Message to log when the build is complete.
 
 The name of the adapter.
 
+<a id="previewmiddleware" name="previewmiddleware"></a>
+
+##### previewMiddleware?
+
+> `optional` **previewMiddleware**: `MiddlewareHandler`[]
+
+Middleware to apply in `preview` mode.
+For production middleware, export it from the adapter module,
+and then import into the entry point.
+
 <a id="run" name="run"></a>
 
 ##### run()?
@@ -44,11 +64,19 @@ The script to run after Vite build is complete.
 
 `any`
 
+<a id="ssrtarget" name="ssrtarget"></a>
+
+##### ssrTarget
+
+> **ssrTarget**: `SSRTarget`
+
+Target for SSR build.
+
 #### Defined in
 
-[types/public/index.ts:9](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L9)
+[types/public/index.ts:21](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L21)
 
----
+***
 
 <a id="adapterbuilderadapteroptions" name="adapterbuilderadapteroptions"></a>
 
@@ -70,15 +98,15 @@ The script to run after Vite build is complete.
 
 #### Defined in
 
-[types/public/index.ts:29](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L29)
+[types/public/index.ts:60](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L60)
 
----
+***
 
 <a id="adapterentry" name="adapterentry"></a>
 
 ### AdapterEntry()
 
-> **AdapterEntry**: (`AdapterEntryOptions`) => `Promise`\<`string`\> \| `string`
+> **AdapterEntry**: (`AdapterEntryOptions`) => `object`
 
 #### Parameters
 
@@ -90,13 +118,31 @@ The app entrypoint to import `createApp` from.
 
 #### Returns
 
-`Promise`\<`string`\> \| `string`
+`object`
+
+##### code
+
+> **code**: `string`
+
+Code for the entrypoint.
+
+##### id
+
+> **id**: `string`
+
+The name of the entrypoint without extension.
+
+###### Example
+
+```ts
+"main"
+```
 
 #### Defined in
 
-[types/public/index.ts:4](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L4)
+[types/public/index.ts:6](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L6)
 
----
+***
 
 <a id="client" name="client"></a>
 
@@ -114,9 +160,9 @@ The app entrypoint to import `createApp` from.
 
 #### Defined in
 
-[types/public/index.ts:92](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L92)
+[types/public/index.ts:123](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L123)
 
----
+***
 
 <a id="domcoconfig" name="domcoconfig"></a>
 
@@ -144,7 +190,7 @@ Defaults to `undefined` - creates a `app` build only.
 ###### Default
 
 ```ts
-undefined;
+undefined
 ```
 
 ###### Example
@@ -157,8 +203,8 @@ import { adapter } from `"domco/adapter/...";`
 
 ```ts
 // vite.config.ts
-import { domco, type DomcoConfig } from "domco";
 import { defineConfig } from "vite";
+import { domco, type DomcoConfig } from "domco";
 
 const config: DomcoConfig = {
 	// options...
@@ -171,9 +217,9 @@ export default defineConfig({
 
 #### Defined in
 
-[types/public/index.ts:55](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L55)
+[types/public/index.ts:86](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L86)
 
----
+***
 
 <a id="domcocontextvariablemap" name="domcocontextvariablemap"></a>
 
@@ -274,7 +320,7 @@ app.get("/", (c) => {
 	const page = c.var.page();
 
 	// gets `src/route/path/+page.html`
-	const differentPage = c.var.page("/route/path");
+	const differentPage = c.var.page("/route/path")
 
 	return c.html(page);
 });
@@ -309,7 +355,7 @@ const app = new Hono();
 app.get("/", (c) => {
 	// dev: fetch("http://localhost:5173/route/path")
 	// prod: fetch("https://example.com/route/path")
-	const res = await c.var.server("/route/path");
+	const res = await c.var.server("/route/path")
 
 	// ...
 });
@@ -332,9 +378,9 @@ declare module "hono" {
 
 #### Defined in
 
-[types/public/index.ts:117](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L117)
+[types/public/index.ts:148](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L148)
 
----
+***
 
 <a id="page-1" name="page-1"></a>
 
@@ -352,9 +398,9 @@ declare module "hono" {
 
 #### Defined in
 
-[types/public/index.ts:90](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L90)
+[types/public/index.ts:121](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L121)
 
----
+***
 
 <a id="prerender" name="prerender"></a>
 
@@ -379,9 +425,9 @@ export const prerender: Prerender = ["/", "/post-1", "/post-2"];
 
 #### Defined in
 
-[types/public/index.ts:88](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L88)
+[types/public/index.ts:119](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L119)
 
----
+***
 
 <a id="server-1" name="server-1"></a>
 
@@ -401,7 +447,7 @@ export const prerender: Prerender = ["/", "/post-1", "/post-2"];
 
 #### Defined in
 
-[types/public/index.ts:94](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/types/public/index.ts#L94)
+[types/public/index.ts:125](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/types/public/index.ts#L125)
 
 ## Functions
 
@@ -428,8 +474,8 @@ The domco Vite plugin.
 
 ```ts
 // vite.config.ts
-import { domco } from "domco";
 import { defineConfig } from "vite";
+import { domco } from "domco";
 
 export default defineConfig({
 	plugins: [domco()],
@@ -438,4 +484,4 @@ export default defineConfig({
 
 #### Defined in
 
-[plugin/index.ts:31](https://github.com/rossrobino/domco/blob/ed55dafa3637ee34bdad999cd161f3ad66d18d91/packages/domco/src/plugin/index.ts#L31)
+[plugin/index.ts:31](https://github.com/rossrobino/domco/blob/901651aa5239610bc8c1558f2e4c7e072bc52ee6/packages/domco/src/plugin/index.ts#L31)
diff --git a/apps/docs/src/lib/docs/+client.ts b/apps/docs/src/lib/docs/+client.ts
index 0dd0f49..a275a09 100644
--- a/apps/docs/src/lib/docs/+client.ts
+++ b/apps/docs/src/lib/docs/+client.ts
@@ -1,3 +1,5 @@
+import { html } from "hono/html";
+
 const headings = document.querySelectorAll("h2, h3");
 const tableOfContents = document.createElement("ul");
 tableOfContents.classList.add("overflow-hidden", "!my-0", "!pl-0");
@@ -12,7 +14,7 @@ headings.forEach((heading) => {
 	if (heading.tagName === "H2") {
 		li.classList.add("!list-none", "level-2", "!pl-0");
 		tableOfContents.append(li);
-		link.classList.add("no-underline", "font-bold");
+		link.classList.add("no-underline", "font-semibold");
 	} else {
 		link.classList.add("text-muted-foreground");
 		const last = tableOfContents.querySelector(".level-2:last-child");
@@ -59,16 +61,19 @@ summary.insertAdjacentHTML(
 	"beforeend",
 	`<svg
 		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 20 20"
-		fill="currentColor"
-		class="size-4 transition group-[[open]]:rotate-180"
+		width="20"
+		height="20"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="transition group-[[open]]:rotate-180"
 	>
-		<path
-			fill-rule="evenodd"
-			d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-			clip-rule="evenodd"
-		/>
-	</svg>`,
+		<path d="m6 9 6 6 6-6" />
+	</svg>
+	`,
 );
 
 const content = document.createElement("content");