+ //
+ plugin(({ addVariant }) =>
+ addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
+ ),
+ plugin(({ addVariant }) =>
+ addVariant("phx-click-loading", [
+ ".phx-click-loading&",
+ ".phx-click-loading &",
+ ])
+ ),
+ plugin(({ addVariant }) =>
+ addVariant("phx-submit-loading", [
+ ".phx-submit-loading&",
+ ".phx-submit-loading &",
+ ])
+ ),
+ plugin(({ addVariant }) =>
+ addVariant("phx-change-loading", [
+ ".phx-change-loading&",
+ ".phx-change-loading &",
+ ])
+ ),
+
+ // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+ // See your `CoreComponents.icon/1` for more information.
+ //
+ plugin(function ({ matchComponents, theme }) {
+ let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
+ let values = {}
+ let icons = [
+ ["", "/24/outline"],
+ ["-solid", "/24/solid"],
+ ["-mini", "/20/solid"],
+ ]
+ icons.forEach(([suffix, dir]) => {
+ fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
+ let name = path.basename(file, ".svg") + suffix
+ values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
+ })
+ })
+ matchComponents(
+ {
+ hero: ({ name, fullPath }) => {
+ let content = fs
+ .readFileSync(fullPath)
+ .toString()
+ .replace(/\r?\n|\r/g, "")
+ return {
+ [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+ "-webkit-mask": `var(--hero-${name})`,
+ mask: `var(--hero-${name})`,
+ "mask-repeat": "no-repeat",
+ "background-color": "currentColor",
+ "vertical-align": "middle",
+ display: "inline-block",
+ width: theme("spacing.5"),
+ height: theme("spacing.5"),
+ }
+ },
+ },
+ { values }
+ )
+ }),
+ ],
+}
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
deleted file mode 100644
index 444f8d5..0000000
--- a/assets/tailwind.config.js
+++ /dev/null
@@ -1,68 +0,0 @@
-// See the Tailwind configuration guide for advanced usage
-// https://tailwindcss.com/docs/configuration
-
-const plugin = require("tailwindcss/plugin")
-const fs = require("fs")
-const path = require("path")
-
-module.exports = {
- content: [
- "./js/**/*.js",
- "../lib/boardwise_web.ex",
- "../lib/boardwise_web/**/*.*ex"
- ],
- theme: {
- extend: {
- colors: {
- brand: "#FD4F00",
- }
- },
- },
- plugins: [
- require("@tailwindcss/forms"),
- // Allows prefixing tailwind classes with LiveView classes to add rules
- // only when LiveView classes are applied, for example:
- //
- //
- //
- plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
- plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
- plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
- plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
-
- // Embeds Heroicons (https://heroicons.com) into your app.css bundle
- // See your `CoreComponents.icon/1` for more information.
- //
- plugin(function({matchComponents, theme}) {
- let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
- let values = {}
- let icons = [
- ["", "/24/outline"],
- ["-solid", "/24/solid"],
- ["-mini", "/20/solid"]
- ]
- icons.forEach(([suffix, dir]) => {
- fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
- let name = path.basename(file, ".svg") + suffix
- values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
- })
- })
- matchComponents({
- "hero": ({name, fullPath}) => {
- let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
- return {
- [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
- "-webkit-mask": `var(--hero-${name})`,
- "mask": `var(--hero-${name})`,
- "mask-repeat": "no-repeat",
- "background-color": "currentColor",
- "vertical-align": "middle",
- "display": "inline-block",
- "width": theme("spacing.5"),
- "height": theme("spacing.5")
- }
- }
- }, {values})
- })
- ]
-}
diff --git a/config/config.exs b/config/config.exs
index 2356abd..cd20cc0 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -68,7 +68,7 @@ config :tailwind,
version: "3.3.5",
default: [
args: ~w(
- --config=tailwind.config.js
+ --config=tailwind.config.cjs
--input=css/app.css
--output=../priv/static/assets/app.css
),
diff --git a/flake.nix b/flake.nix
index ed6b365..336068f 100644
--- a/flake.nix
+++ b/flake.nix
@@ -25,6 +25,7 @@
tailwindcss = pkgs.nodePackages.tailwindcss.overrideAttrs (oa: {
plugins = [
+ pkgs.nodePackages.autoprefixer
pkgs.nodePackages."@tailwindcss/forms"
];
});
diff --git a/lib/boardwise_web/components/layouts/react.html.heex b/lib/boardwise_web/components/layouts/react.html.heex
new file mode 100644
index 0000000..5a482ba
--- /dev/null
+++ b/lib/boardwise_web/components/layouts/react.html.heex
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
BoardWise
+
+
+
+
+ <%= @inner_content %>
+
+
diff --git a/lib/boardwise_web/components/layouts/root.html.heex b/lib/boardwise_web/components/layouts/root.html.heex
index f9bd3e7..d1d3db7 100644
--- a/lib/boardwise_web/components/layouts/root.html.heex
+++ b/lib/boardwise_web/components/layouts/root.html.heex
@@ -15,8 +15,6 @@
-
<%= @inner_content %>
diff --git a/lib/boardwise_web/controllers/react_controller.ex b/lib/boardwise_web/controllers/react_controller.ex
index 6681290..197f6e2 100644
--- a/lib/boardwise_web/controllers/react_controller.ex
+++ b/lib/boardwise_web/controllers/react_controller.ex
@@ -1,11 +1,11 @@
defmodule BoardWiseWeb.ReactController do
use BoardWiseWeb, :controller
- def index(conn, _params) do
+ def mount(conn, _params) do
# Set `layout` to false to bypass the app layout. The goal here is to
# eventually migrate away from the React app as is defined in favor of
# Phoenix related components. Exposing this mount point is the first step
# in migrating away from Vercel into a self-hosted solution.
- render(conn, :index, layout: false)
+ render(conn, :mount, layout: false)
end
end
diff --git a/lib/boardwise_web/controllers/react_html/index.html.heex b/lib/boardwise_web/controllers/react_html/index.html.heex
deleted file mode 100644
index 639330b..0000000
--- a/lib/boardwise_web/controllers/react_html/index.html.heex
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/lib/boardwise_web/controllers/react_html/mount.html.heex b/lib/boardwise_web/controllers/react_html/mount.html.heex
new file mode 100644
index 0000000..4873bd4
--- /dev/null
+++ b/lib/boardwise_web/controllers/react_html/mount.html.heex
@@ -0,0 +1 @@
+
diff --git a/lib/boardwise_web/router.ex b/lib/boardwise_web/router.ex
index 5eac47b..db66724 100644
--- a/lib/boardwise_web/router.ex
+++ b/lib/boardwise_web/router.ex
@@ -10,14 +10,16 @@ defmodule BoardWiseWeb.Router do
plug :put_secure_browser_headers
end
+ pipeline :react do
+ plug :put_root_layout, html: {BoardWiseWeb.Layouts, :react}
+ end
+
pipeline :api do
plug :accepts, ["json"]
end
scope "/", BoardWiseWeb do
pipe_through :browser
-
- get "/*path", ReactController, :index
end
# Other scopes may use custom stacks.
@@ -41,4 +43,11 @@ defmodule BoardWiseWeb.Router do
forward "/mailbox", Plug.Swoosh.MailboxPreview
end
end
+
+ # A catch-all that defers to the React app router.
+ scope "/", BoardWiseWeb do
+ pipe_through [:browser, :react]
+
+ get "/*path", ReactController, :mount
+ end
end