guide
Installation and Eleventy setup
Install WTFM, connect a Custom Elements Manifest, and create the first portable Eleventy reference page.
Install the packages
Install WTFM beside Eleventy in the documentation workspace. WTFM expects the component library to produce a Custom Elements Manifest; TypeScript is needed only when the optional type extractor is part of the project.
npm install --save-dev @11ty/eleventy @taprootio/wtfm
The package declares Lit, TypeScript, and @taprootio/espalier as peer
dependencies because different consumers use different portions of the
toolchain. Install the peers used by the project rather than adding them solely
for an authored Markdown site.
Register the plugin
Create an Eleventy configuration that points at the generated manifest. A project installed from npm imports the package entry point:
import wtfmPlugin from "@taprootio/wtfm";
export default function (eleventyConfig) {
eleventyConfig.addPlugin(wtfmPlugin, {
cemPath: "custom-elements.json",
});
}
This repository's own documentation intentionally imports
src/server/eleventy-plugin.js instead. That makes local builds exercise the
current working tree rather than a previously published WTFM release.
Render a declaration
The plugin registers renderDocs(name). A JavaScript template can ask WTFM for
the manifest-derived Markdown and pass it through the shared Markdown renderer:
export default async function () {
const markdown = await this.renderDocs("ExampleButton");
return this.renderMarkdown(markdown);
}
The declaration name must match a declaration in the CEM or optional type manifest. Unknown names warn and render no reference content, so validate the manifest before treating a generated page as complete.
Build the portable site
Add an Eleventy command appropriate for the consuming repository and keep the output directory ignored. A conventional command is:
npx eleventy
Open the output without a Taproot service. Links and assets should be either
document-relative or site-root-relative, with deployment prefixes applied once
through Eleventy's HtmlBasePlugin when the site is hosted below /.
Continue with plugin configuration for the full option surface or documents and surfaces for the authoring model.