Crates.io | htmeta |
lib.rs | htmeta |
version | |
source | src |
created_at | 2024-08-10 20:38:13.776534 |
updated_at | 2024-10-06 17:06:59.8507 |
description | A KDL dialect for HTML |
homepage | |
repository | |
max_upload_size | |
id | 1332695 |
Cargo.toml error: | TOML parse error at line 18, column 1 | 18 | autolib = false | ^^^^^^^ unknown field `autolib`, expected one of `name`, `version`, `edition`, `authors`, `description`, `readme`, `license`, `repository`, `homepage`, `documentation`, `build`, `resolver`, `links`, `default-run`, `default_dash_run`, `rust-version`, `rust_dash_version`, `rust_version`, `license-file`, `license_dash_file`, `license_file`, `licenseFile`, `license_capital_file`, `forced-target`, `forced_dash_target`, `autobins`, `autotests`, `autoexamples`, `autobenches`, `publish`, `metadata`, `keywords`, `categories`, `exclude`, `include` |
size | 0 |
This crates implements a (simple) flavour of KDL
called htmeta
. This
dialect's purpose is to allow a straightforward representation of HTML
.
As KDL
is already very similar to HTML
semantically, htmeta
only adds 2 things:
text
content to be shown in HTML
.Text nodes are creatively named text
and they can only have one positional
argument, which is the text to be directly pasted into the resulting HTML
.
Example:
html {
body {
h1 {
text "Title"
}
}
}
Results in:
<html>
<body>
<h1>
Title
</h1>
</body>
</html>
If you ever used CSS-based frameworks like TailwindCSS
or Bootstrap
, you
know how tedious it is to type the same classes over and over again. Hence,
htmeta
implements a simple variable mechanism that reduces duplication.
Example:
html {
head {
meta charset="utf-8"
// Includes tailwindcss
script src="https://cdn.tailwindcss.com"
}
body {
// creates a variable called `$btn_class`
$btn_class "border-1 rounded-lg"
// Value of `$btn_class` is reused inside these buttons:
button class="$btn_class ml-4"
bttton class="$btn_class mr-4"
}
}
Results in:
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button class="border-1 rounded-lg ml-4"></button>
<bttton class="border-1 rounded-lg mr-4"></bttton>
</body>
</html>