@beatzball/create-litro 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# create-litro
+
+## 0.1.0
+
+### Minor Changes
+
+- 618a9b8: Rename all packages to `@beatzball` scope. The unscoped `litro` package was blocked by npm's name-similarity protection (too close to `lit`, `listr`, etc.). All three packages are now published under the `@beatzball` org scope:
+
+  - `litro` → `@beatzball/litro`
+  - `litro-router` → `@beatzball/litro-router`
+  - `create-litro` → `@beatzball/create-litro`
+
+  The previously published unscoped `litro-router@0.0.2` and `create-litro@0.0.2` are deprecated on npm with a redirect notice.
+
+## 0.0.2
+
+### Patch Changes
+
+- 4552934: Add `license`, `repository`, and `publishConfig` fields to all published packages; configure Changesets for automated version management, per-package changelogs, and npm publishing via GitHub Actions.

package/LICENSE

@@ -0,0 +1,185 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship made available under
+      the License, as indicated by a copyright notice that is included in
+      or attached to the work (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean, as submitted to the Licensor for inclusion
+      in the Work by the copyright owner or by an individual or Legal Entity
+      authorized to submit on behalf of the copyright owner. For the purposes
+      of this definition, "submitted" means any form of electronic, verbal,
+      or written communication sent to the Licensor or its representatives,
+      including but not limited to communication on electronic mailing lists,
+      source code control systems, and issue tracking systems that are managed
+      by, or on behalf of, the Licensor for the purpose of discussing and
+      improving the Work, but excluding communication that is conspicuously
+      marked or otherwise designated in writing by the copyright owner as
+      "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any Legal Entity on behalf of
+      whom a Contribution has been received by the Licensor and subsequently
+      incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a cross-claim
+      or counterclaim in a lawsuit) alleging that the Work or any
+      Contribution incorporated within the Work constitutes direct or
+      contributory patent infringement, then any patent licenses granted to
+      You under this License for that Work shall terminate as of the date
+      such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or Derivative
+          Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, You must include a readable copy of the
+          attribution notices contained within such NOTICE file, in
+          at least one of the following places: within a NOTICE text
+          file distributed as part of the Derivative Works; within
+          the Source form or documentation, if provided along with the
+          Derivative Works; or, within a display generated by the
+          Derivative Works, if and wherever such third-party notices
+          normally appear. The contents of the NOTICE file are for
+          informational purposes only and do not modify the License.
+          You may add Your own attribution notices within Derivative
+          Works that You distribute, alongside or in addition to the
+          NOTICE text from the Work, provided that such additional
+          attribution notices cannot be construed as modifying the License.
+
+      You may add Your own license statement for Your modifications and
+      may provide additional grant of rights to use, reproduce, modify,
+      and distribute Your modifications, or for such Derivative Works as
+      a whole, under terms and conditions of Your choice, provided Your
+      use, reproduction, modification, and distribution of the Work
+      otherwise complies with the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or reproducing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or exemplary damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or all other
+      commercial damages or losses), even if such Contributor has been
+      advised of the possibility of such damages.
+
+   9. Accepting Warranty or Liability. While redistributing the Work or
+      Derivative Works thereof, You may choose to offer, and charge a fee
+      for, acceptance of support, warranty, indemnity, or other liability
+      obligations and/or rights consistent with this License. However, in
+      accepting such obligations, You may offer such obligations only on
+      Your own behalf and on Your sole responsibility, not on behalf of
+      any other Contributor, and only if You agree to indemnify, defend,
+      and hold each Contributor harmless for any liability incurred by, or
+      claims asserted against, such Contributor by reason of your accepting
+      any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026 beatzball
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,89 @@
+# create-litro
+
+Scaffold a new [Litro](https://github.com/beatzball/litro) app.
+
+## Usage
+
+```bash
+npm create litro@latest my-app
+# or
+pnpm create litro my-app
+# or
+yarn create litro my-app
+```
+
+Follow the interactive prompts to choose a recipe and rendering mode, or pass flags directly to skip them:
+
+```bash
+# Fullstack SSR app (default)
+npm create litro@latest my-app --recipe fullstack --mode ssr
+
+# 11ty-compatible blog (SSG or SSR)
+npm create litro@latest my-app --recipe 11ty-blog --mode ssg
+
+# List all available recipes
+npm create litro@latest -- --list-recipes
+```
+
+## Recipes
+
+### `fullstack` (default)
+
+A fullstack Lit + Nitro app with file-based routing and server-side rendering.
+
+Generated app includes:
+- `pages/index.ts` — home page with `definePageData()` server fetching
+- `pages/blog/index.ts` — blog listing page
+- `pages/blog/[slug].ts` — dynamic post page with `generateRoutes()` for SSG
+- `server/api/hello.ts` — JSON API endpoint
+- Config files: `nitro.config.ts`, `vite.config.ts`, `tsconfig.json`
+
+### `11ty-blog`
+
+A Markdown blog using the `litro:content` content layer, compatible with the 11ty data cascade format (frontmatter, `.11tydata.json` directory data, `_data/metadata.js` global data). Supports both SSR (dev server) and SSG (prerender to static HTML).
+
+Generated app includes:
+- `content/blog/` — Markdown posts with YAML frontmatter
+- `content/_data/metadata.js` — global site metadata
+- `pages/index.ts` — home page showing recent posts
+- `pages/blog/index.ts` — post listing with all posts
+- `pages/blog/[slug].ts` — individual post page with `generateRoutes()`
+- `pages/tags/[tag].ts` — tag-filtered post listing
+- `server/api/posts.ts` — JSON API for posts (optional `?tag=` filter)
+- `litro.recipe.json` — written to the project root so the content plugin knows where to find posts
+
+## After scaffolding
+
+```bash
+cd my-app
+pnpm install
+pnpm dev      # start dev server on http://localhost:3030
+```
+
+For static site generation:
+
+```bash
+LITRO_MODE=static pnpm build   # prerenders all routes to HTML
+```
+
+## The `litro:content` virtual module
+
+The `11ty-blog` recipe uses `litro:content`, a virtual module provided by the Litro framework:
+
+```typescript
+import { getPosts, getPost, getTags, getGlobalData } from 'litro:content';
+
+// In a page file:
+const posts = await getPosts({ tag: 'tutorial', limit: 5 });
+const post  = await getPost('hello-world');
+const tags  = await getTags();
+const meta  = await getGlobalData();  // reads _data/metadata.js
+```
+
+The content layer reads Markdown files from the directory specified in `litro.recipe.json` (`contentDir`). Posts are sorted by date descending. Draft posts (frontmatter `draft: true`) are excluded by default.
+
+Add `/// <reference types="litro/content/env" />` (or the equivalent `tsconfig.json` entry) for TypeScript type support.
+
+## License
+
+Apache License 2.0 — Copyright 2026 beatzball.

package/dist/recipes/11ty-blog/recipe.config.d.ts

@@ -0,0 +1,4 @@
+import type { LitroRecipe } from '../../src/types.js';
+declare const recipe: LitroRecipe;
+export default recipe;
+//# sourceMappingURL=recipe.config.d.ts.map

package/dist/recipes/11ty-blog/recipe.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipe.config.d.ts","sourceRoot":"","sources":["../../../recipes/11ty-blog/recipe.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,MAAM,EAAE,WAMb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/recipes/11ty-blog/recipe.config.js

@@ -0,0 +1,9 @@
+const recipe = {
+    name: '11ty-blog',
+    displayName: 'Blog (11ty-compatible content)',
+    description: '11ty-compatible Markdown blog with frontmatter, tags, and directory data',
+    mode: 'both',
+    contentLayer: 'content/blog',
+};
+export default recipe;
+//# sourceMappingURL=recipe.config.js.map

package/dist/recipes/11ty-blog/recipe.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipe.config.js","sourceRoot":"","sources":["../../../recipes/11ty-blog/recipe.config.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAgB;IAC1B,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,gCAAgC;IAC7C,WAAW,EAAE,0EAA0E;IACvF,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,cAAc;CAC7B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/recipes/11ty-blog/recipe.config.ts

@@ -0,0 +1,11 @@
+import type { LitroRecipe } from '../../src/types.js';
+
+const recipe: LitroRecipe = {
+  name: '11ty-blog',
+  displayName: 'Blog (11ty-compatible content)',
+  description: '11ty-compatible Markdown blog with frontmatter, tags, and directory data',
+  mode: 'both',
+  contentLayer: 'content/blog',
+};
+
+export default recipe;

package/dist/recipes/11ty-blog/template/app.ts

@@ -0,0 +1,18 @@
+// CRITICAL: must be first — patches LitElement before any component is loaded.
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
+
+// Client runtime: router outlet and link custom elements.
+import 'litro/runtime/LitroOutlet.js';
+import 'litro/runtime/LitroLink.js';
+
+// Routes generated by the page scanner before each vite build.
+import { routes } from './routes.generated.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const outlet = document.querySelector('litro-outlet') as (Element & { routes: unknown }) | null;
+  if (outlet) {
+    outlet.routes = routes;
+  } else {
+    console.warn('[litro] <litro-outlet> not found — router will not start.');
+  }
+});

package/dist/recipes/11ty-blog/template/content/_data/metadata.js

@@ -0,0 +1,10 @@
+export default {
+  title: '{{projectName}}',
+  url: 'https://example.com',
+  language: 'en',
+  description: 'A blog built with Litro',
+  author: {
+    name: 'Your Name',
+    email: 'your@email.com',
+  },
+};

package/dist/recipes/11ty-blog/template/content/blog/blog.11tydata.json

@@ -0,0 +1 @@
+{ "tags": ["posts"] }

package/dist/recipes/11ty-blog/template/content/blog/getting-started/index.md

@@ -0,0 +1,66 @@
+---
+title: Getting Started with Litro
+date: 2026-01-20
+description: A step-by-step guide to setting up your Litro blog, writing posts, and deploying to production.
+tags:
+  - posts
+  - tutorial
+---
+
+## Prerequisites
+
+Before you begin, make sure you have [Node.js](https://nodejs.org) 20 or later and [pnpm](https://pnpm.io) installed. Then install the Litro CLI globally:
+
+```bash
+npm install -g litro
+```
+
+Or run it directly with your package manager:
+
+```bash
+pnpm dlx litro dev
+```
+
+## Setting Up {{projectName}}
+
+If you're reading this inside a freshly scaffolded project, you're already set up. To install dependencies and start the dev server:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+The dev server starts on `http://localhost:3030` by default. Vite handles HMR for your Lit components; Nitro handles SSR and API routes — both on a single port.
+
+## Writing Posts
+
+Posts live in `content/blog/`. Each `.md` file becomes a route under `/blog/<slug>`. Subdirectories using the `index.md` convention (like this post) work exactly the same way.
+
+### Available Frontmatter Fields
+
+| Field         | Type       | Required | Description                                      |
+|---------------|------------|----------|--------------------------------------------------|
+| `title`       | `string`   | Yes      | Shown in the post header and listing pages       |
+| `date`        | `string`   | Yes      | ISO 8601 date (e.g. `2026-01-20`); used for sort |
+| `description` | `string`   | No       | Short summary shown in post cards                |
+| `tags`        | `string[]` | No       | Additional tags beyond the inherited `posts` tag |
+| `draft`       | `boolean`  | No       | Set `true` to hide from listings in production   |
+
+### Tags
+
+Every post in `content/blog/` inherits the `posts` tag automatically via `blog.11tydata.json`. Add extra tags in the post's own frontmatter — they appear at `/tags/<tag>`.
+
+## Building for Production
+
+```bash
+pnpm build    # SSR build (Node.js server)
+pnpm preview  # preview the production build locally
+```
+
+For a fully static site (no server required), set the mode to `static` before building:
+
+```bash
+LITRO_MODE=static pnpm build
+```
+
+Static mode prerenders every route returned by `generateRoutes()` to plain HTML files, which can be served from any CDN or object storage bucket.

package/dist/recipes/11ty-blog/template/content/blog/hello-world.md

@@ -0,0 +1,39 @@
+---
+title: Hello, World!
+date: 2026-01-15
+description: Welcome to your new Litro blog — here's what you need to know to start writing.
+tags:
+  - posts
+  - welcome
+---
+
+## Welcome to Your Litro Blog
+
+You've just scaffolded a brand-new blog powered by Litro — a fullstack web framework that combines Lit web components with Nitro's battle-tested server engine. This post is here to help you get your bearings and understand how everything fits together.
+
+Content lives in the `content/blog/` directory as plain Markdown files. Each file becomes a post. The frontmatter at the top of every file (the `---` fenced block) controls the post's title, date, description, and tags. The rest of the file is your post body, written in standard Markdown — headings, paragraphs, lists, links, code blocks, all of it.
+
+## Writing Your First Post
+
+Create a new `.md` file inside `content/blog/` and fill in the frontmatter:
+
+```markdown
+---
+title: My Second Post
+date: 2026-02-01
+description: A short summary shown on the blog listing page.
+tags:
+  - posts
+  - my-tag
+---
+
+Your post content goes here.
+```
+
+The `tags` field accepts a list. Every post in `content/blog/` automatically inherits the `posts` tag from `blog.11tydata.json`, so you only need to list additional tags in the post's own frontmatter. Tag pages are generated automatically at `/tags/<tag>` — no extra configuration required.
+
+## How Content Is Served
+
+Litro reads your Markdown files at build time (or on-demand in dev mode) using its content layer. The `getPosts()` function returns all published posts sorted newest-first, with each post's Markdown rendered to HTML in the `body` field. The `getPost(slug)` function fetches a single post by its URL slug, derived from the filename. For example, this file — `hello-world.md` — is available at `/blog/hello-world`.
+
+Run `litro dev` to start the development server and visit `http://localhost:3030` to see your blog live. Changes to content files are picked up immediately without restarting the server.

package/dist/recipes/11ty-blog/template/litro.recipe.json

@@ -0,0 +1,7 @@
+{
+  "recipe": "11ty-blog",
+  "version": "{{recipeVersion}}",
+  "mode": "{{mode}}",
+  "contentDir": "content/blog",
+  "options": {}
+}

package/dist/recipes/11ty-blog/template/nitro.config.ts

@@ -0,0 +1,60 @@
+import { defineNitroConfig } from 'nitropack/config';
+import type { Nitro } from 'nitropack';
+import { resolve } from 'node:path';
+import { ssrPreset, ssgPreset } from '@beatzball/litro/config';
+import pagesPlugin from '@beatzball/litro/plugins';
+import ssgPlugin from '@beatzball/litro/plugins/ssg';
+import contentPlugin from '@beatzball/litro/content/plugin';
+
+const mode = process.env.LITRO_MODE ?? 'server';
+
+export default defineNitroConfig({
+  ...(mode === 'static' ? ssgPreset() : ssrPreset()),
+
+  srcDir: 'server',
+
+  publicAssets: [
+    { dir: '../dist/client', baseURL: '/_litro/', maxAge: 31536000 },
+    { dir: '../public',      baseURL: '/',        maxAge: 0 },
+    // Serve co-located content images at their natural paths
+    { dir: '../content',     baseURL: '/content/', maxAge: 86400 },
+  ],
+
+  externals: { inline: ['@lit-labs/ssr', '@lit-labs/ssr-client'] },
+
+  esbuild: {
+    options: {
+      tsconfigRaw: {
+        compilerOptions: {
+          experimentalDecorators: true,
+          useDefineForClassFields: false,
+        },
+      },
+    },
+  },
+
+  ignore: ['**/middleware/vite-dev.ts'],
+  handlers: [
+    {
+      middleware: true,
+      handler: resolve('./server/middleware/vite-dev.ts'),
+      env: 'dev',
+    },
+  ],
+
+  hooks: {
+    'build:before': async (nitro: Nitro) => {
+      await contentPlugin(nitro);
+      await pagesPlugin(nitro);
+      await ssgPlugin(nitro);
+    },
+  },
+
+  compatibilityDate: '2025-01-01',
+
+  routeRules: {
+    '/_litro/**': {
+      headers: { 'cache-control': 'public, max-age=31536000, immutable' },
+    },
+  },
+});

package/dist/recipes/11ty-blog/template/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#litro/page-manifest": "./server/stubs/page-manifest.ts"
+  },
+  "scripts": {
+    "dev": "litro dev",
+    "build": "litro build",
+    "preview": "litro preview",
+    "generate": "litro generate"
+  },
+  "dependencies": {
+    "@beatzball/litro": "latest",
+    "lit": "^3.2.1",
+    "@lit-labs/ssr": "^3.3.0",
+    "@lit-labs/ssr-client": "^1.1.7",
+    "h3": "^1.13.0"
+  },
+  "devDependencies": {
+    "nitropack": "^2.10.4",
+    "vite": "^5.4.11",
+    "typescript": "^5.7.3"
+  }
+}

package/dist/recipes/11ty-blog/template/pages/blog/[slug].ts

@@ -0,0 +1,65 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { customElement, state } from 'lit/decorators.js';
+import { LitroPage } from '@beatzball/litro/runtime';
+import { definePageData } from '@beatzball/litro';
+import { createError } from 'h3';
+import type { Post } from 'litro:content';
+import { getPost, getPosts } from 'litro:content';
+
+export interface PostData {
+  post: Post;
+}
+
+function toDate(d: Date | string): Date { return d instanceof Date ? d : new Date(d as string); }
+
+export const pageData = definePageData(async (event) => {
+  const slug = event.context.params?.slug ?? '';
+  const post = await getPost(slug);
+  if (!post) {
+    throw createError({ statusCode: 404, message: `Post not found: ${slug}` });
+  }
+  return { post } satisfies PostData;
+});
+
+export async function generateRoutes(): Promise<string[]> {
+  const posts = await getPosts();
+  return posts.map(post => post.url);
+}
+
+@customElement('page-blog-slug')
+export class BlogPostPage extends LitroPage {
+  @state() declare serverData: PostData | null;
+
+  render() {
+    const { post } = this.serverData ?? {};
+    if (!post) return html`<p>Loading…</p>`;
+    return html`
+      <article>
+        <header>
+          <h1>${post.title}</h1>
+          <time datetime="${toDate(post.date).toISOString()}">${toDate(post.date).toLocaleDateString()}</time>
+          ${post.tags.length > 0 ? html`
+            <ul class="tags">
+              ${post.tags.map(tag => html`
+                <li><a href="/tags/${tag}">#${tag}</a></li>
+              `)}
+            </ul>
+          ` : ''}
+        </header>
+        <div class="post-body">
+          <!-- unsafeHTML renders the Markdown-generated HTML directly.
+               The content directory is trusted-author-only; do not place
+               user-submitted or untrusted content here without first
+               sanitizing with a library such as rehype-sanitize. -->
+          ${unsafeHTML(post.body)}
+        </div>
+        <footer>
+          <a href="/blog">← Back to Blog</a>
+        </footer>
+      </article>
+    `;
+  }
+}
+
+export default BlogPostPage;