fix(ui): theme toggle + VCS icon CSS, stop clobbering site-extra on prebuild, rename site to Food Truck Nerdz

Made-with: Cursor

Author: AMDphreak

README.adoc

@@ -48,7 +48,7 @@ This playbook coordinates documentation from multiple repositories. Each reposit
 
 Each component contains an `antora.yml` descriptor file (which defines the component `name` and `title`) and its documentation pages organized in the `modules/ROOT/` structure. The playbook pulls from each repository's Git source to build the unified documentation site. Short `title` values used in the component switcher: `ftn-site` → *Docs*; this *docs* repository’s meta component → *Docs*; `onboarding` → *Onboarding*; `food-truck-api` → *API*; `help` → *Public Help Portal*; `developer-portal` → *Developer Portal*.
 
-The `site/supplemental-ui/` directory holds custom Handlebars partials, CSS, and JavaScript (mast bar, sidebar tree, Outfit font, header links, breadcrumb component/version pickers, etc.). Before every build, `site/scripts/sync-antora-dark-theme.cjs` copies `site-extra.css` and images from the current `antora-dark-theme` npm package into that folder, because Antora exposes only a single `ui.supplemental_files` path. `css/site-doc-layout.css`, `partials/`, and the layout scripts in this repository are *not* fully overwritten from npm on prebuild (only `site-extra.css` and `img/` sync; see `site/scripts/sync-antora-dark-theme.cjs`). The playbook `ui.bundle` uses link:https://github.com/antora-supplemental/antora-dark-theme[antora-supplemental/antora-dark-theme] release `ui-bundle.zip` as the base, with these supplemental files applied on top. Playbook `site.keys` and footer credits are documented in link:https://github.com/FoodTruckNerdz/docs/blob/main/docs/modules/ROOT/pages/docs-site-management.adoc#ui-bundle[Documentation Site Management] (section *UI bundle*); the published page is link:https://docs.foodtrucknerdz.com/docs/docs-site-management.html#ui-bundle[docs.foodtrucknerdz.com].
+The `site/supplemental-ui/` directory holds custom Handlebars partials, CSS, and JavaScript (mast bar, sidebar tree, Outfit font, header links, breadcrumb component/version pickers, etc.). Before every build, `site/scripts/sync-antora-dark-theme.cjs` copies only `img/` (VCS icons, etc.) from the `antora-dark-theme` npm package into that folder, because Antora exposes only a single `ui.supplemental_files` path. `css/site-extra.css`, `css/site-doc-layout.css`, `partials/`, and the layout scripts are maintained in this repository; merge upstream theme CSS from the package when you bump `antora-dark-theme` (see `site/scripts/sync-antora-dark-theme.cjs`). The playbook `ui.bundle` uses link:https://github.com/antora-supplemental/antora-dark-theme[antora-supplemental/antora-dark-theme] release `ui-bundle.zip` as the base, with these supplemental files applied on top. Playbook `site.keys` and footer credits are documented in link:https://github.com/FoodTruckNerdz/docs/blob/main/docs/modules/ROOT/pages/docs-site-management.adoc#ui-bundle[Documentation Site Management] (section *UI bundle*); the published page is link:https://docs.foodtrucknerdz.com/docs/docs-site-management.html#ui-bundle[docs.foodtrucknerdz.com].
 
 == Documentation Sites
 

antora-playbook.yml

@@ -1,5 +1,5 @@
 site:
-  title: Documentation
+  title: Food Truck Nerdz
   url: https://docs.foodtrucknerdz.com
   start_page: docs::index.adoc
   keys:

docs/modules/ROOT/pages/docs-site-management.adoc

@@ -22,7 +22,7 @@ This repository (`docs`) contains the core configuration for the documentation s
 [[ui-bundle]]
 == UI bundle
 
-The published site uses link:https://github.com/antora-supplemental/antora-dark-theme[antora-supplemental/antora-dark-theme] as the base Antora UI bundle (`ui.bundle.url` in the playbook; use the `releases/latest/download/ui-bundle.zip` asset). FoodTruckNerdz layers custom partials, CSS, and scripts on top via `site/supplemental-ui/`. The `package.json` `prebuild` step runs `site/scripts/sync-antora-dark-theme.cjs`, which copies `site-extra.css`, `site-ftn-docs.css`, and `img/` from the `antora-dark-theme` npm package into that folder, because Antora accepts only a single `ui.supplemental_files` path. The dark-mode script in `site/supplemental-ui/js/site-dark-mode.js` is **maintained in this repository** in lockstep with **antora-dark-theme 1.0+** (system / override behavior); bump the `antora-dark-theme` devDependency after a new theme release (push a `v*` tag on the theme repo; CI builds the release and can publish the npm package), then `pnpm install`.
+The published site uses link:https://github.com/antora-supplemental/antora-dark-theme[antora-supplemental/antora-dark-theme] as the base Antora UI bundle (`ui.bundle.url` in the playbook; use the `releases/latest/download/ui-bundle.zip` asset). FoodTruckNerdz layers custom partials, CSS, and scripts on top via `site/supplemental-ui/`. The `package.json` `prebuild` step runs `site/scripts/sync-antora-dark-theme.cjs`, which copies only `img/` from the `antora-dark-theme` npm package into that folder (supplemental `site-extra.css` and other CSS stay repo-maintained so CI does not overwrite FoodTruckNerdz-specific rules). The dark-mode script in `site/supplemental-ui/js/site-dark-mode.js` is **maintained in this repository** in lockstep with **antora-dark-theme 1.0+** (system / override behavior); bump the `antora-dark-theme` devDependency after a new theme release (push a `v*` tag on the theme repo; CI builds the release and can publish the npm package), then `pnpm install`.
 
 Optional `site.keys` in the playbook control the footer label and link for the base theme (keep them aligned with the bundle you reference in `ui.bundle`):
 

site/scripts/sync-antora-dark-theme.cjs

@@ -9,7 +9,8 @@ const destRoot = path.join(siteRoot, 'supplemental-ui')
 const src = path.join(repoRoot, 'node_modules', 'antora-dark-theme', 'supplemental-ui')
 
 const files = [
-  ['css', 'site-extra.css'],
+  /* Do not copy site-extra.css from npm: CI prebuild would overwrite FTN card/tile + theme fixes.
+     Merge upstream dark-theme changes from node_modules/antora-dark-theme/supplemental-ui/css/ manually. */
   /* site-doc-layout.css, partials, site-dark-mode.js, site-adt-accordion.js: maintained in this repo
      (FoodTruckNerdz branding: header, footer, truck logo, sticky-footer block at top of
      site-doc-layout.css). The package is the debranded baseline; do not prebuild-overwrite the full

site/supplemental-ui/css/site-doc-layout.css

@@ -282,22 +282,31 @@ a.adt-header-title:focus {
   filter: var(--adt-header-vcs-icon-filter, none);
 }
 
+/* Sun/moon toggle: moon uses a filled path; sun uses stroked circle + lines — do not set fill:none on all paths */
 .header.adt-header .adt-header-icon-btn .theme-icon {
   width: 18px;
   height: 18px;
   display: block;
-  fill: none;
+  fill: currentColor;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
-.header.adt-header .adt-header-icon-btn .theme-icon path,
 .header.adt-header .adt-header-icon-btn .theme-icon circle {
   fill: none;
 }
 
+.header.adt-header .adt-header-icon-btn .theme-icon line {
+  stroke: currentColor;
+}
+
+.header.adt-header .adt-header-icon-btn .theme-icon path {
+  fill: currentColor;
+  stroke: none;
+}
+
 @media screen and (min-width: 1024px) {
   .adt-header .adt-topbar,
   .adt-header .adt-topbar .navbar-end {

site/supplemental-ui/css/site-extra.css

@@ -428,18 +428,26 @@ html.dark-theme .home-link {
   width: 18px;
   height: 18px;
   display: block;
-  fill: none;
+  fill: currentColor;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
-.theme-toggle .theme-icon path,
 .theme-toggle .theme-icon circle {
   fill: none;
 }
 
+.theme-toggle .theme-icon line {
+  stroke: currentColor;
+}
+
+.theme-toggle .theme-icon path {
+  fill: currentColor;
+  stroke: none;
+}
+
 /* Hide default Download button until JS replaces it (prevents flash on load) */
 .navbar .navbar-end a.button.is-primary[href="#"] {
   visibility: hidden;

site/supplemental-ui/css/site-ftn-docs.css

@@ -254,18 +254,26 @@ a.ftn-header-title:focus {
   width: 18px;
   height: 18px;
   display: block;
-  fill: none;
+  fill: currentColor;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
-.header.ftn-header .ftn-header-icon-btn .theme-icon path,
 .header.ftn-header .ftn-header-icon-btn .theme-icon circle {
   fill: none;
 }
 
+.header.ftn-header .ftn-header-icon-btn .theme-icon line {
+  stroke: currentColor;
+}
+
+.header.ftn-header .ftn-header-icon-btn .theme-icon path {
+  fill: currentColor;
+  stroke: none;
+}
+
 @media screen and (min-width: 1024px) {
   .ftn-header .ftn-topbar,
   .ftn-header .ftn-topbar .navbar-end {

site/supplemental-ui/js/site-dark-mode.js

@@ -138,7 +138,12 @@
 
   function vcsIconUrl(base, id) {
     const root = (base || ".").replace(/\/?$/, "/");
-    return `${root}img/vcs/${id}.svg`;
+    const rel = `${root}img/vcs/${id}.svg`;
+    try {
+      return new URL(rel, window.location.href).href;
+    } catch {
+      return rel;
+    }
   }
 
   function applyVcsIcons() {

site/supplemental-ui/partials/header-content.hbs

@@ -4,13 +4,13 @@
       <a class="adt-header-logo-item" href="{{{or (lookup site.keys 'foodtrucknerdz_com') 'https://foodtrucknerdz.com'}}}" rel="noopener" target="_blank" title="foodtrucknerdz.com" aria-label="foodtrucknerdz.com (opens in new tab)">
         <img class="adt-header-logo" src="{{{uiRootPath}}}/img/foodtrucknerdz.svg" width="34" height="34" alt="" />
       </a>
-      <a class="navbar-item adt-header-title" href="{{{or site.url siteRootPath}}}">Documentation</a>
+      <a class="navbar-item adt-header-title" href="{{{or site.url siteRootPath}}}">{{detag (or (lookup site.keys 'title_bar_brand') (or site.title 'Food Truck Nerdz'))}}</a>
     </div>
     <div id="topbar-nav" class="navbar-menu adt-topbar" role="navigation" aria-label="External links">
       <div class="navbar-end adt-header-actions">
         {{#if (and @root.page.origin @root.page.origin.webUrl)}}
         <a class="navbar-item adt-header-icon-btn adt-header-vcs" href="{{{@root.page.origin.webUrl}}}" rel="noopener" target="_blank" title="Source repository" aria-label="Source repository (opens in new tab)">
-          <img class="adt-header-vcs-img" src="{{{uiRootPath}}}/img/vcs/code.svg" width="24" height="24" alt="" />
+          <img class="adt-header-vcs-img" src="{{{uiRootPath}}}/img/vcs/github.svg" width="24" height="24" alt="" />
         </a>
         {{else}}
         <a class="navbar-item adt-header-icon-btn adt-header-vcs" href="{{{or (lookup site.keys 'github_profile_url') 'https://github.com/FoodTruckNerdz'}}}" rel="noopener" target="_blank" title="Project on GitHub" aria-label="Project on GitHub (opens in new tab)">