No description
This repository has been archived on 2023-08-07. You can view files and clone it, but cannot push or open issues or pull requests.
Find a file
Mitchell Hanberg 3993c798c0 Join markup with a new line
Text nodes separated by new lines still show whitespace when rendered,
so we should maintain user specified new lines.

Closes #59
Closes #60
2020-04-14 10:40:05 -04:00
.github Handle HTML fragments in temple.convert task (#35) 2019-11-22 22:48:20 -05:00
config Implement remaining from helpers 2019-06-01 00:02:49 -04:00
lib Join markup with a new line 2020-04-14 10:40:05 -04:00
priv/templates Finishing touches 2019-07-03 20:57:19 -04:00
test Join markup with a new line 2020-04-14 10:40:05 -04:00
.formatter.exs Svg module (#25) 2019-09-13 21:36:16 -04:00
.gitignore Rename to Temple 2019-07-01 22:48:51 -04:00
.tool-versions Update elixir version for asdf 2019-07-03 19:38:33 -04:00
CHANGELOG.md Bump v0.4.4 2020-04-14 10:39:47 -04:00
LICENSE Create LICENSE 2019-06-30 14:45:17 -04:00
mix.exs Remove mdn docs 2020-04-14 10:39:58 -04:00
mix.lock Bump phoenix from 1.4.10 to 1.4.15 2020-03-09 15:31:18 -04:00
README.md Rename props to assigns 2020-04-14 10:40:01 -04:00
temple.png Logo 2019-07-04 00:16:37 -04:00

Actions Status Hex.pm Slack

Temple is a DSL for writing HTML using Elixir.

You're probably here because you want to use Temple to write Phoenix templates, which is why Temple includes a Phoenix template engine and Temple-compatible Phoenix form helpers.

Installation

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

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

Usage

Using Temple is a as simple as using the DSL inside of an temple/1 block. This returns a safe result of the form {:safe, html_string}.

See the documentation for more details.

use Temple

temple do
  h2 "todos"

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

        div item
      end
    end
  end

  script """
  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 provides an API for creating custom components that act as custom HTML elements.

These components can be given assigns that are available inside the component definition as module attributes. The contents of a components do block are available as a special @children assign.

See the documentation for more details.

defcomponent :flex do
  div id: @id, class: "flex" do
    @children
  end
end

temple do
  flex id: "my-flex" do
    div "Item 1"
    div "Item 2"
    div "Item 3"
  end
end

Phoenix.HTML

Temple provides macros for working with the helpers provided by the Phoenix.HTML package.

Most of the macros are purely wrappers, while the semantics of some are changed to work with Temple.

See the documentation for more details.

temple do
  form_for @conn, Routes.some_path(@conn, :create) do
    text_input form, :name
  end
end

Phoenix templates

Add the templating engine to your Phoenix configuration.

See the documentation for more details.

# config.exs
config :phoenix, :template_engines, exs: Temple.Engine

# config/dev.exs
config :your_app, YourAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"lib/your_app_web/templates/.*(exs)$"
    ]
  ]

# your_app_web.ex
def view do
  quote do
    # ...
    use Temple # Replaces the call to import Phoenix.HTML
  end
end
# app.html.exs
html lang: "en" do
  head do
    meta charset: "utf-8"
    meta http_equiv: "X-UA-Compatible", content: "IE=edge"
    meta name: "viewport", content: "width=device-width, initial-scale=1.0"
    title "YourApp · Phoenix Framework"

    link rel: "stylesheet", href: Routes.static_path(@conn, "/css/app.css")
  end

  body do
    header do
      section class: "container" do
        nav role: "navigation" do
          ul do
            li do: a("Get Started", href: "https://hexdocs.pm/phoenix/overview.html")
          end
        end

        a href: "http://phoenixframework.org/", class: "phx-logo" do
          img src: Routes.static_path(@conn, "/images/phoenix.png"),
              alt: "Phoenix Framework Logo"
        end
      end
    end

    main role: "main", class: "container" do
      p get_flash(@conn, :info), class: "alert alert-info", role: "alert"
      p get_flash(@conn, :error), class: "alert alert-danger", role: "alert"

      partial render(@view_module, @view_template, assigns)
    end

    script type: "text/javascript", src: Routes.static_path(@conn, "/js/app.js")
  end
end

Tasks

temple.convert

This task can be used to convert plain HTML and SVG into Temple syntax. Input is taken from stdin or from a file and the output is sent to stdout.

cat index.html | mix temple.convert > index.html.exs

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}"],
]