InputPath to URL Pre-release only: v3.0.0-alpha.5

This plugin allows you to use file system paths in your HTML and they will be automatically transformed to their output URLs. Very useful for robust hyperlinking allowing you to change your output URLs without breaking content links! Works out of the box with permalink remapping, the HTML <base> plugin, etc.

Inspired by GitHub issue #84.

Usage Jump to heading #

You can link to inputPath in any a[href], video[src], audio[src], source, img[src], [srcset] and a whole bunch more (via posthtml-urls) and this plugin will render the correct URL for the template in your output directory.

This uses an Eleventy Transform to modify the output of all template syntaxes that output an .html file.

<a href="my-template.md">Home</a>

[Home](my-template.md)

<a href="my-template.md">Home</a>

<a href="my-template.md">Home</a>

module.exports = function (data) {
	return `<a href="my-template.md">Home</a>`;
};

export default function (data) {
	return `<a href="my-template.md">Home</a>`;
}

<a href="my-template.md">Home</a>

The above all render as the following in your output:

<a href="/my-template/">Home</a>

• The paths used here should be relative to the input directory though they can be relative to the project root (the former is simpler and more robust).
• As this transform is implicit it does not error when an inputPath match is not found—it only returns the original URL string.
• When pointing to a Pagination template, the first URL in the pagination set is returned.

Installation Jump to heading #

Pre-release only: v3.0.0-alpha.5 This plugin is bundled with Eleventy 3.0 and does not require you to install anything from npm. However, the plugin is opt-in (requires you to use addPlugin). It is compatible with all template languages via an Eleventy Transform.

Note that the inputPathToUrl filter is available by default and does not require use of addPlugin.

Open up your Eleventy config file (probably .eleventy.js) and use addPlugin:

import { InputPathToUrlTransformPlugin } from "@11ty/eleventy";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
}

import { InputPathToUrlTransformPlugin } from "@11ty/eleventy";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin, {
		// Comma separated list of outputPath file extensions to apply the transform
		extensions: "html",
	});
}

module.exports = async function (eleventyConfig) {
	const { InputPathToUrlTransformPlugin } = await import("@11ty/eleventy");

	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
};

module.exports = async function (eleventyConfig) {
	const { InputPathToUrlTransformPlugin } = await import("@11ty/eleventy");

	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin, {
		// Comma separated list of outputPath file extensions to apply the transform
		extensions: "html",
	});
};

Other pages in Official Plugins:

• Image
• Fetch
• <is-land>
• Render
• Internationalization (i18n)
• RSS
• Upgrade Helper
• Syntax Highlighting
• InputPath to URL
• Navigation
• HTML <base>
• Directory Output
• Inclusive Language
• Edge
• Serverless