Static Site Generator for Elixir.
- Good code and browser reloading on file change
- Easy to use the current Node.js JS/CSS tooling
- Extensions
- Ability to work with "data" (either dynamic data or static files)
- YAML Files
- Elixir scripts (.exs files)
- Handles stuff like Posts, RSS, sitemap, SEO.
- Posts
- RSS
- Sitemap
- Tags
- SEO
- Project generator
The easiest way to get started is to generate a new project using the tableau.new mix task.
Currently the generator can create a website using several different template syntaxes and assets frameworks.
- Templates
- Assets
- TailwindCSS
- Vanilla (Just a regular CSS file)
Please run mix help tableau.new or mix tableau.new --help to see all of the possible flags.
mix archive.install hex tableau_new mix tableau.new my_awesome_site Otherwise, you can just install Tableau into a new mix project.
def deps do [ {:tableau, "~> 0.26"} ] endDocumentation can be found at https://hexdocs.pm/tableau.
| Site | Template | Styling | Template | Source |
|---|---|---|---|---|
| www.elixir-tools.dev | Temple | Tailwind | elixir-tools/elixir-tools.dev | |
| www.mitchellhanberg.com | Temple | Tailwind | mhanberg/blog | |
| pdx.su | Temple | CSS | paradox460/pdx.su | |
| Xmeyers | HEEx | Tailwind | andyl/xmeyers | |
| 0x7f | HEEx | magick.css | 0x7fdev/site | |
| Hackery | HEEx | Tailwind | ✅ | mhanberg/hackery |
| doneth.dev | HEEx | Tailwind | JohnDoneth/doneth.dev | |
| joelkoch.dev | HEEx | Tailwind | joelpaulkoch/joelkoch.dev | |
| www.ethangunderson.com | HEEx | Tailwind | ethangunderson/website | |
| https://adrienanselme.com/ | HEEx | Tailwind | adanselm/adanselm.github.io | |
| acrogenesis.com | HEEx | CSS | acrogenesis/acrogenesis.com |
The examples in the README use the Temple library to demonstrate that Tableau can be used with any markup language of your choice. You could easily use the builtin EEx, or use HEEx, Surface, or HAML.
Layouts are modules that use the use Tableau.Layout macro.
Layouts have access to the @site and @page assign.
The @site assign contains your site's config.
The @page assign contains all the options passed to the use Tableau.Page macro.
defmodule MySite.RootLayout do use Tableau.Layout import Temple def template(assigns) do temple do "<!DOCTYPE html>" 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 do @page.some_assign end link rel: "stylesheet", href: "/css/site.css" end body class: "font-sans" do main class: "container mx-auto px-2" do div class: "border-4 border-green-500" do a class: "text-blue-500 hover:underline", href: "/about" do "About" end a class: "text-blue-500 hover:underline", href: "/posts" do "Posts" end render @inner_content end end end if Mix.env() == :dev do c &Tableau.live_reload/1 end end end end endPages are modules that use the use Tableau.Page macro.
Required options:
:layout- which layout module to use.:permalink- the permalink of the page
Any remaining options are arbitrary and will be available under the @page assign available to layout and page templates.
defmodule MySite.AboutPage do use Tableau.Page, layout: MySite.RootLayout, permalink: "/about", some_assign: "foo" import Temple def template(assigns) do temple do span class: "text-red-500 font-bold" do "i'm a super cool and smart!" end end end endYou can specify a set of directories/files to watch for changes, and the browser will automatically refresh.
# config/config.exs import Config config :tableau, :reloader, patterns: [ ~r"lib/layouts/.*.ex", ~r"lib/pages/.*.ex", ~r"lib/components.ex", ~r"_site/.*.css" ]All you need to do is render the Tableau.live_reload/1 component right after your body tag.
# lib/layouts/app.ex defmodule YourApp.Layouts.App do use Tableau.Layout import Temple def template(assigns) do temple do "<!DOCTYPE html>" 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" link rel: "stylesheet", href: "/css/site.css" end body class: "font-sans" do main class: "container mx-auto px-2" do render(@inner_content) end end if Mix.env() == :dev do c &Tableau.live_reload/1 end end end end endYou can arbitrarily start other build tools as "watchers". This is inspired by the way Phoenix does it.
# config/config.exs import Config config :tableau, :assets, npx: [ "tailwindcss", "-o", "_site/css/site.css", "--watch" ] # or if you are using a package similar to the TailwindCSS hex package config :tableau, :assets, tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]} import_config "#{config_env()}.exs"This will start a long running process that will independently build your CSS as it sees files change.
These are started automatically when you run mix tableau.server.
Other static assets can be copied into the "out" directory by placing them in an extra directory in the root of your project.
This directory can be configured.
config :tableau, :config, include_dir: "static"The dev server can be started with mix tableau.server. On file change, a browser reload will be triggered and the page your requesting will be re-built during the request.
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
