Is there a way to apply the | url filter but inside custom .eleventy.js code?

[mendhak]

Hello again, is there a way to get the eleventy site's "path prefix" inside the .eleventy.js file? Or is there a way to "apply the | url filter inside custom code?

For example an eleventy site might be at / but it might be at /blog/ or /abc

Normally in our templates we'd use the | url filter,

<a href="{{ "/my-link" | url }}">test</a>

What I'm doing is creating a custom shortcode, and in that shortcode's output, I want the site's path prefix ready to use, so it's the equivalent of doing the | url filter, but inside eleventy code.

Contrived example:

theLink = "/my-link"; // <------------ Can I apply | url here, somehow? Call some function?
eleventyConfig.addShortcode("blah", () => `<a href="${theLink}">test</a>`);

I hope I explained that well.

Thanks
mendhak

[mendhak]

Documentation says:

It’s recommended to use the simpler HTML plugin (new in Eleventy 2.0) instead of the url filter moving forward.

Which is fine, I can wait for Eleventy 2.0.

But for now:

Works with the pathPrefix configuration option to properly normalize absolute paths in your content with the pathPrefix added.

How can I get a hold of this pathPrefix inside a shortcode or other custom code?

[mendhak]

Found an issue, looks like it's not possible directly. There will be a feature in eleventy 2.0 which uses HTML <base> which does away with the need for all of this.

Issue: #1641

The workaround is I could define the pathPrefix at the top of the file and then use it in the return object and the shortcode.
Once it's defined at the top,

let theLink = "/my-link";
let imgPath = path.join(pathPrefix, theLink);

[zachleat]

Does this work?

const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);

  eleventyConfig.addShortcode("blah", () => {
    let htmlBaseUrlFilter = eleventyConfig.getFilter("htmlBaseUrl");
    return `<a href="${htmlBaseUrlFilter(theLink)}">test</a>`
  });
};

[zachleat]

Or even simpler maybe this?

const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
const urlFilter = EleventyHtmlBasePlugin.applyBaseToUrl;

module.exports = function(eleventyConfig) {
  eleventyConfig.addShortcode("blah", () => {
    return `<a href="${urlFilter(theLink, eleventyConfig.pathPrefix)}">test</a>`
  });
};

[mendhak]

Hey thanks for reply. That seems to make use of eleventy version 2.0.0 it seems, I'm just using v1 for now since it's the stable version.

[mendhak]

But if I'm understanding the current countdown on the main page correctly, version 2.0.0 is imminent 😁

[mendhak]

Many thanks. Just tried v2 and it's even easier than that, just returning the link as-is was enough thanks to the htmlbase plugin

return `<a href="${theLink}">test</a>`;