create-ampless 0.2.0-alpha.0

package/dist/templates/_shared/middleware.ts

@@ -0,0 +1,13 @@
+// Public-site middleware. Implementation moved to `@ampless/runtime`
+// (L1 extraction); this file wires the project's `cms.config` into
+// the factory and re-exports the default matcher.
+//
+// See `@ampless/runtime/middleware` for behaviour details: multi-site
+// host rewrite, `<slug>.html` → raw route, `?previewTheme=` header
+// forwarding, multi-site Cache-Control override.
+
+import cmsConfig from './cms.config'
+import { createAmplessMiddleware, defaultMatcherConfig } from '@ampless/runtime/middleware'
+
+export const middleware = createAmplessMiddleware({ cmsConfig })
+export const config = defaultMatcherConfig

package/dist/templates/_shared/next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: '*.s3.amazonaws.com' },
+      { protocol: 'https', hostname: '*.amazonaws.com' },
+    ],
+  },
+}
+
+export default nextConfig

package/dist/templates/_shared/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "sandbox": "ampx sandbox"
+  },
+  "dependencies": {
+    "@aws-amplify/adapter-nextjs": "^1.6.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@tiptap/extension-image": "^2.10.4",
+    "@tiptap/extension-link": "^2.10.4",
+    "@tiptap/pm": "^2.10.4",
+    "@tiptap/react": "^2.10.4",
+    "@tiptap/starter-kit": "^2.10.4",
+    "@ampless/plugin-og-image": "^0.2.0-alpha.0",
+    "@ampless/plugin-rss": "^0.2.0-alpha.0",
+    "@ampless/plugin-seo": "^0.2.0-alpha.0",
+    "@ampless/plugin-webhook": "^0.2.0-alpha.0",
+    "@ampless/admin": "^0.2.0-alpha.0",
+    "@ampless/backend": "^0.2.0-alpha.0",
+    "@ampless/runtime": "^0.2.0-alpha.0",
+    "@digital-go-jp/tailwind-theme-plugin": "^0.3.4",
+    "ampless": "^0.2.0-alpha.0",
+    "aws-amplify": "^6.10.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-image-crop": "^11.0.7",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@aws-amplify/backend": "^1.13.0",
+    "@aws-amplify/backend-cli": "^1.4.0",
+    "@aws-sdk/client-appsync": "^3.717.0",
+    "@aws-sdk/client-cognito-identity-provider": "^3.717.0",
+    "@aws-sdk/client-dynamodb": "^3.717.0",
+    "@aws-sdk/client-s3": "^3.717.0",
+    "@aws-sdk/client-sqs": "^3.717.0",
+    "@aws-sdk/lib-dynamodb": "^3.717.0",
+    "@aws-sdk/util-dynamodb": "^3.717.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/aws-lambda": "^8.10.147",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "aws-cdk-lib": "^2.174.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/dist/templates/_shared/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/dist/templates/_shared/themes-registry.ts

@@ -0,0 +1,38 @@
+// Generated by create-ampless. Lists every theme installed under
+// `themes/<name>/`. Adding a theme = drop a directory under themes/,
+// add an import + map entry below, and redeploy.
+//
+// `theme.active` (per-site, in KvStore) picks which theme renders for
+// each request; everything listed here gets bundled so switching is
+// instant.
+//
+// This shared placeholder lists every default theme so the file
+// compiles inside _shared/. The scaffold rewrites it at install time
+// to import only the themes the user picked.
+
+import blog from '@/themes/blog'
+import minimal from '@/themes/minimal'
+import landing from '@/themes/landing'
+import corporate from '@/themes/corporate'
+import docs from '@/themes/docs'
+import dads from '@/themes/dads'
+
+export const themes = {
+  blog,
+  minimal,
+  landing,
+  corporate,
+  docs,
+  dads,
+} as const
+
+export type ThemeName = keyof typeof themes
+
+export const themeList = Object.values(themes)
+
+/**
+ * Default theme used when a site has no `theme.active` override.
+ * Falls back to the first registered theme so an empty registry would
+ * still surface a clear runtime error rather than silent breakage.
+ */
+export const DEFAULT_THEME: ThemeName = (themeList[0]?.name as ThemeName) ?? 'blog'

package/dist/templates/_shared/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/templates/blog/README.md

@@ -0,0 +1,52 @@
+# {{siteName}}
+
+A blog site powered by [ampless](https://github.com/heavymoons/ampless).
+
+## 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/blog/index.ts

@@ -0,0 +1,29 @@
+import { defineThemeModule } from 'ampless'
+import './tokens.css'
+import manifest from './manifest'
+import BlogHome from './pages/home'
+import BlogPost, { generatePostMetadata } from './pages/post'
+import BlogTag from './pages/tag'
+import { blogFeedHandler } from './pages/feed'
+import { blogSitemapHandler } from './pages/sitemap'
+
+// `tokens.css` is imported as a side-effect so Next.js bundles it
+// whenever the theme registry pulls this module in. Multiple themes
+// can ship their own tokens.css side-by-side; only the active theme's
+// `[data-theme="<name>"]` selector matches at runtime.
+export default defineThemeModule({
+  name: 'blog',
+  manifest,
+  components: {
+    Home: BlogHome,
+    Post: BlogPost,
+    Tag: BlogTag,
+  },
+  metadata: {
+    Post: generatePostMetadata,
+  },
+  routes: {
+    feed: blogFeedHandler,
+    sitemap: blogSitemapHandler,
+  },
+})

package/dist/templates/blog/manifest.ts

@@ -0,0 +1,144 @@
+import { defineTheme } from 'ampless'
+
+// Customizable fields for the Blog theme. Edit values in
+// `/admin/sites/<siteId>/theme` — they're stored in KvStore and applied
+// at render time as CSS variables on every public page.
+//
+// Labels / descriptions / groups accept either a plain string (works in
+// any locale) or a `Record<locale, string>` map. The defaults ship in
+// English + Japanese; custom themes can mix both forms.
+export default defineTheme({
+  name: 'blog',
+  label: { en: 'Blog', ja: 'ブログ' },
+  description: {
+    en: 'Neutral monochrome with shadcn/ui defaults.',
+    ja: 'シャドCN/UIのデフォルトに準じたニュートラル系モノクロ。',
+  },
+  fields: [
+    {
+      key: 'primary',
+      label: { en: 'Primary color', ja: 'プライマリカラー' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.205 0 0)',
+      cssVar: '--primary',
+      description: {
+        en: 'Buttons, links, accent fills.',
+        ja: 'ボタン、リンク、強調表示の背景色。',
+      },
+    },
+    {
+      key: 'accent',
+      label: { en: 'Accent color', ja: 'アクセントカラー' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.97 0 0)',
+      cssVar: '--accent',
+    },
+    {
+      key: 'ring',
+      label: { en: 'Focus ring', ja: 'フォーカスリング' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.708 0 0)',
+      cssVar: '--ring',
+    },
+    {
+      key: 'destructive',
+      label: { en: 'Destructive', ja: '破壊的操作' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.577 0.245 27.325)',
+      cssVar: '--destructive',
+      description: {
+        en: 'Delete buttons and error highlights.',
+        ja: '削除ボタンやエラー表示の色。',
+      },
+    },
+    {
+      key: 'radius',
+      label: { en: 'Corner radius', ja: '角丸' },
+      group: { en: 'Shape', ja: '形状' },
+      type: 'length',
+      default: '0.5rem',
+      cssVar: '--radius',
+      description: {
+        en: 'Border radius for cards, buttons, inputs.',
+        ja: 'カード、ボタン、入力欄の角丸。',
+      },
+    },
+    {
+      key: 'bodyFont',
+      label: { en: 'Body font', ja: '本文フォント' },
+      group: { en: 'Typography', ja: 'タイポグラフィ' },
+      type: 'fontFamily',
+      default: 'system-ui, -apple-system, sans-serif',
+      cssVar: '--ampless-body-font',
+      options: [
+        {
+          value: 'system-ui, -apple-system, sans-serif',
+          label: { en: 'System sans', ja: 'システムサンセリフ' },
+        },
+        {
+          value: 'Georgia, "Times New Roman", serif',
+          label: { en: 'Serif (Georgia)', ja: 'セリフ (Georgia)' },
+        },
+        {
+          value: '"Iowan Old Style", "Apple Garamond", serif',
+          label: { en: 'Serif (Iowan)', ja: 'セリフ (Iowan)' },
+        },
+        {
+          value: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+          label: { en: 'Monospace', ja: '等幅' },
+        },
+      ],
+    },
+    {
+      key: 'featuredSlug',
+      label: { en: 'Featured post slug', ja: 'トップに固定する記事のスラッグ' },
+      group: { en: 'Home', ja: 'トップページ' },
+      type: 'text',
+      default: '',
+      maxLength: 200,
+      description: {
+        en: 'Slug of a published post to pin at the top of the home page. The post is rendered inline above the post list and removed from the regular feed to avoid duplication. Empty disables the feature.',
+        ja: 'トップページ先頭に固定したい公開記事のスラッグ。指定すると本文がインラインで描画され、通常の一覧からは除外されます。空なら無効。',
+      },
+    },
+    {
+      key: 'logoUrl',
+      label: { en: 'Logo image URL', ja: 'ロゴ画像 URL' },
+      group: { en: 'Branding', ja: 'ブランディング' },
+      type: 'image',
+      default: '',
+      description: {
+        en: 'URL or media path. Empty falls back to the site name as text.',
+        ja: '画像 URL またはメディアパス。空欄ならサイト名がテキスト表示されます。',
+      },
+    },
+    {
+      key: 'headerNav',
+      label: { en: 'Header navigation', ja: 'ヘッダーナビ' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'linkList',
+      default: [],
+      maxItems: 8,
+      description: {
+        en: 'Optional. When empty and no logo is set, the header is omitted entirely.',
+        ja: '任意。空かつロゴ未設定の場合はヘッダー自体が表示されません。',
+      },
+    },
+    {
+      key: 'footerLinks',
+      label: { en: 'Footer links', ja: 'フッターリンク' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'linkList',
+      default: [],
+      maxItems: 12,
+      description: {
+        en: 'Optional. When empty and no copyright text exists, the footer is omitted.',
+        ja: '任意。空の場合はフッター自体が省略されます。',
+      },
+    },
+  ],
+})

package/dist/templates/blog/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 blogFeedHandler({ 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/blog/pages/home.tsx

@@ -0,0 +1,108 @@
+import Link from 'next/link'
+import { formatDate, parseLinkList, 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 { TagList } from '@/components/tag-list'
+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 BlogHome({ params }: ThemeRouteContext) {
+  const { siteId } = await params
+  const [settings, theme, postsResult] = await Promise.all([
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+    listPublishedPosts({ siteId }),
+  ])
+
+  // Featured (pinned) post: render the body inline above the list,
+  // then drop the same slug from the feed so it doesn't show twice.
+  // Missing / unpublished slugs return null and the section is skipped.
+  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 showHeader =
+    parseLinkList(theme.values.headerNav).length > 0 || !!theme.values.logoUrl?.trim()
+  const showFooter = parseLinkList(theme.values.footerLinks).length > 0
+
+  return (
+    <>
+      {showHeader && (
+        <SiteHeader
+          links={theme.values.headerNav}
+          logoUrl={theme.values.logoUrl}
+          siteName={settings.site.name}
+          brandClassName="font-semibold hover:underline"
+        />
+      )}
+
+      <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>
+
+        {featured && (
+          <article className="mb-12 rounded-lg border bg-[var(--card)] p-6">
+            <Link href={`/${featured.slug}`} className="group">
+              <h2 className="text-2xl font-semibold group-hover:underline">{featured.title}</h2>
+              {featured.publishedAt && (
+                <time
+                  dateTime={featured.publishedAt}
+                  className="mt-1 block text-sm text-gray-500"
+                >
+                  {formatDate(featured.publishedAt, settings.dateFormat, settings.timezone)}
+                </time>
+              )}
+            </Link>
+            <div
+              className="prose prose-neutral dark:prose-invert mt-4 max-w-none"
+              dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
+            />
+          </article>
+        )}
+
+        {posts.length === 0 ? (
+          !featured && <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>
+
+      {showFooter && (
+        <SiteFooter
+          links={theme.values.footerLinks}
+          legend={
+            <span>
+              © {new Date().getFullYear()} {settings.site.name}
+            </span>
+          }
+        />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,94 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, parseLinkList, 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 BlogPost({ 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,
+  }
+  const showHeader =
+    parseLinkList(theme.values.headerNav).length > 0 || !!theme.values.logoUrl?.trim()
+  const showFooter = parseLinkList(theme.values.footerLinks).length > 0
+
+  return (
+    <>
+      {showHeader && (
+        <SiteHeader
+          links={theme.values.headerNav}
+          logoUrl={theme.values.logoUrl}
+          siteName={settings.site.name}
+          brandClassName="font-semibold hover:underline"
+        />
+      )}
+
+      <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>
+
+      {showFooter && (
+        <SiteFooter
+          links={theme.values.footerLinks}
+          legend={
+            <span>
+              © {new Date().getFullYear()} {settings.site.name}
+            </span>
+          }
+        />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { publicAssetUrl } from '@/lib/storage'
+
+interface Ctx {
+  siteId: string
+  request: Request
+}
+
+// /sitemap.xml proxy — plugin-seo regenerates the sitemap on every
+// content event and writes it to `public/plugins/seo/{siteId}/sitemap.xml`.
+export async function blogSitemapHandler({ 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',
+    },
+  })
+}