Move everything to heex, remove phoenix_view

lib/bob_versions_web.ex

@@ -105,25 +105,6 @@ defmodule BobVersionsWeb do
     end
   end
 
-  # Remove after transition to function components
-  def view do
-    quote do
-      use Phoenix.View, root: "lib/bob_versions_web/templates", namespace: BobVersionsWeb
-
-      # Import convenience functions from controllers
-      import Phoenix.Controller,
-        only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
-
-      # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
-
-      import BobVersionsWeb.ErrorHelpers
-      import BobVersionsWeb.Gettext
-
-      alias BobVersionsWeb.Router.Helpers, as: Routes
-    end
-  end
-
   @doc """
   When used, dispatch to the appropriate controller/view/etc.
   """

lib/bob_versions_web/controllers/elixir_controller.ex

@@ -20,7 +20,7 @@ defmodule BobVersionsWeb.ElixirController do
 
       :error ->
         conn
-        |> put_view(BobVersionsWeb.ErrorView)
+        |> put_view(BobVersionsWeb.ErrorHTML)
         |> render("no_resource.html")
     end
   end

lib/bob_versions_web/controllers/erlang_controller.ex

@@ -30,7 +30,7 @@ defmodule BobVersionsWeb.ErlangController do
 
       :error ->
         conn
-        |> put_view(BobVersionsWeb.ErrorView)
+        |> put_view(BobVersionsWeb.ErrorHTML)
         |> render("no_resource.html")
     end
   end
@@ -50,7 +50,7 @@ defmodule BobVersionsWeb.ErlangController do
 
       _ ->
         conn
-        |> put_view(BobVersionsWeb.ErrorView)
+        |> put_view(BobVersionsWeb.ErrorHTML)
         |> render("404.html")
         |> halt()
     end

lib/bob_versions_web/templates/elixir/index.html.heex

@@ -0,0 +1,11 @@
+<section :for={{minor, list} <- sort_by_minor(@data)} class="section" id={"version_#{minor}"}>
+  <div class="container">
+    <h2 class="title has-text-centered"><%= String.trim_leading(minor, "v") %></h2>
+
+    <div class="columns is-multiline is-centered">
+      <div :for={item <- sort_by_version(list)} class="column is-one-third">
+        <.panel conn={@conn} active={@active} item={item} />
+      </div>
+    </div>
+  </div>
+</section>

lib/bob_versions_web/templates/elixir/panel-block.html.heex

@@ -0,0 +1,42 @@
+<span class="panel-icon">
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fas"
+    data-icon="cube"
+    class=""
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    aria-hidden="true"
+    style="width: 14px"
+  >
+    <path
+      fill="currentColor"
+      d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
+    >
+    </path>
+  </svg>
+</span>
+
+<div class="leading-tight" style="min-width: 1%; flex-grow: 1">
+  <div class="truncate">
+    <%= @version %><%= if @item.version.otp != @active, do: "-otp-#{@item.version.otp}" %>
+  </div>
+  <%= if @item.checksum != "" do %>
+    <div class="is-size-7 has-text-grey-light truncate" title={@item.checksum}>
+      <%= @item.checksum %>
+    </div>
+  <% end %>
+  <%= live_render(@conn, BobVersionsWeb.RelativeTimeLive,
+    id: @item.download,
+    container: {:div, class: "is-size-7 has-text-grey-light"},
+    session: %{"datetime" => @item.timestamp |> DateTime.to_iso8601()}
+  ) %>
+</div>
+
+<%= live_render(@conn, BobVersionsWeb.AvailabilityLive,
+  id: @item.download,
+  container: {:div, []},
+  session: %{"availability" => @item.availability |> Atom.to_string(), "url" => @item.download}
+) %>

lib/bob_versions_web/templates/elixir/panel.html.heex

@@ -0,0 +1,48 @@
+<article class="panel">
+  <div class="panel-heading">
+    <div class="level">
+      <div class="level-left" style="min-width: 1%; flex-shrink: 1">
+        <span class="truncate">
+          <%= String.trim_leading(@item.version, "v") %>
+        </span>
+      </div>
+      <%= if @item.git.sha not in [nil, ""] do %>
+        <div class="level-right">
+          <a class="level-item muted-link is-size-7" href={@item.git.url} aria-label="github">
+            <span class="icon">
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="fab"
+                data-icon="github"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 496 512"
+                aria-hidden="true"
+                style="width: 14px"
+              >
+                <path
+                  fill="currentColor"
+                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+                >
+                </path>
+              </svg>
+            </span>
+            <abbr class="is-muted" title={@item.git.sha}>
+              <%= @item.git.sha |> String.slice(0..7) %>
+            </abbr>
+          </a>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <%= for item <- @item.versions do %>
+    <a
+      class={["panel-block", if(item.version.otp == @active, do: "is-active")]}
+      href={item.download}
+      data-sha={item.git.sha}
+    >
+      <.panel-block conn={@conn} active={@active} version={@item.version} item={item} />
+    </a>
+  <% end %>
+</article>

lib/bob_versions_web/templates/erlang/index.html.heex

@@ -0,0 +1,11 @@
+<section :for={{minor, list} <- sort_by_minor(@data)} class="section" id={"version_#{minor}"}>
+  <div class="container">
+    <h2 class="title has-text-centered"><%= String.trim_leading(minor, "v") %></h2>
+
+    <div class="columns is-multiline is-centered">
+      <div :for={item <- sort_by_version(list)} class="column is-one-third">
+        <.panel conn={@conn} item={item} />
+      </div>
+    </div>
+  </div>
+</section>

lib/bob_versions_web/templates/erlang/panel-block.html.heex

@@ -0,0 +1,42 @@
+<span class="panel-icon">
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fas"
+    data-icon="cube"
+    class=""
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    aria-hidden="true"
+    style="width: 14px"
+  >
+    <path
+      fill="currentColor"
+      d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
+    >
+    </path>
+  </svg>
+</span>
+
+<div class="leading-tight" style="min-width: 1%; flex-grow: 1">
+  <div class="truncate">
+    <%= @version %>
+  </div>
+  <%= if @item.checksum != "" do %>
+    <div class="is-size-7 has-text-grey-light truncate" title={@item.checksum}>
+      <%= @item.checksum %>
+    </div>
+  <% end %>
+  <%= live_render(@conn, BobVersionsWeb.RelativeTimeLive,
+    id: @item.download,
+    container: {:div, class: "is-size-7 has-text-grey-light"},
+    session: %{"datetime" => @item.timestamp |> DateTime.to_iso8601()}
+  ) %>
+</div>
+
+<%= live_render(@conn, BobVersionsWeb.AvailabilityLive,
+  id: @item.download,
+  container: {:div, []},
+  session: %{"availability" => @item.availability |> Atom.to_string(), "url" => @item.download}
+) %>

lib/bob_versions_web/templates/erlang/panel.html.heex

@@ -0,0 +1,44 @@
+<article class="panel">
+  <div class="panel-heading">
+    <div class="level">
+      <div class="level-left" style="min-width: 1%; flex-shrink: 1">
+        <span class="truncate">
+          <%= String.trim_leading(@item.version, "OTP-") %>
+        </span>
+      </div>
+      <%= if @item.git.sha not in [nil, ""] do %>
+        <div class="level-right">
+          <a class="level-item muted-link is-size-7" href={@item.git.url} aria-label="github">
+            <span class="icon">
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="fab"
+                data-icon="github"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 496 512"
+                aria-hidden="true"
+                style="width: 14px"
+              >
+                <path
+                  fill="currentColor"
+                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+                >
+                </path>
+              </svg>
+            </span>
+            <abbr class="is-muted" title={@item.git.sha}>
+              <%= @item.git.sha |> String.slice(0..7) %>
+            </abbr>
+          </a>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <%= for item <- @item.versions do %>
+    <a class="panel-block" href={item.download} data-sha={item.git.sha}>
+      <.panel-block conn={@conn} version={item.version.erlang} item={item} />
+    </a>
+  <% end %>
+</article>