Temel is a markup language for Crystal. A simpler alternative to HTML Builder.
- Custom tag registration with a simple
tagmacro. - Supports Web Components.
- Simpler DSL (comparing to HTML::Builder).
# Register tags first.
tag my_application
tag hello_world
get "/" do
html(
body({id: "main"},
my_application hello_world "Hello World!"
)
)
endOr, you can alternatively use block based syntax (Just like HTML::Builder) instead of argument based syntax:
get "/" do
html do
body({id: "main"}) do
my_application hello_world "Hello World!"
end
end
endThe output will be:
<html>
<body id="main">
<my-application>
<hello-world>Hello World!</hello-world>
</my-application>
</body>
</html>Add this to your application's shard.yml:
dependencies:
temel:
github: f/temelrequire "kemal"
require "temel"
get "/" do
html(
body(
h1 "Hello World"
)
)
endYou can use Temel as layout engine with functions.
# layout.tpl.cr
def layout(content)
html(
head(
title("Hello")
),
body(content)
)
end... just by using Crystal's internals, nothing more...
# hello.tpl.cr
require "layout.tpl"
def hello(where)
layout("Hello #{where}")
end... use it with Kemal makes everything better.
# main.cr
require "hello.tpl"
get "/" do |env|
hello(env.params.where)
endArgument based DSL is a bit different than HTML::Builder's.
get "/" do
html(
head(
script({src: "main.js"})
),
body({id: "main"},
h1 "Hello World!",
p "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
)
)
endget "/" do
html do [
head do
script({src: "main.js"})
end,
body({id: "main"}) do [
h1 "Hello World!",
p "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
] end
] end
] endYou can add HTML comments with Temel.
get "/" do
html(
body(
ul(
comment("ko foreach: myItems"),
li({"data-bind": "text: $data"}),
comment("/ko")
)
)
)
endUsing with Onyx
Works with Onyx seamlessly.*.
html
head
title "Testing it out!"
script
{ type: "bad-script" }
"my-fine-file.bad-ass"
body
div
{id: "main-div"}
if is-welcome ? h1 "Welcome" : h2 "This is it"
article
h2 "The fat and the furious"
p
"
Long
article text
here
and stuff, mkay Mr. {some-name}!
"
ul items.map(~> li _1).join
div {id: "footer"},
nav ul
li a {href: "asdfsadf"}, "Contact"
li a {href: "bfadfasdf.se"}, "About"You can extend the Temel by adding your own tags.
tag [tagname]
will register a new tag.
- Fork it ( https://github.com/f/temel/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
- f Fatih Kadir Akın - creator, maintainer