Popularity
8.0
Stable
Activity
0.0
Stable
54
6
6

Programming language: Crystal
License: MIT License
Tags: Template Engine    

temel alternatives and similar shards

Based on the "Template Engine" category.
Alternatively, view temel alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of temel or a related project?

Add another 'Template Engine' Shard
SaaSHub - Software Alternatives and Reviews
Sponsored www.saashub.com

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

  1. Fork it ( https://github.com/f/temel/fork )
  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

  • f Fatih Kadir Akın - creator, maintainer