WIP — Realign boilerplate with mix phx.new

.env.dev

@@ -19,10 +19,10 @@ SESSION_KEY=elixir_boilerplate
 SESSION_SIGNING_SALT= # Generate salt with `mix phx.gen.secret`
 
 # Database configuration
-# - Use `postgres://localhost/elixir_boilerplate_dev` if you have a local PostgreSQL server
-# - Use `postgres://username:password@localhost/elixir_boilerplate_dev` if you have a local PostgreSQL server with credentials
 # - Use `postgres://postgres:development@localhost/elixir_boilerplate_dev` if you’re using the PostgreSQL server provided by Docker Compose
-DATABASE_URL=postgres://localhost/elixir_boilerplate_dev
+# - Use `postgres://username:password@localhost/elixir_boilerplate_dev` if you have a local PostgreSQL server with credentials
+# - Use `postgres://localhost/elixir_boilerplate_dev` if you have a local PostgreSQL server
+DATABASE_URL=postgres://postgres:development@localhost/elixir_boilerplate_dev
 DATABASE_POOL_SIZE=20
 DATABASE_SSL=false
 

.formatter.exs

@@ -1,4 +1,7 @@
 [
-  inputs: ["*.exs", "{config,lib,priv,rel,test}/**/*.{ex,exs}"],
+  import_deps: [:ecto, :ecto_sql, :phoenix],
+  subdirectories: ["priv/*/migrations"],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"],
   line_length: 180
 ]

.gitignore

@@ -3,8 +3,10 @@
 /db
 /deps
 /*.ez
-/cover
+
+# Temporary files
 /tmp
+/cover
 
 # Generated on crash by the VM
 erl_crash.dump

Dockerfile

@@ -38,6 +38,9 @@ ENV MIX_ENV="prod"
 COPY mix.exs mix.lock ./
 RUN mix deps.get --only $MIX_ENV
 
+# Setup assets dependencies (Esbuild, Tailwind, etc…) so the are cached
+RUN mix assets.setup
+
 # Copy compile-time config files before we compile dependencies
 # to ensure any relevant config change will trigger the dependencies
 # to be re-compiled.
@@ -50,8 +53,7 @@ RUN mix deps.compile
 # Compile assets
 COPY --from=npm-builder /app/assets assets
 COPY priv priv
-RUN mix esbuild default
-RUN mix phx.digest
+RUN mix assets.deploy
 
 # Compile code
 COPY lib lib

Makefile

@@ -8,6 +8,7 @@ DOCKER_IMAGE_TAG ?= $(APP_VERSION)
 DOCKER_REGISTRY ?=
 DOCKER_LOCAL_IMAGE:= $(APP_NAME):$(DOCKER_IMAGE_TAG)
 DOCKER_REMOTE_IMAGE:= $(DOCKER_REGISTRY)/$(DOCKER_LOCAL_IMAGE)
+HEROICONS_VERSION := 2.0.18
 
 # Linter and formatter configuration
 # ----------------------------------
@@ -90,6 +91,13 @@ sync-translations: ## Synchronize translations with Accent
 test: ## Run the test suite
 	mix test
 
+.PHONY: update-heroicons
+update-heroicons: ## Update Heroicons assets
+	cd assets/vendor && \
+	curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HEROICONS_VERSION}.tar.gz" | \
+  tar -xvz --strip-components=1 heroicons-${HEROICONS_VERSION}/optimized
+
+
 # Check, lint and format targets
 # ------------------------------
 

assets/css/app.css

@@ -1,22 +1,3 @@
-.home {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 40px;
-  text-align: center;
-  line-height: 1.4;
-}
-
-.home a {
-  display: block;
-  margin: 0 0 20px;
-}
-
-.home p {
-  margin: 0 0 20px;
-}
-
-.home p:last-child {
-  margin-bottom: 0;
-}
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

assets/js/app.js

@@ -1,2 +1,34 @@
-import 'simple-css-reset/reset.css';
-import '../css/app.css';
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import 'phoenix_html';
+
+// Show progress bar on live navigation and form submits
+import topbar from 'topbar';
+
+const DELAY_IN_MILISECONDS = 200;
+
+topbar.config({barColors: {0: '#29d'}, shadowColor: 'rgba(0, 0, 0, .3)'});
+window.addEventListener('phx:page-loading-start', (_info) =>
+  topbar.delayedShow(DELAY_IN_MILISECONDS)
+);
+window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide());
+
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from 'phoenix';
+import {LiveSocket} from 'phoenix_live_view';
+
+const csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute('content');
+const liveSocket = new LiveSocket('/live', Socket, {
+  // eslint-disable-next-line camelcase
+  params: {_csrf_token: csrfToken}
+});
+
+// connect if there are any LiveViews on the page
+liveSocket.connect();
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket;

assets/package.json

@@ -8,7 +8,7 @@
     "npm": "^9.5.1"
   },
   "dependencies": {
-    "simple-css-reset": "^3.0.0"
+    "topbar": "^2.0.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.7",

assets/tailwind.config.js

@@ -0,0 +1,99 @@
+/* eslint-env node */
+
+// 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/*_web.ex', '../lib/*_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:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    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 &'
+      ])
+    ),
+    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(({matchComponents, theme}) => {
+      const iconsDir = path.join(__dirname, './vendor/heroicons/optimized');
+      const values = {};
+      const icons = [
+        ['', '/24/outline'],
+        ['-solid', '/24/solid'],
+        ['-mini', '/20/solid']
+      ];
+
+      /* eslint max-nested-callbacks: ["error", 3] */
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).map((file) => {
+          const name = path.basename(file, '.svg') + suffix;
+
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)};
+        });
+      });
+
+      matchComponents(
+        {
+          hero: ({name, fullPath}) => {
+            const 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}
+      );
+    })
+  ]
+};

assets/vendor/heroicons/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Refactoring UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

assets/vendor/heroicons/UPGRADE.md

@@ -0,0 +1,6 @@
+You are running heroicons v2.0.18. To upgrade in place, you can run the following command,
+where your `HERO_VSN` export is your desired version:
+
+    export HERO_VSN="2.0.18" ; \
+      curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
+      tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized