Adds hello bar to site by pulling data from CNCF main site

assets/scss/_header.scss

@@ -132,3 +132,23 @@
 		}
 	}
 }
+
+.hello-bar {
+    background: #000;
+    color: #fff;
+    font-size: .9em;
+    font-weight: 400;
+    letter-spacing: .24px;
+    line-height: 1.15;
+    padding: .4rem;
+    text-align: center;
+    width: 100%;
+	display: none;
+	z-index: 999;
+	position: relative;
+	a {
+		color: unset;
+		font-weight: 400;
+		text-decoration: underline;
+	}
+}

layouts/partials/head.html

@@ -30,6 +30,7 @@
 {{- template "_internal/twitter_cards.html" . -}}
 
 <script src="https://cmp.osano.com/16A0DbT9yDNIaQkvZ/c3494b1e-ff3a-436f-978d-842e9a0bed27/osano.js"></script>
+<script src="{{ "js/hello-bar.js" | relURL }}"></script>
 
 {{ partialCached "head-css.html" . "asdf" }}
 <script

layouts/partials/navbar.html

@@ -1,11 +1,18 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
+
+
+<div class="hello-bar" role="banner">
+</div>
+
 <nav
 	class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+
 	<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
 		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}
 			{{ with resources.Get "icons/logo.svg" }}
 			{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
 	</a>
+
 	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
 		<ul class="navbar-nav mt-0 mt-lg-0">
 			{{ $p := . }}

static/js/hello-bar.js

@@ -0,0 +1,56 @@
+// Pulls hello bar data from www.cncf.io API and displays a hello bar if applicable.
+
+document.addEventListener("DOMContentLoaded", function() {
+    const cacheKey = 'helloBarCache';
+    const cacheDuration = 3600 * 1000; // 1 hour in milliseconds
+
+    // Check if we have a cached response and if it's still valid
+    const cachedData = localStorage.getItem(cacheKey);
+    if (cachedData) {
+        const parsedData = JSON.parse(cachedData);
+        const now = new Date().getTime();
+
+        // If the cache is still valid, use the cached data
+        if (now - parsedData.timestamp < cacheDuration) {
+            insertHelloBar(parsedData.data);
+            return; // Exit since we don't need to fetch the API
+        } else {
+            // Cache expired, remove it
+            localStorage.removeItem(cacheKey);
+        }
+    }
+
+    // Fetch the API if no valid cache is found
+    fetch('https://www.cncf.io/wp-json/lf/v1/get_hello')
+        .then(response => response.json())
+        .then(data => {
+            // Cache the response with a timestamp
+            localStorage.setItem(cacheKey, JSON.stringify({
+                data: data,
+                timestamp: new Date().getTime()
+            }));
+            insertHelloBar(data);
+        })
+        .catch(error => console.error('Error fetching the API:', error));
+});
+
+// Function to insert the hello bar
+function insertHelloBar(data) {
+    if (data.show_hello_bar !== 1) {
+        return;
+    }
+
+    const helloBar = document.querySelector('.hello-bar');
+    if (! helloBar) {
+        return;
+    }
+
+    helloBar.style.backgroundColor = data.hello_bar_bg;
+    helloBar.style.color = data.hello_bar_text;
+    helloBar.style.display = 'block';
+
+    // Replace instances of "utm_source=www" with "utm_source=subdomain"
+    const subdomain = window.location.hostname.split('.')[0];
+    const updatedContent = data.hello_bar_content.replace(/utm_source=www/g, `utm_source=${subdomain}`);
+    helloBar.innerHTML = updatedContent;
+}