From 921d31932c5c2a64127972ee25375345fb1836dd Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Thu, 3 Oct 2024 16:59:06 -0500
Subject: [PATCH 01/10] feature: add persistence to the ad banner with
 localStorage

---
 src/website/top-banner.js    | 101 +++++++++++++++++++++++++++++++++--
 views/website/navigation.pug |   8 +--
 2 files changed, 101 insertions(+), 8 deletions(-)

diff --git a/src/website/top-banner.js b/src/website/top-banner.js
index e8910a9e..2e02c74b 100644
--- a/src/website/top-banner.js
+++ b/src/website/top-banner.js
@@ -1,12 +1,105 @@
+const MESSAGE_BAR_STATE = {
+  CLOSED: "CLOSED",
+  OPEN: "OPEN",
+};
+
+const MESSAGE_BAR_STATUS = {
+  ACTIVE: "ACTIVE",
+  INACTIVE: "INACTIVE",
+};
+
+const messageBar = {
+  status: MESSAGE_BAR_STATUS.ACTIVE,
+  cta: {
+    message: "Missed DevDay24? Register for the Best of DevDay",
+    url: "https://pages.okta.com/2024-11-WBN-Best-of-Dev-Day_LP/",
+  },
+  id: {
+    key: "messageBar_id",
+    value: "BEST_OF_DEVDAY_2024",
+  },
+  state: {
+    key: "messageBar_state",
+  },
+};
+
+const closeMessageBar = () => {
+  const isMessageBarActive = messageBar.status === MESSAGE_BAR_STATUS.ACTIVE;
+
+  if (!isMessageBarActive) {
+    return;
+  }
+
+  window.localStorage.setItem(messageBar.state.key, MESSAGE_BAR_STATE.CLOSED);
+
+  document.querySelector(".top-banner-bg").classList.add("closed");
+  document.querySelector(".top-banner").classList.add("closed");
+  document.querySelector(".top-banner-spacer").classList.add("hide");
+  document.querySelector(".navbar").classList.remove("top-banner-open");
+};
+
+const renderTopBanner = () => {
+  document.querySelector(".top-banner-bg").classList.remove("closed");
+  document.querySelector(".top-banner").classList.remove("closed");
+  document.querySelector(".top-banner-spacer").classList.remove("hide");
+  document.querySelector(".navbar").classList.add("top-banner-open");
+};
+
+const loadBannerStateFromLocalStorage = () => {
+  let messageBarId = window.localStorage.getItem(messageBar.id.key);
+  let messageBarState = window.localStorage.getItem(messageBar.state.key);
+
+  if (!messageBarId) {
+    window.localStorage.setItem(messageBar.id.key, messageBar.id.value);
+    messageBarId = window.localStorage.getItem(messageBar.id.key);
+  }
+
+  if (!messageBarState) {
+    window.localStorage.setItem(messageBar.state.key, MESSAGE_BAR_STATE.OPEN);
+    messageBarState = window.localStorage.getItem(messageBar.state.key);
+  }
+
+  switch (messageBar.status) {
+    case MESSAGE_BAR_STATUS.ACTIVE: {
+      const isExistingCta = messageBarId === messageBar.id.value;
+
+      if (!isExistingCta) {
+        window.localStorage.setItem(messageBar.id.key, messageBar.id.value);
+        window.localStorage.setItem(
+          messageBar.state.key,
+          MESSAGE_BAR_STATE.OPEN
+        );
+
+        renderTopBanner();
+
+        return;
+      }
+
+      switch (messageBarState) {
+        case MESSAGE_BAR_STATE.OPEN: {
+          renderTopBanner();
+
+          return;
+        }
+        default: {
+          return;
+        }
+      }
+    }
+    default: {
+      return;
+    }
+  }
+};
+
 export function TopBanner() {
   document.addEventListener("DOMContentLoaded", function () {
+    loadBannerStateFromLocalStorage();
+
     document
       .querySelector(".close-top-banner")
       .addEventListener("click", () => {
-        document.querySelector(".top-banner-bg").classList.add("closed");
-        document.querySelector(".top-banner").classList.add("closed");
-        document.querySelector(".top-banner-spacer").classList.add("hide");
-        document.querySelector(".navbar").classList.remove("top-banner-open");
+        closeMessageBar();
       });
   });
 }
diff --git a/views/website/navigation.pug b/views/website/navigation.pug
index 5a7625b7..22c0de11 100644
--- a/views/website/navigation.pug
+++ b/views/website/navigation.pug
@@ -1,13 +1,13 @@
-.top-banner-bg
-.top-banner
+.top-banner-bg.closed
+.top-banner.closed
   .top-banner-container
     a(href="https://a0.to/jwt-io-feedback" target="_blank") Learn about the upcoming changes to jwt.io and share your feedback
       span(aria-hiden="true") →
     button.close-top-banner +
 
-.top-banner-spacer
+.top-banner-spacer.hide
 
-nav.navbar.closed.top-banner-open
+nav.navbar.closed
     .container
       .top-mobile
         .menu-trigger

From ee6c21c6871911f6c69442d75b48f7723cbb0254 Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:29:47 -0500
Subject: [PATCH 02/10] fix: smooth transition

---
 stylus/website/index.styl | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/stylus/website/index.styl b/stylus/website/index.styl
index 8883933a..7e8947ef 100644
--- a/stylus/website/index.styl
+++ b/stylus/website/index.styl
@@ -126,7 +126,7 @@ body {
 
   &.top-banner-open {
     margin-top: 5px;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
 
     +breakpoint('tablet') {
       margin-top: 48px;
@@ -1848,13 +1848,14 @@ footer {
   width: 100%;
   height: 48px;
   z-index: 100;
+  transition: all 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.1s linear;
+    transition: all 0.4s linear;
   }
 }
 
@@ -1875,13 +1876,14 @@ footer {
   left: 0;
   right: 0;
   overflow: hidden;
+  transition: all 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
   }
 
   .top-banner-container {
@@ -1947,6 +1949,6 @@ footer {
 
   &.hide {
     height: 0;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
   }
 }

From 939f21f4b9f0a3d6de955dae1f10f44455dd6667 Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Fri, 4 Oct 2024 11:01:53 -0500
Subject: [PATCH 03/10] fix: remove class not required

---
 views/website/navigation.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/website/navigation.pug b/views/website/navigation.pug
index 22c0de11..e03d69e7 100644
--- a/views/website/navigation.pug
+++ b/views/website/navigation.pug
@@ -7,7 +7,7 @@
 
 .top-banner-spacer.hide
 
-nav.navbar.closed
+nav.navbar
     .container
       .top-mobile
         .menu-trigger

From ede10130c9bc9a1c568a2da48ef9c5c14fc9538e Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:01:39 -0500
Subject: [PATCH 04/10] update copy for best of devday

---
 views/website/navigation.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/website/navigation.pug b/views/website/navigation.pug
index e03d69e7..ecbe813f 100644
--- a/views/website/navigation.pug
+++ b/views/website/navigation.pug
@@ -1,7 +1,7 @@
 .top-banner-bg.closed
 .top-banner.closed
   .top-banner-container
-    a(href="https://a0.to/jwt-io-feedback" target="_blank") Learn about the upcoming changes to jwt.io and share your feedback
+    a(href="https://pages.okta.com/2024-11-WBN-Best-of-Dev-Day_LP/" target="_blank") Missed DevDay24? Register for the Best of DevDay
       span(aria-hiden="true") →
     button.close-top-banner +
 

From d623c75a9fb8de058c00ccb6df2e47942cbc19bd Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:10:20 -0500
Subject: [PATCH 05/10] remove  not used properties

---
 src/website/top-banner.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/website/top-banner.js b/src/website/top-banner.js
index 2e02c74b..d9de17b2 100644
--- a/src/website/top-banner.js
+++ b/src/website/top-banner.js
@@ -10,10 +10,6 @@ const MESSAGE_BAR_STATUS = {
 
 const messageBar = {
   status: MESSAGE_BAR_STATUS.ACTIVE,
-  cta: {
-    message: "Missed DevDay24? Register for the Best of DevDay",
-    url: "https://pages.okta.com/2024-11-WBN-Best-of-Dev-Day_LP/",
-  },
   id: {
     key: "messageBar_id",
     value: "BEST_OF_DEVDAY_2024",

From de1649426dbef35486e7ada6246bc26ba46e1e2a Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:40:34 -0500
Subject: [PATCH 06/10] delete GH test action

---
 .github/workflows/test.yml | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
deleted file mode 100644
index 0879e03c..00000000
--- a/.github/workflows/test.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: CI
-
-on:
-  push:
-    paths-ignore:
-      - "views/website/libraries/*.json"
-  pull_request:
-    paths-ignore:
-      - "views/website/libraries/*.json"
-
-jobs:
-  test:
-    env:
-      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
-          node-version: '14'
-      - run: npm install
-      - run: npm test

From bd421821eb9f8594beb89a351b33863a4730cc85 Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Mon, 14 Oct 2024 13:12:30 -0500
Subject: [PATCH 07/10] move GH test action

---
 .github/inactive/test.yml | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 .github/inactive/test.yml

diff --git a/.github/inactive/test.yml b/.github/inactive/test.yml
new file mode 100644
index 00000000..0879e03c
--- /dev/null
+++ b/.github/inactive/test.yml
@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    paths-ignore:
+      - "views/website/libraries/*.json"
+  pull_request:
+    paths-ignore:
+      - "views/website/libraries/*.json"
+
+jobs:
+  test:
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: '14'
+      - run: npm install
+      - run: npm test

From a06ad5751dd5b3e0b76c749a87a57178e0068998 Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:02:28 -0500
Subject: [PATCH 08/10] fix: fixed height logo hero banner

---
 stylus/website/index.styl | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/stylus/website/index.styl b/stylus/website/index.styl
index 7e8947ef..a852a16f 100644
--- a/stylus/website/index.styl
+++ b/stylus/website/index.styl
@@ -503,10 +503,12 @@ body {
 
     img {
       width: 70px;
+      height: 70px;
       display: block;
 
       +breakpoint('desktop') {
         width: 80px;
+        height: 80px;
       }
     }
   }

From 70f369a13c900d724660d4b2633f95221d14cb89 Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:10:52 -0500
Subject: [PATCH 09/10] fix: fixed height logo Auth0 by Okta

---
 stylus/website/index.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stylus/website/index.styl b/stylus/website/index.styl
index a852a16f..5901ac38 100644
--- a/stylus/website/index.styl
+++ b/stylus/website/index.styl
@@ -299,6 +299,7 @@ body {
       position: absolute;
       right: 15px;
       top: 28px;
+      height: 32px;
     }
 
     +breakpoint('desktop') {

From 20d176e474fc6343472233f74f7a2b0ada6df50e Mon Sep 17 00:00:00 2001
From: Byron Motoche <116190812+byron-okta@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:57:04 -0500
Subject: [PATCH 10/10] fix: render the ttb banner smoothly when loading

---
 src/website/top-banner.js    |  6 ++++--
 stylus/website/index.styl    | 29 ++++++++++++++++++++++++++---
 views/website/layout.pug     |  3 ++-
 views/website/navigation.pug |  2 --
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/website/top-banner.js b/src/website/top-banner.js
index d9de17b2..84fa6304 100644
--- a/src/website/top-banner.js
+++ b/src/website/top-banner.js
@@ -30,14 +30,16 @@ const closeMessageBar = () => {
 
   document.querySelector(".top-banner-bg").classList.add("closed");
   document.querySelector(".top-banner").classList.add("closed");
-  document.querySelector(".top-banner-spacer").classList.add("hide");
+  document.querySelector(".content").classList.remove("top-banner-open");
+  document.querySelector(".top-mobile").classList.remove("top-banner-open");
   document.querySelector(".navbar").classList.remove("top-banner-open");
 };
 
 const renderTopBanner = () => {
   document.querySelector(".top-banner-bg").classList.remove("closed");
   document.querySelector(".top-banner").classList.remove("closed");
-  document.querySelector(".top-banner-spacer").classList.remove("hide");
+  document.querySelector(".content").classList.add("top-banner-open");
+  document.querySelector(".top-mobile").classList.add("top-banner-open");
   document.querySelector(".navbar").classList.add("top-banner-open");
 };
 
diff --git a/stylus/website/index.styl b/stylus/website/index.styl
index 5901ac38..cbe3099b 100644
--- a/stylus/website/index.styl
+++ b/stylus/website/index.styl
@@ -126,7 +126,7 @@ body {
 
   &.top-banner-open {
     margin-top: 5px;
-    transition: all 0.4s linear;
+    transition: margin-top 0.4s linear;
 
     +breakpoint('tablet') {
       margin-top: 48px;
@@ -141,11 +141,21 @@ body {
     border-bottom: 1px solid rgba(#4A4A4A, 0.6);
     clearfix();
     margin: 0 -15px;
+    padding-top: 0;
+    transition: padding-top 0.4s linear;
 
     +breakpoint('tablet') {
       border: none;
       margin: 0;
     }
+
+    &.top-banner-open {
+      padding-top: 50px;
+
+      +breakpoint('tablet') {
+        padding-top: 0;
+      }
+    }
   }
 
   .menu-trigger {
@@ -443,6 +453,19 @@ body {
   }
 }
 
+.content {
+  +breakpoint('tablet') {
+    padding-top: 0;
+    transition: padding-top 0.4s linear;
+  }
+
+  &.top-banner-open {
+    +breakpoint('tablet') {
+      padding-top: 50px;
+    }
+  }
+}
+
 // banner-jwt
 .banner-jwt {
   background: black;
@@ -1851,14 +1874,14 @@ footer {
   width: 100%;
   height: 48px;
   z-index: 100;
-  transition: all 0.4s linear;
+  transition: height 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.4s linear;
+    transition: height 0.4s linear;
   }
 }
 
diff --git a/views/website/layout.pug b/views/website/layout.pug
index 74f46239..d692a850 100644
--- a/views/website/layout.pug
+++ b/views/website/layout.pug
@@ -45,7 +45,8 @@ html(lang='en')
 
     include ./navigation.pug
 
-    block content
+    .content
+      block content
 
     footer
       .container
diff --git a/views/website/navigation.pug b/views/website/navigation.pug
index ecbe813f..fe93afb6 100644
--- a/views/website/navigation.pug
+++ b/views/website/navigation.pug
@@ -5,8 +5,6 @@
       span(aria-hiden="true") →
     button.close-top-banner +
 
-.top-banner-spacer.hide
-
 nav.navbar
     .container
       .top-mobile