docs: toc/edit

apps/docs/src/+server.tsx

@@ -1,3 +1,4 @@
+import { Edit } from "./components/Edit";
 import { Hero } from "@/components/Hero";
 import { Layout } from "@/components/Layout";
 import preview from "@/content/_preview.md?raw";
@@ -12,9 +13,13 @@ export const prerender: Prerender = ["/", "/api-reference"];
 const app = new Hono();
 
 app.use(async (c, next) => {
-	c.setRenderer(({ title }, content) => {
+	c.setRenderer(({ title, client }, content) => {
+		const tags = [c.var.client()];
+		if (client) {
+			tags.push(...client);
+		}
 		return c.html(
-			<Layout title={title} client={c.var.client()}>
+			<Layout title={title} client={tags}>
 				{content}
 			</Layout>,
 		);
@@ -29,8 +34,8 @@ app.get("/", async (c) => {
 		{ title: "domco" },
 		<>
 			<Hero />
-			<section class="mb-24">{previewHtml}</section>
-			<div class="mb-24 flex justify-center">
+			<section>{previewHtml}</section>
+			<div class="my-16 flex justify-center">
 				<a href="/tutorial" class="button px-6 py-4 text-lg">
 					Get Started
 				</a>
@@ -57,8 +62,14 @@ for (const [fileName, md] of Object.entries(content)) {
 
 		app.get(pathName, (c) => {
 			return c.render(
-				{ title: slug.charAt(0).toUpperCase() + slug.slice(1) },
-				<section>{html}</section>,
+				{
+					title: slug.charAt(0).toUpperCase() + slug.slice(1),
+					client: [c.var.client("/lib/docs")],
+				},
+				<>
+					<section>{html}</section>
+					<Edit />
+				</>,
 			);
 		});
 	}
@@ -70,12 +81,13 @@ app.get("/api-reference", async (c) => {
 	);
 
 	return c.render(
-		{ title: "API Reference" },
+		{ title: "API Reference", client: [c.var.client("/lib/docs")] },
 		<>
 			<section>
 				<h1>API Reference</h1>
 				{apiReferenceHtml}
 			</section>
+			<Edit />
 		</>,
 	);
 });

apps/docs/src/components/Edit.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "hono/jsx";
+
+export const Edit: FC = () => {
+	return (
+		<a
+			href="https://github.com/rossrobino/domco/tree/main/apps/docs/src/content"
+			class="button secondary inline-flex"
+		>
+			Edit this page
+		</a>
+	);
+};

apps/docs/src/components/Layout.tsx

@@ -10,7 +10,7 @@ const HtmlLayout: FC = ({ children }) => html`
 
 type LayoutProps = PropsWithChildren<{
 	title: string;
-	client: HtmlEscapedString;
+	client: HtmlEscapedString[];
 }>;
 
 export const Layout: FC<LayoutProps> = ({ title, children, client }) => {
@@ -23,7 +23,9 @@ export const Layout: FC<LayoutProps> = ({ title, children, client }) => {
 						name="viewport"
 						content="width=device-width, initial-scale=1.0"
 					/>
-					{client}
+					{client.map((tags) => {
+						return tags;
+					})}
 					<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 					<meta
 						name="description"
@@ -35,7 +37,7 @@ 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 max-w-screen-sm md:mx-auto">
+							<div class="prose mx-6 my-6 md:max-w-screen-md xl:mx-auto">
 								{children}
 							</div>
 						</main>

apps/docs/src/components/Nav.tsx

@@ -27,7 +27,7 @@ const SideBar: FC = () => {
 };
 
 const HomeLink = () => (
-	<a class="text-lg font-bold no-underline" href="/">
+	<a class="text-xl font-bold no-underline" href="/">
 		domco
 	</a>
 );

apps/docs/src/content/migrate.md

@@ -2,6 +2,8 @@
 
 This section will show you how to migrate an existing Vite single page application to become a Hono application. It will use the React template created when running `npm create vite`.
 
+## Client
+
 - Run `npm i -D hono domco` in your terminal to install hono and domco as dependencies.
 - Add `domco` to your `plugins` array in your `vite.config`.
 
@@ -24,8 +26,15 @@ export default defineConfig({
 
 - Move `index.html` into `src/` and rename it to `+page.html`.
 - Change the `src` attribute of the `script` tag linking to `/src/main.tsx` to `/main.tsx` (alternatively remove the tag entirely and rename `main.tsx` to `+client.tsx`).
-- Run `npm run dev` to serve your application - done!
-- Now, to add an API route, add types to `/src/vite.env.d.ts`
+- Run `npm run dev` to serve your application.
+
+You have successfully migrated your app to domco.
+
+## Server
+
+To add an API route, follow these instructions.
+
+- Add types to `/src/vite.env.d.ts`.
 
 ```ts {3-8}
 // /src/vite.env.d.ts
@@ -55,3 +64,5 @@ export default app;
 
 - `/` is now an API route serving your React SPA application.
 - Navigate to `/api` to see the `"hello world"` response from your API.
+
+You now have a full-stack application.

apps/docs/src/content/tutorial.md

@@ -1,6 +1,6 @@
 # Tutorial
 
-## Create
+## Create a new project
 
 To get started, you'll need to have [Node.js](https://nodejs.org) and npm installed on your computer.
 
@@ -14,7 +14,7 @@ This command creates files in your project's directory instead of having to manu
 
 The following documentation covers the basics of creating a site and all of the features domco provides in addition to Vite and Hono. See the [Vite](https://vitejs.dev/) or [Hono](https://hono.dev) documentation for more information and configuration options.
 
-### +page
+## +page
 
 Your project is located in `src/`---this serves as the root directory of your project. `src/+page.html` can be accessed at `https://example.com`, while `src/nested/+page.html` can be accessed at `https://example.com/nested`.
 

apps/docs/src/global.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="vite/client" />
 import type { DomcoContextVariableMap } from "domco";
 import "hono";
+import type { HtmlEscapedString } from "hono/utils/html";
 
 declare module "hono" {
 	interface ContextVariableMap extends DomcoContextVariableMap {}
 	interface ContextRenderer {
 		(
-			props: { title: string },
+			props: { title: string; client?: HtmlEscapedString[] },
 			content: string | Promise<string>,
 		): Response | Promise<Response>;
 	}

apps/docs/src/lib/docs/+client.ts

@@ -0,0 +1,84 @@
+const headings = document.querySelectorAll("h2, h3");
+const tableOfContents = document.createElement("ul");
+tableOfContents.classList.add("overflow-hidden", "!my-0", "!pl-0");
+
+headings.forEach((heading) => {
+	const li = document.createElement("li");
+	const link = document.createElement("a");
+	link.href = `#${heading.id}`;
+	link.textContent = heading.textContent;
+	li.append(link);
+
+	if (heading.tagName === "H2") {
+		li.classList.add("!list-none", "level-2", "!pl-0");
+		tableOfContents.append(li);
+		link.classList.add("no-underline", "font-bold");
+	} else {
+		link.classList.add("text-muted-foreground");
+		const last = tableOfContents.querySelector(".level-2:last-child");
+		console.log(last);
+
+		let nestedUl = last?.querySelector("ul");
+		if (!nestedUl) {
+			nestedUl = document.createElement("ul");
+			last?.append(nestedUl);
+		}
+
+		nestedUl.append(li);
+	}
+});
+
+const drabDetails = document.createElement("drab-details");
+drabDetails.classList.add("contents");
+drabDetails.setAttribute("animation-keyframe-from-grid-template-rows", "0fr");
+drabDetails.setAttribute("animation-keyframe-to-grid-template-rows", "1fr");
+
+const details = document.createElement("details");
+details.classList.add("group", "overflow-hidden", "border-b", "p-4", "mb-12");
+
+const summary = document.createElement("summary");
+summary.classList.add(
+	"flex",
+	"list-none",
+	"items-center",
+	"justify-between",
+	"gap-8",
+	"pt-4",
+	"pb-2",
+	"cursor-pointer",
+	"font-bold",
+	"text-lg",
+	"underline",
+	"underline-offset-2",
+);
+summary.dataset.trigger = "";
+const summaryTitle = document.createElement("span");
+summaryTitle.textContent = "On this page";
+summary.append(summaryTitle);
+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"
+	>
+		<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>`,
+);
+
+const content = document.createElement("content");
+content.classList.add("grid");
+content.dataset.content = "";
+content.append(tableOfContents);
+
+details.append(summary);
+details.append(content);
+drabDetails.append(details);
+
+const h1 = document.querySelector("h1");
+h1?.insertAdjacentElement("afterend", drabDetails);

apps/docs/src/style.css

@@ -10,8 +10,7 @@
 		--accent: theme(colors.teal.700);
 		--destructive: theme(colors.rose.700);
 
-		pre,
-		blockquote {
+		pre {
 			--shiki-foreground: theme(colors.base.200);
 			--shiki-background: theme(colors.base.900);
 			--shiki-token-constant: theme(colors.base.50);
@@ -60,6 +59,9 @@
 
 	* {
 		scroll-padding-block-start: theme(padding.20);
+		@media (min-width: 1024px) {
+			scroll-padding-block-start: theme(padding.4);
+		}
 	}
 
 	pre,
@@ -71,6 +73,11 @@
 		}
 	}
 
+	/* for safari */
+	summary::-webkit-details-marker {
+		display: none;
+	}
+
 	img {
 		border: var(--border);
 	}
@@ -145,4 +152,7 @@
 			margin-block-start: 0;
 		}
 	}
+	.prose li {
+		padding-block: theme(padding.1);
+	}
 }