A toolkit for building static websites with reusable components and simple Markdown rendering
x- is a toolkit for building static websites with reusable components and simple Markdown rendering. Designed to
be a natural extension of HTML, it can be used to quickly protoype and build a site from the ground up, or can be
progressively integrated into an existing project with zero configuration. Using either the CLI or JavaScript API,
everything is rendered to well-formatted, standard HTML, ready to be published.
Components are created with a standard HTML file where properties can be defined with a basic template syntax:
<!-- src/components/greeting.html -->
<h1>Hello {{ name }}!</h1>
Components can then be used throughout a project with the <x-component> element, which should include a src
attribute with the relative path to a component file ― the .html extension is implied. Property values are assigned
with additional attributes on the <x-component> element:
<!-- src/pages/index.html -->
<x-component src="../components/greeting" name="world">
Components can also contain child content. The <x-slot> element is used to specify where content should be injected:
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<main>
<x-slot />
</main>
</body>
</html>
At build time, the <x-slot> element is replaced with any content inside the <x-component> element:
<x-component src="../components/base-layout" title="Home">
<h1>Home</h1>
<p>Page content...</p>
</x-component>
The <x-slot> element can contain optional fallback content that will be used if no child content for a component
is provided:
<x-slot>Default content...</slot>
Markdown rendering is available with the <x-content> element. Similar to <x-component> element, the src attribute
is used to specify the relative path to a Markdown file:
<x-content src="../content/introduction" />
The CLI takes an input path to a file or directory and outputs compiled HTML files to ./public or the path specified
with the --output option. If the provided input path is a directory, x- will recusively find and compile each HTML
file in the given directory and its subdirectories. Any file or directory starting with an underscore
(e.g., _components) will be ignored.
$ x- --help
Usage: x- <input> [options]
Options:
-o, --output Output path (Default: ./public)
-v, --version Print the current version and exit
Example:
$ x- src/pages --output static
render() reads the provided file and returns rendered HTML as a string:
render(filePath: string) => Promise<string>
Example:
const { render } = require('x-');
async function example() {
const html = await render('index.html');
console.log(html);
};
$ npm install --save-dev x-
Implement better HTML parser
cheerio and
jsdom seem a bit overkill and are noticebly less performant, but I'd like to
look into lower level libraries like parse5 and
htmlparser2.Add named slots
Add file watching and automatic rebuilding with --watch CLI option
Add Node API
FAQs
A toolkit for building static websites with reusable components and simple Markdown rendering
We found that x- demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.