xm is a tiny compiler for HTML that adds
<import>tag to inline external HTML files<slot>and<fill>tags to define slots and fill them with content<markdown>tag to portal into Markdown
xm CLI comes with a dev mode that compiles and serves built HTML.
Furthermore xm is built on top of posthtml-cli and therefore it is extensible.
npm i -g xm
Usage: xm <command> [options]
Commands:
dev Compiles HTML files on change and serves the root folder
build Compiles the HTML files once
help Displays help
Options:
--root Folder to complile (default ./)
--output Output (destination) folder. This is necessary only when using xm build
--htmlOnly Compile and copy only the built HTML files
Allows to inline (import) HTML files into the current one.
<import href="file.html" />Paths are relative.
<!-- src/folder/index.html -->
<import href="file.html" />
<!-- file.html -> src/folder/file.html -->You can prefix paths with / to make them absolute i.e. relative to the --root value.
$ xm build --root ./src
# <import href="file.html" />
# -> ./src/file.html
xm supports importing .md (markdown) files too. When importing such files the front matter declarations are converted to fill elements.
<style>
/* theme */
</style>
<import href="README.md" />💡 This feature can be used to generate styled docs sites for your open source project!
HTML files can define slot elements with an attribute name. slots can be filled when importing HTML files using the fill tag.
<!-- base.html -->
<!DOCTYPE html>
<title><slot name="title"></slot></title>
<main>
<slot name="main"></slot>
</main>
<!-- about.html -->
<import href="base.html">
<fill name="title">About</fill>
<fill name="main">
<h1>About</h1>
<p>welcome</p>
</fill>
</import>
<footer>Unique to this page</footer>
<!-- about.html (compiled with xm) -->
<!DOCTYPE html>
<title>About</title>
<main>
<h1>About</h1>
<p>welcome</p>
</main>You can also define a special unnamed slot that will be filled with the import children that are not fill tags:
<!-- base.html -->
<slot></slot>
<footer><slot name="footer"></slot></footer>
<!-- about.html -->
<import href="base.html">
<fill name="footer">good bye</fill>
hello
<p>friend</p>
</import>
<!-- about.html (compiled with xm) -->
hello
<p>friend</p>
<footer>good bye</footer>- Ivan Demidov for helping me out with PRs and PostHTML
- askucher for transferring ownership of the
xmpackage