temel
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
Repository
temel
Owner
Statistic
- 59
- 6
- 1
- 3
- 0
- about 7 years ago
- December 18, 2015
License
MIT License
Links
Synced at
Wed, 06 Nov 2024 21:36:12 GMT
Languages