Replaces LUX Header and Footer with Functional Components

assets/css/app.css

@@ -11,4 +11,14 @@
     .active {
       @apply text-blue-600 border bg-blue-50 hover:bg-blue-100 hover:text-blue-700;
     }
+
+    .skip-to-content {
+      position: absolute;
+      transform: translateY(-150%);
+      transition: transform 150ms ease-in;
+    }
+
+    .skip-to-content:focus {
+      transform: translateY(0);
+    }
   }

lib/dpul_collections_web/components/footer_component.ex

@@ -0,0 +1,37 @@
+# lib/my_app_web/components/header_component.ex
+defmodule DpulCollectionsWeb.FooterComponent do
+  use DpulCollectionsWeb, :html
+  import DpulCollectionsWeb.Gettext
+
+  def footer(assigns) do
+    ~H"""
+    <footer class="text-white flex flex-wrap sm:flex-row gap-10 items-center bg-gray-700 px-6 py-6 sm:py-10 sm:px-8 lg:px-10">
+      <div class="footer-links flex-none w-32 sm:w-60">
+        <ul class="text-xs">
+          <li class="py-1">
+            <a href="https://library.princeton.edu/about/policies/copyright-and-permissions-policies">
+              <%= gettext("Copyright Policy") %>
+            </a>
+          </li>
+          <li class="py-1">
+            <a href="https://www.princeton.edu/privacy-notice">
+              <%= gettext("Privacy Notice") %>
+            </a>
+          </li>
+          <li class="py-1">
+            <a href="https://accessibility.princeton.edu/help">
+              <%= gettext("Accessibility Help") %>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="app_name sm:flex-1 flex-none text-center">
+        © 2025 <%= gettext("The Trustees of Princeton University") %>
+      </div>
+      <div class="university-logo flex-none w-24 sm:w-48">
+        <img src={~p"/images/university-logo.svg"} alt="Princeton University Logo" />
+      </div>
+    </footer>
+    """
+  end
+end

lib/dpul_collections_web/components/header_component.ex

@@ -0,0 +1,53 @@
+# lib/my_app_web/components/header_component.ex
+defmodule DpulCollectionsWeb.HeaderComponent do
+  use DpulCollectionsWeb, :html
+  import DpulCollectionsWeb.Gettext
+
+  def header(assigns) do
+    ~H"""
+    <header class="flex flex-row gap-10 items-center bg-gray-700 px-6 py-6 sm:py-10 sm:px-8 lg:px-10">
+      <div class="logo flex-none w-32 sm:w-60">
+        <img src={~p"/images/pul-logo.svg"} alt="Princeton University Library Logo" />
+      </div>
+      <div class="app_name flex-1">
+        <.link
+          navigate={~p"/"}
+          class="text-2xl hidden sm:inline-block text-white hover:underline hover:underline-offset-8 hover:decoration-orange-500 hover:decoration-2"
+        >
+          <%= gettext("Digital Collections") %>
+        </.link>
+      </div>
+      <div class="menu flex-none">
+        <div class="dropdown relative inline-block">
+          <button
+            id="dropdownButton"
+            class="text-white hover:underline hover:underline-offset-8 hover:decoration-orange-500 hover:decoration-2"
+            aria-haspopup="true"
+            aria-expanded="false"
+            phx-click={JS.toggle(to: "#dropdownMenu")}
+          >
+            <%= gettext("Language") %>
+          </button>
+          <ul
+            id="dropdownMenu"
+            phx-click-away={JS.hide(to: "#dropdownMenu")}
+            class="dropdown-menu aria-hidden hidden absolute left-auto right-0 list-none bg-white w-150 py-2 px-0 mt-2 shadow-md rounded-md"
+            role="menu"
+            aria-hidden="true"
+          >
+            <li role="menuitem" tabindex="-1" class="p-2 hover:bg-stone-200 focus:bg-stone-200">
+              <a href="?locale=en">English</a>
+            </li>
+            <li role="menuitem" tabindex="-1" class="p-2 hover:bg-stone-200 focus:bg-stone-200">
+              <a href="?locale=es">Español</a>
+            </li>
+            <li role="menuitem" tabindex="-1" class="p-2 hover:bg-stone-200 focus:bg-stone-200">
+              <a href="?locale=pt-BR">Português do Brasil</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </header>
+    """
+  end
+end

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

@@ -1,4 +1,4 @@
-<main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+<main id="main-content" class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
   <.flash_group flash={@flash} />
   <%= @inner_content %>
 </main>

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

@@ -5,30 +5,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title suffix=" · Phoenix Framework">
-      <%= assigns[:page_title] || "DpulCollections" %>
+      <%= assigns[:page_title] || "Digital Collections" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css" />
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js">
-    </script>
-    <script src="https://unpkg.com/[email protected]/dist/lux-styleguidist.iife.js">
-    </script>
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function(){
-        const { createApp } = Vue
-        createApp().use(Lux.default).mount('#app')
-      });
-    </script>
   </head>
   <body class="bg-white antialiased">
+    <a
+      class="transition left-0 bg-primary bg-gray-200 text-primary-content absolute p-3 m-3 -translate-y-16 focus:translate-y-0"
+      href="#main-content"
+    >
+      Skip To Content
+    </a>
     <div class="flex flex-col min-h-screen" id="app">
-      <%= DpulCollectionsWeb.LuxComponents.header(assigns) %>
+      <%= DpulCollectionsWeb.HeaderComponent.header(assigns) %>
       <div class="flex-1">
         <%= @inner_content %>
       </div>
-      <%= DpulCollectionsWeb.LuxComponents.footer(assigns) %>
+      <%= DpulCollectionsWeb.FooterComponent.footer(assigns) %>
     </div>
   </body>
 </html>

lib/dpul_collections_web/controllers/error_html/404.html.heex

@@ -5,24 +5,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>DpulCollections</title>
+    <title>Digital Collections</title>
     <link rel="stylesheet" href="/assets/app.css" />
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css" />
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js">
-    </script>
-    <script src="https://unpkg.com/[email protected]/dist/lux-styleguidist.iife.js">
-    </script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function(){
-        const { createApp } = Vue
-        createApp().use(Lux.default).mount('#app')
-      });
-    </script>
   </head>
 
   <body class="bg-white antialiased">
     <div class="flex flex-col min-h-screen" id="app">
-      <%= DpulCollectionsWeb.LuxComponents.header(assigns) %>
+      <%= DpulCollectionsWeb.HeaderComponent.header(assigns) %>
       <div class="flex-1">
         <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
           <div class="grid grid-flow-row auto-rows-max gap-20">
@@ -34,7 +23,7 @@
           </div>
         </main>
       </div>
-      <%= DpulCollectionsWeb.LuxComponents.footer(assigns) %>
+      <%= DpulCollectionsWeb.FooterComponent.footer(assigns) %>
     </div>
   </body>
 </html>

lib/plug/locale_plug.ex

@@ -24,6 +24,7 @@ defmodule DpulCollectionsWeb.LocalePlug do
         Gettext.put_locale(backend, locale)
 
         conn
+        # |> assign(conn, :locale, locale)
         |> put_resp_header("content-language", locale_to_language(locale))
         |> put_resp_cookie("locale", locale, max_age: @max_age)
         |> put_session(:locale, locale)

priv/gettext/default.pot

@@ -16,7 +16,7 @@ msgstr ""
 msgid "Error!"
 msgstr ""
 
-#: lib/dpul_collections_web/components/core_components.ex:102
+#: lib/dpul_collections_web/components/core_components.ex:90
 #, elixir-autogen, elixir-format
 msgid "Hang in there while we get back on track"
 msgstr ""
@@ -27,7 +27,7 @@ msgstr ""
 msgid "Search"
 msgstr ""
 
-#: lib/dpul_collections_web/components/core_components.ex:97
+#: lib/dpul_collections_web/components/core_components.ex:85
 #, elixir-autogen, elixir-format
 msgid "Something went wrong!"
 msgstr ""
@@ -52,7 +52,7 @@ msgstr ""
 msgid "Apply"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:16
+#: lib/dpul_collections_web/components/header_component.ex:24
 #, elixir-autogen, elixir-format
 msgid "Language"
 msgstr ""
@@ -113,17 +113,17 @@ msgstr ""
 msgid "We invite you to be inspired by our globally diverse collections of"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:37
+#: lib/dpul_collections_web/components/footer_component.ex:21
 #, elixir-autogen, elixir-format
 msgid "Accessibility Help"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:35
+#: lib/dpul_collections_web/components/footer_component.ex:13
 #, elixir-autogen, elixir-format
 msgid "Copyright Policy"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:36
+#: lib/dpul_collections_web/components/footer_component.ex:17
 #, elixir-autogen, elixir-format
 msgid "Privacy Notice"
 msgstr ""
@@ -162,3 +162,23 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Year (oldest first)"
 msgstr ""
+
+#: lib/dpul_collections_web/live/browse_live.ex:35
+#, elixir-autogen, elixir-format
+msgid "Browse"
+msgstr ""
+
+#: lib/dpul_collections_web/components/header_component.ex:14
+#, elixir-autogen, elixir-format
+msgid "Digital Collections"
+msgstr ""
+
+#: lib/dpul_collections_web/live/browse_live.ex:37
+#, elixir-autogen, elixir-format
+msgid "Randomize"
+msgstr ""
+
+#: lib/dpul_collections_web/components/footer_component.ex:27
+#, elixir-autogen, elixir-format
+msgid "The Trustees of Princeton University"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -16,7 +16,7 @@ msgstr ""
 msgid "Error!"
 msgstr ""
 
-#: lib/dpul_collections_web/components/core_components.ex:102
+#: lib/dpul_collections_web/components/core_components.ex:90
 #, elixir-autogen, elixir-format
 msgid "Hang in there while we get back on track"
 msgstr ""
@@ -27,7 +27,7 @@ msgstr ""
 msgid "Search"
 msgstr ""
 
-#: lib/dpul_collections_web/components/core_components.ex:97
+#: lib/dpul_collections_web/components/core_components.ex:85
 #, elixir-autogen, elixir-format
 msgid "Something went wrong!"
 msgstr ""
@@ -52,7 +52,7 @@ msgstr ""
 msgid "Apply"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:16
+#: lib/dpul_collections_web/components/header_component.ex:24
 #, elixir-autogen, elixir-format
 msgid "Language"
 msgstr ""
@@ -113,17 +113,17 @@ msgstr ""
 msgid "We invite you to be inspired by our globally diverse collections of"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:37
+#: lib/dpul_collections_web/components/footer_component.ex:21
 #, elixir-autogen, elixir-format
 msgid "Accessibility Help"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:35
+#: lib/dpul_collections_web/components/footer_component.ex:13
 #, elixir-autogen, elixir-format
 msgid "Copyright Policy"
 msgstr ""
 
-#: lib/dpul_collections_web/components/lux-components.ex:36
+#: lib/dpul_collections_web/components/footer_component.ex:17
 #, elixir-autogen, elixir-format
 msgid "Privacy Notice"
 msgstr ""
@@ -162,3 +162,23 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Year (oldest first)"
 msgstr ""
+
+#: lib/dpul_collections_web/live/browse_live.ex:35
+#, elixir-autogen, elixir-format
+msgid "Browse"
+msgstr ""
+
+#: lib/dpul_collections_web/components/header_component.ex:14
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Digital Collections"
+msgstr ""
+
+#: lib/dpul_collections_web/live/browse_live.ex:37
+#, elixir-autogen, elixir-format
+msgid "Randomize"
+msgstr ""
+
+#: lib/dpul_collections_web/components/footer_component.ex:27
+#, elixir-autogen, elixir-format
+msgid "The Trustees of Princeton University"
+msgstr ""