From f2011506a3dcb7f8d9226bbe32e17a5dc22e41bf Mon Sep 17 00:00:00 2001
From: Anton Ilchuk <Anton.Ilchuk@forward.eu>
Date: Sun, 13 Aug 2023 23:46:36 +0200
Subject: [PATCH 1/6] Added the notification banner

- Added a configurable sidebar notification banner, with configurable copy, link, text color and background color
- Added a close button that stores users choice in the cookie for 24h and makes, so if one closes it, it won't appear again on the page realod
- Added a notification template to store the example of config
- included the notification banner in the sidebar
---
 _data/notifications.yml            |  6 +++
 _data/notifications_template.yml   |  6 +++
 _includes/notification-banner.html |  8 ++++
 _layouts/homepage.html             |  1 +
 _layouts/split-view.html           |  3 +-
 _sass/custom.scss                  | 77 ++++++++++++++++++++++++++++++
 js/main.js                         | 59 ++++++++++++++++++++++-
 7 files changed, 158 insertions(+), 2 deletions(-)
 create mode 100644 _data/notifications.yml
 create mode 100644 _data/notifications_template.yml
 create mode 100644 _includes/notification-banner.html

diff --git a/_data/notifications.yml b/_data/notifications.yml
new file mode 100644
index 00000000..7e87f00c
--- /dev/null
+++ b/_data/notifications.yml
@@ -0,0 +1,6 @@
+# Notification Banner
+Instrumenting Sentry:
+    background: '#faaf4e'
+    textcolor: '#000'
+    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>
\ No newline at end of file
diff --git a/_data/notifications_template.yml b/_data/notifications_template.yml
new file mode 100644
index 00000000..60a460b0
--- /dev/null
+++ b/_data/notifications_template.yml
@@ -0,0 +1,6 @@
+# Notification Banner example
+Instrumenting Sentry:
+    background: '#faaf4e'
+    textcolor: '#000'
+    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>
\ No newline at end of file
diff --git a/_includes/notification-banner.html b/_includes/notification-banner.html
new file mode 100644
index 00000000..a15d2b65
--- /dev/null
+++ b/_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 }};">
+      {{ notification[1].description | markdownify }}
+      <button class="banner-notification-close js-banner-notification-close"></button>
+    </li>
+  {% endfor %}
+</ul>
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
index 7542b459..deab7314 100644
--- a/_layouts/homepage.html
+++ b/_layouts/homepage.html
@@ -29,6 +29,7 @@ <h3 class="header">by <a href="https://memfault.com">Memfault</a></h3>
 
 				</main>
 				<aside>
+					{% include notification-banner.html %}
 					{% include search.html %}
 					{% include subscribe.html %}
 					{% include share-buttons.html %}
diff --git a/_layouts/split-view.html b/_layouts/split-view.html
index 358388c6..8a8657a9 100644
--- a/_layouts/split-view.html
+++ b/_layouts/split-view.html
@@ -26,6 +26,7 @@
 
         </main>
         <aside>
+          {% include notification-banner.html %}
           {% include search.html %}
           {% include subscribe.html %}
           {% include share-buttons.html %}
@@ -34,7 +35,7 @@
 
         <!-- Pagination links -->
         {% include pagination.html %}
-        
+
     </div>
 
         <!-- Footer -->
diff --git a/_sass/custom.scss b/_sass/custom.scss
index 200c2073..db03a606 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -144,3 +144,80 @@ figcaption {
   text-align: center;
   font-size: 12px;
 }
+
+:root {
+  --notificationBackground: #faaf4e;
+  --notificationColor: white;
+}
+
+.banner-notifications {
+  margin: 0;
+  list-style: none;
+  display: none;
+}
+
+.banner-notification {
+  position: relative;
+  margin: 0;
+  margin-bottom: 30px;
+  background-color: var(--notificationBackground);
+  color: var(--notificationColor);
+  padding: 20px 50px 20px 20px;
+  border-radius: 5px;
+
+  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: 10px;
+  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%) ;
+  }
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 6eefd113..d9c35d7f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -72,7 +72,64 @@ 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() {
+	console.log('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();
\ No newline at end of file
+searchScroll();
+
+window.addEventListener('load', checkAndDisplayBanner);

From affbafeeb279b3e158382748b8d6eec76f95c5d5 Mon Sep 17 00:00:00 2001
From: Anton Ilchuk <Anton.Ilchuk@forward.eu>
Date: Mon, 28 Aug 2023 13:05:58 +0100
Subject: [PATCH 2/6] - moved the banner to the top of the page

---
 ...mplate.yml => _notifications-template.yml} |  0
 _data/notifications.yml                       |  2 +-
 _layouts/default.html                         |  3 +++
 _layouts/homepage.html                        |  4 +++-
 _layouts/split-view.html                      |  4 +++-
 _sass/custom.scss                             | 21 +++++++++++++++----
 js/main.js                                    |  1 -
 7 files changed, 27 insertions(+), 8 deletions(-)
 rename _data/{notifications_template.yml => _notifications-template.yml} (100%)

diff --git a/_data/notifications_template.yml b/_data/_notifications-template.yml
similarity index 100%
rename from _data/notifications_template.yml
rename to _data/_notifications-template.yml
diff --git a/_data/notifications.yml b/_data/notifications.yml
index 7e87f00c..2b15fd5e 100644
--- a/_data/notifications.yml
+++ b/_data/notifications.yml
@@ -3,4 +3,4 @@ Instrumenting Sentry:
     background: '#faaf4e'
     textcolor: '#000'
     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>
\ No newline at end of file
+    description: '<i>Upcoming Panel: Best Practices for Safeguarding Your Connected Devices - Thursday, August 17, 2023 \| 9AM PT \| 12PM ET \| 6PM CET.</i>   <a href="https://hubs.la/Q01_vdqb0">RSVP Now.</a>'
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 87ad4294..db9360c8 100644
--- a/_layouts/default.html
+++ b/_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>
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
index deab7314..0dab66cb 100644
--- a/_layouts/homepage.html
+++ b/_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>
@@ -29,7 +32,6 @@ <h3 class="header">by <a href="https://memfault.com">Memfault</a></h3>
 
 				</main>
 				<aside>
-					{% include notification-banner.html %}
 					{% include search.html %}
 					{% include subscribe.html %}
 					{% include share-buttons.html %}
diff --git a/_layouts/split-view.html b/_layouts/split-view.html
index 8a8657a9..0875ae32 100644
--- a/_layouts/split-view.html
+++ b/_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>
@@ -26,7 +29,6 @@
 
         </main>
         <aside>
-          {% include notification-banner.html %}
           {% include search.html %}
           {% include subscribe.html %}
           {% include share-buttons.html %}
diff --git a/_sass/custom.scss b/_sass/custom.scss
index db03a606..c8744303 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -150,6 +150,20 @@ figcaption {
   --notificationColor: white;
 }
 
+#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;
@@ -159,11 +173,10 @@ figcaption {
 .banner-notification {
   position: relative;
   margin: 0;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
   background-color: var(--notificationBackground);
   color: var(--notificationColor);
-  padding: 20px 50px 20px 20px;
-  border-radius: 5px;
+  padding: 10px 50px 10px 20px;
 
   p {
     margin: 0;
@@ -189,7 +202,7 @@ figcaption {
   border-radius: 50%;
   position: absolute;
   right: 10px;
-  top: 10px;
+  top: 15px;
   border: none;
   padding: 0;
   box-shadow: none;
diff --git a/js/main.js b/js/main.js
index d9c35d7f..b89190e3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -110,7 +110,6 @@ function checkAndDisplayBanner() {
 
 // Closes the banner and save the cookie
 function closeBanner() {
-	console.log('closeBanner')
     const banner = document.querySelector('.banner-notifications');
     if (!banner) return;
 

From 2074ca37fcdb03eddb643ea7e37ade2044029c05 Mon Sep 17 00:00:00 2001
From: Anton Ilchuk <Anton.Ilchuk@forward.eu>
Date: Wed, 20 Sep 2023 10:25:42 +0100
Subject: [PATCH 3/6] Add a sidebar or top banner item on Interrupt (Now Top
 banner)

- banner background this hex code color:  #141845 and change the text color to white
---
 _data/_notifications-template.yml | 4 ++--
 _data/notifications.yml           | 4 ++--
 _sass/custom.scss                 | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_data/_notifications-template.yml b/_data/_notifications-template.yml
index 60a460b0..fc8bb2e5 100644
--- a/_data/_notifications-template.yml
+++ b/_data/_notifications-template.yml
@@ -1,6 +1,6 @@
 # Notification Banner example
 Instrumenting Sentry:
-    background: '#faaf4e'
-    textcolor: '#000'
+    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>
\ No newline at end of file
diff --git a/_data/notifications.yml b/_data/notifications.yml
index 2b15fd5e..8050d3f3 100644
--- a/_data/notifications.yml
+++ b/_data/notifications.yml
@@ -1,6 +1,6 @@
 # Notification Banner
 Instrumenting Sentry:
-    background: '#faaf4e'
-    textcolor: '#000'
+    background: '#141845'
+    textcolor: '#fff'
     title: Instrumenting Sentry
     description: '<i>Upcoming Panel: Best Practices for Safeguarding Your Connected Devices - Thursday, August 17, 2023 \| 9AM PT \| 12PM ET \| 6PM CET.</i>   <a href="https://hubs.la/Q01_vdqb0">RSVP Now.</a>'
\ No newline at end of file
diff --git a/_sass/custom.scss b/_sass/custom.scss
index c8744303..5a62a2ca 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -147,7 +147,7 @@ figcaption {
 
 :root {
   --notificationBackground: #faaf4e;
-  --notificationColor: white;
+  --notificationColor: #fff;
 }
 
 #nav-menu {

From 7ca7e457c18f4a9c048be4909f7fa20b54e18732 Mon Sep 17 00:00:00 2001
From: Anton Ilchuk <ilchuk.anton@gmail.com>
Date: Sat, 30 Sep 2023 23:44:25 +0100
Subject: [PATCH 4/6] Update notification-banner.html

---
 _includes/notification-banner.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/notification-banner.html b/_includes/notification-banner.html
index a15d2b65..da9b259e 100644
--- a/_includes/notification-banner.html
+++ b/_includes/notification-banner.html
@@ -1,7 +1,7 @@
 <ul class="banner-notifications">
   {% for notification in site.data.notifications %}
     <li class="banner-notification" style="--notificationBackground: {{ notification[1].background }}; --notificationColor: {{ notification[1].textcolor }};">
-      {{ notification[1].description | markdownify }}
+      <div style="text-align: center;">{{ notification[1].description | markdownify }}</div>
       <button class="banner-notification-close js-banner-notification-close"></button>
     </li>
   {% endfor %}

From bb45026259ed6083f96976dbb4d8c602108f7791 Mon Sep 17 00:00:00 2001
From: Anton Ilchuk <ilchuk.anton@gmail.com>
Date: Thu, 19 Oct 2023 23:20:47 +0100
Subject: [PATCH 5/6] - Updated the contents;

---
 _data/notifications.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_data/notifications.yml b/_data/notifications.yml
index 8050d3f3..a8459372 100644
--- a/_data/notifications.yml
+++ b/_data/notifications.yml
@@ -3,4 +3,4 @@ Instrumenting Sentry:
     background: '#141845'
     textcolor: '#fff'
     title: Instrumenting Sentry
-    description: '<i>Upcoming Panel: Best Practices for Safeguarding Your Connected Devices - Thursday, August 17, 2023 \| 9AM PT \| 12PM ET \| 6PM CET.</i>   <a href="https://hubs.la/Q01_vdqb0">RSVP Now.</a>'
\ No newline at end of file
+    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>'
\ No newline at end of file

From e1f1739131a6b00d736c252495235b721c70b610 Mon Sep 17 00:00:00 2001
From: Anton Ilchuk <ilchuk.anton@gmail.com>
Date: Thu, 19 Oct 2023 23:29:13 +0100
Subject: [PATCH 6/6] - added a missing space

---
 _data/notifications.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_data/notifications.yml b/_data/notifications.yml
index a8459372..f9e0320a 100644
--- a/_data/notifications.yml
+++ b/_data/notifications.yml
@@ -3,4 +3,4 @@ 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>'
\ No newline at end of file
+    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>'
\ No newline at end of file