For those of you that prefer the poetic beauty of HAML templates over HTML, then Calliope is the package for you. Calliope is a parser written in Elixir that will render HAML/Elixir templates into HTML. For example, we can render the following HAML:
!!! 5
%html{lang: "en-US"}
%head
%title Welcome to Calliope
%body
%h1 Calliope
%h2 The muse of epic poetryInto this HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome to Calliope</title>
</head>
<body>
<h1>Calliope</h1>
<h2>The muse of epic poetry</h2>
</body>
</html>To use Calliope, add a dependency to your project mix file
def deps do
[ { :calliope, github: "nurugger07/calliope" } ]
endThen run mix deps.get in the shell to fetch and compile the dependencies. Then you can either call to Calliope directly:
iex(1)> Calliope.render "%h1 Welcome to Calliope"
"<h1>Welcome to Calliope</h1>"Or you can use Calliope in a module and call through your module:
defmodule MyModule do
use Calliope
endiex(1)> MyModule.render "%h1 Welcome to Calliope"
"<h1>Welcome to Calliope</h1>"If you are not familiar with HAML syntax I would suggest you checkout the reference page. Most of the syntax has been accounted for but we are in the process of adding more functionality.
HAML is basically a whitespace sensitive shorthand for HTML that does not use end-tags. Although Calliope uses HAML formating, it does use its own flavor. Sounds great but what does it look like:
%tag{ attr: "", attr: "" } ContentOr you could use the following:
%tag(attr="" attr="" ) ContentThe id and class attributes can also be assigned directly to the tag:
%tag#id.class ContentIf you are creating a div you don't need to include the tag at all. This HAML
#main
.blue ContentWill generate the following HTML
<div id='main'>
<div class='blue'>
Content
</div>
</div>The render function will also take a list of named arguments that can be evaluated when compiling the HTML
Given the following HAML:
#main
.blue= contentThen call render and pass in the haml and content:
Calliope.render haml, [content: "Hello, World"]Calliope will render:
<div id='main'>
<div class='blue'>
Hello, World
</div>
</div>Calliope doesn't just evaluate arguments, you can actually embed Elixir directly into the templates:
- lc { id, headline, content } inlist posts do
%h1
%a{href: "posts/#{id}"= headline
.content
= contentPass that to render with a list of posts
Calliope.render haml, [posts: [{1, "Headline 1", "Content 1"}, {2, "Headline 2", "Content 2"}]
Will render
<h1>
<a href="/posts/1">Headline 1</a>
</h1>
<div class="content">
Content 1
</div>
<h1>
<a href="/posts/2">Headline 2</a>
</h1>
<div class="content">
Content 2
</div>- Rendering Elixir conditionals
- Rendering partials
- Exception messages
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent