feat: changeable global alert + fix: cumulative layout shift

assets/js/alert-init.js

@@ -0,0 +1,5 @@
+Object.keys(localStorage).forEach(function(key) {
+  if (/^global-alert-/.test(key)) {
+    document.documentElement.setAttribute('data-global-alert', 'closed');
+  }
+});

assets/js/alert.js

@@ -2,16 +2,19 @@ var announcement = document.getElementById('announcement');
 
 if (announcement !== null) {
 
-  if (localStorage.getItem('announcement') === null ) {
+  var id = announcement.dataset.id;
-
-    announcement.classList.remove('d-none');
-
-  }
-
-  announcement.addEventListener('closed.bs.alert', () => {
-
-    localStorage.setItem('announcement', 'closed');
 
+  Object.keys(localStorage).forEach(function(key) {
+    if (/^global-alert-/.test(key)) {
+      if (key !== id ) {
+        localStorage.removeItem(key);
+        document.documentElement.removeAttribute('data-global-alert');
+      }
+    }
   });
 
-}
+  announcement.addEventListener('closed.bs.alert', () => {
+    localStorage.setItem(id, 'closed');
+  });
+
+}

assets/scss/components/_alerts.scss

@@ -64,15 +64,11 @@
 
 .alert-dismissible .btn-close {
   position: absolute;
-
-  /*
   top: 50%;
   transform: translateY(-50%);
-  */
-  top: 0.75rem;
   right: 1rem;
   z-index: 2;
-  padding: 0.625rem;
+  padding: 0.5rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   background-size: 1.5rem;
   filter: invert(1) grayscale(100%) brightness(200%);
@@ -84,6 +80,10 @@
   }
 }
 
+[data-global-alert="closed"] #announcement {
+  display: none;
+}
+
 .alert code {
   background: darken($beige, 5%);
   color: $black;

config/_default/params.toml

@@ -60,7 +60,7 @@ footer = "Powered by <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\
 copyRight = "Copyright (c) 2020-2021 Henk Verlinde"
 
 # Alert
-alert = false
+alert = true
 alertDismissable = true
 # alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\" target=\"_blank\" rel=\"noopener\">Check out Doks v0.2</a>"
 alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\">Check out Doks v0.2</a>"

config/postcss.config.js

@@ -21,6 +21,7 @@ module.exports = {
         'h5',
         'alert-link',
         ...whitelister([
+          './assets/scss/components/_alerts.scss',
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_code.scss',
           './assets/scss/components/_diagrams.scss',

layouts/index.headers

@@ -2,7 +2,7 @@
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
   X-Content-Type-Options: nosniff
   X-XSS-Protection: 1; mode=block
-  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg=='; style-src 'self' https://*.netlify.app 'unsafe-inline'
+  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg==' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk='; style-src 'self' https://*.netlify.app 'unsafe-inline'
   X-Frame-Options: SAMEORIGIN
   Referrer-Policy: strict-origin
   Feature-Policy: geolocation 'self'

layouts/partials/footer/script-footer.html

@@ -45,7 +45,7 @@
   {{ $slice = $slice | append $darkMode -}}
 {{ end -}}
 
-{{ if .Site.Params.alertDismissable -}}
+{{ if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}}
   {{ $alert := resources.Get "js/alert.js" -}}
   {{ $alert := $alert | js.Build -}}
   {{ $slice = $slice | append $alert -}}

layouts/partials/head/script-header.html

@@ -1,4 +1,8 @@
 {{ if .Site.Params.options.darkMode -}}
   {{ $darkModeInit := resources.Get "js/darkmode-init.js" | js.Build | minify -}}
   <script>{{ $darkModeInit.Content | safeJS }}</script>
-{{ end -}}
+{{ end -}}
+{{- if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}}
+  {{ $alertInit := resources.Get "js/alert-init.js" | js.Build | minify -}}
+  <script>{{ $alertInit.Content | safeJS }}</script>
+{{- end -}}

layouts/partials/header/alert.html

@@ -1,10 +1,10 @@
 {{ if .Site.Params.alertDismissable -}}
-  <div id="announcement" class="alert alert-primary alert-dismissible fade show d-none text-lg-center" role="alert">
+  <div id="announcement" data-id="global-alert-{{ md5 .Site.Params.alertText }}" class="alert alert-primary alert-dismissible fade show text-lg-center" role="alert">
     {{ .Site.Params.alertText | safeHTML }}
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
 {{ else -}}
-  <div class="alert alert-primary text-center" role="alert">
+  <div class="alert alert-primary text-lg-center" role="alert">
     {{ .Site.Params.alertText | safeHTML }}
   </div>
-{{ end -}}
+{{ end -}}