Coming from Next.js

// app/articles/[slug]/page.tsx
import { notFound, redirect } from "next/navigation";
import { Suspense } from "react";
import { addComment, getComments, getPost } from "@/lib/posts";
import { Reactions } from "@/components/reactions"; // "use client" inside

export async function generateMetadata({ params }: PageProps<"/articles/[slug]">) {
  const post = await getPost((await params).slug);
  return { title: post?.title };
}

export default async function Article({ params }: PageProps<"/articles/[slug]">) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();

  async function comment(formData: FormData) {
    "use server";
    await addComment(slug, String(formData.get("text") ?? ""));
    redirect(`/articles/${slug}`);
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <Reactions initial={post.likes} />
      <Suspense fallback={<p>Loading comments…</p>}>
        <Comments slug={slug} />
      </Suspense>
      <form action={comment}>
        <textarea name="text" />
        <button>Comment</button>
      </form>
    </article>
  );
}

async function Comments({ slug }: { slug: string }) {
  const comments = await getComments(slug);
  return (
    <ul>
      {comments.map((c) => (
        <li key={c.id}>{c.text}</li>
      ))}
    </ul>
  );
}

// src/lib/articles.server.ts: a database in a real app
interface Comment {
  id: number;
  text: string;
}

const articles = new Map([
  ["hello", { title: "Hello", body: "The first post.", likes: 3, comments: [] as Comment[] }],
]);

export async function getArticle(slug: string) {
  return articles.get(slug);
}

export async function getComments(slug: string) {
  await new Promise((resolve) => setTimeout(resolve, 300)); // a slow query
  return articles.get(slug)?.comments ?? [];
}

export async function addComment(slug: string, text: string) {
  articles.get(slug)?.comments.push({ id: Date.now(), text });
}

// src/components/Reactions.tsx
import { signal } from "lumiose";

export function Reactions(props: { initial: number }) {
  const likes = signal(props.initial);
  return <button onClick={() => likes.update((n) => n + 1)}>Like ({likes()})</button>;
}

// src/routes/articles/[slug]/page.stsx
import { Suspense, Title, href, notFound, redirect, type ActionContext, type PageProps } from "lumiose";
import { Reactions } from "../../../components/Reactions.tsx";
import { addComment, getArticle, getComments } from "../../../lib/articles.server.ts";

export const mode = "server";

export const actions = {
  async comment(ctx: ActionContext<"/articles/[slug]">) {
    const text = String((await ctx.formData()).get("text") ?? "").trim();
    if (text !== "") await addComment(ctx.params.slug, text);
    redirect(href("/articles/[slug]", { slug: ctx.params.slug }));
  },
};

async function Comments(props: { slug: string }) {
  const comments = await getComments(props.slug);
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

export default async function Article({ params }: PageProps<"/articles/[slug]">) {
  const article = (await getArticle(params.slug)) ?? notFound();
  return (
    <article>
      <Title>{article.title}</Title>
      <h1>{article.title}</h1>
      <p>{article.body}</p>
      <Reactions client:visible initial={article.likes} />
      <Suspense fallback={<p>Loading comments…</p>}>
        <Comments slug={params.slug} />
      </Suspense>
      <form method="post" action="?/comment">
        <textarea name="text" />
        <button>Comment</button>
      </form>
    </article>
  );
}

// src/routes/handbook/[slug]/page.tsx: built once per slug, served as files
import { Meta, Title, notFound, type PageProps } from "lumiose";

const chapters = new Map([
  ["intro", { title: "Introduction", summary: "Why the handbook exists." }],
  ["setup", { title: "Setup", summary: "Install and configure the tools." }],
]);

async function getChapter(slug: string) {
  return chapters.get(slug); // a CMS or the file system in a real site
}

export function staticPaths() {
  return [...chapters.keys()].map((slug) => ({ params: { slug } }));
}

export default async function Chapter({ params }: PageProps<"/handbook/[slug]">) {
  const chapter = (await getChapter(params.slug)) ?? notFound();
  return (
    <main>
      <Title>{chapter.title}</Title>
      <Meta name="description" content={chapter.summary} />
      <h1>{chapter.title}</h1>
    </main>
  );
}

// src/routes/sitemap.xml/route.ts
import { href, type Endpoint } from "lumiose";

const site = "https://example.com";

export const GET: Endpoint<"/sitemap.xml"> = () => {
  const urls = ["intro", "setup"].map(
    (slug) => `<url><loc>${site}${href("/handbook/[slug]", { slug })}</loc></url>`,
  );
  return new Response(
    `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls.join("")}</urlset>`,
    { headers: { "content-type": "application/xml" } },
  );
};

// src/middleware.ts
import type { Middleware } from "lumiose";

const middleware: Middleware = async (ctx, next) => {
  const response = await next();
  response.headers.set("x-frame-options", "DENY");
  return response;
};

export default middleware;

// src/routes/dashboard/middleware.ts: matcher "/dashboard/:path*", actions and endpoints included
import type { Middleware } from "lumiose";

const requireSession: Middleware<"/dashboard"> = (ctx, next) =>
  ctx.cookies.get("session") === undefined
    ? Response.redirect(new URL("/login", ctx.url), 307)
    : next();

export default requireSession;