Show application version in console banner

assets/js/app.js

@@ -27,6 +27,7 @@ import BarcodeScannerHook from "./hooks/barcode-scanner";
 import FormatNumberHook from "./hooks/format-number";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
+import banner from "./banner";
 
 let Hooks = FluxonHooks;
 Hooks.BarcodeScanner = BarcodeScannerHook;
@@ -145,12 +146,4 @@ window.enableLiveViewChangeObserver = () => {
   });
 };
 
-console.log(`%c
+banner();
-███╗   ███╗██╗   ██╗███████╗██╗ ██████╗    ██╗     ██╗██████╗ ██████╗  █████╗ ██████╗ ██╗   ██╗
-████╗ ████║██║   ██║██╔════╝██║██╔════╝    ██║     ██║██╔══██╗██╔══██╗██╔══██╗██╔══██╗╚██╗ ██╔╝
-██╔████╔██║██║   ██║███████╗██║██║         ██║     ██║██████╔╝██████╔╝███████║██████╔╝ ╚████╔╝ 
-██║╚██╔╝██║██║   ██║╚════██║██║██║         ██║     ██║██╔══██╗██╔══██╗██╔══██║██╔══██╗  ╚██╔╝  
-██║ ╚═╝ ██║╚██████╔╝███████║██║╚██████╗    ███████╗██║██████╔╝██║  ██║██║  ██║██║  ██║   ██║   
-╚═╝     ╚═╝ ╚═════╝ ╚══════╝╚═╝ ╚═════╝    ╚══════╝╚═╝╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   
-                                                                                              
-`, "font-family:monospace; font-size: 20px");

assets/js/banner.js

@@ -0,0 +1,12 @@
+export default function banner() {
+  const version = document.querySelector('meta[name="version"]').content;
+  console.log(`%c
+███╗   ███╗██╗   ██╗███████╗██╗ ██████╗    ██╗     ██╗██████╗ ██████╗  █████╗ ██████╗ ██╗   ██╗
+████╗ ████║██║   ██║██╔════╝██║██╔════╝    ██║     ██║██╔══██╗██╔══██╗██╔══██╗██╔══██╗╚██╗ ██╔╝
+██╔████╔██║██║   ██║███████╗██║██║         ██║     ██║██████╔╝██████╔╝███████║██████╔╝ ╚████╔╝ 
+██║╚██╔╝██║██║   ██║╚════██║██║██║         ██║     ██║██╔══██╗██╔══██╗██╔══██║██╔══██╗  ╚██╔╝  
+██║ ╚═╝ ██║╚██████╔╝███████║██║╚██████╗    ███████╗██║██████╔╝██║  ██║██║  ██║██║  ██║   ██║   
+╚═╝     ╚═╝ ╚═════╝ ╚══════╝╚═╝ ╚═════╝    ╚══════╝╚═╝╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   
+Version: ${version}
+`, "font-family: IBM Plex Mono,monospace; font-size: 12px");
+}

lib/music_library/application.ex

@@ -43,6 +43,10 @@ defmodule MusicLibrary.Application do
     :ok
   end
 
+  def version do
+    System.get_env("SOURCE_COMMIT") || "development"
+  end
+
   defp skip_migrations? do
     # By default, sqlite migrations are run when using a release
     System.get_env("RELEASE_NAME") != nil

lib/music_library_web/components/layouts/root.html.heex

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <meta name="csrf-token" content={get_csrf_token()} />
+    <meta name="version" content={MusicLibrary.Application.version()} />
     <.live_title suffix=" · Music Library">
       {assigns[:page_title] || assigns.conn.request_path}
     </.live_title>