Torch

🔥 Torch is a rapid admin generator for Phoenix apps. It creates custom templates and relies on the Phoenix html generator under the hood. 🔥

⬇️ Installation

To install Torch, perform the following steps:

1. Add torch to your list of dependencies in mix.exs. Then, run mix deps.get:

def deps do
  [
    {:torch, "~> 2.0.0-rc.1"}
  ]
end

2. Add a Plug.Static plug to your endpoint.ex:

plug(
  Plug.Static,
  at: "/torch",
  from: {:torch, "priv/static"},
  gzip: true,
  cache_control_for_etags: "public, max-age=86400"
)

3. Configure Torch by adding the following to your config.exs.

config :torch,
  otp_app: :my_app_name,
  template_format: "eex" || "slim"

4. Run mix torch.install

NOTE: If you choose to use slim templates, you will need to install Phoenix Slim.

Now you're ready to start generating your admin! 🎉

🔧 Usage

Torch uses Phoenix generators under the hood. Torch injects it's own custom templates into your priv/static directory, then runs the mix phx.gen.html task with the options you passed in. Finally, it uninstalls the custom templates so they don't interfere with running the plain Phoenix generators.

In light of that fact, the torch.gen.html task takes all the same arguments as the phx.gen.html, but does some extra configuration on either end. Checkout mix help phx.gen.html for more details about the supported options and format.

For example, if we wanted to generate a blog with a Post model we could run the following command:

$ mix torch.gen.html Blog Post posts title:string body:text published_at:datetime published:boolean views:integer

The output would look like:

Add the resource to your browser scope in lib/my_app_web/router.ex:

    resources "/posts", PostController

Ensure the following is added to your endpoint.ex:

    plug(
      Plug.Static,
      at: "/torch",
      from: {:torch, "priv/static"},
      gzip: true,
      cache_control_for_etags: "public, max-age=86400",
      headers: [{"access-control-allow-origin", "*"}]
    )

  :fire: Torch generated html for Posts! :fire:

Torch also installed an admin layout into your my_app_web/templates/layout/torch.html.eex. You will want to update it to include your new navigation link:

<nav class="torch-nav">
  <a href="/posts">Posts</a>
</nav>

Styling

Torch generates two CSS themes you can use: base.css & theme.css. The base styles are basically bare bones, and the theme styles look like the screenshot above. Just change the stylesheet link in the torch.html.eex layout.

If you want to use the theme, but override the colors, you'll need to include your own stylesheet with the specific overrides.

Premium Support

Torch, as an open source project, is free to use and always will be. Infinite Red offers premium Torch support and general web & mobile app design/development services. Get in touch here or email us at [email protected].