Prod build process

app/javascript/controllers/font_validator_controller.js

@@ -0,0 +1,35 @@
+// app/javascript/controllers/font_validator_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["textField", "hiddenField", "countDisplayField"]
+
+  connect() {
+    this.measure()
+  }
+
+  measure() {
+    const text = this.textFieldTarget.value
+    const pixelWidth = this.getTextWidth(text, "bold 6px sans-serif")
+    
+    // Do something with the pixel width (e.g., store in a hidden field for Rails to read)
+    if (this.hasHiddenFieldTarget) {
+      this.hiddenFieldTarget.value = pixelWidth
+      this.countDisplayFieldTarget.textContent = `${pixelWidth}`
+      if (pixelWidth > 100) {
+        this.countDisplayFieldTarget.classList.add("text-brightlava")
+      } else {
+        this.countDisplayFieldTarget.classList.remove("text-brightlava")
+      }
+    }
+  }
+
+  // Canvas measurement trick
+  getTextWidth(text, font) {
+    const canvas = document.createElement("canvas")
+    const context = canvas.getContext("2d")
+    context.font = font
+    const metrics = context.measureText(text)
+    return Math.ceil(metrics.width)
+  }
+}