ProductPromotion
Logo

Elixir

made by https://0x3d.site

GitHub - mhanberg/temple: An HTML DSL for Elixir and Phoenix
An HTML DSL for Elixir and Phoenix. Contribute to mhanberg/temple development by creating an account on GitHub.
Visit Site

GitHub - mhanberg/temple: An HTML DSL for Elixir and Phoenix

GitHub - mhanberg/temple: An HTML DSL for Elixir and Phoenix

Temple

Actions Status Hex.pm

You are looking at the README for the main branch. The README for the latest stable release is located here.

Temple

Temple is an Elixir DSL for writing HTML and SVG.

Installation

Add temple to your list of dependencies in mix.exs:

def deps do
  [
    {:temple, "~> 0.12"}
  ]
end

Goals

Currently Temple has the following things on which it won't compromise.

  • Will only work with valid Elixir syntax.
  • Should work in all web environments such as Plug, Aino, Phoenix, and Phoenix LiveView.

Usage

Using Temple is as simple as using the DSL inside of an temple/1 block. The runtime result of the macro is your HTML.

See the guides for more details.

import Temple

temple do
  h2 do: "todos"

  ul class: "list" do
    for item <- @items do
      li class: "item" do
        div class: "checkbox" do
          div class: "bullet hidden"
        end

        div do: item
      end
    end
  end

  script do: """
  function toggleCheck({currentTarget}) {
    currentTarget.children[0].children[0].classList.toggle("hidden");
  }

  let items = document.querySelectorAll("li");

  Array.from(items).forEach(checkbox => checkbox.addEventListener("click", toggleCheck));
  """
end

Components

Temple components are simple to write and easy to use.

Unlike normal partials, Temple components have the concept of "slots", which are similar Vue. You can also refer to HEEx and Surface for examples of templates that have the "slot" concept.

Temple components are compatible with HEEx and Surface components and can be shared.

Please see the guides for more details.

defmodule MyAppWeb.Component do
  import Temple

  def card(assigns) do
    temple do
      section do
        div do
          slot @header
        end

        div do
          slot @inner_block
        end

        div do
          slot @footer
        end
      end
    end
  end
end

Using components is as simple as passing a reference to your component function to the c keyword.

import MyAppWeb.Component

c &card/1 do
  slot :header do
    @user.full_name
  end

  @user.bio

  slot :footer do
    a href: "https://twitter.com/#{@user.twitter}" do
      "@#{@user.twitter}"
    end
    a href: "https://github.com/#{@user.github}" do
      "@#{@user.github}"
    end
  end
end

Engine

By default, Temple will use the EEx.SmartEngine that is built into the Elixir standard library. If you are a web framework that uses it's own template engine (such as Aino and Phoenix/LiveView, you can configure Temple to it!

# config/config.exs

config :temple,
  engine: Aino.View.Engine # or Phoenix.HTML.Engine or Phoenix.LiveView.Engine

Formatter

To include Temple's formatter configuration, add :temple to your .formatter.exs.

[
  import_deps: [:temple],
  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs,lexs}"],
]

Phoenix

When using Phoenix ~> 1.7, all you need to do is include :temple in your mix.exs.

If you plan on using the template structure that < 1.6 Phoenix applications use, you can use :temple_phoenix as described below.

To use with Phoenix, please use the temple_phoenix package! This bundles up some useful helpers as well as the Phoenix Template engine.

Related

Articles
to learn more about the elixir concepts.

Resources
which are currently available to browse on.

mail [email protected] to add your project or resources here 🔥.

FAQ's
to know more about the topic.

mail [email protected] to add your project or resources here 🔥.

Queries
or most google FAQ's about Elixir.

mail [email protected] to add more queries here 🔍.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory