Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shootingfly/water
A library for writing HTML in plain Crystal.
https://github.com/shootingfly/water
Last synced: 15 days ago
JSON representation
A library for writing HTML in plain Crystal.
- Host: GitHub
- URL: https://github.com/shootingfly/water
- Owner: shootingfly
- License: mit
- Created: 2019-10-31T16:26:27.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-11T10:34:28.000Z (over 3 years ago)
- Last Synced: 2024-08-04T01:06:08.744Z (3 months ago)
- Language: Crystal
- Homepage:
- Size: 18.6 KB
- Stars: 28
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-crystal - Water - A library for writing HTML in plain Crystal (HTML Builders)
README
# Water : HTML in plain Crystal
[](https://github.com/shootingfly/water/actions/workflows/crystal.yml)
[](https://github.com/shootingfly/water/releases)
A library for writing HTML in plain Crystal.
## Installation
1. Add the dependency to your `shard.yml`:
```yaml
dependencies:
water:
github: shootingfly/water
```
2. Run `shards install`
## Usage
```crystal
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
```
```HTML
This is a tile
h1 {
color: red;
}
p {
color: green;
}
alert("Hello");
system.logger("\n");
This is a water file
This is blue
and a hello
text inside of <p>
14674
text node
other text node
Hello
Hello
Hello
14674
```
## Note
Because `p` and `select` are used by Crystal. tag `p` is renamed to `para`, tag `select` is renamed to `select_tag`.
## Contributing
1. Fork it ()
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
## Contributors
- [Shootingfly](https://github.com/shootingfly) - creator and maintainer