create-ampless 0.2.0-alpha.0

package/dist/templates/landing/pages/feed.ts

@@ -0,0 +1,31 @@
+import { publicAssetUrl } from '@/lib/storage'
+
+interface Ctx {
+  siteId: string
+  request: Request
+}
+
+// /feed.xml proxy — plugin-rss writes the feed to
+// `public/plugins/rss/{siteId}/feed.xml`. Same flow as the blog theme.
+export async function landingFeedHandler({ siteId }: Ctx): Promise<Response> {
+  const url = publicAssetUrl(`public/plugins/rss/${siteId}/feed.xml`)
+  const upstream = await fetch(url, { cache: 'no-store' })
+  if (!upstream.ok) {
+    return new Response(
+      `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0"><channel></channel></rss>\n`,
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/rss+xml; charset=utf-8',
+          'Cache-Control': 'public, max-age=60',
+        },
+      }
+    )
+  }
+  return new Response(upstream.body, {
+    headers: {
+      'Content-Type': 'application/rss+xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=300',
+    },
+  })
+}

package/dist/templates/landing/pages/home.tsx

@@ -0,0 +1,123 @@
+import Link from 'next/link'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { listPublishedPosts, getPublishedPost } from '@/lib/posts-public'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { loadThemeConfig } from '@/lib/theme-config'
+import { renderBody } from '@/lib/posts'
+import { SiteHeader } from '@/components/site-chrome/site-header'
+import { SiteFooter } from '@/components/site-chrome/site-footer'
+
+// Hero-led landing layout: big headline + subhead + CTA, then an
+// optional "Latest" grid sourced from published posts. Falls back to
+// site name / description when the manifest hero fields are empty.
+export default async function LandingHome({ params }: ThemeRouteContext) {
+  const { siteId } = await params
+  const [settings, theme, postsResult] = await Promise.all([
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+    listPublishedPosts({ siteId, limit: 6 }),
+  ])
+
+  // Featured embed below the hero — typical use is a short "About"
+  // or "Welcome" article. Filtered out of the Latest grid below to
+  // avoid showing the same post twice.
+  const featuredSlug = theme.values.featuredSlug?.trim()
+  const featured = featuredSlug
+    ? await getPublishedPost(featuredSlug, { siteId })
+    : null
+  const posts = featured
+    ? postsResult.items.filter((p) => p.slug !== featured.slug)
+    : postsResult.items
+
+  const headline = theme.values.heroHeadline?.trim() || settings.site.name
+  const subheadline =
+    theme.values.heroSubheadline?.trim() || settings.site.description || ''
+  const ctaText = theme.values.ctaText?.trim() || ''
+  const ctaUrl = theme.values.ctaUrl?.trim() || '#'
+
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="font-semibold hover:text-[var(--primary)]"
+      />
+
+      <main>
+        <section className="bg-gradient-to-b from-[var(--accent)] to-[var(--background)] px-6 py-24 text-center">
+          <div className="mx-auto max-w-3xl">
+            <h1 className="text-5xl font-bold tracking-tight sm:text-6xl">{headline}</h1>
+            {subheadline && (
+              <p className="mt-6 text-xl text-[var(--muted-foreground)]">{subheadline}</p>
+            )}
+            {ctaText && (
+              <div className="mt-10">
+                <Link
+                  href={ctaUrl}
+                  className="inline-block rounded-[var(--radius)] bg-[var(--primary)] px-8 py-3 text-lg font-medium text-[var(--primary-foreground)] transition hover:opacity-90"
+                >
+                  {ctaText}
+                </Link>
+              </div>
+            )}
+          </div>
+        </section>
+
+        {featured && (
+          <section className="mx-auto max-w-3xl px-6 py-16">
+            <article>
+              <h2 className="text-3xl font-bold tracking-tight">{featured.title}</h2>
+              <div
+                className="prose prose-neutral dark:prose-invert mt-6 max-w-none"
+                dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
+              />
+            </article>
+          </section>
+        )}
+
+        {posts.length > 0 && (
+          <section className="mx-auto max-w-5xl px-6 py-16">
+            <h2 className="mb-8 text-3xl font-bold">Latest</h2>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {posts.map((post) => (
+                <article
+                  key={post.postId}
+                  className="rounded-[var(--radius)] border bg-[var(--card)] p-6 transition hover:shadow-lg"
+                >
+                  <Link href={`/${post.slug}`} className="block">
+                    <h3 className="text-lg font-semibold leading-tight hover:underline">
+                      {post.title}
+                    </h3>
+                    {post.publishedAt && (
+                      <time
+                        dateTime={post.publishedAt}
+                        className="mt-2 block text-xs text-[var(--muted-foreground)]"
+                      >
+                        {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                      </time>
+                    )}
+                    {post.excerpt && (
+                      <p className="mt-3 text-sm text-[var(--muted-foreground)] line-clamp-3">
+                        {post.excerpt}
+                      </p>
+                    )}
+                  </Link>
+                </article>
+              ))}
+            </div>
+          </section>
+        )}
+      </main>
+
+      <SiteFooter
+        links={theme.values.footerLinks}
+        legend={
+          <span>
+            © {new Date().getFullYear()} {settings.site.name}
+          </span>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/landing/pages/post.tsx

@@ -0,0 +1,95 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { renderBody } from '@/lib/posts'
+import { LightboxBinder } from '@/components/lightbox-content'
+import { TagList } from '@/components/tag-list'
+import { postMetadata } from '@/lib/seo'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { loadThemeConfig } from '@/lib/theme-config'
+import { getPublishedPost } from '@/lib/posts-public'
+import { SiteHeader } from '@/components/site-chrome/site-header'
+import { SiteFooter } from '@/components/site-chrome/site-footer'
+import { t } from '@/lib/i18n'
+
+type PostCtx = ThemeRouteContext<{ slug: string }>
+
+export async function generatePostMetadata({ params }: PostCtx): Promise<Metadata> {
+  const { siteId, slug } = await params
+  const post = await getPublishedPost(slug, { siteId })
+  if (!post) return {}
+  return postMetadata(post, siteId)
+}
+
+export default async function LandingPost({ params }: PostCtx) {
+  const { siteId, slug } = await params
+  const [post, settings, theme] = await Promise.all([
+    getPublishedPost(slug, { siteId }),
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+  ])
+  if (!post) notFound()
+
+  const defaultLightbox = settings.media.imageDisplay === 'lightbox'
+  const maxWidth = settings.media.imageMaxWidth ?? '100%'
+  const proseStyle: React.CSSProperties = {
+    ['--ampless-img-max-width' as string]: maxWidth,
+  }
+
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="font-semibold hover:text-[var(--primary)]"
+      />
+
+      <main className="mx-auto max-w-3xl px-6 py-16">
+        <nav className="mb-10">
+          <Link
+            href="/"
+            className="text-sm text-[var(--muted-foreground)] hover:text-[var(--primary)]"
+          >
+            {t('public.back')}
+          </Link>
+        </nav>
+
+        <article>
+          <header className="mb-10">
+            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{post.title}</h1>
+            {post.publishedAt && (
+              <time
+                dateTime={post.publishedAt}
+                className="mt-3 block text-sm text-[var(--muted-foreground)]"
+              >
+                {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+              </time>
+            )}
+          </header>
+
+          <div
+            id="post-body"
+            className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
+            style={proseStyle}
+            dangerouslySetInnerHTML={{ __html: renderBody(post) }}
+          />
+
+          <TagList tags={post.tags} className="mt-10 border-t pt-6" />
+        </article>
+
+        <LightboxBinder scopeSelector="#post-body" defaultLightbox={defaultLightbox} />
+      </main>
+
+      <SiteFooter
+        links={theme.values.footerLinks}
+        legend={
+          <span>
+            © {new Date().getFullYear()} {settings.site.name}
+          </span>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/landing/pages/sitemap.ts

@@ -0,0 +1,28 @@
+import { publicAssetUrl } from '@/lib/storage'
+
+interface Ctx {
+  siteId: string
+  request: Request
+}
+
+export async function landingSitemapHandler({ siteId }: Ctx): Promise<Response> {
+  const url = publicAssetUrl(`public/plugins/seo/${siteId}/sitemap.xml`)
+  const upstream = await fetch(url, { cache: 'no-store' })
+  if (!upstream.ok) {
+    return new Response(
+      `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"></urlset>\n`,
+      {
+        headers: {
+          'Content-Type': 'application/xml; charset=utf-8',
+          'Cache-Control': 'public, max-age=60',
+        },
+      }
+    )
+  }
+  return new Response(upstream.body, {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=300',
+    },
+  })
+}

package/dist/templates/landing/pages/tag.tsx

@@ -0,0 +1,85 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { listPostsByTag } from '@/lib/posts-public'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { loadThemeConfig } from '@/lib/theme-config'
+import { SiteHeader } from '@/components/site-chrome/site-header'
+import { SiteFooter } from '@/components/site-chrome/site-footer'
+import { t } from '@/lib/i18n'
+
+export default async function LandingTag({ params }: ThemeRouteContext<{ tag: string }>) {
+  const { siteId, tag } = await params
+  const decodedTag = decodeURIComponent(tag)
+  const [{ items: posts }, settings, theme] = await Promise.all([
+    listPostsByTag(decodedTag, { siteId, limit: 50 }),
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+  ])
+
+  if (posts.length === 0) notFound()
+
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="font-semibold hover:text-[var(--primary)]"
+      />
+
+      <main className="mx-auto max-w-5xl px-6 py-16">
+        <nav className="mb-10">
+          <Link
+            href="/"
+            className="text-sm text-[var(--muted-foreground)] hover:text-[var(--primary)]"
+          >
+            {t('public.home')}
+          </Link>
+        </nav>
+
+        <header className="mb-12">
+          <p className="text-sm text-[var(--muted-foreground)]">{t('public.tagLabel')}</p>
+          <h1 className="text-4xl font-bold tracking-tight">#{decodedTag}</h1>
+        </header>
+
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post.postId}
+              className="rounded-[var(--radius)] border bg-[var(--card)] p-6 transition hover:shadow-lg"
+            >
+              <Link href={`/${post.slug}`} className="block">
+                <h2 className="text-lg font-semibold leading-tight hover:underline">
+                  {post.title}
+                </h2>
+                {post.publishedAt && (
+                  <time
+                    dateTime={post.publishedAt}
+                    className="mt-2 block text-xs text-[var(--muted-foreground)]"
+                  >
+                    {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                  </time>
+                )}
+                {post.excerpt && (
+                  <p className="mt-3 text-sm text-[var(--muted-foreground)] line-clamp-3">
+                    {post.excerpt}
+                  </p>
+                )}
+              </Link>
+            </article>
+          ))}
+        </div>
+      </main>
+
+      <SiteFooter
+        links={theme.values.footerLinks}
+        legend={
+          <span>
+            © {new Date().getFullYear()} {settings.site.name}
+          </span>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/landing/tokens.css

@@ -0,0 +1,47 @@
+/* Landing theme tokens — warm coral accent on near-white. Friendly,
+ * marketing-flavored palette intended for hero-led sites. See
+ * templates/blog/tokens.css for the scoped-selector pattern. */
+
+[data-theme='landing'] {
+  --background: oklch(0.99 0.01 60);
+  --foreground: oklch(0.18 0.02 30);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.02 30);
+  --primary: oklch(0.6 0.18 35);
+  --primary-foreground: oklch(0.99 0.005 60);
+  --secondary: oklch(0.96 0.015 50);
+  --secondary-foreground: oklch(0.25 0.04 30);
+  --muted: oklch(0.96 0.015 50);
+  --muted-foreground: oklch(0.5 0.02 40);
+  --accent: oklch(0.95 0.05 35);
+  --accent-foreground: oklch(0.3 0.1 30);
+  --destructive: oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --border: oklch(0.92 0.01 60);
+  --input: oklch(0.92 0.01 60);
+  --ring: oklch(0.6 0.18 35);
+  --radius: 0.75rem;
+  --ampless-body-font: system-ui, -apple-system, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-theme='landing'] {
+    --background: oklch(0.16 0.02 30);
+    --foreground: oklch(0.96 0.01 60);
+    --card: oklch(0.22 0.02 30);
+    --card-foreground: oklch(0.96 0.01 60);
+    --primary: oklch(0.72 0.16 35);
+    --primary-foreground: oklch(0.16 0.02 30);
+    --secondary: oklch(0.28 0.03 30);
+    --secondary-foreground: oklch(0.96 0.01 60);
+    --muted: oklch(0.28 0.03 30);
+    --muted-foreground: oklch(0.7 0.02 40);
+    --accent: oklch(0.32 0.06 30);
+    --accent-foreground: oklch(0.96 0.01 60);
+    --destructive: oklch(0.55 0.22 25);
+    --destructive-foreground: oklch(0.99 0 0);
+    --border: oklch(0.32 0.03 30);
+    --input: oklch(0.32 0.03 30);
+    --ring: oklch(0.72 0.16 35);
+  }
+}

package/dist/templates/minimal/README.md

@@ -0,0 +1,52 @@
+# {{siteName}}
+
+A blog site powered by [ampless](https://github.com/heavymoons/ampless), using the **Minimal** theme — a soft blue accent on a warm-neutral background, derived from shadcn/ui's color tokens.
+
+## Getting Started
+
+This project uses Amplify Gen 2 for the backend (Cognito, DynamoDB, S3) and Next.js for the frontend.
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Start a personal AWS sandbox (terminal 1)
+#    Requires AWS credentials configured (`aws configure`).
+#    First run takes ~5–10 min to provision resources.
+#    Generates amplify_outputs.json when ready.
+npx ampx sandbox
+
+# 3. Start the Next.js dev server (terminal 2)
+npm run dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000).
+
+## First admin user
+
+Open [http://localhost:3000/login](http://localhost:3000/login) and click **Create admin account**. The first user to register is automatically added to the `ampless-admin` Cognito group.
+
+After that, manage content from `/admin`:
+
+- `/admin` — dashboard
+- `/admin/posts` — list / create / edit posts (tiptap editor)
+- `/admin/media` — upload images to S3
+
+## Production deploy
+
+```bash
+git init && git add . && git commit -m "init"
+git remote add origin <your-repo>
+git push
+# Then connect the repo to AWS Amplify Hosting in the AWS console.
+```
+
+## Customize
+
+- `cms.config.ts` — site name, media delivery mode, plugins
+- `app/` — Next.js App Router pages (`(public)/` for the blog, `(admin)/` for the CMS)
+- `amplify/` — Amplify Gen 2 backend definitions (auth / data / storage)
+
+## Plugins
+
+Enabled: {{plugins}}

package/dist/templates/minimal/index.ts

@@ -0,0 +1,25 @@
+import { defineThemeModule } from 'ampless'
+import './tokens.css'
+import manifest from './manifest'
+import MinimalHome from './pages/home'
+import MinimalPost, { generatePostMetadata } from './pages/post'
+import MinimalTag from './pages/tag'
+import { minimalFeedHandler } from './pages/feed'
+import { minimalSitemapHandler } from './pages/sitemap'
+
+export default defineThemeModule({
+  name: 'minimal',
+  manifest,
+  components: {
+    Home: MinimalHome,
+    Post: MinimalPost,
+    Tag: MinimalTag,
+  },
+  metadata: {
+    Post: generatePostMetadata,
+  },
+  routes: {
+    feed: minimalFeedHandler,
+    sitemap: minimalSitemapHandler,
+  },
+})

package/dist/templates/minimal/manifest.ts

@@ -0,0 +1,35 @@
+import { defineTheme } from 'ampless'
+
+// Minimal theme: smaller customization surface than Blog by design.
+// Minimal is opinionated about typography and spacing, so only the
+// accent color and corner radius are exposed.
+export default defineTheme({
+  name: 'minimal',
+  label: { en: 'Minimal', ja: 'ミニマル' },
+  description: {
+    en: 'Soft blue accent on warm-neutral background.',
+    ja: '暖色系ニュートラル地にソフトブルーをアクセントとした構成。',
+  },
+  fields: [
+    {
+      key: 'primary',
+      label: { en: 'Primary color', ja: 'プライマリカラー' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.55 0.18 250)',
+      cssVar: '--primary',
+      description: {
+        en: 'Buttons, links, accent fills.',
+        ja: 'ボタン、リンク、強調表示の背景色。',
+      },
+    },
+    {
+      key: 'radius',
+      label: { en: 'Corner radius', ja: '角丸' },
+      group: { en: 'Shape', ja: '形状' },
+      type: 'length',
+      default: '0.375rem',
+      cssVar: '--radius',
+    },
+  ],
+})

package/dist/templates/minimal/pages/feed.ts

@@ -0,0 +1,31 @@
+import { publicAssetUrl } from '@/lib/storage'
+
+interface Ctx {
+  siteId: string
+  request: Request
+}
+
+// /feed.xml proxy — plugin-rss regenerates the feed on content events
+// and writes it to `public/plugins/rss/{siteId}/feed.xml`.
+export async function minimalFeedHandler({ siteId }: Ctx): Promise<Response> {
+  const url = publicAssetUrl(`public/plugins/rss/${siteId}/feed.xml`)
+  const upstream = await fetch(url, { cache: 'no-store' })
+  if (!upstream.ok) {
+    return new Response(
+      `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0"><channel></channel></rss>\n`,
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/rss+xml; charset=utf-8',
+          'Cache-Control': 'public, max-age=60',
+        },
+      }
+    )
+  }
+  return new Response(upstream.body, {
+    headers: {
+      'Content-Type': 'application/rss+xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=300',
+    },
+  })
+}

package/dist/templates/minimal/pages/home.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { listPublishedPosts } from '@/lib/posts-public'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { TagList } from '@/components/tag-list'
+import { t } from '@/lib/i18n'
+
+export default async function MinimalHome({ params }: ThemeRouteContext) {
+  const { siteId } = await params
+  const settings = await loadSiteSettings(siteId)
+  const { items: posts } = await listPublishedPosts({ siteId })
+
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-12">
+      <header className="mb-12 border-b pb-6">
+        <h1 className="text-4xl font-bold tracking-tight">{settings.site.name}</h1>
+        {settings.site.description && (
+          <p className="mt-2 text-gray-600">{settings.site.description}</p>
+        )}
+      </header>
+
+      {posts.length === 0 ? (
+        <p className="text-gray-500">{t('public.noPosts')}</p>
+      ) : (
+        <ul className="space-y-8">
+          {posts.map((post) => (
+            <li key={post.postId}>
+              <Link href={`/${post.slug}`} className="block group">
+                <h2 className="text-2xl font-semibold group-hover:underline">{post.title}</h2>
+                {post.publishedAt && (
+                  <time dateTime={post.publishedAt} className="text-sm text-gray-500">
+                    {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                  </time>
+                )}
+                {post.excerpt && <p className="mt-2 text-gray-700">{post.excerpt}</p>}
+              </Link>
+              <TagList tags={post.tags} className="mt-3" />
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  )
+}

package/dist/templates/minimal/pages/post.tsx

@@ -0,0 +1,65 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { renderBody } from '@/lib/posts'
+import { LightboxBinder } from '@/components/lightbox-content'
+import { TagList } from '@/components/tag-list'
+import { postMetadata } from '@/lib/seo'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { getPublishedPost } from '@/lib/posts-public'
+import { t } from '@/lib/i18n'
+
+type PostCtx = ThemeRouteContext<{ slug: string }>
+
+export async function generatePostMetadata({ params }: PostCtx): Promise<Metadata> {
+  const { siteId, slug } = await params
+  const post = await getPublishedPost(slug, { siteId })
+  if (!post) return {}
+  return postMetadata(post, siteId)
+}
+
+export default async function MinimalPost({ params }: PostCtx) {
+  const { siteId, slug } = await params
+  const [post, settings] = await Promise.all([
+    getPublishedPost(slug, { siteId }),
+    loadSiteSettings(siteId),
+  ])
+  if (!post) notFound()
+
+  const defaultLightbox = settings.media.imageDisplay === 'lightbox'
+  const maxWidth = settings.media.imageMaxWidth ?? '100%'
+  const proseStyle: React.CSSProperties = {
+    ['--ampless-img-max-width' as string]: maxWidth,
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-12">
+      <nav className="mb-8">
+        <Link href="/" className="text-sm text-gray-500 hover:underline">{t('public.back')}</Link>
+      </nav>
+
+      <article>
+        <header className="mb-8 border-b pb-6">
+          <h1 className="text-4xl font-bold tracking-tight">{post.title}</h1>
+          {post.publishedAt && (
+            <time dateTime={post.publishedAt} className="mt-2 block text-sm text-gray-500">
+              {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+            </time>
+          )}
+        </header>
+
+        <div
+          id="post-body"
+          className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
+          style={proseStyle}
+          dangerouslySetInnerHTML={{ __html: renderBody(post) }}
+        />
+
+        <TagList tags={post.tags} className="mt-8 border-t pt-6" />
+      </article>
+
+      <LightboxBinder scopeSelector="#post-body" defaultLightbox={defaultLightbox} />
+    </main>
+  )
+}