Adding common TBA header/image to pages

Author: DavidQ

docs/pr/BUILD_PR_LEVEL_24_6_TOOLBOXAID_SHARED_THEME_HEADER.md

@@ -4,7 +4,7 @@
 Provide the shared Toolbox Aid header as real importable source under `src/engine/theme`.
 
 ## Required Shared Source
-- `src/engine/theme/toolboxaid-header.template.html`
+- `src/engine/theme/toolboxaid-header.html`
 - `src/engine/theme/toolboxaid-header.css`
 - `src/engine/theme/toolboxaid-header.js`
 - `src/engine/theme/index.js`

samples/index.html

@@ -167,14 +167,16 @@
   <div class="wrap">
     <div class="hideme">
       <div id="shared-theme-header"></div>
-      <section class="samples-favorites" aria-label="Pinned samples">
-        <h2>Pinned Samples</h2>
-        <p class="hint">Pin samples with the star button to keep quick access between visits.</p>
-        <div class="grid" id="samples-favorites-grid"></div>
-        <p class="empty" id="samples-favorites-empty">No pinned samples yet.</p>
-      </section>
+      <p></p>
     </div>
 
+    <section class="samples-favorites" aria-label="Pinned samples">
+      <h2>Pinned Samples</h2>
+      <p class="hint">Pin samples with the star button to keep quick access between visits.</p>
+      <div class="grid" id="samples-favorites-grid"></div>
+      <p class="empty" id="samples-favorites-empty">No pinned samples yet.</p>
+    </section>
+
     <section class="samples-filters" aria-label="Sample filters">
       <div>
         <label for="sample-phase-filter">Phase</label>

src/engine/theme/README.md

@@ -3,7 +3,7 @@
 This folder now contains the raw shared header source plus the importable module.
 
 ## Files
-- `toolboxaid-header.template.html` → raw shared header markup
+- `toolboxaid-header.html` → raw shared header markup
 - `toolboxaid-header.css` → shared styling
 - `toolboxaid-header.js` → importable module that exports the HTML and mount helpers
 - `index.js` → re-export entry

src/engine/theme/toolboxaid-header.css

@@ -10,6 +10,12 @@
   --toolboxaid-max-width: 1200px;
 }
 
+.header-image{
+  background-color: #3600af;  
+  background-image: url('/src/engine/theme/toolboxaid-header.png') !important;
+  border-bottom: 8px solid #3600af;
+}
+
 .toolboxaid-theme-header {
   box-sizing: border-box;
   width: 100%;

…ne/theme/toolboxaid-header.template.html src/engine/theme/toolboxaid-header.htmlsrc/engine/theme/toolboxaid-header.template.html renamed to src/engine/theme/toolboxaid-header.html src/engine/theme/toolboxaid-header.template.html renamed to src/engine/theme/toolboxaid-header.html

@@ -6,7 +6,7 @@
     </div> -->
 
     <div id="image" class="header-image bg-image-fill site-tagline">
-      <h1 class="site-name align-center"><a href="__TITLE_URL__">__TITLE__</a></h1>
+      <!-- <h1 class="site-name align-center"><a href="__TITLE_URL__">__TITLE__</a></h1> -->
     </div>
 
     <div id="tagline" class="site-tagline site-tagline-alt align-center">

src/engine/theme/toolboxaid-header.js

@@ -26,10 +26,10 @@ async function loadTemplate() {
     return templateCache;
   }
 
-  const templateUrl = new URL('./toolboxaid-header.template.html', import.meta.url);
+  const templateUrl = new URL('./toolboxaid-header.html', import.meta.url);
   const response = await fetch(templateUrl);
   if (!response.ok) {
-    throw new Error('Failed to load toolboxaid-header.template.html');
+    throw new Error('Failed to load toolboxaid-header.html');
   }
 
   templateCache = await response.text();

src/engine/theme/toolboxaid-header.png

@@ -29,7 +29,7 @@ body::before {
   inset: 0;
   z-index: -1;
   background-color: #4c1d95;
-  background-image: linear-gradient(
+  /* background-image: linear-gradient(
     to bottom,
     #c4b5fd,
     #a78bfa,
@@ -38,7 +38,7 @@ body::before {
     #6d28d9,
     #5b21b6,
     #4c1d95
-  );
+  ); */
   background-repeat: no-repeat;
   pointer-events: none;
 }