npm - create-ampless - Versions diffs - 0.2.0-alpha.0 - Mend

create-ampless 0.2.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/dist/templates/blog/pages/tag.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, parseLinkList, 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 BlogTag({ 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()
+  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.home')}</Link>
+        </nav>
+        <header className="mb-12 border-b pb-6">
+          <p className="text-sm text-gray-500">{t('public.tagLabel')}</p>
+          <h1 className="text-4xl font-bold tracking-tight">#{decodedTag}</h1>
+        </header>
+        <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>
+            </li>
+          ))}
+        </ul>
+      </main>
+      {showFooter && (
+        <SiteFooter
+          links={theme.values.footerLinks}
+          legend={
+            <span>
+              © {new Date().getFullYear()} {settings.site.name}
+            </span>
+          }
+        />
+      )}
+    </>
+  )
+}

package/dist/templates/blog/tokens.css ADDED Viewed

@@ -0,0 +1,54 @@
+/* Blog theme tokens.
+ *
+ * Each variable is namespaced under [data-theme="blog"] so that all
+ * installed themes can coexist in the bundle and `<body data-theme=...>`
+ * picks which set actually wins. The active theme's `theme.manifest.ts`
+ * runtime overrides come in as inline `:root { ... }` after this file
+ * loads, so `:root` selectors trump scoped attribute selectors of
+ * equal specificity. The dispatcher emits `--primary` etc. only for
+ * fields that have an override, leaving everything else to fall back
+ * to these defaults. */
+[data-theme='blog'] {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.5rem;
+  --ampless-body-font: system-ui, -apple-system, sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme='blog'] {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.145 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.396 0.141 25.723);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.439 0 0);
+  }
+}

package/dist/templates/corporate/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+# {{siteName}}
+Corporate / company-site theme: navy on near-white, hero + news layout, header + footer navigation.
+## Customizing
+In `/admin/sites/<siteId>/theme`:
+- Tagline (small line above the site name in the hero)
+- Header navigation (label + URL pairs)
+- Footer links + legend (address / company info / extra small print)
+- Primary color, corner radius
+## Getting started
+```bash
+npm install
+npx ampx sandbox
+npm run dev
+```

package/dist/templates/corporate/index.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { defineThemeModule } from 'ampless'
+import './tokens.css'
+import manifest from './manifest'
+import CorporateHome from './pages/home'
+import CorporatePost, { generatePostMetadata } from './pages/post'
+import CorporateTag from './pages/tag'
+import { corporateFeedHandler } from './pages/feed'
+import { corporateSitemapHandler } from './pages/sitemap'
+export default defineThemeModule({
+  name: 'corporate',
+  manifest,
+  components: {
+    Home: CorporateHome,
+    Post: CorporatePost,
+    Tag: CorporateTag,
+  },
+  metadata: {
+    Post: generatePostMetadata,
+  },
+  routes: {
+    feed: corporateFeedHandler,
+    sitemap: corporateSitemapHandler,
+  },
+})

package/dist/templates/corporate/manifest.ts ADDED Viewed

@@ -0,0 +1,94 @@
+import { defineTheme } from 'ampless'
+// Corporate theme manifest. Conservative blue/slate palette with
+// header + footer nav, an optional tagline, and a "news" section
+// driven by published posts.
+export default defineTheme({
+  name: 'corporate',
+  label: { en: 'Corporate', ja: 'コーポレート' },
+  description: {
+    en: 'Conservative business / company-site layout with hero and news section.',
+    ja: '企業サイト向けの落ち着いたレイアウト。ヒーローとお知らせ一覧を併設。',
+  },
+  fields: [
+    {
+      key: 'tagline',
+      label: { en: 'Tagline', ja: 'タグライン' },
+      group: { en: 'Hero', ja: 'ヒーロー' },
+      type: 'text',
+      default: '',
+      maxLength: 120,
+      description: {
+        en: 'Short phrase shown above the site name in the hero.',
+        ja: 'ヒーロー内、サイト名の上に表示される短いフレーズ。',
+      },
+    },
+    {
+      key: 'primary',
+      label: { en: 'Primary color', ja: 'プライマリカラー' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.4 0.13 250)',
+      cssVar: '--primary',
+    },
+    {
+      key: 'radius',
+      label: { en: 'Corner radius', ja: '角丸' },
+      group: { en: 'Shape', ja: '形状' },
+      type: 'length',
+      default: '0.25rem',
+      cssVar: '--radius',
+    },
+    {
+      key: 'featuredSlug',
+      label: { en: 'Top story slug', ja: 'トップストーリーのスラッグ' },
+      group: { en: 'Hero', ja: 'ヒーロー' },
+      type: 'text',
+      default: '',
+      maxLength: 200,
+      description: {
+        en: 'Slug of a published post to feature between the hero and the news list. Empty disables.',
+        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,
+    },
+    {
+      key: 'footerLinks',
+      label: { en: 'Footer links', ja: 'フッターリンク' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'linkList',
+      default: [],
+      maxItems: 16,
+    },
+    {
+      key: 'footerLegend',
+      label: { en: 'Footer legend', ja: 'フッター注記' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'text',
+      default: '',
+      maxLength: 200,
+      description: {
+        en: 'Address / company info / extra small print below footer links.',
+        ja: '住所や会社情報、フッター下部の細字。',
+      },
+    },
+  ],
+})

package/dist/templates/corporate/pages/feed.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import { publicAssetUrl } from '@/lib/storage'
+interface Ctx {
+  siteId: string
+  request: Request
+}
+export async function corporateFeedHandler({ 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/corporate/pages/home.tsx ADDED Viewed

@@ -0,0 +1,130 @@
+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'
+export default async function CorporateHome({ params }: ThemeRouteContext) {
+  const { siteId } = await params
+  const [settings, theme, postsResult] = await Promise.all([
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+    listPublishedPosts({ siteId, limit: 8 }),
+  ])
+  // Top-story embed between hero and news. Filtered out of news to
+  // avoid duplication. Skipped silently if missing / unpublished.
+  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 tagline = theme.values.tagline?.trim()
+  const footerLegend = theme.values.footerLegend?.trim()
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="text-lg font-semibold tracking-tight"
+      />
+      <main>
+        <section className="border-b bg-[var(--secondary)] px-6 py-16">
+          <div className="mx-auto max-w-4xl">
+            {tagline && (
+              <p className="text-sm font-medium uppercase tracking-wider text-[var(--primary)]">
+                {tagline}
+              </p>
+            )}
+            <h1 className="mt-2 text-4xl font-bold tracking-tight sm:text-5xl">
+              {settings.site.name}
+            </h1>
+            {settings.site.description && (
+              <p className="mt-4 max-w-2xl text-lg text-[var(--muted-foreground)]">
+                {settings.site.description}
+              </p>
+            )}
+          </div>
+        </section>
+        {featured && (
+          <section className="mx-auto max-w-4xl px-6 py-16">
+            <article>
+              <p className="mb-2 text-xs font-medium uppercase tracking-wider text-[var(--primary)]">
+                Top story
+              </p>
+              <h2 className="text-3xl font-bold tracking-tight">
+                <Link href={`/${featured.slug}`} className="hover:text-[var(--primary)]">
+                  {featured.title}
+                </Link>
+              </h2>
+              {featured.publishedAt && (
+                <time
+                  dateTime={featured.publishedAt}
+                  className="mt-2 block font-mono text-xs text-[var(--muted-foreground)]"
+                >
+                  {formatDate(featured.publishedAt, settings.dateFormat, settings.timezone)}
+                </time>
+              )}
+              <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-4xl px-6 py-16">
+            <h2 className="mb-8 border-l-4 border-[var(--primary)] pl-4 text-2xl font-bold">
+              News
+            </h2>
+            <ul className="divide-y border-t border-b">
+              {posts.map((post) => (
+                <li key={post.postId} className="py-5">
+                  <Link
+                    href={`/${post.slug}`}
+                    className="group flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-6"
+                  >
+                    {post.publishedAt && (
+                      <time
+                        dateTime={post.publishedAt}
+                        className="font-mono text-xs text-[var(--muted-foreground)] sm:w-28 sm:shrink-0"
+                      >
+                        {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                      </time>
+                    )}
+                    <span className="flex-1 text-base font-medium group-hover:text-[var(--primary)]">
+                      {post.title}
+                    </span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </main>
+      <SiteFooter
+        links={theme.values.footerLinks}
+        legend={
+          <div className="space-y-1">
+            {footerLegend && <p>{footerLegend}</p>}
+            <p>
+              © {new Date().getFullYear()} {settings.site.name}
+            </p>
+          </div>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/corporate/pages/post.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+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 CorporatePost({ 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 footerLegend = theme.values.footerLegend?.trim()
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="text-lg font-semibold tracking-tight"
+      />
+      <main className="mx-auto max-w-3xl px-6 py-12">
+        <nav className="mb-6">
+          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--primary)]">
+            {t('public.back')}
+          </Link>
+        </nav>
+        <article>
+          <header className="mb-8 border-b pb-6">
+            <h1 className="text-3xl font-bold tracking-tight">{post.title}</h1>
+            {post.publishedAt && (
+              <time
+                dateTime={post.publishedAt}
+                className="mt-2 block font-mono text-xs 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-8 border-t pt-6" />
+        </article>
+        <LightboxBinder scopeSelector="#post-body" defaultLightbox={defaultLightbox} />
+      </main>
+      <SiteFooter
+        links={theme.values.footerLinks}
+        legend={
+          <div className="space-y-1">
+            {footerLegend && <p>{footerLegend}</p>}
+            <p>
+              © {new Date().getFullYear()} {settings.site.name}
+            </p>
+          </div>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/corporate/pages/sitemap.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { publicAssetUrl } from '@/lib/storage'
+interface Ctx {
+  siteId: string
+  request: Request
+}
+export async function corporateSitemapHandler({ 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/corporate/pages/tag.tsx ADDED Viewed

@@ -0,0 +1,81 @@
+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 CorporateTag({ 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()
+  const footerLegend = theme.values.footerLegend?.trim()
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="text-lg font-semibold tracking-tight"
+      />
+      <main className="mx-auto max-w-4xl px-6 py-12">
+        <nav className="mb-6">
+          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--primary)]">
+            {t('public.home')}
+          </Link>
+        </nav>
+        <header className="mb-10">
+          <p className="text-sm text-[var(--muted-foreground)]">{t('public.tagLabel')}</p>
+          <h1 className="text-3xl font-bold tracking-tight">#{decodedTag}</h1>
+        </header>
+        <ul className="divide-y border-t border-b">
+          {posts.map((post) => (
+            <li key={post.postId} className="py-5">
+              <Link
+                href={`/${post.slug}`}
+                className="group flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-6"
+              >
+                {post.publishedAt && (
+                  <time
+                    dateTime={post.publishedAt}
+                    className="font-mono text-xs text-[var(--muted-foreground)] sm:w-28 sm:shrink-0"
+                  >
+                    {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                  </time>
+                )}
+                <span className="flex-1 text-base font-medium group-hover:text-[var(--primary)]">
+                  {post.title}
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </main>
+      <SiteFooter
+        links={theme.values.footerLinks}
+        legend={
+          <div className="space-y-1">
+            {footerLegend && <p>{footerLegend}</p>}
+            <p>
+              © {new Date().getFullYear()} {settings.site.name}
+            </p>
+          </div>
+        }
+      />
+    </>
+  )
+}