Consider precedence of nunjucks directories to allow overrides

[lhokktyn]

Hi. I've just started playing with this plugin, and am relatively new to 11ty in general (using v3.0.0), so this may be a request that goes against the 11ty grain, but here goes anyway ...

I'd like to implement a custom search utility, just replacing the search box in the header with my own. To keep this override as specific as possible, I'm looking to override the appSiteSearch() nunjucks macro.

I started to do this by creating a components/sites-search/ directory within my own _includes/ directory, in the hope they would override the equivalent paths in this plugin.

However, due to the ordering of nunjucks search paths, the plugin's templates will always take precedence, i.e.

const searchPaths = [
    './node_modules/@x-govuk/govuk-eleventy-plugin',
    './node_modules/govuk-frontend/dist',
    resolveNpmModule('@x-govuk/govuk-prototype-components'),
    ...(includes ? [path.join(input, includes)] : []),
    ...(layouts ? [path.join(input, layouts)] : []),
    ...input
]

Changing that order a little, to give precedence to the directories closest to my app, could solve this, i.e.

const searchPaths = [
    ...(includes ? [path.join(input, includes)] : []),
    ...(layouts ? [path.join(input, layouts)] : []),
    ...input,
    './node_modules/@x-govuk/govuk-eleventy-plugin',
    './node_modules/govuk-frontend/dist',
    resolveNpmModule('@x-govuk/govuk-prototype-components')
]

Would this be something you might consider? It would likely be a breaking change, unless it could be made configurable.

Or maybe I'm going about this all wrong and there's a better way to get my own search element injected into the UI?

Also, I don't know if this is a v3 thing, but as input is a string, ...input is destructuring this as an array of characters.

Thanks

[paulrobertlloyd]

Will take a look at this today. But on first pass, your suggestion makes sense.

[paulrobertlloyd]

@lhokktyn I’ve just released v6.6.2; I’ve correctly restructured input, so that this value should be correctly added to the searchPaths array. It appears last, so it should take precedence, but we can test and see.

That said, if you’ve saved your new component inside the _includes directory, this path should have been picked up, so maybe the ordering does need to be reversed?

I’ve added searchPaths to console.log, so let me know if this works, and if it doesn’t, maybe you can share what this logging is outputting?

[lhokktyn]

@paulrobertlloyd thanks for looking into this.

The console output in 6.2.2 is:

[
  './node_modules/@x-govuk/govuk-eleventy-plugin',
  './node_modules/govuk-frontend/dist',
  './node_modules/@x-govuk/govuk-prototype-components',
  'src/_includes',
  'src'
]

I created a src/_includes/layouts/base.njk file with some dummy content to see if it gets picked up as a priority over the other xgov layouts, and it didn't.

Changing the precedence of folders as above (to search src/, etc first), does render the modified base.njk.