Update Elixir Version to 1.18 📈

.formatter.exs

@@ -2,5 +2,6 @@
   import_deps: [:phoenix],
   inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"],
   subdirectories: [],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
   line_length: 120
 ]

lib/school_house_web.ex

@@ -81,7 +81,7 @@ defmodule SchoolHouseWeb do
   defp view_helpers do
     quote do
       # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
+      import Phoenix.Component
 
       # Import LiveView helpers (live_render, live_component, live_patch, etc)
       import Phoenix.LiveView.Helpers

lib/school_house_web/live/conferences_live.html.heex

@@ -13,17 +13,6 @@
 
 <div class="bg-body dark:bg-body-dark">
   <div class="md:w-11/12 lg:w-8/12 mx-auto">
-    <.form :let={f} for={:filters} id="filter-form" class="flex-row flex items-center mb-6 px-2 text-primary dark:text-primary-dark" phx-change="filter">
-      <p class="text-light dark:text-light-dark mr-5"><%= gettext("Filter")%></p>
-      <div class="mx-2 flex flex-row items-center gap-x-2">
-        <%= checkbox f, :online, id: "online-only", checked: filter_is_online?(@filters) %>
-        <label for="online-only"><%= gettext("Online")%></label>
-      </div>
-      <div class="ml-auto">
-        <label for="country-select" class="pr-2"><%= gettext("Country")%></label>
-        <%= select f, :country, @country_options, selected: country_filter(@filters), class: "w-40 pl-3 pr-6 appearance-none bg-nav dark:bg-nav-dark", id: "country-select" %>
-      </div>
-    </.form>
     <div>
       <table class="divide-y divide-gray-200 w-full">
         <thead class="bg-gray-50 dark:bg-gray-600">

lib/school_house_web/templates/error/translation_missing.html.heex

@@ -4,6 +4,6 @@
       <span class="block"><%= gettext("Translation unavailable")%></span>
     </h2>
     <p class="mt-4 text-lg text-primary dark:text-primary-dark leading-6"><%= gettext("We're sorry, the resource you're looking for has not been translated yet.")%></p>
-    <p class="mt-4 text-lg text-primary dark:text-primary-dark leading-6"><%= gettext("If you speak that language, you can help translate")%> <%= link gettext("this page"), to: "https://github.com/elixirschool/elixirschool/tree/master/lessons/#{@missing_locale}", class: "text-purple dark:text-purple-dark" %>.</p>
+    <p class="mt-4 text-lg text-primary dark:text-primary-dark leading-6"><%= gettext("If you speak that language, you can help translate")%> <.link href={"https://github.com/elixirschool/elixirschool/tree/master/lessons/#{@missing_locale}"} class="text-purple dark:text-purple-dark"><%= gettext("this page") %></.link>.</p>
   </div>
 </div>

lib/school_house_web/templates/layout/_footer.html.heex

@@ -38,13 +38,19 @@
             </p>
             <ul class="mt-4 space-y-4">
               <li>
-                <%= link(gettext("Why Elixir?"), to: Routes.page_path(@conn, :why, current_locale()), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.page_path(@conn, :why, current_locale())} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Why Elixir?") %>
+                </.link>
               </li>
               <li>
-                <%= link(gettext("Podcasts"), to: Routes.page_path(@conn, :podcasts, current_locale()), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.page_path(@conn, :podcasts, current_locale())} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Podcasts") %>
+                </.link>
               </li>
               <li>
-                <%= link(gettext("Conferences"), to: Routes.live_path(@conn, SchoolHouseWeb.ConferencesLive, current_locale()), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.live_path(@conn, SchoolHouseWeb.ConferencesLive, current_locale())} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Conferences") %>
+                </.link>
               </li>
             </ul>
           </div>
@@ -54,55 +60,79 @@
             </p>
             <ul class="mt-4 space-y-4">
               <li>
-                <%= link(gettext("Basics"), to: Routes.lesson_path(@conn, :index, current_locale(), :basics), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :basics)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Basics") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Intermediate"), to: Routes.lesson_path(@conn, :index, current_locale(), :intermediate), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :intermediate)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Intermediate") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Advanced"), to: Routes.lesson_path(@conn, :index, current_locale(), :advanced), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :advanced)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Advanced") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Testing"), to: Routes.lesson_path(@conn, :index, current_locale(), :testing), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :testing)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Testing") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Data Processing"), to: Routes.lesson_path(@conn, :index, current_locale(), :data_processing), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :data_processing)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Data Processing") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Ecto"), to: Routes.lesson_path(@conn, :index, current_locale(), :ecto), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :ecto)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Ecto") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Storage"), to: Routes.lesson_path(@conn, :index, current_locale(), :storage), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :storage)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Storage") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Miscellaneous"), to: Routes.lesson_path(@conn, :index, current_locale(), :misc), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.lesson_path(@conn, :index, current_locale(), :misc)} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Miscellaneous") %>
+                </.link>
               </li>
             </ul>
           </div>
         </div>
         <div class="md:grid md:grid-cols-2 md:gap-8">
           <div>
             <p class="text-sm font-semibold tracking-wider text-lighter dark:text-lighter-dark uppercase">
-              <%= link(gettext("Blog"), to: Routes.post_path(@conn, :index), class: "hover:text-gray-600") %>
+              <.link navigate={Routes.post_path(@conn, :index)} class="hover:text-gray-600">
+                <%= gettext("Blog") %>
+              </.link>
             </p>
             <ul class="mt-4 space-y-4">
               <li>
-                <%= link(gettext("Announcements"), to: Routes.post_path(@conn, :filter_by_tag, "announcement"), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.post_path(@conn, :filter_by_tag, "announcement")} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Announcements") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Today I Learned (TIL)"), to: Routes.post_path(@conn, :filter_by_tag, "til"), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.post_path(@conn, :filter_by_tag, "til")} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Today I Learned (TIL)") %>
+                </.link>
               </li>
 
               <li>
-                <%= link(gettext("Reviews"), to: Routes.post_path(@conn, :filter_by_tag, "review"), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.post_path(@conn, :filter_by_tag, "review")} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Reviews") %>
+                </.link>
               </li>
 
             </ul>
@@ -113,11 +143,15 @@
             </p>
             <ul class="mt-4 space-y-4">
               <li>
-                <%= link(gettext("Get Involved"), to: Routes.page_path(@conn, :get_involved, current_locale()), class: "text-base text-light dark:text-light-dark hover:text-gray-900") %>
+                <.link navigate={Routes.page_path(@conn, :get_involved, current_locale())} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                  <%= gettext("Get Involved") %>
+                </.link>
               </li>
               <%= if current_locale() != "en" do %>
                 <li>
-                  <%= link gettext("Translation Report"), to: Routes.report_path(@conn, :index, current_locale()), class: "text-base text-light dark:text-light-dark hover:text-gray-900" %>
+                  <.link navigate={Routes.report_path(@conn, :index, current_locale())} class="text-base text-light dark:text-light-dark hover:text-gray-900">
+                    <%= gettext("Translation Report") %>
+                  </.link>
                 </li>
               <% end %>
             </ul>

lib/school_house_web/templates/layout/_header.html.heex

@@ -1,25 +1,31 @@
 <div class="flex flex-row fixed md:relative h-full md:h-auto z-10 md:w-full">
   <nav id="nav" class="w-64 md:w-full relative bg-nav dark:bg-nav-dark md:border-b-4 border-brand-purple-800 text-primary dark:text-primary-dark shadow-md transition-margin duration-300 overflow-y-scroll md:overflow-y-visible -ml-64 md:ml-0">
     <div class="container mx-auto flex flex-col md:flex-row justify-between">
-      <%= link(to: Routes.page_path(@conn, :index, current_locale()), class: "flex title-font font-medium items-center text-heavy dark:text-heavy-dark mb-4 md:mb-0 mx-auto md:mx-2 mt-6 md:mt-0") do %>
+      <.link navigate={Routes.page_path(@conn, :index, current_locale())} class="flex title-font font-medium items-center text-heavy dark:text-heavy-dark mb-4 md:mb-0 mx-auto md:mx-2 mt-6 md:mt-0">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 md:w-7 md:h-7 lg:h-10 lg:w-10 p-2 text-white rounded-full bg-purple" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
         </svg>
         <span class="ml-3 text-2xl font-extrabold text-primary dark:text-primary-dark tracking-tight"><%= gettext("Elixir School")%></span>
-      <% end %>
+      </.link>
       <div class="w-full md:w-auto mx-auto md:ml-auto md:mr-0 flex flex-col-reverse md:flex-row">
         <ul class="flex flex-col md:flex-row md:items-center">
           <li class="hover:bg-purple hover:text-white px-4 md:px-0">
-            <%= link(gettext("Why Elixir?"), to: Routes.page_path(@conn, :why, current_locale()), class: "relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold") %>
+            <.link navigate={Routes.page_path(@conn, :why, current_locale())} class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">
+              <%= gettext("Why Elixir?") %>
+            </.link>
           </li>
           <li class="toggleable hover:bg-purple hover:text-white px-4 md:px-0">
             <%= render("_lesson_menu.html", conn: @conn) %>
           </li>
           <li class="hover:bg-purple hover:text-white px-4 md:px-0">
-            <%= link(gettext("Blog"), to: Routes.post_path(@conn, :index), class: "relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold") %>
+            <.link navigate={Routes.post_path(@conn, :index)} class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">
+              <%= gettext("Blog") %>
+            </.link>
           </li>
           <li class="hover:bg-purple hover:text-white px-4 md:px-0">
-            <%= link(gettext("Get Involved"), to: Routes.page_path(@conn, :get_involved, current_locale()), class: "relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold") %>
+            <.link navigate={Routes.page_path(@conn, :get_involved, current_locale())} class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">
+              <%= gettext("Get Involved") %>
+            </.link>
           </li>
         </ul>
         <ul class="flex flex-row items-center justify-center py-4 md:py-0">

lib/school_house_web/templates/layout/app.html.heex

@@ -1,5 +1,5 @@
 <main class="container block justify-center" dir="auto">
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <p class="alert alert-info" role="alert"><%= Phoenix.Flash.get(@flash, :info) %></p>
+  <p class="alert alert-danger" role="alert"><%= Phoenix.Flash.get(@flash, :error) %></p>
   <%= @inner_content %>
 </main>

lib/school_house_web/templates/layout/live.html.heex

@@ -1,11 +1,11 @@
 <main class="container">
   <p class="alert alert-info" role="alert"
     phx-click="lv:clear-flash"
-    phx-value-key="info"><%= live_flash(@flash, :info) %></p>
+    phx-value-key="info"><%= Phoenix.Flash.get(@flash, :info) %></p>
 
   <p class="alert alert-danger" role="alert"
     phx-click="lv:clear-flash"
-    phx-value-key="error"><%= live_flash(@flash, :error) %></p>
+    phx-value-key="error"><%= Phoenix.Flash.get(@flash, :error) %></p>
 
   <%= @inner_content %>
 </main>

lib/school_house_web/templates/layout/root.html.heex

@@ -7,7 +7,7 @@
     <meta charset="UTF-8">
     <meta content={get_csrf_token()} name="csrf-token">
 
-    <%= live_title_tag assigns[:page_title] || "Elixir School", suffix: " · Elixir School" %>
+    <.live_title suffix={" · Elixir School"}> <%= assigns[:page_title] || "Elixir School" %></.live_title>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
     <%= load_locale_styles(view_module(@conn), assigns) %>
     <script phx-track-static src={Routes.static_path(@conn, "/assets/initialize-theme.js")}></script>

lib/school_house_web/templates/lesson/_pagination.html.heex

@@ -19,7 +19,7 @@
                   <%= @previous.title %>
                 <% end %>
               </p>
-              <%= raw @previous.excerpt %>
+              <%= Phoenix.HTML.raw @previous.excerpt %>
             </div>
           <% end %>
         </div>
@@ -41,7 +41,7 @@
                   <%= @next.title %>
                 <% end %>
               </p>
-              <%= raw @next.excerpt %>
+              <%= Phoenix.HTML.raw @next.excerpt %>
             </div>
           <% end %>
         </div>

lib/school_house_web/templates/lesson/_section_header.html.heex

@@ -1,8 +1,8 @@
-<%= content_tag String.to_atom(@header), class: "flex", id: @fragment do %>
+<.dynamic_tag tag={@header} class="flex" id={@fragment}>
   <a href={"##{@fragment}"}><%= @name %></a>
   <a href="#" title="go to top of page" class="pt-1 ml-2">
     <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
     </svg>
   </a>
-<% end %>
+</.dynamic_tag>

lib/school_house_web/templates/lesson/index.html.heex

@@ -7,7 +7,7 @@
         <%= lesson_link(@conn, lesson.section, lesson.name, "text-lg font-medium leading-6 text-purple dark:text-purple-dark") do %>
           <%= lesson.title %>
         <% end %>
-          <%= raw lesson.excerpt %>
+          <%= Phoenix.HTML.raw lesson.excerpt %>
       </div>
     </div>
   <% end %>

lib/school_house_web/templates/lesson/lesson.html.heex

@@ -4,16 +4,16 @@
   </div>
 
   <%= if @lesson.excerpt do %>
-    <div class="bg-brand-gray-300 dark:bg-nav-dark rounded-xl p-4 excerpt-box"><%= raw @lesson.excerpt %></div>
+    <div class="bg-brand-gray-300 dark:bg-nav-dark rounded-xl p-4 excerpt-box"><%= Phoenix.HTML.raw @lesson.excerpt %></div>
   <% end %>
 
   <div class="pt-8">
     <span class="text-4xl font-bold border-b-4 border-brand-purple"><%= gettext("Table of Contents")%></span>
     <div class="pt-6">
-      <%= raw @lesson.table_of_contents %>
+      <%= Phoenix.HTML.raw @lesson.table_of_contents %>
     </div>
   </div>
-  <%= raw @lesson.body %>
+  <%= Phoenix.HTML.raw @lesson.body %>
 
   <blockquote class="edit-lesson dark:text-primary-dark">
     <%= gettext("Caught a mistake or want to contribute to the lesson?")%>