Merge branch 'trunk' of https://gitea.mcmorgans.us/gavin/labelmaker into trunk

README.md

@@ -1,6 +1,8 @@
 # Labelmaker
 
-[Labelmaker](https://labelmaker.xyz) is a simple web tool for generating text-based images, perfect for creating decals in [Tabletop Simulator](https://www.tabletopsimulator.com/). Just append your desired text to the URL and Labelmaker will return an image, no design tools required.
+[Labelmaker](https://labelmaker.xyz) is a simple web tool for generating text-based images, perfect for creating [decals](https://kb.tabletopsimulator.com/game-tools/decal-tool/) in [Tabletop Simulator](https://www.tabletopsimulator.com/). Just append your desired text to the `labelmaker.xyz/` and Labelmaker will return an image, no design tools required! A few options are available via query string parameters: font, color, outline, and size. The homepage offers a form to make things a bit easier.
+
+![Risky business](/priv/static/images/ukraine_1024x512.png)
 
 ## ✨ Features
 
@@ -15,7 +17,7 @@
 
 [https://labelmaker.xyz/Hello World](https://labelmaker.xyz/Hello%20World)
 
-Generates an image of "Hello World" in the default style.
+(I'm actually cheating here and appended `?outline=white` so that the image is visible on dark backgrounds)
 
 ![Hello World](https://labelmaker.xyz/Hello%20World?outline=white)
 
@@ -23,42 +25,27 @@ Generates an image of "Hello World" in the default style.
 
 [https://labelmaker.xyz/Hello?color=yellow](https://labelmaker.xyz/Hello?color=yellow)
 
-Renders "Hello" in yellow text.
-
 ![Yellow Hello](https://labelmaker.xyz/Hello?color=yellow)
 
 ### Add Outline
 
 [https://labelmaker.xyz/Hello?color=yellow&outline=black](https://labelmaker.xyz/Hello?color=yellow&outline=black)
 
-Renders "Hello" in yellow with a black outline, perfect for contrast on similar backgrounds.
-
 ![Outlined yellow Hello](https://labelmaker.xyz/Hello?color=yellow&outline=black)
 
 ### Customize Font and Size
 
-[https://labelmaker.xyz/Courier?font=Courier&size=96&color=CornFlowerBlue&outline=white](https://labelmaker.xyz/Courier?font=Courier&size=96&color=CornFlowerBlue&outline=white)
+[https://labelmaker.xyz/Comic Sans?font=cs&size=96&color=orange&outline=blue](https://labelmaker.xyz/Comic%20Sans?font=cs&size=96&color=orange&outline=blue)
 
-Uses the `Courier` font at 96px size.
+![Comic Sans](https://labelmaker.xyz/Comic%20Sans?font=cs&size=96&color=orange&outline=blue)
-
-![CornflowerBlue Courier](https://labelmaker.xyz/Courier?font=Courier&size=72&color=CornflowerBlue&outline=white)
 
 ### Multiple Lines
 
-[https://labelmaker.xyz/Multiple\nLines?font=DejaVu-Sans-Oblique&color=orange](https://labelmaker.xyz/Multiple\nLines?font=DejaVu-Sans-Oblique&color=orange)
+[https://labelmaker.xyz/Multiple\nLines?font=Impact&color=orange](https://labelmaker.xyz/Multiple\nLines?font=Impact&color=orange)
 
 Use `\n` to insert line breaks.
 
-![Multiple\nLines](https://labelmaker.xyz/Multiple\nLines?font=DejaVu-Sans-Oblique&size=72&color=orange)
+![Multiple\nLines](https://labelmaker.xyz/Multiple\nLines?font=Impact&size=72&color=orange)
-
-## ⚙️ Query Parameters
-
-| Parameter | Description         | Example Value           |
-| --------- | ------------------- | ----------------------- |
-| `color`   | Text color          | `red`, `CornFlowerBlue` |
-| `outline` | Outline color       | `black`, `white`        |
-| `font`    | Font name           | `Courier`, `Helvetica`  |
-| `size`    | Font size in pixels | `24`, `48`              |
 
 ## 🧪 Try It Live
 
@@ -68,6 +55,45 @@ Visit the [Labelmaker homepage](https://labelmaker.xyz/) to:
 - Test out combinations
 - Copy generated URLs for use in Tabletop Simulator or elsewhere
 
+## ⚙️ Query Parameters
+
+| Parameter | Description         | Values            |
+| --------- | ------------------- | ----------------- |
+| `color`   | Text color          | `black`           |
+|           |                     | `blue`            |
+|           |                     | `brown`           |
+|           |                     | `gray`            |
+|           |                     | `green`           |
+|           |                     | `orange`          |
+|           |                     | `pink`            |
+|           |                     | `purple`          |
+|           |                     | `red`             |
+|           |                     | `white`           |
+|           |                     | `yellow`          |
+| `outline` | Outline color       | `none`            |
+|           |                     | `blue`            |
+|           |                     | `brown`           |
+|           |                     | `gray`            |
+|           |                     | `green`           |
+|           |                     | `orange`          |
+|           |                     | `pink`            |
+|           |                     | `purple`          |
+|           |                     | `red`             |
+|           |                     | `white`           |
+|           |                     | `yellow`          |
+| `font`    | Font name           | `Comic Sans (cs)` |
+|           |                     | `Courier (cr)`    |
+|           |                     | `Georgia (g)`     |
+|           |                     | `Helvetica (h)`   |
+|           |                     | `Impact (i)`      |
+|           |                     | `Verdana (v)`     |
+| `size`    | Font size in pixels | `16`              |
+|           |                     | `24`              |
+|           |                     | `32`              |
+|           |                     | `...`             |
+|           |                     | `120`             |
+|           |                     | `128`             |
+
 ## 🧰 Development
 
 This project is powered by Elixir + Phoenix, employs ImageMagick to create the images, and uses Docker for deployment.

lib/labelmaker_web/components/layouts/app.html.heex

@@ -25,7 +25,7 @@
     </div>
   </div>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main class="px-4 py-10 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />
     {@inner_content}

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

@@ -12,16 +12,21 @@
     <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
     <link rel="shortcut icon" href="/images/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
+    <meta name="theme-color" content="#6495ED" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Labelmaker" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black" />
     <meta property="og:title" content="Labelmaker" />
     <meta
       property="og:description"
       content="Easily create text images via URL for Tabletop Simulator"
     />
+    <meta property="og:url" content="https://labelmaker.xyz" />
+    <meta property="og:type" content="website" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image" content="https://labelmaker.xyz/labelmaker_1200x630.png" />
+    <meta property="og:image" content="https://labelmaker.xyz/images/ukraine_1200x630.png" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Labelmaker" />
     <meta
@@ -31,7 +36,7 @@
     <meta name="twitter:image:type" content="image/png" />
     <meta name="twitter:image:width" content="1024" />
     <meta name="twitter:image:height" content="512" />
-    <meta name="twitter:image" content="https://labelmaker.xyz/labelmaker_1024x512.png" />
+    <meta name="twitter:image" content="https://labelmaker.xyz/images/ukraine_1024x512.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>

lib/labelmaker_web/live/home.ex

@@ -55,8 +55,11 @@ defmodule LabelmakerWeb.Home do
       )
 
     ~H"""
-    <div class="max-w-xl mx-auto p-4 space-y-6">
+    <div class="max-w-xl mx-auto p-3 space-y-5">
-      <h1 class="text-2xl font-bold text-center">Labelmaker</h1>
+      <h1 class="text-5xl font-bold text-center text-primary">Labelmaker</h1>
+      <p class="text-l text-center w-[350px] m-auto">
+        Easily create text-based images. Perfect for quickly creating decals in Tabletop Simulator.
+      </p>
 
       <div
         class={