redpanda-data · JakeSCahill · Jun 7, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
@@ -32,8 +32,8 @@
             TAG="${{ github.ref_name }}"
             ASSET=./build/ui-bundle.zip
             FLAGS="--generate-notes"
-            if [[ "$TAG" == *-* ]]; then
-              FLAGS="$FLAGS --prerelease"
+            if [[ "$TAG" =~ - ]]; then
+              FLAGS+=" --prerelease"
             fi
             gh release create "$TAG" $ASSET $FLAGS
 

diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 /node_modules/
 /public/
 .DS_Store
-blobl.wasm
+blobl.wasm
+/src/static
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-10
+16
diff --git a/compile-partial.js b/compile-partial.js
@@ -0,0 +1,135 @@
+const fs = require('fs');
+const path = require('path');
+const Handlebars = require('handlebars');
+
+const helpersDir = path.join(__dirname, 'src', 'helpers');
+if (fs.existsSync(helpersDir)) {
+  fs.readdirSync(helpersDir).forEach((file) => {
+    if (file.endsWith('.js')) {
+      const name = path.basename(file, '.js');
+      const helperFn = require(path.join(helpersDir, file));
+      if (typeof helperFn !== 'function') {
+        console.warn(`⚠️ Skipping ${file}: not a function`);
+        return;
+      }
+      Handlebars.registerHelper(name, helperFn);
+    }
+  });
+}
+
+function readJson(filepath) {
+  try {
+    return JSON.parse(fs.readFileSync(filepath, 'utf8'));
+  } catch (err) {
+    console.warn(`⚠️ Failed to read context JSON (${filepath}), using empty context.`);
+    return {};
+  }
+}
+
+// Parse args
+const args = process.argv.slice(2);
+const [partialName, jsonPathOrFlag, ...rest] = args;
+
+if (!partialName) {
+  console.error('❌ Usage: node compile-partial.js <partial-name> [context.json] [--jsScripts=\'["a.js"]\']');
+  process.exit(1);
+}
+
+// Flags
+let jsonPath = null;
+let jsScripts = [];
+
+for (const arg of [jsonPathOrFlag, ...rest]) {
+  if (arg?.startsWith('--jsScripts=')) {
+    try {
+      jsScripts = JSON.parse(arg.split('=')[1]);
+    } catch {
+      console.warn('⚠️ Invalid --jsScripts argument. Skipping.');
+    }
+  } else if (arg && !arg.startsWith('--')) {
+    jsonPath = arg;
+  }
+}
+
+// Paths
+const baseDir = __dirname;
+const partialsDir = path.join(baseDir, 'src', 'partials');
+const cssSrcDir = path.join(baseDir, 'src', 'css');
+const jsSrcDir = path.join(baseDir, 'src', 'js');
+const outDir = path.join(baseDir, 'src', 'static', 'assets', 'widgets');
+const cssOutDir = path.join(outDir, 'css');
+const jsOutDir = path.join(outDir, 'js');
+
+// Load partial template
+const templatePath = path.join(partialsDir, `${partialName}.hbs`);
+if (!fs.existsSync(templatePath)) {
+  console.error(`❌ Partial not found: ${templatePath}`);
+  process.exit(1);
+}
+
+// Register all partials
+fs.readdirSync(partialsDir).forEach((file) => {
+  if (file.endsWith('.hbs')) {
+    const name = path.basename(file, '.hbs');
+    const template = fs.readFileSync(path.join(partialsDir, file), 'utf8');
+    Handlebars.registerPartial(name, template);
+  }
+});
+
+const templateSrc = fs.readFileSync(templatePath, 'utf8');
+const template = Handlebars.compile(templateSrc);
+const context = jsonPath ? readJson(path.resolve(jsonPath)) : {};
+
+let html = template(context);
+
+// 🔽 Inject CSS if exists
+const sharedCssFiles = ['typeface-inter-bump.css', 'header-bump.css', 'footer-bump.css'];
+const allCssFiles = [...sharedCssFiles, `${partialName}-bump.css`];
+const cssTags = [];
+
+fs.mkdirSync(cssOutDir, { recursive: true });
+
+allCssFiles.forEach(cssFile => {
+  const srcPath = path.join(cssSrcDir, cssFile);
+  const outPath = path.join(cssOutDir, cssFile);
+  if (fs.existsSync(srcPath)) {
+    fs.copyFileSync(srcPath, outPath);
+    cssTags.push(`<link rel="stylesheet" href="/assets/widgets/css/${cssFile}">`);
+  } else if (cssFile !== `${partialName}-bump.css`) {
+    console.warn(`⚠️ Shared CSS not found: ${cssFile}`);
+  }
+});
+
+if (partialName === 'head-scripts') {
+  // Prepend styles
+  if (cssTags.length) {
+    html = `${html}\n${cssTags.join('\n')}`;
+  }
+}
+
+// 🔽 Inject JS scripts
+if (Array.isArray(jsScripts)) {
+  fs.mkdirSync(jsOutDir, { recursive: true });
+
+  const scriptTags = jsScripts.map((jsFile) => {
+    const jsSrcPath = path.join(jsSrcDir, jsFile);
+    const jsOutPath = path.join(jsOutDir, jsFile);
+
+    if (fs.existsSync(jsSrcPath)) {
+      fs.copyFileSync(jsSrcPath, jsOutPath);
+      return `<script src="/assets/widgets/js/${jsFile}"></script>`;
+    } else {
+      console.warn(`⚠️ JS script not found: ${jsSrcPath}`);
+      return '';
+    }
+  }).filter(Boolean).join('\n  ');
+
+  if (scriptTags) {
+    html = `${html}\n${scriptTags}`;
+  }
+}
+
+// Output HTML
+fs.mkdirSync(outDir, { recursive: true });
+const outFile = path.join(outDir, `${partialName}.html`);
+fs.writeFileSync(outFile, html);
diff --git a/context/footer.json b/context/footer.json
@@ -0,0 +1,5 @@
+{
+  "isStandaloneWidget": "true",
+  "includeAlgoliaScript": "true",
+  "uiRootPath": "/_"
+}
diff --git a/context/head.json b/context/head.json
@@ -0,0 +1,10 @@
+{
+  "site": {
+    "keys": {
+      "googleAnalytics": "GTM-WB2CSV5"
+    }
+  },
+  "isStandaloneWidget": "true",
+  "includeAlgoliaScript": "true",
+  "uiRootPath": "/_"
+}
diff --git a/context/header.json b/context/header.json
@@ -0,0 +1,85 @@
+{
+  "isStandaloneWidget": "true",
+  "includeAlgoliaScript": "true",
+  "site": {
+    "keys": {
+      "googleAnalytics": "GTM-WB2CSV5"
+    },
+    "homeUrl": "/",
+    "components": {
+      "redpanda-labs": {
+        "latest": {
+          "title": "Labs",
+          "url": "/redpanda-labs/",
+          "asciidoc": {
+            "attributes": {
+              "page-header-data": {
+                "order": 4
+              }
+            }
+          }
+        }
+      },
+      "api": {
+        "latest": {
+          "title": "API",
+          "url": "/api/"
+        }
+      },
+      "redpanda-cloud": {
+        "latest": {
+          "title": "Cloud",
+          "url": "/redpanda-cloud/home/",
+          "asciidoc": {
+            "attributes": {
+              "page-header-data": {
+                "order": 1              }
+            }
+          }
+        }
+      },
+      "redpanda-connect": {
+        "latest": {
+          "title": "Connect",
+          "url": "/redpanda-connect/home/",
+          "asciidoc": {
+            "attributes": {
+              "page-header-data": {
+                "order": 3
+              }
+            }
+          }
+        }
+      },
+      "ROOT": {
+        "latest": {
+          "title": "Self-Managed",
+          "url": "/current/home/",
+          "asciidoc": {
+            "attributes": {
+              "page-header-data": {
+                "order": 2
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "page": {
+    "component": {
+      "title": "API",
+      "latest": {
+        "asciidoc": {
+          "attributes": {
+            "page-header-data": {
+              "color": "#d73d23"
+            }
+          }
+        }
+      }
+    }
+  },
+  "uiRootPath": "/_"
+}
+
diff --git a/gulpfile.js b/gulpfile.js
@@ -4,7 +4,7 @@ const { parallel, series, watch } = require('gulp')
 const createTask = require('./gulp.d/lib/create-task')
 const exportTasks = require('./gulp.d/lib/export-tasks')
 const log = require('fancy-log')
-const { exec } = require('child_process')
+const { exec, execSync } = require('child_process')
 const path = require('path')
 const gulp = require('gulp')
 
@@ -28,6 +28,38 @@ const glob = {
 const rapidocSrc = 'node_modules/rapidoc/dist/rapidoc-min.js'
 const rapidocDest = path.join(srcDir, 'static')
 
+/**
+ * Compiles Handlebars partial templates by executing a Node.js script for each specified partial.
+ *
+ * @param {Function} cb - Callback to signal task completion or failure.
+ *
+ * @throws {Error} If any partial compilation fails, the callback is invoked with an error.
+ */
+function compileWidgets (cb) {
+  const partialsToCompile = [
+    { name: 'header', context: 'context/header.json' },
+    { name: 'footer', context: 'context/footer.json', scripts: ['05-mobile-navbar.js'] },
+    { name: 'head-scripts', context: 'context/head.json' },
+  ]
+
+  try {
+    for (const { name, context, scripts } of partialsToCompile) {
+      const jsArg = scripts ? ` --jsScripts='${JSON.stringify(scripts)}'` : ''
+      const ctxArg = context ? `${context}` : ''
+      const cmd = `node compile-partial.js ${name} ${ctxArg}${jsArg}`.trim()
+      execSync(cmd, { stdio: 'inherit' })
+    }
+    cb()
+  } catch (err) {
+    cb(new Error(`Failed to compile Handlebars partials: ${err.message}`))
+  }
+}
+
+/**
+ * Copies the Rapidoc JavaScript file from the source location to the static assets directory.
+ *
+ * @returns {Stream} A Gulp stream representing the copy operation.
+ */
 function copyRapidoc () {
   return gulp.src(rapidocSrc)
     .pipe(gulp.dest(rapidocDest))
@@ -103,7 +135,7 @@ const buildWasmTask = createTask({
 
 const bundleBuildTask = createTask({
   name: 'bundle:build',
-  call: series(cleanTask, lintTask, buildWasmTask, copyRapidoc, buildTask),
+  call: series(cleanTask, lintTask, buildWasmTask, copyRapidoc, compileWidgets, buildTask),
 })
 
 const bundlePackTask = createTask({

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "url": "https://github.com/redpanda-data/docs-ui.git"
   },
   "engines": {
-    "node": ">= 14.0.0"
+    "node": ">= 16.0.0"
   },
   "browserslist": [
     "last 2 versions"

diff --git a/src/css/dark-mode.css b/src/css/dark-mode.css
@@ -45,6 +45,7 @@ html[data-theme=dark] {
   --toolbar-background: var(--body-background);
   --toolbar-border-color: var(--panel-border-color);
   --toolbar-font-color: var(--body-font-color);
+  --default-header-color: var(--redpanda-800);
   --toolbar-muted-color: var(--color-gray-40);
   --page-version-menu-background: #545454;
   --page-version-font-color: var(--body-font-color);