Add Postage Stamp page

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/graphics_controller.ex

@@ -0,0 +1,26 @@
+defmodule ComponentsGuideWeb.GraphicsController do
+  use ComponentsGuideWeb, :controller
+  require Logger
+
+  def index(conn, _params) do
+    render(conn, "index.html", article: "intro")
+  end
+
+  @articles ["postage-stamp"]
+
+  def show(conn, %{"id" => article}) when article in @articles do
+    render(conn, "index.html", article: article)
+  end
+
+  def show(conn, _), do: raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
+end
+
+defmodule ComponentsGuideWeb.GraphicsView do
+  use ComponentsGuideWeb, :view
+  use ComponentsGuideWeb.Snippets
+  alias ComponentsGuideWeb.ThemeView
+
+  def header_styles() do
+    ThemeView.banner_styles(:web_standards)
+  end
+end

apps/components_guide_web/lib/components_guide_web/router.ex

@@ -45,6 +45,12 @@ defmodule ComponentsGuideWeb.Router do
       WebStandardsController,
       only: [:index, :show]
     )
+    
+    resources(
+      "/graphics",
+      GraphicsController,
+      only: [:index, :show]
+    )
 
     live("/color", ColorLive, :index)
     live("/color/:definition", ColorLive, :show)

apps/components_guide_web/lib/components_guide_web/templates/graphics/_header.html.eex

@@ -0,0 +1,3 @@
+<header style="<%= header_styles() %>">
+  <%= render ComponentsGuideWeb.GraphicsView, "_top.html" %>
+</header>

apps/components_guide_web/lib/components_guide_web/templates/graphics/_nav.html.eex

@@ -0,0 +1,6 @@
+<nav class="pt-6 pb-4">
+  <ul y-y x-x=md class="text-lg font-bold text-shadow" data-links="p-3">
+    <li><%= link("Intro", to: '/graphics') %>
+    <li><%= link("Postage Stamp", to: '/graphics/postage-stamp') %>
+  </ul>
+</nav>

apps/components_guide_web/lib/components_guide_web/templates/graphics/_top.html.eex

@@ -0,0 +1,7 @@
+<div class="mx-auto max-w-4xl text-white">
+  <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
+    <span class="mr-1 text-5xl">🌟🍭</span>
+    <span><%= "Graphics" %></span>
+  </h1>
+  <%= render ComponentsGuideWeb.GraphicsView, "_nav.html" %>
+</div>

apps/components_guide_web/lib/components_guide_web/templates/graphics/index.html.eex

@@ -0,0 +1,9 @@
+<%= render @view_module, "_header.html" %>
+
+<article>
+  <div class="text-white bg-gray-900">
+    <div class="content max-w-4xl mx-auto py-8 text-xl" style="--link-decoration: underline;">
+      <%= render(@view_module, @article <> ".html", conn: @conn) %>
+    </div>
+  </div>
+</article>

apps/components_guide_web/lib/components_guide_web/templates/graphics/postage-stamp.html.md

@@ -0,0 +1,5 @@
+# Postage Stamp
+
+<live-render>
+ComponentsGuideWeb.Graphics.Live.PostageStamp
+</live-render>

apps/components_guide_web/lib/components_guide_web/templates/graphics/postage_stamp_live.ex

@@ -0,0 +1,85 @@
+defmodule ComponentsGuideWeb.Graphics.Live.PostageStamp do
+  use ComponentsGuideWeb, :live_view
+
+  alias ComponentsGuideWeb.StylingHelpers
+
+  defmodule State do
+    defstruct primary: "Primary", secondary: "Secondary", width: 400, height: 400, center_y: false
+
+    def to_url(%State{primary: primary, secondary: secondary, width: width, height: height, center_y: center_y}) do
+      # url = URI.parse("https://postage-stamp.collected.workers.dev/1/poster")
+      url = URI.parse("https://postage-stamp.fly.dev/1/poster")
+      query = [primary: primary, secondary: secondary, width: width, height: height]
+      query = if center_y, do: Keyword.put(query, :centerY, ""), else: query
+      url = put_in(url.query, URI.encode_query(query))
+      url
+    end
+
+    def change_primary(%State{} = state, primary) do
+      put_in(state.primary, primary)
+    end
+    
+    def change_secondary(%State{} = state, secondary) do
+      put_in(state.secondary, secondary)
+    end
+    
+    def change_center_y(%State{} = state, center_y) when is_boolean(center_y) do
+      put_in(state.center_y, center_y)
+    end
+  end
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, state: %State{})}
+  end
+
+  def render(assigns) do
+    url = assigns.state |> State.to_url()
+    
+    ~L"""
+    <form phx-change=change>
+
+    <div class="flex flex-col space-y-4">
+
+    <label class="flex flex-col">
+    <span class="font-bold text-yellow-400 mr-2">Primary</span>
+    <input name=primary type=text value="<%= @state.primary %>" class="text-black text-yellow-900 bg-yellow-100 px-2">
+    </label>
+
+    <label class="flex flex-col">
+    <span class="font-bold text-purple-400 mr-2">Secondary</span>
+    <input name=secondary type=text value="<%= @state.secondary %>" class="text-black text-purple-900 bg-purple-100 px-2">
+    </label>
+    
+    <output>
+      <img src="<%= url |> URI.to_string() %>" width="<%= @state.width %>" height="<%= @state.height %>">
+      <a class="inline-block bg-blue-500 rounded-full" href="<%= url |> URI.to_string() %>">Link to image</a>
+    </output>
+
+    </div>
+
+    </form>
+    """
+  end
+
+  def handle_event(
+        "change",
+        changes = %{
+          "primary" => primary,
+          "secondary" => secondary
+        },
+        socket
+      ) do
+        IO.inspect(changes)
+        
+    state =
+      socket.assigns.state
+      |> State.change_primary(primary)
+      |> State.change_secondary(secondary)
+      |> State.change_center_y(Map.has_key?(changes, "centerY"))
+
+    {
+      :noreply,
+      socket |> assign(:state, state)
+    }
+  end
+end