outlines for the preview and adjustable height

assets/css/app.css

@@ -1,5 +1,30 @@
-@import "tailwindcss/base";
+@import 'tailwindcss/base';
-@import "tailwindcss/components";
+@import 'tailwindcss/components';
-@import "tailwindcss/utilities";
+@import 'tailwindcss/utilities';
 
 /* This file is for your main application CSS */
+
+.outline-black {
+	text-shadow:
+		-1px -1px 0 black,
+		1px -1px 0 black,
+		-1px 1px 0 black,
+		1px 1px 0 black;
+}
+
+.outline-gray {
+	text-shadow:
+		-1px -1px 0 gray,
+		1px -1px 0 gray,
+		-1px 1px 0 gray,
+		1px 1px 0 gray;
+}
+
+.outline-white {
+	color: white;
+	text-shadow:
+		-1px -1px 0 white,
+		1px -1px 0 white,
+		-1px 1px 0 white,
+		1px 1px 0 white;
+}

lib/labelmaker_web/constants.ex

@@ -7,7 +7,19 @@ defmodule LabelmakerWeb.Constants do
     size: "24"
   }
 
-  @permitted_keys @defaults |> Map.keys() |> Enum.map(&Atom.to_string/1)
+  @preview %{
+    preview_height: @defaults.size,
+    preview_text: []
+  }
+
+  @stringview @preview
+              |> Enum.map(fn {k, v} -> {Atom.to_string(k), v} end)
+              |> Map.new()
+
+  @permitted_keys @defaults
+                  |> Map.merge(@preview)
+                  |> Map.keys()
+                  |> Enum.map(&Atom.to_string/1)
 
   @colors System.cmd("magick", ["-list", "color"])
           |> elem(0)
@@ -40,5 +52,7 @@ defmodule LabelmakerWeb.Constants do
   def max_label_length, do: @max_label_length
   def outlines, do: @outlines
   def permitted_keys, do: @permitted_keys
+  def preview, do: @preview
   def sizes, do: @sizes
+  def stringview, do: @stringview
 end

lib/labelmaker_web/live/home.ex

@@ -4,17 +4,29 @@ defmodule LabelmakerWeb.Home do
   alias LabelmakerWeb.Tools
 
   def mount(_params, _session, socket) do
+    assigns =
+      Constants.defaults()
+      |> Map.replace(:label, "")
+      |> Map.merge(Constants.preview())
+      |> Enum.to_list()
+
     {
       :ok,
       assign(
         socket,
-        Enum.to_list(%{Constants.defaults() | label: ""})
+        assigns
       )
     }
   end
 
   def handle_event("update_label", params, socket) do
-    {:noreply, assign(socket, Tools.process_parameters(params))}
+    assigns =
+      params
+      |> Map.merge(Constants.stringview())
+      |> Tools.process_parameters()
+      |> Enum.to_list()
+
+    {:noreply, assign(socket, assigns)}
   end
 
   def handle_event("make_label", params, socket) do
@@ -26,14 +38,17 @@ defmodule LabelmakerWeb.Home do
     <div class="max-w-xl mx-auto p-4 space-y-6">
       <h1 class="text-2xl font-bold text-center">Labelmaker</h1>
 
-      <form phx-change="update_label" phx-submit="make_label" class="space-y-4">
       <div
-          class="flex justify-center items-center h-[72px] bg-gradient-to-r from-black to-white border rounded border-primary"
+        class={[
-          style={"color: #{@color}; font-family: #{@font}; font-size: #{@size}px;"}
+          "flex justify-center items-center p-4 overflow-hidden whitespace-nowrap bg-gradient-to-r from-black to-white border rounded border-primary",
+          @outline != "none" && "outline-#{@outline}"
+        ]}
+        style={"height: calc(2rem + #{@preview_height}px); color: #{@color}; font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px;"}
       >
-          {@label}
+        {Enum.join(@preview_text, "<br />")}
       </div>
 
+      <form phx-change="update_label" phx-submit="make_label" class="space-y-4">
         <div>
           <label for="label" class="block text-sm font-medium">Label</label>
           <input

lib/labelmaker_web/tools.ex

@@ -2,19 +2,26 @@ defmodule LabelmakerWeb.Tools do
   alias LabelmakerWeb.Constants
 
   def process_parameters(parameters) do
+    %{"label" => label, "size" => size} = parameters
+    line_breaks = Regex.scan(~r/#{Regex.escape("\\n")}/, label) |> length()
+    size = String.to_integer(size)
+
     parameters =
       parameters
       |> Map.take(Constants.permitted_keys())
       |> Map.new(fn {k, v} -> {String.to_atom(k), v} end)
-      |> Enum.filter(fn {k, v} ->
+      |> Enum.map(fn
-        case k do
+        {:preview_height, _} -> {:preview_height, size + size * line_breaks}
-          :color -> v in Constants.colors()
+        {:preview_text, _} -> {:preview_text, String.split(label, "\n")}
-          :font -> v in Constants.fonts()
+        pair -> pair
-          :label -> String.length(v) <= Constants.max_label_length()
+      end)
-          :outline -> v in Constants.outlines()
+      |> Enum.filter(fn
-          :size -> v in Constants.sizes()
+        {:color, color} -> color in Constants.colors()
+        {:font, font} -> font in Constants.fonts()
+        {:label, label} -> String.length(label) <= Constants.max_label_length()
+        {:outline, outline} -> outline in Constants.outlines()
+        {:size, size} -> size in Constants.sizes()
         _ -> true
-        end
       end)
       |> Map.new()