stack-site-builder 1.15.0 → 1.17.0

package/src/i18n/ui.ts

@@ -59,6 +59,7 @@ export const ui = {
     'nav.browse': 'Browse',
     'nav.concepts': 'Concepts',
     'nav.courses': 'Courses',
+    'nav.products': 'Products',
     'nav.blog': 'Writing',
     'nav.samples': 'Samples',
     'nav.slides': 'Slides',
@@ -127,6 +128,9 @@ export const ui = {
     'course.updated': 'Updated',
     'course.relatedCourses': 'Related courses',
     'course.slides': 'Slides',
+    'products.title': 'Products',
+    'products.tagline': 'What we build and offer.',
+    'products.empty': 'No products yet.',
     'detail.usedInConcepts': 'Used in concepts',
     'sort.label': 'Sort',
     'sort.alpha': 'A–Z',
@@ -218,6 +222,7 @@ export const ui = {
     'nav.browse': '둘러보기',
     'nav.concepts': '개념',
     'nav.courses': '강의',
+    'nav.products': '제품',
     'nav.blog': '글',
     'nav.samples': '샘플',
     'nav.slides': '슬라이드',
@@ -285,6 +290,9 @@ export const ui = {
     'course.updated': '업데이트',
     'course.relatedCourses': '관련 강의',
     'course.slides': '슬라이드',
+    'products.title': '제품',
+    'products.tagline': '우리가 만들고 제공하는 것.',
+    'products.empty': '아직 제품이 없습니다.',
     'detail.usedInConcepts': '이 도구가 쓰이는 개념',
     'sort.label': '정렬',
     'sort.alpha': '이름순',

package/src/layouts/BaseLayout.astro

@@ -7,6 +7,8 @@ import LanguageSwitcher from '../components/LanguageSwitcher.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import BackToTop from '../components/BackToTop.astro';
 import { getNavPages, pageSlugOf } from '../lib/pages';
+import { getNavProducts, getTopProducts, productSlugOf } from '../lib/products';
+import { homeTemplate } from '../lib/home';
 import { sectionEnabled, type SectionKey } from '../lib/sections';
 
 interface Props {
@@ -31,6 +33,21 @@ const container = wide ? 'max-w-[81rem]' : 'max-w-[75rem]';
 const home = getRelativeLocaleUrl(lang, '');
 const base = import.meta.env.BASE_URL;
 
+// Site-configurable browser icons (`site.icons`). `favicon` may be any image
+// the browser can render (SVG/PNG/ICO — public/ path); appleTouch/manifest
+// links render only when declared. Defaults to the theme's /favicon.svg.
+const icons =
+  (site as { icons?: { favicon?: string; appleTouch?: string; manifest?: string } }).icons ?? {};
+const faviconHref = icons.favicon ?? '/favicon.svg';
+const faviconType = faviconHref.endsWith('.svg')
+  ? 'image/svg+xml'
+  : faviconHref.endsWith('.png')
+    ? 'image/png'
+    : faviconHref.endsWith('.ico')
+      ? 'image/x-icon'
+      : undefined;
+const baseNoSlash = base.replace(/\/$/, '');
+
 // Home URL per locale, for the language auto-detect redirect on the root home.
 const localeHomes = Object.fromEntries(
   (Object.keys(languages) as Lang[]).map((c) => [c, getRelativeLocaleUrl(c, '')]),
@@ -41,6 +58,14 @@ const isDefaultHome = path === '' && lang === 'en';
 // e.g. an About/소개 page. Rendered as their own nav items alongside the
 // built-in sections; the accessible label comes from the page's own frontmatter.
 const navPages = await getNavPages(lang);
+// Products that opt into their own header link (the collection's `nav`), plus
+// the Products-index link, which appears once the locale has any product.
+const navProducts = await getNavProducts(lang);
+const hasProducts = (await getTopProducts(lang)).length > 0;
+// The header's GitHub link — hidden for sites whose repo is private
+// (`repoNav: false` in site.ts) or that declare no repoUrl at all.
+const showRepoLink =
+  !!site.repoUrl && (site as { repoNav?: boolean }).repoNav !== false;
 
 // The header sections, as data — rendered twice from one source so the two
 // layouts never drift: an icon-only row (≥sm) and a labelled dropdown menu
@@ -54,12 +79,28 @@ const allNavItems: {
   keepFilters?: boolean;
   section?: SectionKey;
 }[] = [
-  {
-    href: `${home}#categories`,
-    label: t('nav.browse'),
-    keepFilters: true,
-    svg: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
-  },
+  // Browse anchors into the catalog home's category sections — it only makes
+  // sense when the site keeps the catalog home template.
+  ...(homeTemplate === 'catalog'
+    ? [
+        {
+          href: `${home}#categories`,
+          label: t('nav.browse'),
+          keepFilters: true,
+          svg: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
+        },
+      ]
+    : []),
+  ...(hasProducts
+    ? [
+        {
+          href: getRelativeLocaleUrl(lang, 'products/'),
+          label: t('nav.products'),
+          section: 'products' as SectionKey,
+          svg: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/>',
+        },
+      ]
+    : []),
   {
     href: getRelativeLocaleUrl(lang, 'course/'),
     label: t('nav.courses'),
@@ -96,18 +137,28 @@ const allNavItems: {
     section: 'glossary',
     svg: '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
   },
+  ...navProducts.map((a) => ({
+    href: getRelativeLocaleUrl(lang, `products/${productSlugOf(a)}/`),
+    label: a.data.navLabel ?? a.data.title,
+    section: 'products' as SectionKey,
+    svg: '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
+  })),
   ...navPages.map((p) => ({
     href: getRelativeLocaleUrl(lang, `${pageSlugOf(p)}/`),
     label: p.data.navLabel ?? p.data.title,
     section: 'pages' as SectionKey,
     svg: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
   })),
-  {
-    href: site.repoUrl,
-    label: 'GitHub',
-    external: true,
-    svg: '<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C4 2 3 2 3 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 2 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/>',
-  },
+  ...(showRepoLink
+    ? [
+        {
+          href: site.repoUrl,
+          label: 'GitHub',
+          external: true,
+          svg: '<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C4 2 3 2 3 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 2 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/>',
+        },
+      ]
+    : []),
 ];
 // Drop the nav links for sections the site turned off (their routes aren't built).
 const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(item.section));
@@ -122,7 +173,9 @@ const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(it
     <title>{title}</title>
     <meta name="description" content={description} />
     {noindex && <meta name="robots" content="noindex" />}
-    <link rel="icon" type="image/svg+xml" href={`${base.replace(/\/$/, '')}/favicon.svg`} />
+    <link rel="icon" {...(faviconType ? { type: faviconType } : {})} href={`${baseNoSlash}${faviconHref}`} />
+    {icons.appleTouch && <link rel="apple-touch-icon" href={`${baseNoSlash}${icons.appleTouch}`} />}
+    {icons.manifest && <link rel="manifest" href={`${baseNoSlash}${icons.manifest}`} />}
     {
       sectionEnabled('articles') && (
         <link

package/src/lib/home.ts

@@ -0,0 +1,63 @@
+import { site } from '@aas-data/site';
+import { defaultLang, type Lang } from '../i18n/ui';
+
+/**
+ * The data-driven "cards" homepage. By default the theme home is the stack
+ * catalog; a site that isn't a catalog (a studio/product site) declares
+ * `home: { template: 'cards', … }` in `src/data/site.ts` and gets a
+ * hero + card grid + CTA home instead. The catalog routes still build (they
+ * are simply empty when the site has no stacks), and the header's Browse
+ * link — which anchors into the catalog home — hides itself.
+ *
+ * Strings are `Localized`: either one string for every locale, or a
+ * per-locale record (`{ ko: '…', en: '…' }`) that falls back to the default
+ * locale, matching how category labels work.
+ */
+export type Localized = string | Record<string, string>;
+
+export interface HomeCard {
+  /** Locale-less internal path ("/products/foo/", prefixed per locale at
+   *  render) or an external URL (set `external`). */
+  href: string;
+  external?: boolean;
+  name: Localized;
+  description?: Localized;
+  icon?: string; // public/ path
+  rounded?: boolean; // app-icon style rounding for the icon
+  tags?: string[] | Record<string, string[]>;
+}
+
+export interface HomeConfig {
+  template: 'cards';
+  hero?: {
+    icon?: string; // public/ path, shown above the title
+    title?: Localized; // defaults to site.name
+    subtitle?: Localized; // defaults to the site.tagline UI string
+  };
+  cardsTitle?: Localized;
+  cards?: HomeCard[];
+  cta?: {
+    title?: Localized;
+    description?: Localized;
+    button?: { label: Localized; href: string; external?: boolean };
+  };
+}
+
+export const home: HomeConfig | undefined = (site as { home?: HomeConfig }).home;
+
+/** Which homepage the site gets: the catalog (default) or the cards home. */
+export const homeTemplate: 'catalog' | 'cards' = home?.template === 'cards' ? 'cards' : 'catalog';
+
+/** Resolve a Localized string for `lang` (default locale, then any, as fallback). */
+export function loc(v: Localized | undefined, lang: Lang): string | undefined {
+  if (v == null) return undefined;
+  if (typeof v === 'string') return v;
+  return v[lang] ?? v[defaultLang] ?? Object.values(v)[0];
+}
+
+/** Resolve a per-locale (or shared) string list for `lang`. */
+export function locList(v: string[] | Record<string, string[]> | undefined, lang: Lang): string[] {
+  if (v == null) return [];
+  if (Array.isArray(v)) return v;
+  return v[lang] ?? v[defaultLang] ?? Object.values(v)[0] ?? [];
+}

package/src/lib/products.ts

@@ -0,0 +1,31 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Lang } from '../i18n/ui';
+
+export type ProductEntry = CollectionEntry<'products'>;
+
+/** The url slug of a product page — its id minus the `<lang>/` prefix. May be
+ *  nested (`flowstate-ai/privacy`), which the catch-all route renders at the
+ *  matching subpath. */
+export function productSlugOf(entry: ProductEntry): string {
+  return entry.id.replace(/^[a-z]{2}\//, '');
+}
+
+/** Published product pages for one locale, in `order` (then title) order. */
+export async function getProducts(lang: Lang): Promise<ProductEntry[]> {
+  const all = await getCollection('products');
+  return all
+    .filter((e) => e.id.startsWith(`${lang}/`) && !e.data.draft)
+    .sort((a, b) => a.data.order - b.data.order || a.data.title.localeCompare(b.data.title));
+}
+
+/** The subset of {@link getProducts} that opts into a header-nav link. */
+export async function getNavProducts(lang: Lang): Promise<ProductEntry[]> {
+  return (await getProducts(lang)).filter((e) => e.data.nav);
+}
+
+/** Top-level product pages for one locale — what the products index lists
+ *  (and what makes the header's Products link appear). Landing and plain
+ *  pages both count; nested subpages (privacy/terms) are excluded. */
+export async function getTopProducts(lang: Lang): Promise<ProductEntry[]> {
+  return (await getProducts(lang)).filter((e) => !productSlugOf(e).includes('/'));
+}

package/src/lib/sections.ts

@@ -20,6 +20,7 @@ export type SectionKey =
   | 'concepts'
   | 'articles'
   | 'courses'
+  | 'products'
   | 'samples'
   | 'slides'
   | 'glossary'
@@ -29,6 +30,7 @@ const DEFAULTS: Record<SectionKey, boolean> = {
   concepts: true,
   articles: true,
   courses: false, // opt-in: needs src/data/course-categories.ts on the site
+  products: false, // opt-in: needs src/data/product-categories.ts on the site
   samples: true,
   slides: true,
   glossary: true,

package/src/pages/[...lang]/index.astro

@@ -3,6 +3,8 @@ import { site } from '@aas-data/site';
 import type { GetStaticPaths } from 'astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import Home from '../../components/Home.astro';
+import CardsHome from '../../components/CardsHome.astro';
+import { homeTemplate } from '../../lib/home';
 import { allLocales, langParam } from '../../lib/locales';
 
 export const getStaticPaths = (() =>
@@ -12,5 +14,5 @@ const { lang } = Astro.props;
 ---
 
 <BaseLayout title={site.name} lang={lang} path="">
-  <Home lang={lang} />
+  {homeTemplate === 'cards' ? <CardsHome lang={lang} /> : <Home lang={lang} />}
 </BaseLayout>

package/src/pages/[...lang]/products/[...id].astro

@@ -0,0 +1,67 @@
+---
+import { site } from '@aas-data/site';
+import { render } from 'astro:content';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import ProductLanding from '../../../components/ProductLanding.astro';
+import PrivateGate from '../../../components/PrivateGate.astro';
+import TocRail from '../../../components/TocRail.astro';
+import MermaidLoader from '../../../components/MermaidLoader.astro';
+import { getProducts, productSlugOf } from '../../../lib/products';
+import { allLocales, langParam } from '../../../lib/locales';
+import { inlineMd } from '../../../lib/inline-md';
+
+export const getStaticPaths = (async () => {
+  const paths: Awaited<ReturnType<GetStaticPaths>> = [];
+  for (const lang of allLocales) {
+    for (const entry of await getProducts(lang)) {
+      paths.push({ params: { lang: langParam(lang), id: productSlugOf(entry) }, props: { lang, entry } });
+    }
+  }
+  return paths;
+}) satisfies GetStaticPaths;
+
+const { lang, entry } = Astro.props;
+const slug = productSlugOf(entry);
+const priv = entry.data.private;
+const isLanding = entry.data.template === 'landing';
+// Plain 'page' template (privacy/terms subpages) renders the markdown body.
+const { Content, headings } = await render(entry);
+const tocItems = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
+const bodyHasMermaid = (entry.body ?? '').includes('```mermaid');
+---
+
+<BaseLayout
+  title={`${entry.data.title} — ${site.name}`}
+  description={priv ? entry.data.teaser : (entry.data.description ?? entry.data.subtitle)}
+  lang={lang}
+  path={`products/${slug}/`}
+  noindex={priv}
+>
+  <PrivateGate enabled={priv} lang={lang} title={entry.data.title} teaser={entry.data.teaser}>
+    {
+      isLanding ? (
+        <ProductLanding entry={entry} lang={lang} />
+      ) : (
+        <>
+          <header class="pb-6">
+            <h1 class="text-3xl font-bold tracking-tight">{entry.data.title}</h1>
+            {entry.data.description && (
+              <p
+                class="mt-2 aas-md text-lg whitespace-pre-line text-[var(--aas-muted)]"
+                set:html={inlineMd(entry.data.description)}
+              />
+            )}
+          </header>
+          <div class="mt-4 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 />}
+        </>
+      )
+    }
+  </PrivateGate>
+</BaseLayout>

package/src/pages/[...lang]/products/index.astro

@@ -0,0 +1,18 @@
+---
+import { site } from '@aas-data/site';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import ProductsIndex from '../../../components/ProductsIndex.astro';
+import { useTranslations } from '../../../i18n/ui';
+import { allLocales, langParam } from '../../../lib/locales';
+
+export const getStaticPaths = (() =>
+  allLocales.map((lang) => ({ params: { lang: langParam(lang) }, props: { lang } }))) satisfies GetStaticPaths;
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+---
+
+<BaseLayout title={`${t('products.title')} — ${site.name}`} lang={lang} path="products/">
+  <ProductsIndex lang={lang} />
+</BaseLayout>