chore: convert root template to .heex (#2233)

* chore: convert root template to .heex * add a script * chore: add integrity attribute to external links (#2236) * chore: avoid conflict by not importing static_integrity from the router helpers * feat: add integrity attribute to external script and style sources
mbta · Nov 27, 2024 · e1e3dc1 · e1e3dc1
1 parent f0bee0f
commit e1e3dc1
Show file tree

Hide file tree

Showing 16 changed files with 446 additions and 241 deletions.
diff --git a/lib/dotcom/body_tag.ex b/lib/dotcom/body_tag.ex
@@ -9,17 +9,7 @@ defmodule Dotcom.BodyTag do
     UI elements.
   """
 
-  alias PhoenixHTMLHelpers.Tag
-
-  @spec render(Plug.Conn.t()) :: Phoenix.HTML.Safe.t()
-  def render(conn) do
-    Tag.tag(
-      :body,
-      class: class_name(conn)
-    )
-  end
-
-  defp class_name(conn) do
+  def class_name(conn) do
     [
       javascript_class(),
       mticket_class(conn),

diff --git a/lib/dotcom_web.ex b/lib/dotcom_web.ex
@@ -69,6 +69,7 @@ defmodule DotcomWeb do
           project_path: 3,
           project_update_path: 3,
           project_update_path: 4,
+          static_integrity: 2,
           static_url: 2
         ]
 

diff --git a/lib/dotcom_web/templates/fare/proposed_sales_locations.html.heex b/lib/dotcom_web/templates/fare/proposed_sales_locations.html.heex
@@ -33,7 +33,12 @@
         <script defer src={"#{Application.get_env(:dotcom, :webpack_path)}/tnm.js"}>
         </script>
       <% else %>
-        <script defer src={static_url(@conn, "/js/tnm.js")}>
+        <script
+          defer
+          src={static_url(@conn, "/js/tnm.js")}
+          integrity={static_integrity(@conn, "/js/tnm.js")}
+          crossorigin="anonymous"
+        >
         </script>
       <% end %>
     </div>

diff --git a/lib/dotcom_web/templates/fare/retail_sales_locations.html.heex b/lib/dotcom_web/templates/fare/retail_sales_locations.html.heex
@@ -18,7 +18,12 @@
         <script defer src={"#{Application.get_env(:dotcom, :webpack_path)}/tnm.js"}>
         </script>
       <% else %>
-        <script defer src={static_url(@conn, "/js/tnm.js")}>
+        <script
+          defer
+          src={static_url(@conn, "/js/tnm.js")}
+          integrity={static_integrity(@conn, "/js/tnm.js")}
+          crossorigin="anonymous"
+        >
         </script>
       <% end %>
     </div>

diff --git a/lib/dotcom_web/templates/layout/root.html.eex b/lib/dotcom_web/templates/layout/root.html.eex
diff --git a/lib/dotcom_web/templates/layout/root.html.heex b/lib/dotcom_web/templates/layout/root.html.heex
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <%= csrf_meta_tag() %>
+    <% meta_description =
+      assigns[:meta_description] ||
+        "Official website of the MBTA -- schedules, maps, and fare information for Greater Boston's public transportation system, including subway, commuter rail, bus routes, and boat lines." %>
+    <meta name="description" content={Phoenix.HTML.raw(meta_description)} />
+    <meta name="author" content="Massachusetts Bay Transportation Authority" />
+    <meta name="theme-color" content="#165c96" />
+
+    <%= # hide any page in /org directory from search engines
+    if @conn.request_path == "/org" || String.slice(@conn.request_path, 0..4) == "/org/" do %>
+      <meta name="robots" content="noindex, nofollow" />
+    <% end %>
+    <%= # hide any page in /charlie directory from search engines
+    if @conn.request_path == "/charlie" || String.slice(@conn.request_path, 0..8) == "/charlie/" do %>
+      <meta name="robots" content="noindex, nofollow" />
+    <% end %>
+    <%= # hide any page in /policies/terms-use-charlie directory from search engines
+    if @conn.request_path == "/policies/terms-use-charlie" || String.slice(@conn.request_path, 0..26) == "/policies/terms-use-charlie" do %>
+      <meta name="robots" content="noindex, nofollow" />
+    <% end %>
+    <% title =
+      if Phoenix.Controller.view_template(@conn) == "404.html",
+        do: "Page Not Found | MBTA - Massachusetts Bay Transportation Authority",
+        else: title_breadcrumbs(@conn) %>
+    <title><%= title %></title>
+    <link
+      rel="apple-touch-icon"
+      href={static_url(@conn, "/apple-touch-icon.png")}
+      type="image/png"
+    />
+    <link
+      rel="icon"
+      href={static_url(@conn, "/images/mbta-logo-t-favicon.png")}
+      sizes="32x32"
+      type="image/png"
+    />
+    <link
+      rel="icon"
+      href={static_url(@conn, "/favicon.ico")}
+      sizes="16x16"
+      type="image/vnd.microsoft.icon"
+    />
+
+    <link :if={google_tag_manager_id()} rel="preconnect" href="//www.google-analytics.com" />
+
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title="MBTA.com Latest News"
+      href="/news/rss.xml"
+    />
+
+    <script :if={Application.get_env(:sentry, :js_dsn)}>
+      window.sentry = {
+        dsn: "<%= Application.get_env(:sentry, :js_dsn) %>",
+        environment: "<%= Application.get_env(:sentry, :environment_name) %>"
+      }
+    </script>
+
+    <% dev_server? = Application.get_env(:dotcom, :dev_server?)
+    webpack_path = Application.get_env(:dotcom, :webpack_path) %>
+
+    <link :if={dev_server?} rel="stylesheet" href={"#{webpack_path}/css/core.css"} />
+    <link :if={dev_server?} rel="stylesheet" href={"#{webpack_path}/css/app.css"} />
+    <script :if={dev_server?} defer src={"#{webpack_path}/core.js"}>
+    </script>
+    <script :if={dev_server?} defer src={"#{webpack_path}/app.js"}>
+    </script>
+
+    <link
+      :if={!dev_server?}
+      rel="stylesheet"
+      href={static_url(@conn, "/css/core.css")}
+      integrity={static_integrity(@conn, "/css/core.css")}
+      crossorigin="anonymous"
+    />
+    <link
+      :if={!dev_server?}
+      rel="stylesheet"
+      href={static_url(@conn, "/css/app.css")}
+      integrity={static_integrity(@conn, "/css/app.css")}
+      crossorigin="anonymous"
+    />
+    <script
+      :if={!dev_server?}
+      defer
+      src={static_url(@conn, "/js/vendors.js")}
+      integrity={static_integrity(@conn, "/js/vendors.js")}
+      crossorigin="anonymous"
+    >
+    </script>
+    <script
+      :if={!dev_server?}
+      defer
+      src={static_url(@conn, "/js/app.js")}
+      integrity={static_integrity(@conn, "/js/app.js")}
+      crossorigin="anonymous"
+    >
+    </script>
+  </head>
+  <%= content_tag(:body, class: Dotcom.BodyTag.class_name(@conn)) do %>
+    <div class="body-wrapper" id="body-wrapper">
+      <a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
+      <%= DotcomWeb.PartialView.render("_hidden_icons.html", conn: @conn) %>
+      <%= render(
+        "_new_header.html",
+        @conn
+        |> Plug.Conn.assign(
+          :page,
+          get_page_classes(
+            Phoenix.Controller.view_module(@conn),
+            Phoenix.Controller.view_template(@conn)
+          )
+        )
+        |> forward_assigns
+      ) %>
+      <div
+        :if={assigns[:banner_template]}
+        class={"announcement-container #{assigns[:banner_class]}"}
+      >
+        <div class="container">
+          <%= render(__MODULE__, @banner_template, assigns) %>
+        </div>
+      </div>
+      <div :if={assigns[:breadcrumbs]} class="breadcrumb-container">
+        <div class="container">
+          <%= breadcrumb_trail(@conn) %>
+        </div>
+      </div>
+      <%= if assigns[:search_header?], do: render("_searchbar.html", assigns) %>
+      <div class={"page-container #{get_page_classes(Phoenix.Controller.view_module(@conn), Phoenix.Controller.view_template(@conn))}"}>
+        <%= content_tag(:main, @inner_content, id: "main", tabindex: -1) %>
+      </div>
+      <%= render(__MODULE__, "_footer.html", conn: @conn) %>
+    </div>
+
+    <%!-- Begin unnecessary scripts --%>
+    <%!-- React isn't even needed on most pages, but in production app.js will
+    somehow fail to execute unless additional scripts are included here. Let's
+    revisit this when we either refactor app.js or refactor how we bundle
+    scripts for production via Webpack.  --%>
+    <script
+      :if={!dev_server?}
+      defer
+      src={static_url(@conn, "/js/react.js")}
+      integrity={static_integrity(@conn, "/js/react.js")}
+      crossorigin="anonymous"
+    >
+    </script>
+    <%!-- End unnecessary scripts --%>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript :if={google_tag_manager_id()}>
+      <iframe
+        src={"https://www.googletagmanager.com/ns.html?id=#{google_tag_manager_id()}&gtm_auth=#{google_tag_manager_auth()}&gtm_preview=#{google_tag_manager_preview()}&gtm_cookies_win=x"}
+        height="0"
+        width="0"
+        style="display:none;visibility:hidden"
+      >
+      </iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    <!-- Google Tag Manager -->
+    <script :if={google_tag_manager_id()}>
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl+ "&gtm_auth=<%= google_tag_manager_auth() %>&gtm_preview=<%= google_tag_manager_preview() %>&gtm_cookies_win=x";f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','<%= google_tag_manager_id() %>');
+    </script>
+  <% end %>
+</html>
diff --git a/lib/dotcom_web/templates/project/index.html.eex b/lib/dotcom_web/templates/project/index.html.eex