A library for writing HTML in plain Crystal.
-
Add the dependency to your
shard.yml:dependencies: water: github: shootingfly/water
-
Run
shards install
require "water"
class Water
def_custom_tag hello_world
end
page = Water.new do
doctype
html {
head {
meta %|name="viewport" content="width=device-width,initial-scale=1.0"|
title "This is a tile"
style %q{
h1 {
color: red;
}
p {
color: green;
}
}
script %q{
alert("Hello");
system.logger("\n");
}
link %|rel="stylesheet" media="screen"|
}
body {
h1 %|class="Hello"|, "This is a water file"
h2 "This is blue"
input %|type="checkbox" checked=false|
input %|type="checkbox" checked=true|
input %|type="checkbox" checked="checked"|
span %|id="some-id" class="classname"| {
div %|id="Hello" class="world world2"| {
some_var = "hello world haha"
span %|data-some-var="some_var" two-attr="fun"| {
text "and a hello"
}
span %|class="deep_nested"|, "text inside of <p>"
text <<-HTML
#{Process.pid}
text node
other text node
HTML
}
}
div %|class="row"| {
div %|class="col-md-9"| {
users = [1, 2]
users.each_with_index do |index|
h2 %|class="right_#{index}"| {
div {
span "Hello"
}
}
end
}
}
br
text " " * 4
hello_world "Hello"
span Process.pid
}
}
end
puts page<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>This is a tile</title>
<style>
h1 {
color: red;
}
p {
color: green;
}
</style>
<script>
alert("Hello");
system.logger("\n");
</script>
<link rel="stylesheet" media="screen">
</head>
<body>
<h1 class="Hello">This is a water file</h1>
<h2>This is blue</h2>
<input type="checkbox" checked=false>
<input type="checkbox" checked=true>
<input type="checkbox" checked="checked">
<span id="some-id" class="classname">
<div id="Hello" class="world world2">
<span data-some-var="some_var" two-attr="fun">
and a hello
</span>
<span class="deep_nested">text inside of &lt;p&gt</span>
14674
text node
other text node
</div>
</span>
<div class="row">
<div class="col-md-9">
<h2 class="right_1">
<div>
<span>Hello</span>
</div>
</h2>
<h2 class="right_2">
<div>
<span>Hello</span>
</div>
</h2>
</div>
</div>
<br>
<hello-world>Hello</hello-world>
<span>14674</span>
</body>
</html>Because p and select are used by Crystal. tag p is renamed to para, tag select is renamed to select_tag.
- Fork it (https://github.com/shootingfly/water/fork)
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
- Shootingfly - creator and maintainer