stack-site-builder 1.19.4 → 1.20.0

package/CHANGELOG.md

@@ -11,6 +11,26 @@ 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.20.0] - 2026-07-24
+
+### Added
+
+- **Per-site custom footer** — footers are site identity, not theme chrome.
+  A site that ships `src/components/Footer.astro` (receiving a `lang` prop)
+  now replaces the theme's stock footer wholesale; without one, the stock
+  "Built with Astro" footer renders as before (now living in
+  `DefaultFooter.astro`, resolved through the `@aas-footer` alias).
+
+## [1.19.5] - 2026-07-24
+
+### Added
+
+- **`iconInvert` for dark mode** — black line-art icons (e.g. Tabler-style
+  SVGs) vanished on the dark card background. Home cards and the home hero
+  (`iconInvert: true` in `site.home`), and product entries (`iconInvert`
+  frontmatter — applies on the products index and the landing hero) can now
+  flag an icon to be color-inverted when the dark theme is active.
+
 ## [1.19.4] - 2026-07-24
 
 ### Fixed

package/README.md

@@ -43,6 +43,7 @@ export const collections = defineAasCollections({ categoryMap });
 | `src/content/{stacks,concepts,courses,products,papers,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 |
+| `src/components/Footer.astro` (optional) | Replaces the theme's stock footer wholesale — receives a `lang` prop |
 
 The theme reaches the site's data through the `@aas-data/*` alias (set up by
 the integration), so everything above is swappable per site.

package/index.mjs

@@ -15,6 +15,7 @@
 // components resolve per-site taxonomy (categories, glossary, site identity)
 // at build time.
 import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import tailwindcss from '@tailwindcss/vite';
@@ -175,6 +176,17 @@ export default function aasTheme({ glossary, sections = {} }) {
               alias: {
                 '@aas-data': fileURLToPath(new URL('./src/data', config.root)),
                 '@assets': fileURLToPath(new URL('./src/assets', config.root)),
+                // Footers are site identity, not theme chrome: when the site
+                // ships `src/components/Footer.astro`, BaseLayout renders it
+                // (via this alias) instead of the theme's stock footer.
+                '@aas-footer': (() => {
+                  const siteFooter = fileURLToPath(
+                    new URL('./src/components/Footer.astro', config.root),
+                  );
+                  return existsSync(siteFooter)
+                    ? siteFooter
+                    : fileURLToPath(new URL('./src/components/DefaultFooter.astro', import.meta.url));
+                })(),
               },
             },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.19.4",
+  "version": "1.20.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

@@ -29,7 +29,7 @@ const resolveHref = (href: string, external?: boolean) =>
 ---
 
 <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%] object-contain" />}
+  {h?.hero?.icon && <img src={withBase(h.hero.icon)} alt="" class:list={['mx-auto h-20 w-20 rounded-[22%] object-contain', h.hero.iconInvert && 'aas-icon-invert']} />}
   <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>
@@ -50,7 +50,11 @@ const resolveHref = (href: string, external?: boolean) =>
                 <img
                   src={withBase(c.icon)}
                   alt=""
-                  class:list={['h-20 w-20 shrink-0 object-contain', c.rounded ? 'rounded-[22%]' : 'rounded-xl']}
+                  class:list={[
+                    'h-20 w-20 shrink-0 object-contain',
+                    c.rounded ? 'rounded-[22%]' : 'rounded-xl',
+                    c.iconInvert && 'aas-icon-invert',
+                  ]}
                   loading="lazy"
                 />
               )}

package/src/components/DefaultFooter.astro

@@ -0,0 +1,26 @@
+---
+// The theme's stock footer. A site replaces it wholesale by shipping its own
+// `src/components/Footer.astro` — the integration aliases `@aas-footer` to
+// that file when it exists (this one otherwise), so BaseLayout needs no
+// site-specific knowledge. A custom footer receives the same `lang` prop.
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Props {
+  lang: Lang;
+}
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+---
+
+<footer class="border-t border-[var(--aas-border)] py-8 text-center text-sm text-[var(--aas-muted)]">
+  <p>
+    {t('footer.builtWith')}
+    <a
+      href="https://astro.build"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-[var(--aas-accent)]">Astro</a
+    >. {t('footer.contribute')}
+  </p>
+</footer>

package/src/components/ProductLanding.astro

@@ -47,7 +47,7 @@ const altBg = (i: number) => i % 2 === 1;
     ]}
   >
     <div class="mx-auto max-w-[75rem] px-5">
-      {d.icon && <img src={withBase(d.icon)} alt="" class="mx-auto h-24 w-24 rounded-[22%] object-contain" />}
+      {d.icon && <img src={withBase(d.icon)} alt="" class:list={['mx-auto h-24 w-24 rounded-[22%] object-contain', d.iconInvert && 'aas-icon-invert']} />}
       <h1 class="mt-6 text-4xl font-bold tracking-tight sm:text-5xl">{d.title}</h1>
       {d.subtitle && <p class="mt-3 text-xl text-[var(--aas-muted)]" set:html={d.subtitle} />}
       {

package/src/components/ProductsIndex.astro

@@ -54,7 +54,7 @@ const sections = productTree.roots
             class="aas-lift flex items-center gap-6 rounded-3xl border border-[var(--aas-border)] bg-[var(--aas-panel)] p-6 no-underline"
           >
             {a.data.icon && (
-              <img src={withBase(a.data.icon)} alt="" class="h-20 w-20 shrink-0 rounded-[22%] object-contain" loading="lazy" />
+              <img src={withBase(a.data.icon)} alt="" class:list={['h-20 w-20 shrink-0 rounded-[22%] object-contain', a.data.iconInvert && 'aas-icon-invert']} loading="lazy" />
             )}
             <span class="min-w-0">
               <span class="block text-xl font-semibold text-[var(--aas-text)]">{a.data.title}</span>

package/src/content.ts

@@ -430,6 +430,9 @@ export function defineAasCollections({
       // ---- hero ----
       subtitle: z.string().optional(),
       icon: z.string().optional(), // app icon (public/ path)
+      // Invert the icon in dark mode — for black line-art icons that would
+      // otherwise vanish on the dark card background.
+      iconInvert: z.boolean().default(false),
       // Free-form key a site can target from its CSS (`.aas-hero-bg-<key>`)
       // for a custom hero background.
       heroBg: z.string().optional(),

package/src/layouts/BaseLayout.astro

@@ -6,6 +6,10 @@ import { useTranslations, languages, type Lang } from '../i18n/ui';
 import LanguageSwitcher from '../components/LanguageSwitcher.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import BackToTop from '../components/BackToTop.astro';
+// Resolved by the integration: the site's src/components/Footer.astro when it
+// exists, the theme's DefaultFooter otherwise.
+// @ts-expect-error -- virtual alias, no static types
+import Footer from '@aas-footer';
 import { getNavPages, pageSlugOf } from '../lib/pages';
 import { getNavProducts, getTopProducts, productSlugOf } from '../lib/products';
 import { homeTemplate } from '../lib/home';
@@ -378,21 +382,7 @@ const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(it
       <slot />
     </main>
 
-    <footer
-      class="border-t border-[var(--aas-border)] py-8 text-center text-sm text-[var(--aas-muted)]"
-    >
-      <p>
-        {t('footer.builtWith')}
-        <a
-          href="https://astro.build"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-[var(--aas-accent)]">Astro</a
-        >. {
-          t('footer.contribute')
-        }
-      </p>
-    </footer>
+    <Footer lang={lang} />
 
     <BackToTop lang={lang} />
 

package/src/lib/home.ts

@@ -24,6 +24,9 @@ export interface HomeCard {
   description?: Localized;
   icon?: string; // public/ path
   rounded?: boolean; // app-icon style rounding for the icon
+  /** Invert the icon in dark mode — for black line-art icons that would
+   *  otherwise vanish on the dark card background. */
+  iconInvert?: boolean;
   tags?: string[] | Record<string, string[]>;
 }
 
@@ -31,6 +34,7 @@ export interface HomeConfig {
   template: 'cards';
   hero?: {
     icon?: string; // public/ path, shown above the title
+    iconInvert?: boolean; // invert the icon in dark mode (black line art)
     title?: Localized; // defaults to site.name
     subtitle?: Localized; // defaults to the site.tagline UI string
   };

package/src/styles/global.css

@@ -179,6 +179,12 @@ html {
 :root[data-theme='dark'] .aas-deprecated {
   color: #fbbf24;
 }
+/* Icons flagged `iconInvert` (home cards, products) are black line art that
+   would vanish on the dark card background — flip them to white in dark. */
+:root[data-theme='dark'] .aas-icon-invert {
+  filter: invert(1);
+}
+
 /* "No updates in 1+ year" — same amber warning weight as deprecated. */
 .aas-stale {
   background: color-mix(in srgb, #d97706 16%, transparent);