Added the notification banner on the top of the page

_data/_notifications-template.yml

@@ -0,0 +1,6 @@
+# Notification Banner example
+Instrumenting Sentry:
+    background: '#141845'
+    textcolor: '#fff'
+    title: Instrumenting Sentry
+    description: Instrumenting 1 Sentry for your backend project? Join us July 11th, at 10 AM PT for the Backend Error Monitoring 101 livestream. <a href="https://go.memfault.com/how-to-debug-android-devices-production">Register now.</a>

_data/notifications.yml

@@ -0,0 +1,6 @@
+# Notification Banner
+Instrumenting Sentry:
+    background: '#141845'
+    textcolor: '#fff'
+    title: Instrumenting Sentry
+    description: '<i>Excited to introduce Memfault’s new sandbox demo!</i><a href="https://demo.memfault.com/demo/start"> Try it out for yourself</a>'

_includes/notification-banner.html

@@ -0,0 +1,8 @@
+<ul class="banner-notifications">
+  {% for notification in site.data.notifications %}
+    <li class="banner-notification" style="--notificationBackground: {{ notification[1].background }}; --notificationColor: {{ notification[1].textcolor }};">
+      <div style="text-align: center;">{{ notification[1].description | markdownify }}</div>
+      <button class="banner-notification-close js-banner-notification-close"></button>
+    </li>
+  {% endfor %}
+</ul>

_layouts/default.html

@@ -13,6 +13,9 @@
 		<!-- Navigation -->
 	  	{% include menu.html %}
 
+		<!-- Top banner -->
+		{% include notification-banner.html %}
+
     	<!-- Icon menu -->
 		<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
 			<div id="menu"></div>

_layouts/homepage.html

@@ -9,6 +9,9 @@
 	  	<!-- Navigation -->
 	  	{% include menu.html %}
 
+		<!-- Top banner -->
+		{% include notification-banner.html %}
+
     	<!-- Icon menu -->
 		<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
 			<div id="menu"></div>

_layouts/split-view.html

@@ -9,6 +9,9 @@
 	  	<!-- Navigation -->
 	  	{% include menu.html %}
 
+      <!-- Top banner -->
+		{% include notification-banner.html %}
+
     <!-- Icon menu -->
 	  <a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
 	  	<div id="menu"></div>
@@ -34,7 +37,7 @@
 
         <!-- Pagination links -->
         {% include pagination.html %}
-        
+
     </div>
 
         <!-- Footer -->

_sass/custom.scss

@@ -144,3 +144,93 @@ figcaption {
   text-align: center;
   font-size: 12px;
 }
+
+:root {
+  --notificationBackground: #faaf4e;
+  --notificationColor: #fff;
+}
+
+#nav-menu {
+  top: 35px;
+  margin-top: 35px;
+  width: 30px;
+  position: sticky;
+  margin-left: auto;
+}
+
+.menu-open ~ #nav-menu {
+  margin-top: 0;
+  top: 35px;
+  position: fixed;
+}
+
+.banner-notifications {
+  margin: 0;
+  list-style: none;
+  display: none;
+}
+
+.banner-notification {
+  position: relative;
+  margin: 0;
+  margin-bottom: 10px;
+  background-color: var(--notificationBackground);
+  color: var(--notificationColor);
+  padding: 10px 50px 10px 20px;
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+.banner-notification-close {
+  background-color: color-mix(in srgb, var(--notificationBackground),#000 30%);
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  position: absolute;
+  right: 10px;
+  top: 15px;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+  transform: rotate(-45deg);
+  cursor: pointer;
+
+  &::after,
+  &::before {
+    content: '';
+    width: 10px;
+    height: 1px;
+    background-color: var(--notificationColor);
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transition: all 0.1s linear;
+    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+  }
+
+  &:hover {
+    &::after,
+    &::before {
+      width: 12px;
+    }
+  }
+
+  &::before {
+    transform: translateX(-50%) translateY(-50%) ;
+  }
+}

js/main.js

@@ -72,7 +72,63 @@ function searchScroll() {
 	}
 }
 
+// Function to set a cookie
+function setCookie(name, value, days) {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
+    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
+}
+
+// Function to get the value of a cookie
+function getCookie(name) {
+    const cookieName = `${name}=`;
+    const cookies = document.cookie.split(';');
+
+    for (let i = 0; i < cookies.length; i++) {
+        let cookie = cookies[i].trim();
+        if (cookie.indexOf(cookieName) === 0) {
+            return cookie.substring(cookieName.length, cookie.length);
+        }
+    }
+    return null;
+}
+
+// Function to check the hideBanner cookie and show/hide the banner
+function checkAndDisplayBanner() {
+    const hideBannerCookie = getCookie('hideBanner');
+    const banner = document.querySelector('.banner-notifications');
+
+    if (banner && hideBannerCookie === 'true') {
+        banner.style.display = 'none'; // Hide the banner if cookie is set to true
+    } else {
+        banner.style.display = 'block'; // Show the banner otherwise
+    }
+
+	notificationBannerClose();
+}
+
+
+// Closes the banner and save the cookie
+function closeBanner() {
+    const banner = document.querySelector('.banner-notifications');
+    if (!banner) return;
+
+	banner.style.display = 'none';
+    setCookie('hideBanner', 'true', 1); // Set the cookie to expire in 1 day
+}
+
+// Closes the
+function notificationBannerClose() {
+	const closeButton = document.querySelector('.js-banner-notification-close');
+
+	if (closeButton) {
+		closeButton.addEventListener('click', closeBanner);
+	}
+}
+
 // TODO dark mode
 // darkModeSetup();
 menuClick();
-searchScroll();
+searchScroll();
+
+window.addEventListener('load', checkAndDisplayBanner);