Merge branch 'develop' into jc/improve-announcements

lib/atomic/accounts.ex

@@ -252,15 +252,15 @@ defmodule Atomic.Accounts do
     |> Ecto.Multi.delete_all(:tokens, UserToken.user_and_contexts_query(user, [context]))
   end
 
-  @doc """
+  @doc ~S"""
   Delivers the update email instructions to the given user.
 
   ## Examples
 
       iex> deliver_update_email_instructions(
       ...>   user,
       ...>   current_email,
-      ...>   &Routes.user_update_email_url(conn, :edit, &1)
+      ...>   &url(~p"/users/settings/confirm_email/#{&1}")
       ...> )
       {:ok, %{to: ..., body: ...}}
 
@@ -348,21 +348,15 @@ defmodule Atomic.Accounts do
 
   ## Confirmation
 
-  @doc """
+  @doc ~S"""
   Delivers the confirmation email instructions to the given user.
 
   ## Examples
 
-      iex> deliver_user_confirmation_instructions(
-      ...>   user,
-      ...>   &Routes.user_confirmation_url(conn, :edit, &1)
-      ...> )
+      iex> deliver_user_confirmation_instructions(user, &url(~p"/users/confirm/#{&1}"))
       {:ok, %{to: ..., body: ...}}
 
-      iex> deliver_user_confirmation_instructions(
-      ...>   confirmed_user,
-      ...>   &Routes.user_confirmation_url(conn, :edit, &1)
-      ...> )
+      iex> deliver_user_confirmation_instructions(confirmed_user, &url(~p"/users/confirm/#{&1}"))
       {:error, :already_confirmed}
 
   """
@@ -401,15 +395,12 @@ defmodule Atomic.Accounts do
 
   ## Reset password
 
-  @doc """
+  @doc ~S"""
   Delivers the reset password email to the given user.
 
   ## Examples
 
-      iex> deliver_user_reset_password_instructions(
-      ...>   user,
-      ...>   &Routes.user_reset_password_url(conn, :edit, &1)
-      ...> )
+      iex> deliver_user_reset_password_instructions(user, &url(~p"/users/reset_password/#{&1}"))
       {:ok, %{to: ..., body: ...}}
 
   """

lib/atomic_web.ex

@@ -17,14 +17,16 @@ defmodule AtomicWeb do
   and import those modules here.
   """
 
+  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+
   def controller do
     quote do
       use Phoenix.Controller, namespace: AtomicWeb
       use Gettext, backend: AtomicWeb.Gettext
 
       import Plug.Conn
 
-      alias AtomicWeb.Router.Helpers, as: Routes
+      unquote(verified_routes())
     end
   end
 
@@ -85,29 +87,37 @@ defmodule AtomicWeb do
     end
   end
 
+  def verified_routes do
+    quote do
+      use Phoenix.VerifiedRoutes,
+        endpoint: AtomicWeb.Endpoint,
+        router: AtomicWeb.Router,
+        statics: AtomicWeb.static_paths()
+    end
+  end
+
   defp view_helpers do
     quote do
       # Use all HTML functionality (forms, tags, etc)
       use Phoenix.HTML
 
-      # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
+      # Import LiveView and .heex helpers (<.link>, <.form>, etc)
       import Phoenix.LiveView.Helpers
       import Phoenix.Component
 
-      # Import commonly used components
-      unquote(components())
-
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
-      # Custom imports
+      # Custom uses, imports and aliases
+      unquote(components())
+
+      use AtomicWeb, :verified_routes
       use Gettext, backend: AtomicWeb.Gettext
 
       import AtomicWeb.ErrorHelpers
       import AtomicWeb.Helpers
 
       alias Atomic.Uploaders
-      alias AtomicWeb.Router.Helpers, as: Routes
     end
   end
 

lib/atomic_web/components/activity.ex

@@ -19,7 +19,7 @@ defmodule AtomicWeb.Components.Activity do
         </div>
         <div class="min-w-0 flex-1">
           <object>
-            <.link navigate={Routes.organization_show_path(AtomicWeb.Endpoint, :show, @activity.organization.id)}>
+            <.link navigate={~p"/organizations/#{@activity.organization.id}"}>
               <span class="text-sm font-medium text-gray-900 hover:underline focus:outline-none">
                 <%= @activity.organization.name %>
               </span>
@@ -33,29 +33,29 @@ defmodule AtomicWeb.Components.Activity do
       </div>
       <h2 class="mt-3 text-base font-semibold text-gray-900"><%= @activity.title %></h2>
       <div class="text-justify text-sm text-gray-700">
-        <p><%= @activity.description %></p>
+        <p><%= maybe_slice_string(@activity.description, 300) %></p>
       </div>
       <!-- Image -->
       <%= if @activity.image do %>
         <div class="mt-4">
-          <img class="max-w-screen rounded-md sm:max-w-xl" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+          <img class="max-w-screen max-h-[32rem] rounded-md object-cover sm:max-w-xl" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
         </div>
       <% end %>
       <!-- Footer -->
       <div class={"#{footer_margin_top_class(@activity)} flex flex-row justify-between"}>
         <div class="flex space-x-4">
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name="hero-clock-solid" class="size-5" />
-              <span class="font-medium text-gray-900"><%= relative_datetime(@activity.start) %></span>
+              <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
+              <span class="font-medium text-gray-900"><%= pretty_display_date(@activity.start) %></span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-user-group-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
-              <span class="sr-only">enrollments</span>
+              <span class="sr-only text-zinc-400">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">

lib/atomic_web/components/announcement.ex

@@ -17,7 +17,7 @@ defmodule AtomicWeb.Components.Announcement do
         </div>
         <div class="min-w-0 flex-1">
           <object>
-            <.link navigate={Routes.organization_show_path(AtomicWeb.Endpoint, :show, @announcement.organization.id)} class="hover:underline focus:outline-none">
+            <.link navigate={~p"/organizations/#{@announcement.organization.id}"} class="hover:underline focus:outline-none">
               <p class="text-sm font-medium text-gray-900">
                 <%= @announcement.organization.name %>
               </p>
@@ -31,12 +31,12 @@ defmodule AtomicWeb.Components.Announcement do
       </div>
       <h2 class="mt-3 text-base font-semibold text-gray-900"><%= @announcement.title %></h2>
       <div class="space-y-4 text-justify text-sm text-gray-700">
-        <%= @announcement.description %>
+        <%= maybe_slice_string(@announcement.description, 300) %>
       </div>
       <!-- Image -->
       <%= if @announcement.image do %>
         <div class="mt-4">
-          <img class="max-w-screen rounded-md sm:max-w-xl" src={Uploaders.Post.url({@announcement.image, @announcement}, :original)} />
+          <img class="max-w-screen max-h-[32rem] rounded-md object-cover sm:max-w-xl" src={Uploaders.Post.url({@announcement.image, @announcement}, :original)} />
         </div>
       <% end %>
     </div>