fewer colors, fewer fonts, more outlines

assets/css/app.css

@@ -3,37 +3,3 @@
 @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;
-}
-
-.outline-danger {
-	color: #ff6b6b;
-	text-shadow:
-		-1px -1px 0 #ff6b6b,
-		1px -1px 0 #ff6b6b,
-		-1px 1px 0 #ff6b6b,
-		1px 1px 0 #ff6b6b;
-}

lib/labelmaker_web/constants.ex

@@ -19,42 +19,63 @@ defmodule LabelmakerWeb.Constants do
                   |> Map.keys()
                   |> Enum.map(&Atom.to_string/1)
 
-  @colors System.cmd("magick", ["-list", "color"])
-          |> elem(0)
-          |> String.split("\n")
-          # drop header stuff
-          |> Enum.drop(5)
-          |> Enum.map(fn color_info -> color_info |> String.split() |> List.first() end)
-          |> Enum.reject(&is_nil/1)
-          # filter out colors that end in a number (no CSS equivalent)
-          |> Enum.reject(fn color -> String.match?(color, ~r/\d+$/) end)
-          |> Enum.uniq()
+  @colors [
+    "black",
+    "blue",
+    "brown",
+    "gray",
+    "green",
+    "orange",
+    "pink",
+    "purple",
+    "red",
+    "white",
+    "yellow"
+  ]
 
-  @fonts System.cmd("magick", ["-list", "font"])
-         |> elem(0)
-         |> String.split("\n")
-         |> Enum.filter(&String.starts_with?(&1, "  Font:"))
-         |> Enum.reject(&String.starts_with?(&1, "  Font: ."))
-         |> Enum.map(&String.trim_leading(&1, "  Font: "))
+  @danger "#FF6B6B"
+
+  @font_map %{
+    "cs" => "Comic-Sans-MS",
+    "comic" => "Comic-Sans-MS",
+    "comic sans" => "Comic-Sans-MS",
+    "comic-sans" => "Comic-Sans-MS",
+    "comic-sans-ms" => "Comic-Sans-MS",
+    "cr" => "Courier",
+    "courier" => "Courier",
+    "g" => "Georgia",
+    "georgia" => "Georgia",
+    "h" => "Helvetica",
+    "helvetica" => "Helvetica",
+    "i" => "Impact",
+    "impact" => "Impact",
+    "v" => "Verdana",
+    "verdana" => "Verdana"
+  }
 
   @max_label_length 64
   @max_label_error "64-character maximum"
 
-  @outlines ~w(none white black gray)
-
   @sizes 16..128
          |> Enum.to_list()
          |> Enum.take_every(8)
          |> Enum.map(&Integer.to_string/1)
 
   def colors, do: @colors
-  def color_count, do: @colors |> length()
+  def danger, do: @danger
   def defaults, do: @defaults
-  def fonts, do: @fonts
-  def font_count, do: @fonts |> length()
+
+  def fonts,
+    do:
+      @font_map
+      |> Map.values()
+      |> Enum.uniq()
+      |> Enum.map(fn color -> color |> String.replace("-MS", "") |> String.replace("-", " ") end)
+
+  def font_map, do: @font_map
   def max_label_length, do: @max_label_length
   def max_label_error, do: @max_label_error
-  def outlines, do: @outlines
+  def outlines, do: ["none" | @colors]
   def permitted_keys, do: @permitted_keys
   def preview, do: @preview
   def sizes, do: @sizes

lib/labelmaker_web/live/home.ex

@@ -43,7 +43,7 @@ defmodule LabelmakerWeb.Home do
       case assigns.preview_bg do
         "r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
         "b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
-        "c" -> "bg-[#{assigns.color}]"
+        "c" -> ""
         _ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
       end
 
@@ -61,7 +61,7 @@ defmodule LabelmakerWeb.Home do
       <div
         class={
           "flex justify-center items-center p-4 overflow-hidden whitespace-nowrap border rounded transition duration-300 #{@preview_background} #{if @label_too_long, do: "border-danger", else: "border-primary"} #{if @label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}"}
-        style={"height: calc(2rem + #{@preview_height}px); color: #{if @label_too_long, do: "white", else: @color}; font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px; background-color: #{if @preview_bg == "c", do: @color, else: ""}"}
+        style={"height: calc(2rem + #{@preview_height}px); color: #{if @label_too_long, do: "white", else: @color}; #{Tools.outline(@outline, @label_too_long)} font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px; background-color: #{if @preview_bg == "c", do: @color, else: ""}"}
       >
         <%= if @label_too_long do %>
           {Constants.max_label_error()}
@@ -74,7 +74,7 @@ defmodule LabelmakerWeb.Home do
       </div>
       <div class="flex flex-row justify-between" style="margin-top: 5px;">
         <p class="text-xs text-gray-600 dark:text-gray-400 m-0 ml-1">
-          Note: not all fonts and colors are available for preview.
+          Note: not all fonts are available for preview.
         </p>
         <div class="flex flex-row gap-1">
           <div

lib/labelmaker_web/tools.ex

@@ -8,6 +8,7 @@ defmodule LabelmakerWeb.Tools do
   alias LabelmakerWeb.Constants
 
   def process_parameters(parameters) do
+    # ensure our defaults are in place to cover any missing parameters
     %{"label" => label, "size" => size} =
       Constants.defaults()
       |> Map.new(fn {k, v} -> {Atom.to_string(k), v} end)
@@ -22,6 +23,9 @@ defmodule LabelmakerWeb.Tools do
       |> Map.take(Constants.permitted_keys())
       |> Map.new(fn {k, v} -> {String.to_atom(k), v} end)
       |> Enum.map(fn
+        {:font, font} ->
+          {:font, Constants.font_map()[String.downcase(font)]}
+
         {:label, label} ->
           if String.length(label) > Constants.max_label_length(),
             do: {:label, String.slice(label, 0, Constants.max_label_length() + 1)},
@@ -41,7 +45,7 @@ defmodule LabelmakerWeb.Tools do
       end)
       |> Enum.filter(fn
         {:color, color} -> color in Constants.colors()
-        {:font, font} -> font in Constants.fonts()
+        {:font, font} -> font in Map.values(Constants.font_map())
         {:outline, outline} -> outline in Constants.outlines()
         {:size, size} -> size in Constants.sizes()
         _ -> true
@@ -50,4 +54,11 @@ defmodule LabelmakerWeb.Tools do
 
     Map.merge(Constants.defaults(), parameters)
   end
+
+  def outline(_, error: true), do: outline(Constants.danger(), false)
+  def outline("none", _error), do: ""
+
+  def outline(color, _error),
+    do:
+      "text-shadow: -1px -1px 0 #{color}, 1px -1px 0 #{color}, -1px 1px 0 #{color}, 1px 1px 0 #{color};"
 end