Incremental builds and asset watchers

Author: mhanberg

.formatter.exs

@@ -1,5 +1,5 @@
 # Used by "mix format"
 [
   import_deps: [:plug],
-  inputs: ["{mix,.formatter}.exs", "{config,lib}/**/*.{ex,exs}"]
+  inputs: ["{mix,.formatter}.exs", "{config,lib}/**/*.{ex,exs}", "test/tableau/**/*.exs"]
 ]

.gitignore

@@ -25,7 +25,7 @@ tableau-*.tar
 # Temporary files, for example, from tests.
 /tmp/
 
-/test/support/tab_demo/_site
+/example/_site
 
 
-/test/support/tab_demo/priv/static
+/example/priv/static

README.md

@@ -0,0 +1,7 @@
+<div>
+<h1>
+Yo!</h1>
+<p>
+This is a post</p>
+
+</div>

_site/posts/hello-world!/index.html

@@ -0,0 +1,3 @@
+import Config
+
+import_config "#{Mix.env()}.exs"

config/config.exs

@@ -0,0 +1 @@
+import Config

config/dev.exs

@@ -0,0 +1,3 @@
+import Config
+
+config :logger, level: :warn

config/test.exs

@@ -0,0 +1,13 @@
+import Config
+
+config :tableau, :reloader, dirs: ["./lib/app.ex", "./lib/pages/", "./_posts", "./_site/css"]
+
+config :tableau, :assets,
+  npx: [
+    "tailwindcss",
+    "-o",
+    "_site/css/site.css",
+    "--watch",
+  ]
+
+import_config "#{Mix.env()}.exs"

test/support/tab_demo/.formatter.exs renamed to example/.formatter.exs

@@ -0,0 +1 @@
+import Config

test/support/tab_demo/.gitignore renamed to example/.gitignore

@@ -0,0 +1,9 @@
+import Config
+
+config :tableau, :assets,
+  npx: [
+    "tailwindcss",
+    "-o",
+    "_site/css/site.css",
+    env: [{"NODE_ENV", "production"}]
+  ]

test/support/tab_demo/README.md renamed to example/README.md

@@ -0,0 +1,3 @@
+import Config
+
+config :logger, level: :warn

test/support/tab_demo/_posts/first-post.md renamed to example/_posts/first-post.md

@@ -15,7 +15,7 @@ defmodule TabDemo.Layouts.App do
                "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ctext%20y%3D%22.9em%22%20font-size%3D%2290%22%3E%E2%98%80%EF%B8%8F%3C%2Ftext%3E%3C%2Fsvg%3E",
              type: "image/svg+xml"
 
-        script(src: "https://unpkg.com/tailwindcss-jit-cdn")
+        link rel: "stylesheet", href: "/css/site.css"
       end
 
       body class: "font-sans" do
@@ -34,41 +34,8 @@ defmodule TabDemo.Layouts.App do
         end
       end
 
-      script defer: true do
-        """
-        function connect() {
-          try {
-            window.socket = new WebSocket('ws://' + location.host + '/ws');
-
-            window.socket.onmessage = function(e) {
-              if (e.data === "reload") {
-                location.reload();
-              }
-            }
-
-            window.socket.onopen = () => {
-              waitForConnection(() => window.socket.send("subscribe"), 300);
-            };
-
-            window.socket.onclose = () => {
-              setTimeout(() => connect(), 500);
-            };
-
-            function waitForConnection(callback, interval) {
-              console.log("Waiting for connection!")
-              if (window.socket.readyState === 1) {
-                callback();
-              } else {
-                setTimeout(() => waitForConnection(callback, interval), interval);
-              }
-            }
-          } catch (e) {
-            setTimeout(() => connect(), 500);
-          }
-        }
-
-        connect();
-        """
+      if Mix.env() == :dev do
+        c Tableau.Components.LiveReload
       end
     end
   end

test/support/tab_demo/_posts/second-post.md renamed to example/_posts/second-post.md

@@ -1,7 +1,7 @@
 defmodule TabDemo.Layouts.Post do
   use Tableau.Layout
 
-  layout TabDemo.Layouts.App
+  layout(TabDemo.Layouts.App)
 
   render do
     h1 class: "text-4xl font-bold", do: @page["title"]

example/config/config.exs

@@ -1,7 +1,7 @@
 defmodule TabDemo.Layouts.WithHeader do
   use Tableau.Layout
 
-  layout Tableau.Layout.default()
+  layout(Tableau.Layout.default())
 
   render do
     header class: "px-2 py-4 border border-red-500 w-full flex justify-between" do

example/config/dev.exs

@@ -3,10 +3,10 @@ defmodule TabDemo.Pages.About do
 
   render do
     span class: "text-red-500 font-bold" do
-      "i'm a super cool and smart! dfkj"
+      "i'm a super cool and smart!"
 
-      div class: "font-bold italic" do
-        "and i'm very humble"
+      div class: "font-bold italic text-yellow-800" do
+        "and i'm very yellow"
       end
     end
   end

example/config/prod.exs

@@ -1,7 +1,7 @@
 defmodule TabDemo.Pages.Communist do
   use Tableau.Page
 
-  layout TabDemo.Layouts.WithHeader
+  layout(TabDemo.Layouts.WithHeader)
 
   render do
     span class: "text-red-500 font-bold" do

example/config/test.exs

@@ -1,7 +1,7 @@
 defmodule TabDemo.Pages.Desk do
   use Tableau.Page
 
-  layout TabDemo.Layouts.WithHeader
+  layout(TabDemo.Layouts.WithHeader)
 
   render do
     span class: "text-red-500 font-bold" do

test/support/tab_demo/lib/layouts/app.ex renamed to example/lib/layouts/app.ex

@@ -6,7 +6,7 @@ defmodule TabDemo.Pages.Posts do
       for post <- @posts do
         li do
           a class: "text-blue-500 hover:underline", href: post.permalink do
-            post.frontmatter["title"]
+            post.frontmatter["title"] <> " 🧨"
           end
         end
       end

test/support/tab_demo/lib/layouts/post.ex renamed to example/lib/layouts/post.ex

@@ -21,7 +21,8 @@ defmodule TabDemo.MixProject do
   # Run "mix help deps" to learn about dependencies.
   defp deps do
     [
-      {:tableau, path: "../../.."}
+      {:tableau, path: "../"},
+      {:benchee, "~> 1.0"}
       # {:dep_from_hexpm, "~> 0.3.0"},
       # {:dep_from_git, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"}
     ]

test/support/tab_demo/lib/layouts/with_header.ex renamed to example/lib/layouts/with_header.ex

@@ -1,7 +1,9 @@
 %{
+  "benchee": {:hex, :benchee, "1.0.1", "66b211f9bfd84bd97e6d1beaddf8fc2312aaabe192f776e8931cb0c16f53a521", [:mix], [{:deep_merge, "~> 1.0", [hex: :deep_merge, repo: "hexpm", optional: false]}], "hexpm", "3ad58ae787e9c7c94dd7ceda3b587ec2c64604563e049b2a0e8baafae832addb"},
   "cowboy": {:hex, :cowboy, "2.9.0", "865dd8b6607e14cf03282e10e934023a1bd8be6f6bacf921a7e2a96d800cd452", [:make, :rebar3], [{:cowlib, "2.11.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "2c729f934b4e1aa149aff882f57c6372c15399a20d54f65c8d67bef583021bde"},
   "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.3.1", "ebd1a1d7aff97f27c66654e78ece187abdc646992714164380d8a041eda16754", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3a6efd3366130eab84ca372cbd4a7d3c3a97bdfcfb4911233b035d117063f0af"},
   "cowlib": {:hex, :cowlib, "2.11.0", "0b9ff9c346629256c42ebe1eeb769a83c6cb771a6ee5960bd110ab0b9b872063", [:make, :rebar3], [], "hexpm", "2b3e9da0b21c4565751a6d4901c20d1b4cc25cbb7fd50d91d2ab6dd287bc86a9"},
+  "deep_merge": {:hex, :deep_merge, "1.0.0", "b4aa1a0d1acac393bdf38b2291af38cb1d4a52806cf7a4906f718e1feb5ee961", [:mix], [], "hexpm", "ce708e5f094b9cd4e8f2be4f00d2f4250c4095be93f8cd6d018c753894885430"},
   "earmark": {:hex, :earmark, "1.4.15", "2c7f924bf495ec1f65bd144b355d0949a05a254d0ec561740308a54946a67888", [:mix], [{:earmark_parser, ">= 1.4.13", [hex: :earmark_parser, repo: "hexpm", optional: false]}], "hexpm", "3b1209b85bc9f3586f370f7c363f6533788fb4e51db23aa79565875e7f9999ee"},
   "earmark_parser": {:hex, :earmark_parser, "1.4.13", "0c98163e7d04a15feb62000e1a891489feb29f3d10cb57d4f845c405852bbef8", [:mix], [], "hexpm", "d602c26af3a0af43d2f2645613f65841657ad6efc9f0e361c3b6c06b578214ba"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},

test/support/tab_demo/lib/pages/about.ex renamed to example/lib/pages/about.ex

@@ -0,0 +1,12 @@
+module.exports = {
+  mode: "jit",
+  purge: ["_site/**/index.html"],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}