chore: update design

README.md

@@ -12,7 +12,7 @@ What's included?
 - [Github Actions](https://github.com/features/actions) for CI/CD
 - [Markdoc](https://markdoc.dev) for rendering markdown
 - Styling with [Tailwind](https://tailwindcss.com/)
-- End-to-end testing with [Playwright](playwright.dev/)
+- End-to-end testing with [Playwright](https://playwright.dev/)
 - Local third party request mocking with [MSW](https://mswjs.io/)
 - Code formatting with [Prettier](https://prettier.io)
 - Linting with [ESLint](https://eslint.org)
@@ -34,7 +34,7 @@ npm run dev
 ```
 
 You can also start the Playwright UI mode to test your application. You will
-find all the tests defined in the [/tests/e2e](./tests/e2e/) directory.
+find all the tests defined in the [/tests/e2e](./tests/e2e) directory.
 
 ```sh
 npm run test
@@ -50,8 +50,8 @@ npm run build && npm run start
 ### New environment variable & secret
 
 To add a new secret, please
-[update the value on **.dev.vars**](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-in-development)
-similar to a `.env` file.
+[update the value](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-in-development)
+on the `.dev.vars` file.
 
 For the rest of the environment variable, you can update the **var** section on
 the [wrangler.toml](./wrangler.toml) file with the new variable:

app/components.tsx

@@ -1,30 +1,10 @@
 import * as React from 'react';
 import markdoc, { type RenderableTreeNodes } from '@markdoc/markdoc';
 
-export function RemixLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
+export function Markdown({ content }: { content: RenderableTreeNodes }) {
 	return (
-		<svg
-			viewBox="0 0 659 165"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlnsXlink="http://www.w3.org/1999/xlink"
-			aria-labelledby="remix-run-logo-title"
-			role="img"
-			width="106"
-			height="30"
-			fill="currentColor"
-			{...props}
-		>
-			<title id="remix-run-logo-title">Remix Logo</title>
-			<path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" />
-			<path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" />
-			<path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" />
-			<path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" />
-			<path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" />
-		</svg>
+		<div className="prose prose-zinc mx-auto max-w-screen-sm">
+			{markdoc.renderers.react(content, React)}
+		</div>
 	);
 }
-
-export function Markdown({ content }: { content: RenderableTreeNodes }) {
-	return <div className="prose">{markdoc.renderers.react(content, React)}</div>;
-}

app/layout.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import chevronUpIcon from '~/assets/chevron-up.svg';
+import chevronRightIcon from '~/assets/chevron-right.svg';
+import remixLetterLogo from '~/assets/remix-letter-light.svg';
+import { Link, useLocation } from '@remix-run/react';
+
+export interface Menu {
+	title: string;
+	links: Array<{
+		title: string;
+		to: string;
+	}>;
+}
+
+export function Breadcrumbs({
+	trails,
+	children,
+}: {
+	trails: string[];
+	children: React.ReactNode;
+}) {
+	return (
+		<>
+			<details className="group peer h-12 border-t bg-white open:bg-neutral-100 hover:bg-neutral-100 lg:hidden">
+				<summary className="h-full cursor-pointer select-none px-2 marker:content-none">
+					<div className="mx-auto flex h-full max-w-screen-sm flex-row items-center gap-2">
+						<img
+							src={chevronRightIcon}
+							className="block h-4 w-4 group-open:hidden"
+							alt="expand"
+							aria-hidden
+						/>
+						<img
+							src={chevronUpIcon}
+							className="hidden h-4 w-4 group-open:block"
+							alt="collapse"
+							aria-hidden
+						/>
+						<div className="truncate">
+							{trails.map((trail, index) => (
+								<React.Fragment key={index}>
+									{index > 0 ? (
+										<span className="px-2 text-zinc-500">/</span>
+									) : null}
+									<span>{trail}</span>
+								</React.Fragment>
+							))}
+						</div>
+					</div>
+				</summary>
+			</details>
+			<div className="fixed inset-x-0 bottom-12 hidden max-h-[calc(100vh-3rem)] flex-1 overflow-y-auto border-t bg-white peer-open:block lg:relative lg:inset-x-auto lg:bottom-auto lg:flex lg:max-h-none">
+				{children}
+			</div>
+		</>
+	);
+}
+
+export function MainNavigation({ menus }: { menus: Menu[] }) {
+	const location = useLocation();
+	const trails = menus.reduce<string[]>((result, menu) => {
+		if (result.length === 0) {
+			const link = menu.links.find(link => link.to === location.pathname);
+
+			if (link) {
+				return [menu.title, link.title];
+			}
+		}
+
+		return result;
+	}, []);
+
+	return (
+		<div className="flex flex-col lg:h-screen">
+			<Breadcrumbs trails={trails}>
+				<nav className="mx-auto flex max-w-screen-sm flex-1 flex-col px-5 py-5 lg:py-10">
+					<header className="px-2 pb-8 pt-1">
+						<Link to="/" className="inline-block">
+							<div className="flex items-center gap-2">
+								<img
+									className="inline-block h-8 w-8"
+									src={remixLetterLogo}
+									alt="Remix logo"
+								/>
+								<span className="text-lg">Cloudflare Template</span>
+							</div>
+						</Link>
+					</header>
+					<div className="-ml-5 flex-1 space-y-4 overflow-y-auto">
+						{menus.map(menu => (
+							<div key={menu.title} className="px-2 ">
+								<div className="sticky top-0 bg-white pb-2 pl-5 font-bold">
+									{menu.title}
+								</div>
+								<ul>
+									{menu.links.map(link => (
+										<li key={link.to}>
+											<Link
+												className="group flex flex-row items-center gap-2 py-2 text-sm"
+												to={link.to}
+											>
+												<img
+													src={chevronRightIcon}
+													className={`h-3 w-3 group-hover:visible ${link.to === location.pathname ? 'visible' : 'invisible'}`}
+													alt="current page indicator"
+													aria-hidden
+												/>
+												{link.title}
+											</Link>
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
+					<footer className="hidden pt-5 lg:block">
+						📜 All-in-one remix starter template for Cloudflare Pages
+					</footer>
+				</nav>
+			</Breadcrumbs>
+		</div>
+	);
+}
+
+export function Layout({
+	children,
+	menus,
+}: {
+	children?: React.ReactNode;
+	menus: Menu[];
+}) {
+	return (
+		<div className="mx-auto lg:container">
+			<div className="flex flex-col-reverse lg:flex-row">
+				<section className="sticky bottom-0 flex-1 lg:relative lg:bottom-auto">
+					<div className="lg:sticky lg:top-0">
+						<MainNavigation menus={menus} />
+					</div>
+				</section>
+				<main className="flex-1">
+					<div className="px-5 py-5 lg:py-10">{children}</div>
+				</main>
+			</div>
+		</div>
+	);
+}
+
+export function ErrorLayout({
+	title,
+	description,
+}: {
+	title?: string;
+	description?: string;
+}) {
+	return (
+		<div className="flex h-screen items-center">
+			<div className="mx-auto p-5">
+				<h2 className="text-xl">{title}</h2>
+				<p className="py-2">{description}</p>
+			</div>
+		</div>
+	);
+}