stack-site-builder 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -11,6 +11,29 @@ 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.22.0] - 2026-07-25
+
+### Added
+
+- **Cards-home catalog Browse nav** — `home.browse = { href, label?, external? }`:
+  on a cards home the stacks catalog Browse nav is hidden (it anchors into the
+  catalog home's `#categories` section, which a cards home doesn't have). Set
+  `home.browse` to add a header nav item (the same grid icon) that links to a
+  separate catalog page instead — e.g. a category browse at `/categories/tools/`.
+  `href` is a locale-less internal path (prefixed per locale) or an external URL;
+  `label` falls back to the theme's "Browse" string. The catalog home is
+  unaffected — it keeps its built-in `#categories` Browse.
+
+## [1.21.0] - 2026-07-24
+
+### Added
+
+- **Header brand options** — `site.header = { logo, logoInvert, name }`:
+  `logo` (a public/ path) replaces the hardcoded ⚡ bolt with the site's
+  mark, `name: false` drops the wordmark for a logo-only brand (the home
+  link keeps `site.name` as its aria-label), and `logoInvert` flips a
+  black line-art logo in dark mode. Defaults unchanged: ⚡ + site name.
+
 ## [1.20.0] - 2026-07-24
 
 ### Added

package/README.md

@@ -165,7 +165,20 @@ home: {
 
 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.
+anchors into the catalog home's `#categories` section) hides itself — set
+`home.browse` to add it back, pointing at a separate catalog page instead:
+
+```ts
+home: {
+  template: 'cards',
+  // …
+  // Header nav item (grid icon) → a standalone catalog page. Use this when the
+  // catalog lives at a category browse rather than on the home. `href` is a
+  // locale-less internal path (or an external URL with `external: true`);
+  // `label` defaults to the theme's "Browse" string.
+  browse: { href: '/categories/tools/', label: { ko: '사용 도구', en: 'Tools' } },
+},
+```
 
 ## Papers (opt-in)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.20.0",
+  "version": "1.22.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": {
     "type": "git",
-    "url": "git+https://github.com/CodeCompose7/stack-site-builder.git"
+    "url": "git+https://github.com/CodeComposeStudio/stack-site-builder.git"
   },
   "files": [
     "index.mjs",

package/src/layouts/BaseLayout.astro

@@ -12,7 +12,7 @@ import BackToTop from '../components/BackToTop.astro';
 import Footer from '@aas-footer';
 import { getNavPages, pageSlugOf } from '../lib/pages';
 import { getNavProducts, getTopProducts, productSlugOf } from '../lib/products';
-import { homeTemplate } from '../lib/home';
+import { homeTemplate, home as homeConfig, loc } from '../lib/home';
 import { sectionEnabled, type SectionKey } from '../lib/sections';
 import { siteIcons } from '../lib/icons';
 import { privateClientData } from '../lib/private';
@@ -53,6 +53,14 @@ const base = import.meta.env.BASE_URL;
 
 const baseNoSlash = base.replace(/\/$/, '');
 
+// Header brand: `site.header = { logo?: '/path.png', logoInvert?: bool,
+// name?: bool }`. A logo replaces the ⚡ bolt; `name: false` drops the
+// wordmark (logo-only brand — the link keeps site.name as its aria-label).
+const header = (site as { header?: { logo?: string; logoInvert?: boolean; name?: boolean } })
+  .header;
+const brandLogo = header?.logo;
+const brandName = header?.name !== false;
+
 // 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, '')]),
@@ -76,6 +84,10 @@ const showRepoLink =
 // layouts never drift: an icon-only row (≥sm) and a labelled dropdown menu
 // (<sm, so a phone header stays to a few controls instead of a long icon run).
 // `svg` is the icon's inner markup (drawn into a shared <svg> shell below).
+// Shared 2×2 grid icon for the catalog Browse nav (catalog home + cards-home
+// `home.browse`).
+const CATALOG_ICON =
+  '<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"/>';
 const allNavItems: {
   href: string;
   label: string;
@@ -84,18 +96,30 @@ const allNavItems: {
   keepFilters?: boolean;
   section?: SectionKey;
 }[] = [
-  // Browse anchors into the catalog home's category sections — it only makes
-  // sense when the site keeps the catalog home template.
+  // Browse (grid icon): on the catalog home it anchors into the #categories
+  // section; on a cards home it's off unless the site sets `home.browse` to
+  // point at a separate catalog page (e.g. a category browse).
   ...(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"/>',
+          svg: CATALOG_ICON,
         },
       ]
-    : []),
+    : homeConfig?.browse
+      ? [
+          {
+            href: homeConfig.browse.external
+              ? homeConfig.browse.href
+              : getRelativeLocaleUrl(lang, homeConfig.browse.href.replace(/^\//, '')),
+            label: loc(homeConfig.browse.label, lang) ?? t('nav.browse'),
+            external: homeConfig.browse.external,
+            svg: CATALOG_ICON,
+          },
+        ]
+      : []),
   ...(hasProducts
     ? [
         {
@@ -266,9 +290,19 @@ const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(it
           aria-label={site.name}
           class="flex min-w-0 items-center gap-1.5 text-base font-bold tracking-tight whitespace-nowrap no-underline sm:text-lg"
         >
-          <span aria-hidden="true">⚡</span>
-          {/* Below 600px only the bolt remains, so the narrow header never truncates the wordmark. */}
-          <span class="hidden truncate min-[600px]:inline">{site.name}</span>
+          {
+            brandLogo ? (
+              <img
+                src={`${baseNoSlash}${brandLogo}`}
+                alt=""
+                class:list={['h-7 w-7 shrink-0 object-contain', header?.logoInvert && 'aas-icon-invert']}
+              />
+            ) : (
+              <span aria-hidden="true">⚡</span>
+            )
+          }
+          {/* Below 600px only the mark remains, so the narrow header never truncates the wordmark. */}
+          {brandName && <span class="hidden truncate min-[600px]:inline">{site.name}</span>}
         </a>
         {/* Section links are icon-only (labels live in aria-label). On phones
             (<sm) they collapse into the labelled dropdown menu below, so the

package/src/lib/home.ts

@@ -45,6 +45,15 @@ export interface HomeConfig {
     description?: Localized;
     button?: { label: Localized; href: string; external?: boolean };
   };
+  /** Catalog "Browse" nav link for the cards home. The stacks catalog Browse
+   *  nav anchors into the catalog home's #categories section, so it's hidden on
+   *  a cards home — set this to add a header nav item that points at a separate
+   *  catalog page instead (e.g. a category browse at `/categories/tools/`, or a
+   *  tag/vendor page). `href` is a locale-less internal path (prefixed per
+   *  locale at render) or an external URL (`external: true`); `label` defaults
+   *  to the theme's "Browse" string. Ignored on the catalog home, which keeps
+   *  its built-in #categories Browse. */
+  browse?: { href: string; label?: Localized; external?: boolean };
 }
 
 export const home: HomeConfig | undefined = (site as { home?: HomeConfig }).home;