Popularity
5.3
Growing
Activity
0.0
Stable
27
3
1
Programming language: Crystal
License: MIT License
Tags:
Template Engine
Latest version: v0.3.0
Water alternatives and similar shards
Based on the "Template Engine" category.
Alternatively, view Water alternatives based on common mentions on social networks and blogs.
-
Jbuilder
Generate JSON objects with a Builder-style DSL, inspired by jbuilder -
ECR (Embedded Crystal)
compile time template language which uses plain crystal expressions (Crystal stdlib)
Collect and Analyze Billions of Data Points in Real Time
Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
Promo
www.influxdata.com
Do you think we are missing an alternative of Water or a related project?
README
Water : HTML in plain Crystal
A library for writing HTML in plain Crystal.
Installation
- Add the dependency to your
shard.yml
:
dependencies:
water:
github: shootingfly/water
- Run
shards install
Usage
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>
Note
Because p
and select
are used by Crystal. tag p
is renamed to para
, tag select
is renamed to select_tag
.
Contributing
- 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
Contributors
- Shootingfly - creator and maintainer