temel alternatives and similar shards
Based on the "Template Engine" category.
Alternatively, view temel 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)
Static code analysis for 29 languages.
Do you think we are missing an alternative of temel or a related project?
Popular Comparisons
README
Temel
Temel is a markup language for Crystal. A simpler alternative to HTML Builder.
- Custom tag registration with a simple
tag
macro. - 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!"
)
)
end
Or, 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
end
The output will be:
<html>
<body id="main">
<my-application>
<hello-world>Hello World!</hello-world>
</my-application>
</body>
</html>
Installation
Add this to your application's shard.yml
:
dependencies:
temel:
github: f/temel
Usage
require "kemal"
require "temel"
get "/" do
html(
body(
h1 "Hello World"
)
)
end
Using as Template Engine
You 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)
end
Argument Based DSL vs Block Based DSL
Argument based DSL is a bit different than HTML::Builder's.
Argument Based DSL
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."
)
)
end
Block Based DSL
get "/" 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
] end
Comments
You can add HTML comments with Temel.
get "/" do
html(
body(
ul(
comment("ko foreach: myItems"),
li({"data-bind": "text: $data"}),
comment("/ko")
)
)
)
end
Using 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"
Development
You can extend the Temel by adding your own tags.
Adding a new tag
tag [tagname]
will register a new tag.
Contributing
- 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
Contributors
- f Fatih Kadir Akın - creator, maintainer