upgrade to phoenix 1.7

lib/memex_web/components/contexts_table_component.ex

@@ -88,11 +88,9 @@ defmodule MemexWeb.Components.ContextsTableComponent do
 
   @spec get_value_for_key(atom(), Context.t(), additional_data :: map()) ::
           any() | {any(), Rendered.t()}
-  defp get_value_for_key(:slug, %{slug: slug}, _additional_data) do
-    assigns = %{slug: slug}
-
+  defp get_value_for_key(:slug, %{slug: slug} = assigns, _additional_data) do
     slug_block = ~H"""
-    <.link navigate={Routes.context_show_path(Endpoint, :show, @slug)} class="link">
+    <.link navigate={~p"/context/#{@slug}"} class="link">
       <%= @slug %>
     </.link>
     """
@@ -100,16 +98,10 @@ defmodule MemexWeb.Components.ContextsTableComponent do
     {slug, slug_block}
   end
 
-  defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    assigns = %{tags: tags}
-
+  defp get_value_for_key(:tags, assigns, _additional_data) do
     ~H"""
     <div class="flex flex-wrap justify-center space-x-1">
-      <.link
-        :for={tag <- @tags}
-        patch={Routes.context_index_path(Endpoint, :search, tag)}
-        class="link"
-      >
+      <.link :for={tag <- @tags} patch={~p"/contexts/#{tag}"} class="link">
         <%= tag %>
       </.link>
     </div>

lib/memex_web/components/core_components.ex

@@ -3,13 +3,13 @@ defmodule MemexWeb.CoreComponents do
   Provides core UI components.
   """
   use Phoenix.Component
-  import MemexWeb.{Gettext, ViewHelpers}
+  use MemexWeb, :verified_routes
+
+  import MemexWeb.{Gettext, HTMLHelpers}
   alias Memex.{Accounts, Accounts.Invite, Accounts.User}
   alias Memex.Contexts.Context
   alias Memex.Notes.Note
   alias Memex.Pipelines.Steps.Step
-  alias MemexWeb.{Endpoint, HomeLive}
-  alias MemexWeb.Router.Helpers, as: Routes
   alias Phoenix.HTML
   alias Phoenix.LiveView.JS
 
@@ -31,13 +31,13 @@ defmodule MemexWeb.CoreComponents do
 
   ## Examples
 
-      <.modal return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}>
+      <.modal return_to={~p"/\#{<%= schema.plural %>}"}>
         <.live_component
           module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent}
           id={@<%= schema.singular %>.id || :new}
           title={@page_title}
           action={@live_action}
-          return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}
+          return_to={~p"/\#{<%= schema.singular %>}"}
           <%= schema.singular %>: @<%= schema.singular %>
         />
       </.modal>
@@ -167,7 +167,7 @@ defmodule MemexWeb.CoreComponents do
           link =
             HTML.Link.link(
               "[[#{slug}]]",
-              to: Routes.note_show_path(Endpoint, :show, slug),
+              to: ~p"/note/#{slug}",
               class: "link inline",
               data: [qa: "#{data_qa_prefix}-#{slug}"]
             )

lib/memex_web/components/core_components/invite_card.html.heex

@@ -24,7 +24,7 @@
   <% end %>
 
   <.qr_code
-    content={Routes.user_registration_url(Endpoint, :new, invite: @invite.token)}
+    content={url(MemexWeb.Endpoint, ~p"/users/register?invite=#{@invite.token}")}
     filename={@invite.name}
   />
 
@@ -38,7 +38,7 @@
       class="mx-2 my-1 text-xs px-4 py-2 rounded-lg text-center break-all
         text-primary-400 bg-primary-800"
       phx-no-format
-    ><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %></code>
+    ><%= url(MemexWeb.Endpoint, ~p"/users/register?invite=#{@invite.token}") %></code>
     <%= if @code_actions, do: render_slot(@code_actions) %>
   </div>
 

lib/memex_web/components/core_components/topbar.html.heex

@@ -1,10 +1,7 @@
 <nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-900 text-primary-400">
   <div class="flex flex-col sm:flex-row justify-between items-center">
     <div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
-      <.link
-        navigate={Routes.live_path(Endpoint, HomeLive)}
-        class="mx-2 my-1 leading-5 text-xl text-primary-400 hover:underline"
-      >
+      <.link navigate={~p"/"} class="mx-2 my-1 leading-5 text-xl text-primary-400 hover:underline">
         <%= gettext("memEx") %>
       </.link>
 
@@ -21,28 +18,19 @@
     <ul class="flex flex-row flex-wrap justify-center items-center
       text-lg text-primary-400 text-ellipsis">
       <li class="mx-2 my-1">
-        <.link
-          navigate={Routes.note_index_path(Endpoint, :index)}
-          class="text-primary-400 hover:underline truncate"
-        >
+        <.link navigate={~p"/notes"} class="text-primary-400 hover:underline truncate">
           <%= gettext("notes") %>
         </.link>
       </li>
 
       <li class="mx-2 my-1">
-        <.link
-          navigate={Routes.context_index_path(Endpoint, :index)}
-          class="text-primary-400 hover:underline truncate"
-        >
+        <.link navigate={~p"/contexts"} class="text-primary-400 hover:underline truncate">
           <%= gettext("contexts") %>
         </.link>
       </li>
 
       <li class="mx-2 my-1">
-        <.link
-          navigate={Routes.pipeline_index_path(Endpoint, :index)}
-          class="text-primary-400 hover:underline truncate"
-        >
+        <.link navigate={~p"/pipelines"} class="text-primary-400 hover:underline truncate">
           <%= gettext("pipelines") %>
         </.link>
       </li>
@@ -51,25 +39,19 @@
 
       <%= if @current_user do %>
         <li :if={@current_user |> Accounts.is_already_admin?()} class="mx-2 my-1">
-          <.link
-            navigate={Routes.invite_index_path(Endpoint, :index)}
-            class="text-primary-400 hover:underline"
-          >
+          <.link navigate={~p"/invites"} class="text-primary-400 hover:underline">
             <%= gettext("invites") %>
           </.link>
         </li>
 
         <li class="mx-2 my-1">
-          <.link
-            navigate={Routes.user_settings_path(Endpoint, :edit)}
-            class="text-primary-400 hover:underline truncate"
-          >
+          <.link navigate={~p"/users/settings"} class="text-primary-400 hover:underline truncate">
             <%= @current_user.email %>
           </.link>
         </li>
         <li class="mx-2 my-1">
           <.link
-            href={Routes.user_session_path(Endpoint, :delete)}
+            href={~p"/users/log_out"}
             method="delete"
             data-confirm={dgettext("prompts", "are you sure you want to log out?")}
             aria-label={gettext("log out")}
@@ -84,7 +66,7 @@
           class="mx-2 my-1"
         >
           <.link
-            navigate={Routes.live_dashboard_path(Endpoint, :home)}
+            navigate={~p"/dashboard"}
             class="text-primary-400 hover:underline"
             aria-label={gettext("live dashboard")}
           >
@@ -93,19 +75,13 @@
         </li>
       <% else %>
         <li :if={Accounts.allow_registration?()} class="mx-2 my-1">
-          <.link
-            href={Routes.user_registration_path(Endpoint, :new)}
-            class="text-primary-400 hover:underline truncate"
-          >
+          <.link href={~p"/users/register"} class="text-primary-400 hover:underline truncate">
             <%= dgettext("actions", "register") %>
           </.link>
         </li>
 
         <li class="mx-2 my-1">
-          <.link
-            href={Routes.user_session_path(Endpoint, :new)}
-            class="text-primary-400 hover:underline truncate"
-          >
+          <.link href={~p"/users/log_in"} class="text-primary-400 hover:underline truncate">
             <%= dgettext("actions", "log in") %>
           </.link>
         </li>

lib/memex_web/components/layouts.ex

@@ -0,0 +1,17 @@
+defmodule MemexWeb.Layouts do
+  @moduledoc """
+  The root layouts for the entire application
+  """
+
+  use MemexWeb, :html
+
+  embed_templates "layouts/*"
+
+  def get_title(%{assigns: %{title: title}}) when title not in [nil, ""] do
+    gettext("memEx | %{title}", title: title)
+  end
+
+  def get_title(_conn) do
+    gettext("memEx")
+  end
+end

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

@@ -0,0 +1,18 @@
+<main role="main" class="min-h-full min-w-full">
+  <header>
+    <.topbar current_user={assigns[:current_user]} />
+
+    <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
+      <p :if={@flash["info"]} class="alert alert-info" role="alert">
+        <%= @flash["info"] %>
+      </p>
+      <p :if={@flash["error"]} class="alert alert-danger" role="alert">
+        <%= @flash["error"] %>
+      </p>
+    </div>
+  </header>
+
+  <div class="mx-4 sm:mx-8 md:mx-16">
+    <%= @inner_content %>
+  </div>
+</main>

lib/memex_web/components/layouts/email_html.html.heex

@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <title>
+      <%= @email.subject %>
+    </title>
+  </head>
+  <body style="padding: 2em; color: rgb(161, 161, 170); background-color: rgb(39, 39, 42); font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; text-align: center;">
+    <%= @inner_content %>
+
+    <hr style="margin: 2em auto; border-width: 1px; border-color: rgb(161, 161, 170); width: 100%; max-width: 42rem;" />
+
+    <a style="color: rgb(161, 161, 170);" href={~p"/"}>
+      <%= dgettext("emails", "This email was sent from memEx") %>
+    </a>
+  </body>
+</html>

lib/memex_web/components/layouts/email_text.txt.eex

@@ -0,0 +1,9 @@
+<%= @email.subject %>
+
+====================
+
+<%= @inner_content %>
+
+=====================
+
+<%= dgettext("emails", "This email was sent from memEx at %{url}", url: ~p"/") %>

lib/memex_web/components/layouts/empty.html.heex

@@ -0,0 +1 @@
+<%= @inner_content %>

lib/memex_web/components/layouts/live.html.heex

@@ -0,0 +1,45 @@
+<main class="pb-8 min-w-full">
+  <header>
+    <.topbar current_user={assigns[:current_user]} />
+
+    <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
+      <p
+        :if={@flash && @flash |> Map.has_key?("info")}
+        class="alert alert-info"
+        role="alert"
+        phx-click="lv:clear-flash"
+        phx-value-key="info"
+      >
+        <%= live_flash(@flash, "info") %>
+      </p>
+
+      <p
+        :if={@flash && @flash |> Map.has_key?("error")}
+        class="alert alert-danger"
+        role="alert"
+        phx-click="lv:clear-flash"
+        phx-value-key="error"
+      >
+        <%= live_flash(@flash, "error") %>
+      </p>
+    </div>
+  </header>
+
+  <div class="mx-4 sm:mx-8 md:mx-16">
+    <%= @inner_content %>
+  </div>
+</main>
+
+<div
+  id="disconnect"
+  class="z-50 fixed opacity-0 bottom-12 right-12 px-8 py-4 w-max h-max
+  border border-primary-400 shadow-lg rounded-lg bg-primary-900 text-primary-400
+  flex justify-center items-center space-x-4
+  transition-opacity ease-in-out duration-500 delay-[2000ms]"
+>
+  <i class="fas fa-fade text-md fa-satellite-dish"></i>
+
+  <h1 class="title text-md">
+    <%= gettext("Reconnecting...") %>
+  </h1>
+</div>

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" class="m-0 p-0 w-full h-full bg-primary-800">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <%= csrf_meta_tag() %>
+    <.live_title suffix={" | #{gettext("memEx")}"}>
+      <%= assigns[:page_title] || gettext("memEx") %>
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/css/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/js/app.js"}>
+    </script>
+  </head>
+
+  <body class="m-0 p-0 w-full h-full text-primary-400 subpixel-antialiased">
+    <%= @inner_content %>
+  </body>
+</html>

lib/memex_web/components/notes_table_component.ex

@@ -92,7 +92,7 @@ defmodule MemexWeb.Components.NotesTableComponent do
     assigns = %{slug: slug}
 
     slug_block = ~H"""
-    <.link navigate={Routes.note_show_path(Endpoint, :show, @slug)} class="link">
+    <.link navigate={~p"/note/#{@slug}"} class="link">
       <%= @slug %>
     </.link>
     """
@@ -105,7 +105,7 @@ defmodule MemexWeb.Components.NotesTableComponent do
 
     ~H"""
     <div class="flex flex-wrap justify-center space-x-1">
-      <.link :for={tag <- @tags} patch={Routes.note_index_path(Endpoint, :search, tag)} class="link">
+      <.link :for={tag <- @tags} patch={~p"/notes/#{tag}"} class="link">
         <%= tag %>
       </.link>
     </div>

lib/memex_web/components/pipelines_table_component.ex

@@ -93,7 +93,7 @@ defmodule MemexWeb.Components.PipelinesTableComponent do
     assigns = %{slug: slug}
 
     slug_block = ~H"""
-    <.link navigate={Routes.pipeline_show_path(Endpoint, :show, @slug)} class="link">
+    <.link navigate={~p"/pipeline/#{@slug}"} class="link">
       <%= @slug %>
     </.link>
     """
@@ -118,11 +118,7 @@ defmodule MemexWeb.Components.PipelinesTableComponent do
 
     ~H"""
     <div class="flex flex-wrap justify-center space-x-1">
-      <.link
-        :for={tag <- @tags}
-        patch={Routes.pipeline_index_path(Endpoint, :search, tag)}
-        class="link"
-      >
+      <.link :for={tag <- @tags} patch={~p"/pipelines/#{tag}"} class="link">
         <%= tag %>
       </.link>
     </div>