Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/giuseppeg/xm
₪ extensible HTML
https://github.com/giuseppeg/xm
html markdown markdown-to-html posthtml
Last synced: 3 days ago
JSON representation
₪ extensible HTML
- Host: GitHub
- URL: https://github.com/giuseppeg/xm
- Owner: giuseppeg
- Created: 2020-08-14T12:56:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-29T17:07:25.000Z (about 4 years ago)
- Last Synced: 2024-12-17T14:07:32.644Z (12 days ago)
- Topics: html, markdown, markdown-to-html, posthtml
- Language: JavaScript
- Homepage: https://giuseppeg.github.io/xm
- Size: 130 KB
- Stars: 326
- Watchers: 9
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ₪ xm - extensible HTML
xm is a tiny compiler for HTML that adds
- `` tag to inline external HTML files
- `` and `` tags to define slots and fill them with content
- `` 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](https://posthtml.org/#/cli) and therefore it is [extensible](https://posthtml.org/#/cli?id=options).
Are you using xm? Share your site's URL [here](https://github.com/giuseppeg/xm/issues/2).
## Install
```
npm i -g xm
```
### Usage
```
Usage: xm [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
```
#### `` element
Allows to inline (import) HTML files into the current one.
```html
```
Paths are relative.
```html
```
You can prefix paths with `/` to make them absolute i.e. relative to the `--root` value.
```
$ xm build --root ./src
#
# -> ./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.
```html
/* theme */
```
💡 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-
```
Share your site or theme URL [here](https://github.com/giuseppeg/xm/issues/2).
#### `` and `` elements
HTML files can define `slot` elements with an attribute `name`. slots can be filled when importing HTML files using the `fill` tag.
```html
About
About
welcome
Unique to this page
About
About
welcome
Unique to this page
```
You can also define a special unnamed `slot` that will be filled with the `import` children that are not `fill` tags:
```html
good bye
hello
friend
hello
friend
good bye
```
#### Credits
- [Ivan Demidov](https://github.com/scrum) for helping me out with PRs and PostHTML
- [askucher](https://github.com/askucher) for transferring ownership of the `xm` package