stack-site-builder 1.14.0 → 1.16.0

package/src/components/CourseDetail.astro

@@ -0,0 +1,116 @@
+---
+import { render, getCollection } from 'astro:content';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { getCourses, courseSlugOf, type CourseEntry } from '../lib/courses';
+import { inlineMd } from '../lib/inline-md';
+import { Image } from 'astro:assets';
+import { useTranslations, type Lang } from '../i18n/ui';
+import { formatDate } from '../lib/dates';
+import { sectionEnabled } from '../lib/sections';
+import MermaidLoader from './MermaidLoader.astro';
+import TocRail from './TocRail.astro';
+import Breadcrumb from './Breadcrumb.astro';
+import DifficultyStars from './DifficultyStars.astro';
+import { courseTree, courseCatOf } from '@aas-data/course-categories';
+import RelatedCourses from './RelatedCourses.astro';
+
+interface Props {
+  entry: CourseEntry;
+  lang: Lang;
+}
+
+const { entry, lang } = Astro.props;
+const t = useTranslations(lang);
+const { Content, headings } = await render(entry);
+const data = entry.data;
+const tocItems = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
+const bodyHasMermaid = (entry.body ?? '').includes('```mermaid');
+
+// Sibling courses linked from frontmatter (mutual cross-links, like concepts).
+const courses = await getCourses(lang);
+const courseBySlug = new Map(courses.map((c) => [courseSlugOf(c), c]));
+const relatedCourses = data.related
+  .map((sl) => courseBySlug.get(sl))
+  .filter(Boolean) as CourseEntry[];
+
+// Decks in the `slides` collection that belong to this course. Only linked when
+// the slides section is enabled (otherwise its routes don't exist) and the deck
+// id actually resolves — a typo just drops the chip instead of a dead link.
+const slideDecks = sectionEnabled('slides') && data.slides.length > 0
+  ? (await getCollection('slides')).filter(
+      (d) => data.slides.includes(d.id) && !d.data.draft,
+    )
+  : [];
+
+// Breadcrumb: All courses › category › subcategory… (each segment linked).
+const crumbs = [
+  { label: t('course.backToCourses'), href: getRelativeLocaleUrl(lang, 'course/') },
+  ...courseTree.pathOf(courseCatOf(data.category)).map((c) => ({
+    label: c.label[lang],
+    href: getRelativeLocaleUrl(lang, `course/category/${c.id}/`),
+  })),
+];
+---
+
+<Breadcrumb segments={crumbs} />
+
+<header class="mt-4 pb-6">
+  <h1 class="text-3xl font-bold tracking-tight">{data.title}</h1>
+  <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--aas-muted)]">
+    {data.level && <DifficultyStars lang={lang} level={data.level} size={14} />}
+    {
+      data.hours && (
+        <span class="inline-flex items-center gap-1" title={t('course.hours')}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          {data.hours}
+        </span>
+      )
+    }
+    {data.version && <span>{t('meta.docVersion')} {data.version}</span>}
+    {
+      data.updated && (
+        <span>
+          {t('course.updated')} {formatDate(data.updated, lang)}
+        </span>
+      )
+    }
+  </p>
+  <p class="mt-2 aas-md text-lg whitespace-pre-line text-[var(--aas-muted)]" set:html={inlineMd(data.description)} />
+  {
+    slideDecks.length > 0 && (
+      <p class="mt-3 flex flex-wrap items-center gap-2">
+        <span class="text-xs font-semibold tracking-wide text-[var(--aas-muted)] uppercase">
+          {t('course.slides')}
+        </span>
+        {slideDecks.map((d) => (
+          <a
+            href={getRelativeLocaleUrl(lang, `slides/${d.id}/`)}
+            class="rounded-full border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-1 text-sm text-[var(--aas-text)] no-underline hover:bg-[var(--aas-tint)]"
+          >
+            {d.data.title}
+          </a>
+        ))}
+      </p>
+    )
+  }
+  {
+    data.image && (
+      <Image
+        src={data.image}
+        alt={data.imageAlt ?? data.title}
+        class="mt-5 aspect-[2/1] w-full rounded-2xl border border-[var(--aas-border)] object-cover"
+      />
+    )
+  }
+</header>
+
+<RelatedCourses lang={lang} courses={relatedCourses} />
+
+<div class="mt-8 flex items-start gap-8">
+  <article class="prose max-w-none aas-reading min-w-0 flex-1">
+    <Content />
+  </article>
+  <TocRail lang={lang} items={tocItems} />
+</div>
+
+{bodyHasMermaid && <MermaidLoader />}

package/src/components/CourseIndex.astro

@@ -0,0 +1,145 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import CourseCard from './CourseCard.astro';
+import Breadcrumb from './Breadcrumb.astro';
+import ListControls from './ListControls.astro';
+import ArrowUpRight from './ArrowUpRight.astro';
+
+const PAGE = 12;
+import { courseTree, courseCatOf } from '@aas-data/course-categories';
+import { getCourses, courseSlugOf, type CourseEntry } from '../lib/courses';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+// Doubles as the course index (no `categoryId` → all courses, grouped by
+// category) and a category browse page (`categoryId` → that category, with a
+// breadcrumb, its direct courses, and a section per subcategory).
+interface Props {
+  lang: Lang;
+  categoryId?: string;
+}
+
+const { lang, categoryId } = Astro.props;
+const t = useTranslations(lang);
+// getCourses() order (manual `order` desc, then date) agrees with the client
+// "recent" comparator over CourseCard's data-date keys — no reflow on load.
+const all = await getCourses(lang);
+const catUrl = (cid: string) => getRelativeLocaleUrl(lang, `course/category/${cid}/`);
+
+const itemsIn = (cid: string): CourseEntry[] => {
+  const ids = new Set(courseTree.descendantIds(cid));
+  return all.filter((c) => ids.has(courseCatOf(c.data.category)));
+};
+
+const node = categoryId ? courseTree.map.get(categoryId) : undefined;
+const sections = node ? courseTree.childrenOf(node.id) : courseTree.roots;
+const direct = node ? all.filter((c) => courseCatOf(c.data.category) === node.id) : [];
+
+// A leaf category page shows one flat list — that grid gets ?page= pagination.
+// Index and parent-category pages stay grouped overviews: each section is
+// capped to PAGE cards with a "see all" link to the fuller list.
+const isLeaf = !!node && sections.length === 0;
+
+const path = node ? courseTree.pathOf(node.id) : [];
+const crumbs = node
+  ? [
+      { label: t('course.backToCourses'), href: getRelativeLocaleUrl(lang, 'course/') },
+      ...path.map((c, i) => ({
+        label: c.label[lang],
+        href: i === path.length - 1 ? undefined : catUrl(c.id),
+      })),
+    ]
+  : [];
+
+const card = (c: CourseEntry) => ({
+  lang,
+  slug: courseSlugOf(c),
+  title: c.data.title,
+  description: c.data.summary ?? c.data.description,
+  tags: c.data.tags,
+  image: c.data.image,
+  imageAlt: c.data.imageAlt,
+  level: c.data.level,
+  hours: c.data.hours,
+  version: c.data.version,
+  date: c.data.date,
+  updated: c.data.updated,
+  order: c.data.order,
+  isPrivate: c.data.private,
+  teaser: c.data.teaser,
+});
+---
+
+{
+  node ? (
+    <>
+      <Breadcrumb segments={crumbs} />
+      <header class="mt-4">
+        <h1 class="text-3xl font-bold tracking-tight">{node.label[lang]}</h1>
+        <p class="mt-2 max-w-2xl text-lg text-[var(--aas-muted)]">
+          {node.detail?.[lang] ?? node.description[lang]}
+        </p>
+      </header>
+    </>
+  ) : (
+    <section class="py-6">
+      <h1 class="text-4xl font-bold tracking-tight">{t('course.title')}</h1>
+      <p class="mt-3 max-w-2xl text-lg text-[var(--aas-muted)]">{t('course.tagline')}</p>
+    </section>
+  )
+}
+
+{all.length === 0 && <p class="mt-8 text-[var(--aas-muted)]">{t('course.empty')}</p>}
+
+{all.length > 0 && <div class="mt-6"><ListControls lang={lang} /></div>}
+
+{
+  direct.length > 0 && (
+    <div
+      class="mt-4 grid gap-5 sm:grid-cols-2 lg:grid-cols-3"
+      data-sortgrid
+      data-paginate={isLeaf ? true : undefined}
+      data-page-size={isLeaf ? PAGE : undefined}
+    >
+      {direct.map((c) => (
+        <CourseCard {...card(c)} />
+      ))}
+    </div>
+  )
+}
+
+{
+  sections.map((cat) => {
+    const items = itemsIn(cat.id);
+    return (
+      items.length > 0 && (
+        <section class="mt-8">
+          <h2 class="text-2xl font-semibold">
+            <a
+              href={catUrl(cat.id)}
+              class="text-[var(--aas-text)] no-underline hover:text-[var(--aas-accent)]"
+            >
+              {cat.label[lang]}
+              <ArrowUpRight size={20} class="ml-1 text-[var(--aas-muted)]" />
+            </a>
+          </h2>
+          <p class="mt-1 text-sm text-[var(--aas-muted)]">{cat.description[lang]}</p>
+          <div class="mt-4 grid gap-5 sm:grid-cols-2 lg:grid-cols-3" data-sortgrid>
+            {items.slice(0, PAGE).map((c) => (
+              <CourseCard {...card(c)} />
+            ))}
+          </div>
+          {items.length > PAGE && (
+            <a
+              href={catUrl(cat.id)}
+              class="mt-3 inline-block text-sm font-medium text-[var(--aas-accent)] no-underline"
+            >
+              {t('list.seeAll').replace('{n}', String(items.length))} &rarr;
+            </a>
+          )}
+        </section>
+      )
+    );
+  })
+}
+
+{isLeaf && <nav data-pager aria-label="Pagination" class="mt-8 flex flex-wrap items-center justify-center gap-1.5" />}

package/src/components/DifficultyStars.astro

@@ -0,0 +1,34 @@
+---
+import StarIcon from './StarIcon.astro';
+import { useTranslations, difficultyLabel, type Lang } from '../i18n/ui';
+
+// Course difficulty as a 5-star row (filled up to `level`). The visual is
+// decorative; the level + localized label live in the aria-label/tooltip.
+interface Props {
+  lang: Lang;
+  /** 1 (beginner) … 5 (expert). */
+  level: number;
+  size?: number;
+  class?: string;
+}
+
+const { lang, level, size = 12, class: className } = Astro.props;
+const t = useTranslations(lang);
+const label = `${t('course.level')}: ${difficultyLabel(lang, level)}`;
+---
+
+<span
+  class:list={['inline-flex items-center gap-0.5', className]}
+  role="img"
+  aria-label={label}
+  title={label}
+>
+  {
+    [1, 2, 3, 4, 5].map((i) => (
+      <StarIcon
+        size={size}
+        class={i <= level ? 'text-[var(--aas-accent)]' : 'text-[var(--aas-border)]'}
+      />
+    ))
+  }
+</span>

package/src/components/Embed.astro

@@ -0,0 +1,36 @@
+---
+// Responsive iframe wrapper for MDX bodies (a Hugo `iframe` shortcode
+// successor) — interactive demos, videos, and other embeds:
+//   <Embed src="/demos/foo/index.html" title="Foo demo" ratio="4:3" />
+interface Props {
+  src: string;
+  /** Accessible name for the iframe — required; it is the only label. */
+  title: string;
+  /** Aspect ratio ("16:9" default, "4:3", …), or "auto" paired with `height`. */
+  ratio?: string;
+  /** CSS height, used when `ratio` is "auto" (e.g. "32rem"). */
+  height?: string;
+  /** `sandbox` attribute passthrough (omit = unsandboxed, same-origin demos). */
+  sandbox?: string;
+  allowFullscreen?: boolean;
+}
+
+const { src, title, ratio = '16:9', height, sandbox, allowFullscreen = true } = Astro.props;
+const style =
+  ratio === 'auto'
+    ? height
+      ? `height: ${height};`
+      : undefined
+    : `aspect-ratio: ${ratio.replace(':', ' / ')};`;
+---
+
+<div class="not-prose my-4" style={style}>
+  <iframe
+    src={src}
+    title={title}
+    loading="lazy"
+    class="h-full w-full rounded-2xl border border-[var(--aas-border)] bg-[var(--aas-panel)]"
+    {...(sandbox !== undefined ? { sandbox } : {})}
+    {...(allowFullscreen ? { allowfullscreen: true } : {})}
+  ></iframe>
+</div>

package/src/components/Lead.astro

@@ -0,0 +1,8 @@
+---
+// Lead/intro paragraph for MDX bodies (a Hugo `lead` shortcode successor):
+//   <Lead>One-sentence framing of the page.</Lead>
+---
+
+<p class="not-prose my-5 text-xl leading-relaxed text-[var(--aas-muted)]">
+  <slot />
+</p>

package/src/components/RelatedCourses.astro

@@ -0,0 +1,64 @@
+---
+// "Related courses" card section on a course detail page, mirroring
+// RelatedConcepts so course links present the same way (image + title +
+// level/duration meta + description, in a collapsible grid).
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { Image } from 'astro:assets';
+import { courseSlugOf, type CourseEntry } from '../lib/courses';
+import { useTranslations, type Lang } from '../i18n/ui';
+import { formatDate } from '../lib/dates';
+import { inlineMd } from '../lib/inline-md';
+import CollapsibleGrid from './CollapsibleGrid.astro';
+import DifficultyStars from './DifficultyStars.astro';
+
+interface Props {
+  lang: Lang;
+  courses: CourseEntry[];
+}
+
+const { lang, courses } = Astro.props;
+const t = useTranslations(lang);
+---
+
+{
+  courses.length > 0 && (
+    <section class="mt-8">
+      <h2 class="text-xs font-semibold tracking-wide text-[var(--aas-muted)] uppercase">
+        {t('course.relatedCourses')}
+      </h2>
+      <CollapsibleGrid lang={lang} count={courses.length}>
+        {courses.map((c) => (
+          <a
+            href={getRelativeLocaleUrl(lang, `course/${courseSlugOf(c)}/`)}
+            class="aas-lift flex items-stretch overflow-hidden rounded-2xl border border-[var(--aas-border)] bg-[var(--aas-panel)] no-underline"
+          >
+            {c.data.image && (
+              <Image src={c.data.image} alt="" class="w-28 shrink-0 self-stretch object-cover" />
+            )}
+            <div class="min-w-0 p-4">
+              <span class="block font-semibold text-[var(--aas-text)]">
+                {c.data.private && (
+                  <span aria-label={t('private.badge')} title={t('private.badge')}>🔒 </span>
+                )}
+                {c.data.title}
+              </span>
+              <span class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-[var(--aas-muted)]">
+                {c.data.level && <DifficultyStars lang={lang} level={c.data.level} size={10} />}
+                {c.data.hours && <span>{c.data.hours}</span>}
+                {c.data.updated && (
+                  <span>
+                    {t('course.updated')} {formatDate(c.data.updated, lang)}
+                  </span>
+                )}
+              </span>
+              <span
+                class="aas-md mt-1.5 line-clamp-2 text-xs leading-relaxed text-[var(--aas-muted)] opacity-75"
+                set:html={inlineMd(c.data.private ? (c.data.teaser ?? '') : c.data.description)}
+              />
+            </div>
+          </a>
+        ))}
+      </CollapsibleGrid>
+    </section>
+  )
+}

package/src/content.ts

@@ -3,8 +3,8 @@ import { glob } from 'astro/loaders';
 
 /**
  * The shared content model for awesome-*-stack sites: `stacks` (the tool
- * catalog), `articles`, `concepts` and `slides`. A site's content.config.ts
- * stays thin:
+ * catalog), `articles`, `concepts`, `courses` (opt-in), `slides` and `pages`.
+ * A site's content.config.ts stays thin:
  *
  *   import { defineAasCollections } from 'stack-site-builder/content';
  *   import { categoryMap } from './data/categories';
@@ -15,7 +15,16 @@ import { glob } from 'astro/loaders';
  * tree — stack entries are validated against it so an unknown category id
  * fails the build instead of silently dropping the entry from every listing.
  */
-export function defineAasCollections({ categoryMap }: { categoryMap: Map<string, unknown> }) {
+export function defineAasCollections({
+  categoryMap,
+  courseCategoryMap,
+}: {
+  categoryMap: Map<string, unknown>;
+  /** The site's course category tree (`src/data/course-categories.ts`). Optional
+   *  because `courses` is an opt-in section; when provided, course `category`
+   *  ids are validated against it at build time (like stacks). */
+  courseCategoryMap?: Map<string, unknown>;
+}) {
   /**
    * The `stacks` collection holds one entry per tool/service used to build
    * AI agents. Each entry is an MDX file: frontmatter powers the listing and
@@ -197,6 +206,62 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
       }),
   });
 
+  /**
+   * The `courses` collection holds structured lessons/lectures — an opt-in
+   * section (`sections: { courses: true }`) for sites that teach rather than
+   * catalog. Each course is one MDX file: frontmatter powers the course cards
+   * (difficulty, duration, category), the body is the course page itself. Paid
+   * courses use `private` + `teaser` like every other collection.
+   *
+   * Locale-partitioned like the others: `courses/<lang>/<slug>.mdx`.
+   */
+  const courses = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/courses' }),
+    schema: ({ image }) =>
+      z.object({
+        title: z.string(),
+        description: z.string(),
+        // Short one-liner for tight card layouts; falls back to `description`.
+        summary: z.string().optional(),
+        date: z.coerce.date(), // first published
+        // Living-doc metadata, mirroring concepts: bump on meaningful edits.
+        version: z.string().optional(), // e.g. "1.0"
+        updated: z.coerce.date().optional(), // last meaningful update (YYYY-MM-DD)
+        image: image().optional(), // hero / card image (optimized; relative to the file)
+        imageAlt: z.string().optional(),
+        // Leaf id from the site's src/data/course-categories.ts. Validated when the
+        // site passes `courseCategoryMap` (strict, like stacks); otherwise resolved
+        // at render time with an uncategorized fallback (loose, like concepts).
+        category: (courseCategoryMap
+          ? z.string().refine((id) => courseCategoryMap.has(id), {
+              message:
+                'unknown course category id — must match a node in the site data course category tree',
+            })
+          : z.string()
+        ).optional(),
+        tags: z.array(z.string()).default([]),
+        // Difficulty, 1 (beginner) … 5 (expert) — rendered as stars on cards
+        // and the detail header; localized labels live in src/i18n/ui.ts.
+        level: z.number().int().min(1).max(5).optional(),
+        // Human-readable duration, e.g. "1:30" or "8주" — displayed verbatim.
+        hours: z.string().optional(),
+        // Manual sort key, highest first (e.g. "2601-01" = YYMM-seq, so newer
+        // cohorts lead). Courses without one sort by `date`, newest first.
+        order: z.string().optional(),
+        // Free-form kind tag a site can style/filter on (e.g. "special-lecture").
+        type: z.string().optional(),
+        related: z.array(z.string()).default([]), // related course slugs
+        // Decks in the `slides` collection that belong to this course
+        // (linked from the course detail header).
+        slides: z.array(z.string()).default([]),
+        draft: z.boolean().default(false),
+        // Login-gated course (encrypted body; listings show title + optional
+        // PUBLIC `teaser`). See docs/private-content-design.md.
+        private: z.boolean().default(false),
+        teaser: z.string().optional(),
+      }),
+  });
+
   /**
    * The `slides` collection holds presentation decks — one MDX file per deck, with
    * each slide wrapped in a <Slide> component (see src/components/Slide.astro). The
@@ -241,6 +306,137 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
     }),
   });
 
+  /**
+   * The `apps` collection holds product/app pages — a Things-style marketing
+   * landing per app (`template: 'landing'`) plus its plain subpages (privacy,
+   * terms — `template: 'page'`, the default). Entries are locale-partitioned
+   * and may nest: `apps/<lang>/<slug>.mdx` renders at `/apps/<slug>/`,
+   * `apps/<lang>/<slug>/privacy.mdx` at `/apps/<slug>/privacy/`.
+   *
+   * Landing visuals (icons, screenshots, videos, the phone-frame art) are
+   * plain `public/` paths — videos can't go through the image pipeline, so
+   * the whole landing keeps one convention instead of two.
+   */
+  const apps = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/apps' }),
+    schema: z.object({
+      title: z.string(),
+      description: z.string().optional(), // meta description
+      // 'landing' renders the structured marketing page below; 'page' renders
+      // the markdown body like a standalone page (legal subpages).
+      template: z.enum(['landing', 'page']).default('page'),
+      // Header-nav placement, like the `pages` collection (default off —
+      // landings are usually reached from the home cards).
+      nav: z.boolean().default(false),
+      navLabel: z.string().optional(),
+      order: z.number().default(0),
+
+      // ---- hero ----
+      subtitle: z.string().optional(),
+      icon: z.string().optional(), // app icon (public/ path)
+      // Free-form key a site can target from its CSS (`.aas-hero-bg-<key>`)
+      // for a custom hero background.
+      heroBg: z.string().optional(),
+      tagline: z.string().optional(), // small print under the store buttons (may contain <br>)
+      productHunt: z
+        .object({ url: z.string().url(), image: z.string().url(), alt: z.string() })
+        .optional(),
+      // Store links; "#" renders the button disabled (not yet released), the
+      // label is small print under a button (e.g. "5월 출시 예정").
+      stores: z
+        .object({
+          appstore: z.string().optional(),
+          appstoreLabel: z.string().optional(),
+          playstore: z.string().optional(),
+          playstoreLabel: z.string().optional(),
+        })
+        .optional(),
+
+      // ---- alternating feature rows ----
+      // Device-frame art that screenshots render inside when `phoneFrame` is
+      // set (one per page; features opt in individually).
+      phoneFrameImage: z.string().optional(),
+      features: z
+        .array(
+          z.object({
+            label: z.string().optional(), // small eyebrow above the title
+            title: z.string(),
+            description: z.string(), // may contain <br>
+            image: z.string().optional(),
+            images: z.array(z.string()).default([]), // 2+ → auto-rotating carousel
+            phoneFrame: z.boolean().default(false),
+          }),
+        )
+        .default([]),
+
+      // ---- highlights grid (icon cards) ----
+      highlightsTitle: z.string().optional(),
+      highlights: z
+        .array(
+          z.object({
+            icon: z.string().optional(), // public/ path
+            title: z.string(),
+            description: z.string(),
+          }),
+        )
+        .default([]),
+
+      // ---- themes showcase (video tabs, auto-rotating) ----
+      themesTitle: z.string().optional(),
+      themesSubtitle: z.string().optional(),
+      themes: z
+        .array(
+          z.object({
+            name: z.string(),
+            description: z.string(),
+            tabDesc: z.string().optional(),
+            video: z.string(), // public/ path (mp4)
+            poster: z.string().optional(),
+            icon: z.string().optional(), // emoji or short text on the tab button
+          }),
+        )
+        .default([]),
+      themesLandscape: z
+        .object({ title: z.string(), description: z.string(), image: z.string() })
+        .optional(),
+
+      // ---- pricing ----
+      pricingTitle: z.string().optional(),
+      pricingSubtitle: z.string().optional(),
+      pricingBadge: z.string().optional(), // ribbon on the featured tier
+      pricingNotes: z.array(z.string()).default([]),
+      pricing: z
+        .array(
+          z.object({
+            name: z.string(),
+            price: z.string(),
+            period: z.string().optional(), // "/월", "일회성", …
+            featured: z.boolean().default(false),
+            items: z.array(z.string()).default([]),
+          }),
+        )
+        .default([]),
+
+      // ---- closing CTA + legal links ----
+      ctaTitle: z.string().optional(),
+      ctaDescription: z.string().optional(),
+      // Localized labels; privacy/terms link to the sibling subpages, support
+      // opens mailto site.email.
+      legal: z
+        .object({
+          privacy: z.string().optional(),
+          terms: z.string().optional(),
+          support: z.string().optional(),
+        })
+        .optional(),
+
+      draft: z.boolean().default(false),
+      // Login-gated page (encrypted body; see docs/private-content-design.md).
+      private: z.boolean().default(false),
+      teaser: z.string().optional(),
+    }),
+  });
+
   /**
    * The `pages` collection holds standalone top-level pages — an About/소개, a
    * contact page, terms, etc. Unlike the other collections there's no index or
@@ -273,5 +469,5 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
       }),
   });
 
-  return { stacks, articles, concepts, slides, pages };
+  return { stacks, articles, concepts, courses, slides, apps, pages };
 }