Xm NPM | npm.io

₪ xm - extensible HTML

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.

Are you using xm? Share your site's URL here.

Install

npm i -g xm

Usage

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 compile (default ./)
  --output     Output (destination) folder. This is necessary only when using xm build
  --htmlOnly   Compile and copy only the built HTML files

`<import>` element

Allows to inline (import) HTML files into the current one.

<import src="file.html" />

Paths are relative.

<!-- src/folder/index.html -->

<import src="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 src="file.html" />
# -> ./src/file.html

Importing markdown files

xm supports importing .md (markdown) files too. When importing such files the front matter declarations are converted to fill elements.

<style>
  /* theme */
</style>
<import src="README.md" />

💡 This feature can be used to generate styled docs sites for your open source project!

If you create a reusable theme for README-like files we encourage you to use the following naming convention:

xm-theme-<theme-name>

Share your site or theme URL here.

`<slot>` and `<fill>` elements

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 src="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>
<footer>Unique to this page</footer>

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 src="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>

Credits

Ivan Demidov for helping me out with PRs and PostHTML
askucher for transferring ownership of the xm package

markdown posthtml html docs generator

front-matter glob just-clone ncp posthtml-cli posthtml-md2html posthtml-xm-import sirv

@everything-registry/sub-chunk-3185 @infinitebrahmanuniverse/nolb-xm

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

10 years ago

10 years ago

10 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

₪ xm - extensible HTML

Install

Usage

<import> element

Importing markdown files

<slot> and <fill> elements

Credits

`<import>` element

`<slot>` and `<fill>` elements