feat: Add banner system for important notifications on home page

Signed-off-by: Felicitas Pojtinger <felicitas@pojtinger.com>

Author: pojntfx

README.md

@@ -56,7 +56,7 @@ Click on an image to see a larger version.
 - [gohugoio/hugo](https://github.com/gohugoio/hugo) provides the static site generator.
 - The open source [PatternFly design system](https://www.patternfly.org/) provides the UI components.
 - [FortAwesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome) provides the icons.
-- [lu.ma](https://lu.ma/) provides the event calendar and API.
+- [Luma](https://luma.com/home) provides the event calendar and API.
 
 ## Contributing
 

data/banner.yaml

@@ -0,0 +1,7 @@
+enabled: true
+color: info # info, warning, danger, success, custom
+screen_reader_text: "Info:"
+icon: fa-info-circle # fa-info-circle (info), fa-exclamation-triangle (warning), fa-exclamation-circle (danger), fa-check-circle (success), fa-bell (custom)
+message: "Our next Burnaby talk, Linux Talks (May 23), has changed location from the Bob Prittie Metrotown Branch to the Tommy Douglas Library."
+link_text: "RSVP on Luma" # Optional
+link_url: "https://luma.com/ahm1hi2s" # Optional

layouts/_partials/banner.html

@@ -0,0 +1,12 @@
+{{ with .Site.Data.banner }}
+  {{ if .enabled }}
+    <div class="pf-v6-c-banner pf-m-sticky{{ with .color }} pf-m-{{ . }}{{ end }} pf-v6-u-text-align-center" role="status" style="white-space: normal;">
+      <span class="pf-v6-screen-reader">{{ .screen_reader_text }}</span>
+      <i class="fas {{ with .icon }}{{ . }}{{ else }}fa-info-circle{{ end }} pf-v6-u-mr-sm" aria-hidden="true"></i>
+      {{- .message -}}
+      {{ if and .link_text .link_url }}
+        <a href="{{ .link_url }}">{{ .link_text }}{{ partial "icon" "external" }}</a>
+      {{ end }}
+    </div>
+  {{ end }}
+{{ end }}

layouts/baseof.html

@@ -94,6 +94,7 @@
               <div class="pf-v6-c-drawer__content pf-v6-c-page__main-container">
                 <div class="pf-v6-c-drawer__body">
                   <main class="pf-v6-c-page__main" id="main-content">
+                    {{ partial "banner" . }}
                     {{ block "main" . }}{{ end }}
                   </main>
                 </div>