Adds banners under the main menu for doc pages

Robert Fekete · Robert Fekete · commit 0ea034211eb6 · 2024-09-24T10:02:33.000+02:00
Based on the solution used on the opentelemetry site
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -63,3 +63,37 @@ assets/scss/_styles_project.scss
 .tab-body {
   padding: 0rem;
 }
+
+// Styling for announcement banner
+.menu-banner {
+  @include media-breakpoint-up(md) {
+    width: 100%;
+    position: fixed;
+    margin-left: -15px;
+    z-index: 31;
+    top: 4rem;
+  }
+
+  //--td-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)};
+  --td-pre-bg: black;
+
+  background: var(--td-pre-bg);
+  color: var(--bs-body-color);
+  text-align: center;
+  height: 24px;
+
+  & p {
+    // padding: 0.5rem;
+    // margin-bottom: initial;
+    color: white;
+  }
+}
+
+// Adds a padding because the announcements banner is too close to the breadcrumb
+header {
+  padding-bottom: 8px;
+}
+.td-page-meta {
+  // Adds a margin because the announcements banner is too close
+  margin-top: 16px;
+}
diff --git a/content/announcements/_index.md b/content/announcements/_index.md
@@ -0,0 +1,6 @@
+---
+title: Announcements
+cascade:
+  type: docs
+headless: true
+---
diff --git a/content/announcements/kubecon-na-2024.md b/content/announcements/kubecon-na-2024.md
@@ -0,0 +1,6 @@
+---
+title: Observability Day North America
+expiryDate: 2024-11-15
+weight: -1 # top
+---
+<i class="fas fa-bullhorn"></i> Meet us at [**Observability Day North America**](https://colocatedeventsna2024.sched.com/event/1iztP/turn-the-volume-down-on-noisy-neighbors-sandor-guba-axoflow) (part of KubeCon) in Salt Lake City on November 12!
diff --git a/content/docs/_index.md b/content/docs/_index.md
@@ -1,6 +1,8 @@
 ---
 title: Logging operator
 weight: 400
+cascade:
+  show_banner: true
 ---
 
 Welcome to the Logging operator documentation!
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -6,6 +6,7 @@
   <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}" {{ with .Page.Params.body_attribute }} {{ . | safeHTMLAttr }}{{ end }}>
     <header>
       {{ partial "navbar.html" . }}
+      {{- partial "banner.html" . }} <!-- Adds announcements banner under the menu -->
     </header>
     <div class="container-fluid td-outer">
       <div class="td-main">
diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
@@ -0,0 +1,10 @@
+{{ if .Params.show_banner -}}
+  {{ $announcements := site.GetPage "announcements" -}}
+  {{ if $announcements -}}
+    <div class="menu-banner">
+      {{ range $announcements.RegularPages }}
+      <div>{{ .Content }}</div>
+      {{ end -}}
+    </div>
+  {{ end -}}
+{{ end -}}
