stack-site-builder 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -11,6 +11,16 @@ 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.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.20.0",
+  "version": "1.21.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/layouts/BaseLayout.astro

@@ -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, '')]),
@@ -266,9 +274,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