feat: add Announcement Bar feature

In front matter:

```
announcement:
  text: ''Hello World!️'
```

modules/wowchemy/assets/js/wowchemy-announcement.js

@@ -0,0 +1,33 @@
+/* ---------------------------------------------------------------------------
+ *  Wowchemy
+ *  https://github.com/wowchemy/wowchemy-hugo-themes
+ *
+ *  Announcement Bar component
+ * --------------------------------------------------------------------------- */
+
+let announcement = document.getElementById('announcement');
+
+// Check if the page has an announcement defined for it
+if (announcement !== null) {
+  console.debug('Announcement detected!');
+
+  let announcement_id = announcement.dataset.id;
+
+  // Check local storage for the announcement status
+  Object.keys(localStorage).forEach(function(key) {
+    if (/^wc-announcement-/.test(key)) {
+      if (key !== announcement_id ) {
+        localStorage.removeItem(key);
+        document.documentElement.removeAttribute('data-wc-announcement-status');
+        console.debug('Announcement key removed!');
+      }
+    }
+  });
+
+  // Dismiss announcement
+  // TODO: for BS5 upgrade with vanilla JS, change to `announcement.addEventListener('closed.bs.alert', () => {`
+  $('#announcement').on('closed.bs.alert', function () {
+    console.debug(`Announcement ${announcement_id} dismissed!`);
+    localStorage.setItem(announcement_id, 'dismissed');
+  });
+}

modules/wowchemy/assets/js/wowchemy-headroom.js

@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
   console.debug(`Use headroom on this page? ${pageData['use_headroom']}`);
 
   // Grab header element
-  let $header = document.querySelector('header');
+  let $header = document.querySelector('.page-header');
 
   // Use Headroom on this page?
   if ($header && pageData['use_headroom'] === true) {

modules/wowchemy/assets/js/wowchemy-init.js

@@ -30,3 +30,11 @@ initThemeVariation();
 
 // For Plotly compatibility with MathJax (must appear prior to loading Plotly).
 window.PlotlyConfig = {MathJaxConfig: 'local'};
+
+// Check for any dismissed announcements that should be hidden on load
+Object.keys(localStorage).forEach(function(key) {
+  if (/^wc-announcement-/.test(key)) {
+    document.documentElement.setAttribute('data-announcement-status', 'dismissed');
+    console.debug('Hiding announcement...');
+  }
+});

modules/wowchemy/assets/scss/wowchemy/_base.scss

@@ -9,11 +9,11 @@ html {
   line-height: 1.65;
 
   // Offset anchor scrolling by height of desktop fixed header.
-  scroll-padding-top: 70px;
+  // scroll-padding-top: 70px;
 
   @include media-breakpoint-down(md) {
     // Offset anchor scrolling by height of mobile fixed header.
-    scroll-padding-top: 50px;
+    // scroll-padding-top: 50px;
   }
 }
 @media screen and (min-width: 58em) {
@@ -35,11 +35,11 @@ body {
   overflow-x: hidden;
 
   // Offset body content by fixed navbar height.
-  margin-top: 70px;
+  // margin-top: 70px;
 
   @include media-breakpoint-down(md) {
     // Offset body content by fixed navbar height.
-    margin-top: 50px;
+    // margin-top: 50px;
   }
 }
 

modules/wowchemy/assets/scss/wowchemy/components/_all.scss

@@ -8,3 +8,4 @@
 @import 'pagination';
 @import 'sharing';
 @import 'shortcode';
+@import 'announcement_bar';

modules/wowchemy/assets/scss/wowchemy/components/_announcement_bar.scss

@@ -0,0 +1,23 @@
+#announcement {
+  // Reduced BS font size
+  font-size: 16px;
+}
+
+#announcement.alert {
+  // Reduced BS padding
+  padding: 0.1rem 1.25rem;
+}
+
+.alert-dismissible .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    // Reduced BS padding inline with `#announcement.alert` padding
+    padding: 0.1rem 1.25rem;
+}
+
+// Hide dismissed announcement
+[data-wc-announcement-status="dismissed"] #announcement {
+  display: none;
+}

modules/wowchemy/assets/scss/wowchemy/components/_nav.scss

@@ -16,7 +16,7 @@
 }
 
 .header--fixed {
-  position: fixed;
+  position: sticky;
   z-index: 10; // previously, 1030
   right: 0;
   left: 0;

modules/wowchemy/layouts/_default/baseof.html

@@ -32,7 +32,11 @@
 
   {{ partial "search" . }}
 
-  <div class="page-header">
+  {{ if .Params.announcement.text -}}
+    {{ partial "components/announcement_bar" . }}
+  {{ end -}}
+
+  <div class="page-header header--fixed">
     {{ partial "navbar" . }}
   </div>
 

modules/wowchemy/layouts/partials/components/announcement_bar.html

@@ -0,0 +1,12 @@
+{{ if (.Params.announcement.dismissable | default true) -}}
+  <div id="announcement" data-id="wc-announcement-{{ .Params.announcement.id | default (md5 .Params.announcement.text) }}" class="alert alert-secondary alert-dismissible fade show text-lg-center mb-0" role="alert">
+    {{ .Params.announcement.text | emojify | markdownify | safeHTML }}
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+{{ else -}}
+  <div class="alert alert-primary text-lg-center" role="alert">
+    {{ .Params.announcement.text | emojify | markdownify | safeHTML }}
+  </div>
+{{ end -}}

modules/wowchemy/layouts/partials/site_js.html

@@ -221,6 +221,16 @@
   <script src="{{ $js.RelPermalink }}" type="module"></script>
 {{- end -}}
 
+{{/* Announcement Bar */}}
+{{ $hasAnnouncement := .Params.announcement.text }}
+{{ if $hasAnnouncement }}
+  {{ $js := resources.Get "js/wowchemy-announcement.js" | js.Build (dict "format" "esm" "minify" true) }}
+  {{- if hugo.IsProduction -}}
+    {{- $js = $js | fingerprint "md5" -}}
+  {{- end -}}
+  <script src="{{ $js.RelPermalink }}" type="module"></script>
+{{- end -}}
+
 {{/* EXTENSIBILITY HOOK: BODY-END */}}
 {{/* Deprecated custom_js hook */}}
 {{ if templates.Exists "partials/custom_js" }}