InputPath to URL Added in v3.0.0

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

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>

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

module.exports = function (data) {
  return `<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 can be relative to:
  • the input directory
  • the current template path Added in v3.0.0
  • to the project root (you’ll regret this if your input directory ever changes 😅)
• 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

Added in v3.0.0 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.config.js) and use addPlugin:

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

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

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

	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, {
		// 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>
• Bundle
• Id Attribute
• Directory Output
• Inclusive Language