Add daisyui

friends/.dockerignore

@@ -31,6 +31,9 @@
 /tmp/
 .elixir_ls
 
+# My old shit
+/_old/
+
 # Mix artifacts
 /_build/
 /deps/

friends/Dockerfile

@@ -22,15 +22,15 @@ ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
 FROM ${BUILDER_IMAGE} as builder
 
 # install build dependencies
-RUN apt-get update -y && apt-get install -y build-essential git \
+RUN apt-get update -y && apt-get install -y build-essential git npm \
-    && apt-get clean && rm -f /var/lib/apt/lists/*_*
+  && apt-get clean && rm -f /var/lib/apt/lists/*_*
 
 # prepare build dir
 WORKDIR /app
 
 # install hex + rebar
 RUN mix local.hex --force && \
-    mix local.rebar --force
+  mix local.rebar --force
 
 # set build ENV
 ENV MIX_ENV="prod"
@@ -52,6 +52,9 @@ COPY lib lib
 
 COPY assets assets
 
+# Handle daisyui
+RUN npm install --prefix=assets
+
 # compile assets
 RUN mix assets.deploy
 

friends/assets/js/app.js

@@ -1,6 +1,5 @@
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.css"
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.

friends/assets/package.json

@@ -1,8 +1,89 @@
 {
-    "dependencies": {
+  "name": "assets",
-        "daisyui": "^2.27.0",
+  "version": "1.0.0",
-        "phoenix": "file:../../../deps/phoenix",
+  "description": "",
-        "phoenix_html": "file:../../../deps/phoenix_html",
+  "main": "tailwind.config.js",
-        "phoenix_live_view": "file:../../../deps/phoenix_live_view"
+  "dependencies": {
-    }
+    "acorn": "^7.4.1",
+    "acorn-node": "^1.8.2",
+    "acorn-walk": "^7.2.0",
+    "arg": "^5.0.2",
+    "anymatch": "^3.1.2",
+    "autoprefixer": "^10.4.12",
+    "binary-extensions": "^2.2.0",
+    "braces": "^3.0.2",
+    "browserslist": "^4.21.4",
+    "camelcase-css": "^2.0.1",
+    "caniuse-lite": "^1.0.30001423",
+    "chokidar": "^3.5.3",
+    "color": "^4.2.3",
+    "color-convert": "^2.0.1",
+    "color-name": "^1.1.4",
+    "color-string": "^1.9.1",
+    "css-selector-tokenizer": "^0.8.0",
+    "cssesc": "^3.0.0",
+    "daisyui": "^2.33.0",
+    "defined": "^1.0.1",
+    "detective": "^5.2.1",
+    "didyoumean": "^1.2.2",
+    "dlv": "^1.1.3",
+    "electron-to-chromium": "^1.4.284",
+    "escalade": "^3.1.1",
+    "fast-glob": "^3.2.12",
+    "fastparse": "^1.1.2",
+    "fastq": "^1.13.0",
+    "fill-range": "^7.0.1",
+    "fraction.js": "^4.2.0",
+    "function-bind": "^1.1.1",
+    "glob-parent": "^6.0.2",
+    "has": "^1.0.3",
+    "is-arrayish": "^0.3.2",
+    "is-binary-path": "^2.1.0",
+    "is-core-module": "^2.11.0",
+    "is-extglob": "^2.1.1",
+    "is-glob": "^4.0.3",
+    "is-number": "^7.0.0",
+    "lilconfig": "^2.0.6",
+    "merge2": "^1.4.1",
+    "micromatch": "^4.0.5",
+    "minimist": "^1.2.7",
+    "nanoid": "^3.3.4",
+    "node-releases": "^2.0.6",
+    "normalize-path": "^3.0.0",
+    "normalize-range": "^0.1.2",
+    "object-hash": "^3.0.0",
+    "path-parse": "^1.0.7",
+    "picocolors": "^1.0.0",
+    "picomatch": "^2.3.1",
+    "pify": "^2.3.0",
+    "postcss": "^8.4.18",
+    "postcss-import": "^14.1.0",
+    "postcss-js": "^4.0.0",
+    "postcss-load-config": "^3.1.4",
+    "postcss-nested": "^6.0.0",
+    "postcss-selector-parser": "^6.0.10",
+    "postcss-value-parser": "^4.2.0",
+    "quick-lru": "^5.1.1",
+    "read-cache": "^1.0.0",
+    "readdirp": "^3.6.0",
+    "queue-microtask": "^1.2.3",
+    "resolve": "^1.22.1",
+    "reusify": "^1.0.4",
+    "run-parallel": "^1.2.0",
+    "simple-swizzle": "^0.2.2",
+    "source-map-js": "^1.0.2",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "tailwindcss": "^3.2.1",
+    "to-regex-range": "^5.0.1",
+    "update-browserslist-db": "^1.0.10",
+    "util-deprecate": "^1.0.2",
+    "xtend": "^4.0.2",
+    "yaml": "^1.10.2"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
 }

friends/config/config.exs

@@ -39,6 +39,17 @@ config :esbuild,
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
+config :tailwind,
+  version: "3.1.6",
+  default: [
+    args: ~w(
+    --config=tailwind.config.js
+    --input=css/app.css
+    --output=../priv/static/assets/app.css
+  ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
+
 # Configures Elixir's Logger
 config :logger, :console,
   format: "$time $metadata[$level] $message\n",

friends/config/dev.exs

@@ -27,7 +27,8 @@ config :friends, FriendsWeb.Endpoint,
   secret_key_base: "2Q63TmHndldrt1pzzYYYFgnCuWfxMlZ6LBxmhSNbkXigdhrOXvKSO5nRtGnyfP47",
   watchers: [
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ]
 
 # ## SSL Support

friends/mix.exs

@@ -69,7 +69,7 @@ defmodule Friends.MixProject do
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
-      "assets.deploy": ["esbuild default --minify", "phx.digest"]
+      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
     ]
   end
 end