From 683b172104f650f94bf31f72162bc2c1f740e1da Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 7 Apr 2022 15:07:00 +0100
Subject: [PATCH] UX: Make header/footer HTML consistent for crawler and
 noscript

These were originally very similar, but have diverged over time. This makes it very difficult to manage styling.

This commit moves the noscript header and footer into partials so they can be reused in both the crawler view and the `<noscript>` view. It also makes browser-update render the noscript content **instead of** the `<section id='main'>`, rather than adding adding the noscript inside the `<section>`. This provides better parity with the server-rendered crawler view.
---
 app/assets/javascripts/browser-update.js    |  2 +-
 app/views/layouts/_noscript_footer.html.erb | 32 ++++++++++++++++
 app/views/layouts/_noscript_header.html.erb |  5 +++
 app/views/layouts/application.html.erb      | 16 ++------
 app/views/layouts/crawler.html.erb          | 41 ++-------------------
 5 files changed, 44 insertions(+), 52 deletions(-)
 create mode 100644 app/views/layouts/_noscript_footer.html.erb
 create mode 100644 app/views/layouts/_noscript_header.html.erb

diff --git a/app/assets/javascripts/browser-update.js b/app/assets/javascripts/browser-update.js
index c3e5c83b30..31a5b410f6 100644
--- a/app/assets/javascripts/browser-update.js
+++ b/app/assets/javascripts/browser-update.js
@@ -37,7 +37,7 @@
           result += noscriptElements[i].childNodes[j].nodeValue;
         }
 
-        mainElement.innerHTML = result;
+        mainElement.outerHTML = result;
         break;
       }
     }
diff --git a/app/views/layouts/_noscript_footer.html.erb b/app/views/layouts/_noscript_footer.html.erb
new file mode 100644
index 0000000000..76770aaa04
--- /dev/null
+++ b/app/views/layouts/_noscript_footer.html.erb
@@ -0,0 +1,32 @@
+<footer class="container wrap">
+  <nav class='crawler-nav'>
+    <ul>
+      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
+        <span itemprop='name'>
+          <a href='<%= path "/" %>' itemprop="url"><%= t 'home_title' %> </a>
+        </span>
+      </li>
+      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
+        <span itemprop='name'>
+          <a href='<%= path "/categories" %>' itemprop="url"><%= t 'js.filters.categories.title' %> </a>
+        </span>
+      </li>
+      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
+        <span itemprop='name'>
+          <a href='<%= path "/guidelines" %>' itemprop="url"><%= t 'guidelines_topic.title' %> </a>
+        </span>
+      </li>
+      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
+        <span itemprop='name'>
+          <a href='<%= path "/tos" %>' itemprop="url"><%= t 'tos_topic.title' %> </a>
+        </span>
+      </li>
+      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
+        <span itemprop='name'>
+          <a href='<%= path "/privacy" %>' itemprop="url"><%= t 'privacy_topic.title' %> </a>
+        </span>
+      </li>
+    </ul>
+  </nav>
+  <p class='powered-by-link'><%= t 'powered_by_html' %></p>
+</footer>
diff --git a/app/views/layouts/_noscript_header.html.erb b/app/views/layouts/_noscript_header.html.erb
new file mode 100644
index 0000000000..5085644f17
--- /dev/null
+++ b/app/views/layouts/_noscript_header.html.erb
@@ -0,0 +1,5 @@
+<header>
+  <a href="<%= path "/" %>">
+    <h1><%=SiteSetting.title%></h1>
+  </a>
+</header>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 98b4fca1a5..35893cc195 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -73,25 +73,15 @@
 
     <%= render_google_tag_manager_body_code %>
     <noscript data-path="<%= request.env['PATH_INFO'] %>">
-      <%= render partial: 'header' %>
+      <%= render partial: "layouts/noscript_header" %>
+
       <div id="main-outlet" class="wrap" role="main">
         <!-- preload-content: -->
         <%= yield %>
         <!-- :preload-content -->
-        <footer class="noscript-footer-nav">
-          <nav itemscope itemtype='http://schema.org/SiteNavigationElement'>
-            <a href='<%= path "/" %>'><%= t 'home_title' %></a>
-            <%= link_to t('js.filters.categories.title'), path("/categories") %>
-            <%= link_to t('guidelines_topic.title'), path("/guidelines") %>
-            <%= link_to t('tos_topic.title'), path("/tos") %>
-            <%= link_to t('privacy_topic.title'), path("/privacy") %>
-          </nav>
-        </footer>
       </div>
 
-      <footer id='noscript-footer'>
-        <p><%= t 'powered_by_html' %></p>
-      </footer>
+      <%= render partial: "layouts/noscript_footer" %>
     </noscript>
 
     <%- unless customization_disabled? %>
diff --git a/app/views/layouts/crawler.html.erb b/app/views/layouts/crawler.html.erb
index 818c8a422b..cc8c28779d 100644
--- a/app/views/layouts/crawler.html.erb
+++ b/app/views/layouts/crawler.html.erb
@@ -16,46 +16,11 @@
   </head>
   <body class="crawler">
     <%= theme_lookup("header") %>
-    <header>
-      <a href="<%= path "/" %>">
-        <h1><%=SiteSetting.title%></h1>
-      </a>
-    </header>
-    <div id="main-outlet" class="wrap">
+    <%= render partial: "layouts/noscript_header" %>
+    <div id="main-outlet" class="wrap" role="main">
       <%= yield %>
     </div>
-    <footer class="container wrap">
-      <nav class='crawler-nav'>
-        <ul>
-        <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
-          <span itemprop='name'>
-            <a href='<%= path "/" %>' itemprop="url"><%= t 'home_title' %> </a>
-          </span>
-        </li>
-        <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
-          <span itemprop='name'>
-            <a href='<%= path "/categories" %>' itemprop="url"><%= t 'js.filters.categories.title' %> </a>
-          </span>
-        </li>
-        <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
-          <span itemprop='name'>
-            <a href='<%= path "/guidelines" %>' itemprop="url"><%= t 'guidelines_topic.title' %> </a>
-          </span>
-        </li>
-        <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
-          <span itemprop='name'>
-            <a href='<%= path "/tos" %>' itemprop="url"><%= t 'tos_topic.title' %> </a>
-          </span>
-        </li>
-        <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
-          <span itemprop='name'>
-            <a href='<%= path "/privacy" %>' itemprop="url"><%= t 'privacy_topic.title' %> </a>
-          </span>
-        </li>
-        </ul>
-      </nav>
-      <p class='powered-by-link'><%= t 'powered_by_html' %></p>
-    </footer>
+    <%= render partial: "layouts/noscript_footer" %>
     <%= theme_lookup("footer") %>
     <%= theme_lookup("body_tag") %>
     <% if show_browser_update? %>