stack-site-builder 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -11,6 +11,69 @@ content schema, while a consuming site supplies only content, taxonomy data and
 config. Sites track the theme with `pnpm up stack-site-builder`, so each release
 here is a plain version bump they pull in.
 
+## [1.17.0] - 2026-07-22
+
+### Changed
+
+- **`apps` → `products` (breaking for 1.16.0 `apps` users)** — the day-old
+  apps section is renamed and generalized before real adoption: "apps" was
+  too narrow an umbrella for what a studio offers, so the section is now
+  **products** with a site-side mini-taxonomy (apps, services, education, …).
+  Content moves to `src/content/products/`, routes to `/products/…`, the
+  section key becomes `products` and — because the index needs
+  `src/data/product-categories.ts` (exporting `productTree` /
+  `productCatOf`) — it is now opt-IN (`sections: { products: true }`).
+  Schemas gain an optional `category` (validated via the optional
+  `productCategoryMap` argument to `defineAasCollections`); the landing/page
+  templates, nested subpages and automatic header link carry over unchanged
+  as `ProductLanding` / `ProductsIndex`.
+
+### Added
+
+- **Products index + header link** — `/products/` lists the top-level
+  products (icon, name, subtitle, description) grouped by the site's
+  category tree, and the header gains a Products link automatically once a
+  locale has at least one product. Per-product header links (`nav: true`)
+  still work for sites that prefer direct items.
+- **Configurable browser icons** — `site.icons = { favicon, appleTouch,
+  manifest }` in site.ts; `favicon` may be SVG, PNG or ICO (type inferred
+  from the extension) so a site can keep its existing logo as the tab icon.
+  Defaults to the theme's `/favicon.svg`.
+- **Hideable GitHub link** — `repoNav: false` in site.ts removes the
+  header's GitHub item (for private-repo sites); it also disappears when no
+  `repoUrl` is declared.
+
+### Fixed
+
+- **Cards home links lost the locale** — card and CTA hrefs on the cards
+  home are written locale-less ("/apps/foo/") and now get the current
+  locale's prefix at render, so the `/en/` home links to `/en/…` pages
+  instead of the default locale's.
+
+## [1.16.0] - 2026-07-22
+
+### Added
+
+- **`apps` collection — product landings** — Things-style marketing pages
+  driven entirely by frontmatter (`template: 'landing'`): hero with app icon,
+  App Store / Google Play buttons (`"#"` renders disabled with a
+  "coming soon" label) and a Product Hunt badge; alternating feature rows
+  with optional device-frame screenshots and auto-rotating carousels; a
+  video "themes" showcase with tab switching; a highlights grid; pricing
+  tiers with a featured ribbon; a closing CTA; and legal links. Entries may
+  nest — `apps/<lang>/<slug>/privacy.mdx` renders at
+  `/apps/<slug>/privacy/` as a plain prose page (`template: 'page'`) — via
+  one catch-all route. Landing media (icons, screenshots, videos, frame art)
+  are `public/` paths. `nav: true` puts a landing in the header nav. The
+  section is on by default; an empty collection builds zero pages.
+- **Data-driven "cards" home** — a site that isn't a catalog can declare
+  `home: { template: 'cards', hero, cards, cta }` in `src/data/site.ts` and
+  get a hero + wide-card grid + CTA homepage instead of the stack catalog.
+  Localized strings use per-locale records (`{ ko: '…', en: '…' }`) with
+  default-locale fallback, like category labels. On a cards home the
+  header's catalog-anchored Browse link hides itself; the catalog routes
+  still build (empty without stacks).
+
 ## [1.15.0] - 2026-07-22
 
 ### Added
@@ -162,6 +225,8 @@ catalog sites from a thin content-only repository.
 - **Standalone development setup** — a devcontainer and a minimal `playground/`
   consuming site for developing and previewing the theme on its own.
 
+[1.17.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.16.0...v1.17.0
+[1.16.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.15.0...v1.16.0
 [1.15.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.14.0...v1.15.0
 [1.14.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.13.0...v1.14.0
 [1.13.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.12.0...v1.13.0

package/README.md

@@ -36,11 +36,11 @@ export const collections = defineAasCollections({ categoryMap });
 
 | Where | What |
 | --- | --- |
-| `src/data/site.ts` | Site identity: name, repo URL, the `locales` it ships, optional `sections` toggles, per-locale UI string overrides |
+| `src/data/site.ts` | Site identity: name, repo URL (`repoNav: false` hides the header's GitHub link), the `locales` it ships, optional `sections` toggles, browser icons (`icons: { favicon, appleTouch, manifest }`), the `home` template, per-locale UI string overrides |
 | `src/data/categories.ts` | The tool-catalog category tree (validated against content) |
-| `src/data/concept-categories.ts` · `article-categories.ts` · `course-categories.ts` (opt-in) | Taxonomies for concepts / articles / courses |
+| `src/data/concept-categories.ts` · `article-categories.ts` · `course-categories.ts` · `product-categories.ts` (opt-in) | Taxonomies for concepts / articles / courses / products |
 | `src/data/glossary.mjs` | `[[Term]]` wikilink targets |
-| `src/content/{stacks,concepts,courses,articles,slides}/` | The content, one MDX file per locale |
+| `src/content/{stacks,concepts,courses,products,articles,slides}/` | The content, one MDX file per locale |
 | `src/content/pages/` | Standalone top-level pages (e.g. an About/소개), rendered at `/<slug>/` and optionally linked in the header nav |
 | `public/` · `samples/` | Logos/favicons and runnable sample projects |
 
@@ -72,7 +72,7 @@ The rest are opt-out — **concepts, articles, samples, slides, glossary** and t
 standalone **pages** collection (About/소개, …) — so a site can ship only what it
 needs. Turning one off removes both its routes and its header-nav item. (`pages`
 also has finer control: each page's `nav` / `draft` frontmatter, or simply not
-authoring it.) **courses** is the one opt-IN section — see below.
+authoring it.) **courses** and **products** are the opt-IN sections — see below.
 
 Declare the toggles once in `src/data/site.ts` and forward them to the theme in
 astro.config (which needs them to skip route injection). Import `SectionKey` from
@@ -125,6 +125,47 @@ teaser: A public one-liner for the login gate.
 
 Routes mirror concepts: `/course/`, `/course/<slug>/`, `/course/category/<id>/`.
 
+## Products (opt-in)
+
+The `products` collection is the "what we offer" umbrella — entries grouped
+by a site-side mini-taxonomy (apps, services, education, …) on the
+`/products/` index. Each entry is either a Things-style marketing landing
+(`template: 'landing'`: hero with store buttons and an optional Product Hunt
+badge, alternating feature rows with device-frame screenshots and
+auto-rotating carousels, a video themes showcase, a highlights grid, pricing
+tiers, a closing CTA and legal links — media are `public/` paths) or a plain
+prose page (a service pitch, a legal subpage). Entries nest:
+`products/<lang>/flowstate.mdx` → `/products/flowstate/`, and
+`products/<lang>/flowstate/privacy.mdx` → `/products/flowstate/privacy/`.
+The header gains a Products link automatically once a locale has a product;
+`nav: true` additionally gives an entry its own header item.
+
+Enable with `sections: { products: true }` plus
+`src/data/product-categories.ts` (exporting `productTree` / `productCatOf` —
+copy the playground's), and optionally pass `productCategoryMap` to
+`defineAasCollections` for build-time category validation. See
+`playground/src/content/products/` for a complete example.
+
+## Homepage
+
+The default home is the stack catalog. A site that isn't a catalog can swap in
+a data-driven home from `src/data/site.ts`:
+
+```ts
+home: {
+  template: 'cards',
+  hero: { icon: '/img/logo.png', subtitle: { ko: '…', en: '…' } },
+  cardsTitle: { ko: '앱', en: 'Apps' },
+  cards: [{ href: '/products/flowstate/', name: 'FlowState', icon: '/img/icon.png',
+            rounded: true, description: { ko: '…', en: '…' }, tags: ['iOS'] }],
+  cta: { title: { … }, description: { … }, button: { label: { … }, href: '/course/' } },
+},
+```
+
+Localized values are either one string or a per-locale record with
+default-locale fallback. On a cards home the header's Browse link (which
+anchors into the catalog) hides itself.
+
 ## Body components
 
 Reusable MDX-body components, importable from any collection's content:

package/index.d.ts

@@ -7,6 +7,7 @@ export type SectionKey =
   | 'concepts'
   | 'articles'
   | 'courses'
+  | 'products'
   | 'samples'
   | 'slides'
   | 'glossary'

package/index.mjs

@@ -29,6 +29,11 @@ const PAGES = [
   // Standalone top-level pages (the `pages` collection), e.g. an About/소개
   // page. A single dynamic route per locale renders every entry at `/<slug>/`.
   '[page].astro',
+  // Product pages (the `products` collection): a category-grouped index, plus
+  // the landings/pages and their nested subpages (privacy/terms) via one
+  // catch-all.
+  'products/index.astro',
+  'products/[...id].astro',
   // Per-locale RSS feed of the articles collection (an endpoint, not a page).
   'rss.xml.ts',
   'article/index.astro',
@@ -67,6 +72,7 @@ function sectionOf(file) {
   if (file.startsWith('concept/')) return 'concepts';
   if (file.startsWith('article/')) return 'articles';
   if (file.startsWith('course/')) return 'courses';
+  if (file.startsWith('products/')) return 'products';
   if (file.startsWith('sample/')) return 'samples';
   if (file.startsWith('slides/')) return 'slides';
   if (file === 'glossary.astro') return 'glossary';
@@ -76,9 +82,10 @@ function sectionOf(file) {
 }
 
 // Sections that are opt-IN rather than opt-out: their routes are injected only
-// when the site passes `{ <key>: true }`. `courses` needs site-side data
-// (src/data/course-categories.ts), so a theme upgrade alone must not enable it.
-const OPT_IN_SECTIONS = new Set(['courses']);
+// when the site passes `{ <key>: true }`. Both need site-side data
+// (src/data/{course,product}-categories.ts), so a theme upgrade alone must
+// not enable them.
+const OPT_IN_SECTIONS = new Set(['courses', 'products']);
 
 /**
  * @param {object} opts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "license": "MIT",
   "description": "The engine behind the awesome-*-stack catalog sites: an Astro theme with the catalog/concepts/articles/slides/samples routes, components, styles and markdown pipeline. Sites provide content, taxonomy data and config.",
   "repository": {

package/src/components/CardsHome.astro

@@ -0,0 +1,113 @@
+---
+// The data-driven "cards" homepage (see src/lib/home.ts): hero with the site
+// icon/name, a stack of wide link cards (products, sections, external links — the
+// Things-style studio home), and a closing CTA banner. Everything renders
+// from `site.home`; sections without data simply don't render.
+import { site } from '@aas-data/site';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { home, loc, locList } from '../lib/home';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Props {
+  lang: Lang;
+}
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+const h = home;
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const withBase = (p?: string) => (p && p.startsWith('/') ? base + p : p);
+
+const heroTitle = loc(h?.hero?.title, lang) ?? site.name;
+const heroSubtitle = loc(h?.hero?.subtitle, lang) ?? t('site.tagline');
+const extAttrs = (external?: boolean) =>
+  external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+// Internal links ("/products/…") are written locale-less in site.home and get the
+// current locale's prefix here, so the en home links to the en pages.
+const resolveHref = (href: string, external?: boolean) =>
+  !external && href.startsWith('/') ? getRelativeLocaleUrl(lang, href.replace(/^\//, '')) : href;
+---
+
+<section class="py-14 text-center">
+  {h?.hero?.icon && <img src={withBase(h.hero.icon)} alt="" class="mx-auto h-20 w-20 rounded-[22%] shadow-md" />}
+  <h1 class="mt-5 text-4xl font-bold tracking-tight sm:text-5xl">{heroTitle}</h1>
+  <p class="mx-auto mt-4 max-w-2xl text-xl text-[var(--aas-muted)]" set:html={heroSubtitle} />
+</section>
+
+{
+  (h?.cards?.length ?? 0) > 0 && (
+    <section class="aas-bleed bg-[var(--aas-panel)] py-14">
+      <div class="mx-auto max-w-[75rem] px-5">
+        {h?.cardsTitle && <h2 class="mb-6 text-3xl font-bold tracking-tight">{loc(h.cardsTitle, lang)}</h2>}
+        <div class="flex flex-col gap-5">
+          {h?.cards?.map((c) => (
+            <a
+              href={resolveHref(c.href, c.external)}
+              {...extAttrs(c.external)}
+              class="aas-lift flex items-center gap-6 rounded-3xl border border-[var(--aas-border)] bg-[var(--aas-bg)] p-6 no-underline"
+            >
+              {c.icon && (
+                <img
+                  src={withBase(c.icon)}
+                  alt=""
+                  class:list={['h-20 w-20 shrink-0', c.rounded ? 'rounded-[22%]' : 'rounded-xl']}
+                  loading="lazy"
+                />
+              )}
+              <span class="min-w-0">
+                <span class="block text-xl font-semibold text-[var(--aas-text)]">{loc(c.name, lang)}</span>
+                {c.description && (
+                  <span
+                    class="mt-1 block leading-relaxed text-[var(--aas-muted)]"
+                    set:html={loc(c.description, lang)}
+                  />
+                )}
+                {locList(c.tags, lang).length > 0 && (
+                  <span class="mt-3 flex flex-wrap gap-1.5">
+                    {locList(c.tags, lang).map((tag) => (
+                      <span class="rounded-full border border-[var(--aas-border)] px-2 py-0.5 text-xs text-[var(--aas-muted)]">
+                        {tag}
+                      </span>
+                    ))}
+                  </span>
+                )}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+{
+  h?.cta && (
+    <section class="py-16 text-center">
+      {h.cta.title && <h2 class="text-3xl font-bold tracking-tight">{loc(h.cta.title, lang)}</h2>}
+      {h.cta.description && (
+        <p class="mx-auto mt-3 max-w-2xl text-[var(--aas-muted)]" set:html={loc(h.cta.description, lang)} />
+      )}
+      {h.cta.button && (
+        <a
+          href={resolveHref(h.cta.button.href, h.cta.button.external)}
+          {...extAttrs(h.cta.button.external)}
+          class="mt-7 inline-block rounded-full bg-[var(--aas-accent)] px-7 py-3 font-semibold text-white no-underline"
+        >
+          {loc(h.cta.button.label, lang)}
+        </a>
+      )}
+    </section>
+  )
+}
+
+<style>
+  /* Full-bleed section: escape BaseLayout's centered container. */
+  .aas-bleed {
+    position: relative;
+    left: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    right: 50%;
+    width: 100vw;
+  }
+</style>