Add new global header and footer (#1591)

Co-authored-by: jamesbiggs <[email protected]>

config/settings/base.py

@@ -120,6 +120,8 @@
 
 ROOT_URLCONF = "config.urls"
 
+ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "").split(",")
+
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",

config/settings/dev.py

@@ -29,10 +29,9 @@
 }
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = "@6gce61jt^(pyj5+l**&*_#zyxfj5v1*71cs5yoetg-!fsz826"
+SECRET_KEY = "abc123"
 
-# SECURITY WARNING: define the correct hosts in production!
-ALLOWED_HOSTS = ["*"]
+ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "*").split(",")
 
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 

config/settings/production.py

@@ -3,19 +3,10 @@
 from .base import *  # noqa: F401
 
 # TODO: Temporary until the static files can be served via S3 or a CDN
-DEBUG = True
+# DEBUG = True
 
 # TODO: Ensure that certificates are always checked by the Client API in production
 # CLIENT_VERIFY_CERTIFICATES = True
 
-# TODO: Generate SECRET_KEY
 SECRET_KEY = os.getenv("SECRET_KEY", "")
 # Need to get the IP of the load balancer or reverse proxy
-ALLOWED_HOSTS = ["*"]
-STATICFILES_STORAGE = "django.contrib.staticfiles.storage.ManifestStaticFilesStorage"
-STATIC_ROOT = "/app/static"
-
-try:
-    from .local import *  # noqa: F401
-except ImportError:
-    pass

config/settings/test.py

@@ -6,7 +6,7 @@
     pass
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = "@6gce61jt^(pyj5+l**&*_#zyxfj5v1*71cs5yoetg-!fsz826"
+SECRET_KEY = "abc123"
 
 ALLOWED_HOSTS = ["localhost", "127.0.0.1"]
 

package.json

@@ -39,7 +39,7 @@
     "webpack-cli": "~5.1"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.1.43",
+    "@nationalarchives/frontend": "0.1.50",
     "jquery": "~3.7",
     "openseadragon": "~4.1"
   },

scripts/src/all.js

@@ -1,3 +1,5 @@
 import { initAll } from "../../node_modules/@nationalarchives/frontend/nationalarchives/all.mjs";
+import { GA4 } from "../../node_modules/@nationalarchives/frontend/nationalarchives/analytics.mjs";
 
 initAll();
+new GA4({ addTrackingCode: false });

templates/includes/content-warning.html

@@ -1,15 +1,14 @@
 {% load wagtailcore_tags %}
-<div class="tna-message">
-    <svg class="tna-message__icon" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 34 34" width="40" height="40">
-        <path fill="currentColor" d="M15.33 8.67h3.34V12h-3.34V8.67Zm0 6.66h3.34v10h-3.34v-10ZM17 .33a16.67 16.67 0 1 0 .01 33.35A16.67 16.67 0 0 0 17 .33Zm0 30A13.35 13.35 0 0 1 3.67 17C3.67 9.65 9.65 3.67 17 3.67S30.33 9.65 30.33 17 24.35 30.33 17 30.33Z"></path>
-    </svg>
-    {% if custom_warning_text %}
-        <div class="tna-message__message">
-            {{ custom_warning_text | richtext }}
-        </div>
-    {% else %}
-        <p class="tna-message__message">
-            This article contains content that some people may find offensive.
-        </p>
-    {% endif %}
-</div>
+<div class="tna-warning">
+    <h2 class="tna-warning__heading tna-visually-hidden">
+      Important information
+    </h2>
+    <span class="tna-warning__heading-icon" aria-hidden="true">!</span>
+    <div class="tna-warning__body">
+        {% if custom_warning_text %}
+        {{ custom_warning_text | richtext }}
+        {% else %}
+        This article contains content that some people may find offensive.
+        {% endif %}
+    </div>
+  </div>

templates/includes/header.html

@@ -1,56 +1,69 @@
 {% load static robots_meta %}
 
 {% include 'includes/login-status.html' %}
-
-<header class="tna-header {{ classes }}" data-module="tna-header">
-  <div class="tna-header__exit">
-    <div class="tna-container">
-      <div class="tna-column tna-column--full">
-        <a href="https://www.nationalarchives.gov.uk/" class="tna-header__exit-link" target="_blank" data-component-name="Banner" data-link-type="Link text" data-link="Go to the current National Archives website">
-          Go to the current National Archives website<span class="tna-visually-hidden"> (opens in a new tab)</span><i class="fa-solid fa-arrow-up-right-from-square"></i>
-        </a>
-      </div>
-    </div>
-  </div>
-  <div class="tna-container tna-header__contents">
-    <div class="tna-column tna-header__logo">
-      <a href="/" class="tna-header__logo-link tna-header__logo-link--href">
-        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="96" height="96">
+<header class="tna-global-header" data-module="tna-global-header">
+  <div class="tna-container tna-global-header__main">
+    <div class="tna-column tna-column--flex-1 tna-column--order-2">
+      <span class="tna-global-header__logo-wrapper">
+        <a href="https://www.nationalarchives.gov.uk/" class="tna-global-header__logo" title="The National Archives">
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
           <title>The National Archives</title>
           <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
           <g class="tna-logo__foreground" fill="currentColor">
             <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
             <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
           </g>
-        </svg><span class="tna-header__logo-strapline">Beta</span></a>
+        </svg>
+        </a>
+      </span>
     </div>
-    <div class="tna-column tna-header__navigation-toggle">
-      <button class="tna-header__navigation-toggle-button" type="button" aria-controls="tna-header__navigation" hidden>
+    <div class="tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper">
+      <button class="tna-global-header__navigation-button" type="button" aria-controls="tna-header__navigation tna-header__top-navigation" hidden>
         Menu
-        <span class="tna-header__hamburger"></span>
+        <span class="tna-global-header__hamburger"></span>
       </button>
     </div>
-    {% if settings.core.SiteSettings.main_menu_items %}
-    <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" id="tna-header__navigation" aria-label="Main site navigation">
-      <menu class="tna-header__navigation-items">
-        {% if request.path|is_search_or_catalogue %}
-          <!-- FOR PRIVATE BETA: STATIC SEARCH LINK ONLY -->
-          <li class="tna-header__navigation-item">
-            <a href="/search/" class="tna-header__navigation-item-link tna-header__navigation-item-link--selected">
-              Search
-            </a>
-          </li>
-        {% else %}
-          {% for item in settings.core.SiteSettings.main_menu_items %}
-          <li class="tna-header__navigation-item">
-            <a href="{{ item.url }}" class="tna-header__navigation-item-link{% if item.is_active %} tna-header__navigation-item-link--selected{% endif %}" tabindex="0" aria-current="true">
-              {{ item.label }}
-            </a>
-          </li>
-          {% endfor %}
-        {% endif %}
-      </menu>
+    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" id="tna-header__navigation" aria-label="Primary">
+      <ul class="tna-global-header__navigation">
+        <li class="tna-global-header__navigation-item">
+          <a href="https://www.nationalarchives.gov.uk/about/visit-us/" class="tna-global-header__navigation-item-link" tabindex="0">Visit</a>
+        </li>
+        <li class="tna-global-header__navigation-item">
+          <a href="https://www.nationalarchives.gov.uk/about/visit-us/whats-on/" class="tna-global-header__navigation-item-link" tabindex="0">What’s on</a>
+        </li>
+        <li class="tna-global-header__navigation-item">
+          <a href="/explore-the-collection/" class="tna-global-header__navigation-item-link" tabindex="0">Explore the collection</a>
+        </li>
+        <li class="tna-global-header__navigation-item">
+          <a href="https://www.nationalarchives.gov.uk/help-with-your-research/" class="tna-global-header__navigation-item-link" tabindex="0">Help using the archive</a>
+        </li>
+        <li class="tna-global-header__navigation-item">
+          <a href="https://www.nationalarchives.gov.uk/education/" class="tna-global-header__navigation-item-link" tabindex="0">Education</a>
+        </li>
+        <li class="tna-global-header__navigation-item">
+          <a href="https://www.nationalarchives.gov.uk/professional-guidance-and-services/" class="tna-global-header__navigation-item-link" tabindex="0">Professional guidance and services</a>
+        </li>
+      </ul>
+    </nav>
+    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" id="tna-header__top-navigation" aria-label="Secondary">
+      <ul class="tna-global-header__top-navigation">
+        <li class="tna-global-header__top-navigation-item">
+          <a href="https://www.nationalarchives.gov.uk/search/" class="tna-global-header__top-navigation-link" tabindex="0">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
+            </svg>
+            Search
+          </a>
+        </li>
+        <li class="tna-global-header__top-navigation-item">
+          <a href="https://shop.nationalarchives.gov.uk/" class="tna-global-header__top-navigation-link" tabindex="0">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <path d="M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64v48H160V112zm-48 48H48c-26.5 0-48 21.5-48 48V416c0 53 43 96 96 96H352c53 0 96-43 96-96V208c0-26.5-21.5-48-48-48H336V112C336 50.1 285.9 0 224 0S112 50.1 112 112v48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z" />
+            </svg>
+            Shop
+          </a>
+        </li>
+      </ul>
     </nav>
-    {% endif %}
   </div>
 </header>