@madgex/fert 7.2.1 → 7.3.0

package/bin/cli.js

@@ -12,6 +12,7 @@ import { configsCommand } from './commands/configs.js';
 import { initCommand } from './commands/init.js';
 import { validateCommand } from './commands/validate.js';
 import { rootTasksBootstrap } from './commands/_root-tasks-bootstrap.js';
+import { initTemplateCommand } from './commands/init-template.js';
 
 const cli = cac('fert');
 
@@ -66,6 +67,9 @@ const run = () => {
     .command('init [root]', 'Create a new branding project')
     .option('--cpid <cpid>', 'Specify the clientPropertyId to use in the new project')
     .action((...args) => initCommand(...args));
+  cli
+    .command('init-template', 'Create a custom template for a specific service & header or footer')
+    .action((...args) => initTemplateCommand(...args));
 
   cli.command('validate', 'Validate branding project for common issues').action((...args) => validateCommand(...args));
 

package/bin/commands/init-template-tasks/copy-theme-files.js

@@ -0,0 +1,61 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { log } from '../../utils/logging.js';
+import { getOutDir } from './get-out-dir.js';
+import { getNunjucksDependencies } from './get-nunjucks-dependencies.js';
+
+/**
+ * Collect all dependency include/import files (and all icon .svg files) for a given theme entry file.
+ * Copy all these files to new output directory (e.g. service's templates folder)
+ * Main macro inside entryFilePath is renamed to `CUSTOM`
+ * @param {import('../init-template.js').Result} result
+ * @param {string} themeDir absolute dir path of `theme` folder in header footer podlet package
+ */
+export async function copyThemeFiles(result, themeDir) {
+  const outDir = getOutDir(result);
+  const { entryFilePath } = result.theme;
+  // icons are dynamic includes, so we grab all `.svg` icon paths to copy along with everything else
+  const iconFiles = await Array.fromAsync(fs.promises.glob(path.resolve(themeDir, '_common/icons/*.svg')));
+
+  // Discover all dependencies starting from the input file
+  const collectedFiles = new Set([...getNunjucksDependencies(entryFilePath), ...iconFiles]);
+
+  // Create output directory and copy all files
+  fs.mkdirSync(outDir, { recursive: true });
+
+  for (const absPath of collectedFiles) {
+    const relPath = path.relative(themeDir, absPath);
+    const destPath = path.join(outDir, relPath);
+    fs.mkdirSync(path.dirname(destPath), { recursive: true });
+
+    const source = fs.readFileSync(absPath, 'utf8');
+    let rewritten = prependTemplatePaths(source);
+    // this is the entry file
+    if (absPath === entryFilePath) {
+      rewritten = rewritten.replaceAll(result.theme.themeName, 'CUSTOM');
+    }
+    fs.writeFileSync(destPath, rewritten, 'utf8');
+  }
+
+  log.success(`\nStandalone editable theme initialised at: ${outDir}`);
+}
+
+/**
+ * Rewrite import/include paths in a file to prepend `templatePath` variable.
+ * `templatePath` required to make header-footer-podlet imports work with its HTTP nunjucks loader
+ * @param {string} source - The file contents
+ * @returns {string} The rewritten source
+ */
+export function prependTemplatePaths(source) {
+  return source
+    .replace(
+      // Rewrite from-imports: {% from 'path' import ... %} -> {% from templatePath + 'path' import ... %}
+      /(\{%-?\s*from\s+)/g,
+      (match, prefix) => `${prefix}templatePath + `,
+    )
+    .replace(
+      // Rewrite includes: {% include 'path' %} -> {% include templatePath + 'path' %}
+      /(\{%-?\s*include\s+)/g,
+      (match, prefix) => `${prefix}templatePath + `,
+    );
+}

package/bin/commands/init-template-tasks/generate-entry-nunjucks-file.js

@@ -0,0 +1,64 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import * as vite from 'vite';
+
+/**
+ * Create new entry file (e.g. `header.njk` or `footer.njk`), pointing at the new copied theme macro called `CUSTOM`.
+ * Also generate the correct arguments to pass to the macro using the Storybook story for that theme.
+ *
+ * @param {import('../init-template.js').Result} result
+ * @param {string} hfpDir absolute dir path for header footer podlet package
+ * @param {string} themeDir absolute dir path of `theme` folder in header footer podlet package
+ * */
+export async function generateEntryNunjucksFile(result, hfpDir, themeDir) {
+  const { entryFilePath, type } = result.theme;
+
+  // the story file for the theme, we are trusting the filename contains the theme name
+  const storyFile = path.resolve(hfpDir, `.storybook/stories/components/${result.theme.themeName}.stories.jsx`);
+
+  /** Bundle the story file as CJS, stubbing out ServerRender to avoid React requirement */
+  const response = await vite.build({
+    root: path.dirname(storyFile),
+    plugins: [
+      {
+        name: 'stub-server-render',
+        enforce: 'pre',
+        resolveId(source) {
+          // replace import with replaceable string
+          if (source.endsWith('ServerRender.jsx')) return '\0server-render-stub';
+          return undefined;
+        },
+        load(id) {
+          // replace string with empty const, we don't need/want `ServerRender`, we just want `default.args` object
+          if (id === '\0server-render-stub') return 'export const ServerRender = null;';
+          return undefined;
+        },
+      },
+    ],
+    build: {
+      lib: { entry: storyFile, formats: ['cjs'] },
+      write: false,
+      rollupOptions: { output: { sourcemap: false, manualChunks: undefined } }, // all in 1 "file" output
+    },
+    logLevel: 'silent',
+  });
+
+  /** Evaluate the CJS bundle to extract the default export's args */
+  const code = response[0].output[0].code;
+  const moduleExports = {};
+  const moduleObj = { exports: moduleExports };
+  new Function('exports', 'module', code)(moduleExports, moduleObj);
+
+  const args = moduleObj.exports.default.args;
+
+  args.serviceName = result.service.serviceConfig.serviceName;
+
+  const rootDir = path.resolve(result.service.dir, 'templates');
+  const relEntryFilePath = path.relative(themeDir, entryFilePath);
+  const argsJson = JSON.stringify(args, null, 4);
+  fs.writeFileSync(
+    path.join(rootDir, `${type}.njk`),
+    `{% from templatePath + './custom-${type}/${relEntryFilePath}' import CUSTOM with context %}\n{{ CUSTOM(${argsJson}) }}\n`,
+    { encoding: 'utf-8' },
+  );
+}

package/bin/commands/init-template-tasks/get-macro-name-from-nunjucks.js

@@ -0,0 +1,13 @@
+import * as parser from 'nunjucks/src/parser.js';
+import * as nodes from 'nunjucks/src/nodes.js';
+
+/**
+ * Extract the first macro name from a template source.
+ * @param {string} source - The file contents
+ */
+export function getMacroNameFromNunjucks(source) {
+  const ast = parser.parse(source);
+  const macros = ast.findAll(nodes.Macro);
+  if (macros.length === 0) return undefined;
+  return macros[0].name.value;
+}

package/bin/commands/init-template-tasks/get-nunjucks-dependencies.js

@@ -0,0 +1,58 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import * as parser from 'nunjucks/src/parser.js';
+import * as nodes from 'nunjucks/src/nodes.js';
+
+/**
+ * Recursively discover all included/imported files using the nunjucks AST, given an entry nunjucks file
+ * @param {string} filePath - Absolute path to the entry file
+ * @param {Set<string>} _discovered - Set of all discovered absolute file paths
+ * @returns {Set<string>} Set of all discovered absolute file paths (including the entry)
+ */
+export function getNunjucksDependencies(filePath, _discovered = new Set()) {
+  let discovered = new Set(_discovered);
+  if (discovered.has(filePath)) return discovered;
+  discovered.add(filePath);
+
+  if (!fs.existsSync(filePath)) {
+    console.error(`WARNING: File not found: ${filePath}`);
+    return discovered;
+  }
+
+  const source = fs.readFileSync(filePath, 'utf8');
+  const dir = path.dirname(filePath);
+
+  for (const relDepPath of getDependencyPaths(source)) {
+    const absDepPath = path.resolve(dir, relDepPath);
+    discovered = getNunjucksDependencies(absDepPath, discovered);
+  }
+  return discovered;
+}
+
+/**
+ * Extract all template paths (from imports and includes) from a source string using the AST.
+ * Dynamic imports and includes are not collected.
+ *
+ * @param {string} source - Nunjucks template source
+ * @returns {string[]} Array of *relative* paths referenced in the template
+ */
+export function getDependencyPaths(source) {
+  const ast = parser.parse(source);
+  const paths = [];
+
+  for (const node of ast.findAll(nodes.FromImport)) {
+    // `node.template.value` will not exist for dynamic import
+    if (node.template && node.template.value) {
+      paths.push(node.template.value);
+    }
+  }
+
+  for (const node of ast.findAll(nodes.Include)) {
+    // `node.template.value` will not exist for dynamic include
+    if (node.template && node.template.value) {
+      paths.push(node.template.value);
+    }
+  }
+
+  return paths;
+}

package/bin/commands/init-template-tasks/get-out-dir.js

@@ -0,0 +1,6 @@
+import path from 'node:path';
+
+/** @param {import("../init-template.js").Result} result */
+export function getOutDir(result) {
+  return path.resolve(result.service.dir, 'templates', `custom-${result.theme.type}`);
+}

package/bin/commands/init-template.js

@@ -0,0 +1,94 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import chalk from 'chalk';
+import prompts from 'prompts';
+import { findFertConfigDir, loadServiceConfigFiles } from '../utils/index.js';
+import { log } from '../utils/logging.js';
+import { generateEntryNunjucksFile } from './init-template-tasks/generate-entry-nunjucks-file.js';
+import { copyThemeFiles } from './init-template-tasks/copy-theme-files.js';
+import { getMacroNameFromNunjucks } from './init-template-tasks/get-macro-name-from-nunjucks.js';
+
+/** header-footer-podlet-server package root dir */
+const hfpDir = path.dirname(fileURLToPath(import.meta.resolve('@private/header-footer-podlet-server/package.json')));
+/** main themes dir inside header-footer-podlet-server */
+const themeDir = path.resolve(hfpDir, 'lib/templates/themes');
+
+/**
+ * Object constructed based on user selection - has all info required to copy a theme's files to the correct service template dir
+ * @typedef Result
+ * @type {object}
+ * @property {{dir:string, serviceConfig: FertServiceConfigFile}}  service
+ * @property {{type:"header"|"footer", themeName:string, entryFilePath:string}} theme
+ * */
+
+/**
+ * This command copies theme files from header-footer-podlet, into a service's template folder, to be used standalone for creating custom headers and footers.
+ *
+ * 1. collect user prompt choices
+ * 2. copy theme files based on choices - modified files to use `templatePath` and rename the theme macro name to `CUSTOM`
+ * 3. create new entry file (header.njk or footer.njk) pointing to the copied theme files
+ */
+export async function initTemplateCommand(/* options = {} */) {
+  /** @type {Result} */
+  let result;
+  const rootDir = await findFertConfigDir();
+
+  const serviceConfigs = await loadServiceConfigFiles();
+  if (!serviceConfigs.length) {
+    log.warn('No services found to populate with template');
+    return;
+  }
+
+  /** entry file paths for each theme, all entry files are named `header.njk` or `footer.njk` */
+  let themes = await Array.fromAsync(fs.promises.glob(path.resolve(themeDir, '**/{header,footer}.njk')));
+  // cheeky hardcode exclude `simplified` themes, as they are not really to be used again
+  themes = themes.filter((theme) => !theme.includes('simplified'));
+
+  /** @type {prompts.PromptObject[]} Ask user which service to copy files to, and which theme to copy */
+  const promptArr = [
+    {
+      type: 'select',
+      name: 'service',
+      message: 'Which Service?',
+      choices: serviceConfigs.map((item) => ({
+        title: item.serviceConfig.serviceName,
+        description: `Found at ${path.relative(rootDir, item?.dir)}`,
+        value: item,
+      })),
+      initial: 0,
+    },
+    {
+      type: 'select',
+      name: 'theme',
+      message: 'Which Theme?',
+      choices: themes.map((themeEntryFilePath) => {
+        // cheekily get `header` or `footer` "type" from the filename, we only collected `header.njk` and `footer.njk` in `themes` glob above.
+        const type = path.basename(themeEntryFilePath, '.njk');
+        const entryFileNjkSrc = fs.readFileSync(themeEntryFilePath, 'utf-8');
+        const themeName = getMacroNameFromNunjucks(entryFileNjkSrc);
+        return {
+          title: themeName,
+          description: `Type: ${type}`,
+          value: { type, themeName, entryFilePath: themeEntryFilePath },
+        };
+      }),
+      initial: 0,
+    },
+  ];
+
+  try {
+    result = await prompts(promptArr, {
+      onCancel: () => {
+        throw new Error(chalk.red('✖') + ' Operation cancelled');
+      },
+    });
+  } catch (cancelled) {
+    console.log(cancelled.message);
+    return;
+  }
+
+  await copyThemeFiles(result, themeDir);
+
+  await generateEntryNunjucksFile(result, hfpDir, themeDir);
+}

package/bin/utils/cpid-lookup.js

@@ -16,8 +16,9 @@ export async function doCpidLookup(clientPropertyId) {
       throw new Error(`${results.status} - ${errorMessage}`);
     }
     const { data } = await results.json();
-    const { brandName, parentId: parentCpid } = data;
+    const { name, brandName, parentId: parentCpid } = data;
     return {
+      name,
       brandName,
       parentCpid: parentCpid ?? false,
       rootClientPropertyId: parentCpid ?? clientPropertyId,

package/bin/utils/get-assets-path.js

@@ -3,12 +3,12 @@ import { ASSET_RELAY_API } from '../../constants.js';
 /**
  * fetch the Absolute URL `publicUrl` from asset-relay API, for current client & service
  *
- * @param {object} fertConfig
+ * @param {FertConfig} fertConfig
  * @param {object} environment
- * @returns {URL} Absoloute Public URL for assets
+ * @returns {URL} Absolute Public URL for assets
  */
 export async function getAssetsPath(fertConfig, environment) {
-  const { clientPropertyId, serviceName, client, config } = fertConfig;
+  const { clientPropertyId, serviceName, client } = fertConfig;
 
   // Try to get existing mapping
   const getUrl = new URL(ASSET_RELAY_API);
@@ -26,7 +26,7 @@ export async function getAssetsPath(fertConfig, environment) {
         clientPropertyId,
         rootClientPropertyId: client.rootClientPropertyId,
         serviceName,
-        siteName: config.SiteName,
+        siteName: client.name || client.brandName,
       }),
     });
 

package/bin/utils/index.js

@@ -12,35 +12,12 @@ import { cpidLookup } from './cpid-lookup.js';
 import { cpIdMatchesGitRemote } from './cpid-matches-git-remote.js';
 import { resolveExternalAssets } from './resolve-external-assets.js';
 import { log } from './logging.js';
-import { CONFIG_API, VERSION, FERT_CONFIG_FILENAME, FERT_SERVICE_CONFIG_FILENAME } from '../../constants.js';
+import { VERSION, FERT_CONFIG_FILENAME, FERT_SERVICE_CONFIG_FILENAME } from '../../constants.js';
 
 export function printBanner() {
   console.log(`\n${chalk.green.bold('Fert')} v${VERSION}`);
 }
 
-/**
- * get a config values from `clientconfig` from config-api
- *
- * @param {string} cpid
- * @param {Array<string>} configNames array of config keys to fetch from clientconfig
- * @returns
- */
-export async function getClientConfig(cpid, configNames = []) {
-  Hoek.assert(Array.isArray(configNames), 'configNames must be an array');
-
-  const result = {};
-
-  for (let config of configNames) {
-    const url = CONFIG_API.replace('{configGroup}', 'clientconfig').replace('{cpid}', cpid).replace('{config}', config);
-    const { data } = await fetch(url).then((response) => response.json());
-    const { value } = data?.[0] || {};
-
-    result[config] = value;
-  }
-
-  return result;
-}
-
 export async function resolveConfig(options = {}) {
   Hoek.assert(options.serviceName, 'serviceName is required');
 
@@ -96,8 +73,6 @@ export async function resolveConfig(options = {}) {
 
   fertConfig.externalAssets = resolveExternalAssets(fertConfig.externalAssets);
 
-  fertConfig.config = await getClientConfig(fertConfig.clientPropertyId, ['JobseekerSiteWebSitePath', 'SiteName']);
-
   return {
     ...fertConfig,
     rootDir,

package/constants.js

@@ -47,8 +47,6 @@ export const ASSET_STORE_INVALIDATION_PATH = `/{fertConfig.client.rootClientProp
 
 export const ASSET_STORE_USER_GUID = 'a386d4b6-f2df-4b80-ad1f-0349e23f530b';
 
-export const CONFIG_API =
-  'https://configuration-api.job.madgexhosting.net/configs/override/{cpid}/production/{configGroup}/{config}';
 export const CONFIG_DIR = 'config';
 
 /** we assume the remove version of a service hosts an api translations endpoint */

package/docs/FAQ.md

@@ -0,0 +1 @@
+-

package/docs/README.md

@@ -12,14 +12,28 @@ Check out [Branding Repository Overview](BRANDING_REPO_OVERVIEW.md) for the stru
 
 Find out your `Client Property ID` by visiting [Madgexverse](https://madgexverse.job.madgexhosting.net). If your CPID does not exist, you can not work on this Branding Repo right now.
 
-This will give you your repository `https://github.com/wiley/madgex-<CPID>` e.g. https://github.com/wiley/madgex-ff6102ff-0f4b-43d1-a2c7-83b835b8dee5. If this is a brand new client, the Branding Repo should be automatically created on `master` branch.
+This will give you your repository `https://github.com/wiley/madgex-<CPID>` e.g. https://github.com/wiley/madgex-ff6102ff-0f4b-43d1-a2c7-83b835b8dee5. If this is a brand new client, the Branding Repo will have no branches. See below for empty Branding Repo instructions.
 
 > **Ask Systems why, if this is not automatically created**
 
-### If you have an **empty** Branding Repo (e.g. a git repository has been set up but has no files)
+### If you have an **empty** Branding Repo (e.g. a git repository has been set up but has no branches or files)
+
+To begin with, lets make sure the `master` branch exists (even without commits yet!). Its important that a branch named `master` exists for our infrastructure to work (e.g. jenkins)
+
+- After you have checked out an empty Branding Repo, `cd` into your empty git repo folder
+
+  > Although this should not happen on new Branding Repos: if the current branch says `main` instead of `master`, we need to fix this.
+  >
+  > - Rename the `main` branch to `master` (I use vscode and right click on the branch and select `rename branch`) or cli `git branch -m main master`
+
+- Now we have an empty branch called `master` on our local machine, we can make an empty commit to this branch, then push it to github remote.
+- `git commit --allow-empty -m "init"`
+- `git push -u origin master`
+
+Now `master` branch is properly created _and_ exists on github remote (although we have not committed to it yet!), lets do our first bit of work in a new branch. `master` should only be merged into from other branches via PRs in github.
 
 - Switch into a new branch
-- `cd` into your cloned empty git repo. Use `npx @madgex/fert init .` and follow the prompts, this will populate your directory, including at least one `service` where the majority of the work will be done.
+- Use `npx @madgex/fert init .` and follow the prompts, this will populate your directory, including at least one `service` where the majority of the work will be done.
 - `npm i` install packages.
 
 ### If you have an existing Branding Repo
@@ -63,15 +77,20 @@ Themes work better on V5 than Custom templates. If you must create Custom templa
 
 ### Custom template
 
-> Coming soon? Custom template starter-from-theme?
+If the client has pushed us to design a Custom design, then we can create a good starting point by cloning an existing Theme into a branding repo service.
+Then you will have your own copy of the Theme files to modify to match the design.
+
+Run the FERT command `init-template` like so `npx @madgex/fert init-template`, in the root of an existing branding repo, and follow the prompts to select the Theme you would like to clone, and which service it will be for.
+
+### Available global Nunjucks context
 
-Available global Nunjucks context:
+Variables and functions available in the Nunjucks templates.
 
-- `templatePath: string`: Required prefix for importing additional Nunjucks files e.g. `{%- include templatePath + './include/my-other-file.njk' -%}`
-- `path: string`: current page relative URL
-- `normaliseUrl: Filter`: removes trailing slash from a URL, e.g. `{{path === myNavLink | normaliseUrl }}`
-- `getServiceRoute(serviceRouterId,routeId,paramsObj,queryObj):Function` : [ usage](https://github.com/wiley/madgex-hapi-reverse-router/blob/master/packages/@madgex.hapi-reverse-router/README.md#usage-example)
-- `getAbsoluteServiceRoute(serviceRouterId,routeId,paramsObj,queryObj):Function` : [ usage](https://github.com/wiley/madgex-hapi-reverse-router/blob/master/packages/@madgex.hapi-reverse-router/README.md#usage-example)
+- `templatePath: string`: **Required** prefix for `import`/`include` additional Nunjucks files e.g. `{%- from './include/my-other-file.njk' import myOtherFileMacro with context -%} {%- include templatePath + './include/my-other-file.njk' -%}`
+- `path: string`: current page relative URL, (does not have trailing slash!) - use in navigation for current page check
+- `normaliseUrl: Filter`: removes trailing slash from a URL, good for comparison with `path`, e.g. `{{path === myNavLink | normaliseUrl }}`
+- `getServiceRoute(serviceRouterId,routeId,paramsObj,queryObj):Function` : recommended to generate _relative_ URLs from V5 source of truth, instead of hand-written [usage](https://github.com/wiley/madgex-hapi-reverse-router/blob/master/packages/@madgex.hapi-reverse-router/README.md#usage-example)
+- `getAbsoluteServiceRoute(serviceRouterId,routeId,paramsObj,queryObj):Function` : recommended to generate _absolute_ URLs from V5 source of truth, instead of hand-written [usage](https://github.com/wiley/madgex-hapi-reverse-router/blob/master/packages/@madgex.hapi-reverse-router/README.md#usage-example)
   - routeId reference for [`"jobseekersite"`](https://jobseekers-frontend.job.madgexhosting.net/api/routing-table/ff6102ff-0f4b-43d1-a2c7-83b835b8dee5)
   - routeId reference for [`"recruitersite"`](https://recruiterservices-frontend.job.madgexhosting.net/api/routing-table/ff6102ff-0f4b-43d1-a2c7-83b835b8dee5)
   - e.g. `{{getServiceRoute('jobseekersite', 'account.login', {}, {Pipline: path})}}`
@@ -79,7 +98,7 @@ Available global Nunjucks context:
 
 ## 🔠 Service V6 translations
 
-Each `service` in a branding repo may have **optional** translation overrides.
+Each `service` in a branding repo may have **optional** translation overrides. These are consumed by the V6 service (so not consumed by the header/footer)
 
 These live at `<root>/services/<SERVICE_NAME>/public/translation.json`, e.g. https://github.com/wiley/madgex-ff6102ff-0f4b-43d1-a2c7-83b835b8dee5/blob/901e5b2295892747015bd1c9bab7ac307b4e2112/services/jobseekers-frontend/public/translation.json .
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/fert",
-  "version": "7.2.1",
+  "version": "7.3.0",
   "description": "Tool to help build the V6 branding",
   "bin": {
     "fert": "./bin/cli.js"
@@ -48,7 +48,7 @@
     "prompts": "2.4.2",
     "rimraf": "6.1.3",
     "sass": "1.98.0",
-    "simple-git": "3.33.0",
+    "simple-git": "3.36.0",
     "simple-update-notifier": "2.0.0",
     "uuid-validate": "0.0.3",
     "vite": "7.3.2",

package/repo-template/services/jobseekers-frontend/templates/footer.njk

@@ -1,20 +1,19 @@
-{%- from templatePath + 'translations/en.njk' import translations -%}
+{# Populate this entry file with a Theme generated from https://header-footer-podlet.job.madgexhosting.net/storybook/
+{{ FooterThemeColumns( <-- macro name which is globally accessible without doing an import, see Storybook for Theme's macro name
+  {
+    "macroName": "FooterThemeColumns",
+    "serviceName": "jobseekers-frontend", <-- ensure serviceName is correct for this service
+    "locale": "en",
+    "cssVarColorText": "#000",
+    ...more args generated from Header Footer Podlet's Storybook
+  }
+)}}
+ #}
 
-<div  data-block="footer-main" class="position-static" scoped-v6="">
-  <footer role="contentinfo" class="contentinfo">
-    <div class="back-to-top">
-      <div class="wrapper cf">
-        <p class="right-text no-margin">
-          <a href="#top-bar" class="js-smooth-scrollto block-level">{{ translations.footer["back-to-top"] }}</a>
-        </p>
-      </div>
-    </div>
-    <div class="wrapper content">
-      {% include templatePath + './includes/footer-nav.njk' %}
-      
-      <p class="copyright no-margin">
-        © 2008 - {{ dayjs().format('YYYY') }} bigworkbag.com, all rights reserved. Powered by Madgex Job Board Software
-      </p>
-    </div>
-  </footer>
-</div>
+{# 
+Alternatively, if this client has pushed for a Custom non-Theme design, you can run `npx @madgex/fert init-template` from the root of this branding repo and follow the prompts.
+This will clone a custom version of one of the Themes from header-footer-podlet which you can modify completely.
+
+🚨🚨🚨 Remember Custom non-Theme designs are discourage and should only happen if the client really pushed for it.
+If there are only minor differences from a Theme and the design, then pushed back and get back into a standard Theme 🚨🚨🚨
+ #}

package/repo-template/services/jobseekers-frontend/templates/header.njk

@@ -1,74 +1,19 @@
-<!-- HEADER-FOOTER-PODLET VERSION: {{ version }} -->
-
-{%- from templatePath + './translations/en.njk' import translations -%}
-
-<div data-block="header-main" class="position-static" scoped-v6="">
-
-  <div id="ad-leaderboard" class="ad ad--leaderboard ad--leaderboard--empty"></div>
-
-  <header role="banner" class="banner">
-    <div id="top-bar" class="top-bar">
-      <div class="wrapper cf">
-
-        <ul class="nav-toggles cf js-togglable-nav-triggers">
-          <li class="nav-toggles__item nav-toggles__item--primary">
-            <mdgx-togglable-nav aria-controls="primary-nav">
-              <a href="#primary-nav" title="Main menu" class="js-togglable-nav-trigger">
-                <i class="burger" aria-hidden="true"></i>
-                <span class="hidden">{{ translations.header["skip-to-main-menu"] }}</span>
-              </a>
-            </mdgx-togglable-nav>
-          </li>
-
-          <li class="nav-toggles__item nav-toggles__item--secondary">
-            <mdgx-togglable-nav aria-controls="secondary-nav">
-              <a href="#secondary-nav" title="User menu" class="js-togglable-nav-trigger">
-                <i class="icon-after" data-icon="☺" aria-hidden="true"></i>
-                <span class="hidden">{{ translations.header["skip-to-user-menu"] }}</span>
-              </a>
-            </mdgx-togglable-nav>
-          </li>
-        </ul>
-
-        <nav aria-label="{{ translations.header["user"] }}" id="secondary-nav" class="secondary-nav togglable-nav cf js-togglable-nav">
-          <ul class="secondary-nav__items togglable-nav__items cf">
-            <li class="togglable-nav__item secondary-nav__item secondary-nav--jobseekers jobseekers jobseekers-nav">
-              {# User Nav #}
-              {%- ifAsync auth.isAuthenticated %}
-                {% include templatePath + './includes/user-nav/authenticated.njk' %}
-              {%- else %}
-                {% include templatePath + './includes/user-nav/unauthenticated.njk' %}
-              {% endif -%}
-            </li>
-            <li class="togglable-nav__item secondary-nav__item secondary-nav--recruiters recruiters recruiters-nav">
-              <ul class="recruiters__items cf">
-                <li class="togglable-nav__item recruiters__item recruiters__item--button">
-                  <a
-                    href="https://bigworkbag-rs.madgexjb.com/" {# Add recruiter site link var #}
-                    data-icon="▶"
-                    class="button button--brand icon-after icon-white js-recruiter-link recruiters__item--link">{{ translations.header["recruiters"] }}
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </nav>
-
-      </div>
-    </div>
-    <div id="ad-mobileleaderboard" class="ad--mobileleaderboard ad--mobileleaderboard--empty"></div>
-
-    <div class="wrapper cf">
-      <div class="primary-logo">
-        <a href="/">
-          <img src="/public/images/logo.png" alt="Bigworkbag Home"/>
-        </a>
-      </div>
-    </div>
-
-    {% include templatePath + './includes/main-nav.njk' %}
-
-  </header>
-</div>
-
-<!-- END HEADER FRAGMENT -->
+{# Populate this entry file with a Theme generated from https://header-footer-podlet.job.madgexhosting.net/storybook/
+{{ HeaderThemeInlineUserNav( <-- macro name which is globally accessible without doing an import, see Storybook for Theme's macro name
+  {
+    "macroName": "HeaderThemeInlineUserNav",
+    "serviceName": "jobseekers-frontend", <-- ensure serviceName is correct for this service
+    "locale": "en",
+    "cssVarColorText": "#000",
+    ...more args generated from Header Footer Podlet's Storybook
+  }
+)}}
+ #}
+
+{# 
+Alternatively, if this client has pushed for a Custom non-Theme design, you can run `npx @madgex/fert init-template` from the root of this branding repo and follow the prompts.
+This will clone a custom version of one of the Themes from header-footer-podlet which you can modify completely.
+
+🚨🚨🚨 Remember Custom non-Theme designs are discourage and should only happen if the client really pushed for it.
+If there are only minor differences from a Theme and the design, then pushed back and get back into a standard Theme 🚨🚨🚨
+ #}