From 563ae49ba822b080d0a2b2ede9aa15f58226c31b Mon Sep 17 00:00:00 2001 From: Byron Motoche <116190812+byron-okta@users.noreply.github.com> Date: Wed, 24 Jul 2024 13:26:53 -0500 Subject: [PATCH 1/9] feat: enable ttb to gather feedback from community (#701) --- src/website/index.js | 2 ++ src/website/introduction/index.js | 2 ++ src/website/libraries/index.js | 2 ++ views/website/navigation.pug | 11 ++++++++++- 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/website/index.js b/src/website/index.js index cb849342..d86eb9d2 100644 --- a/src/website/index.js +++ b/src/website/index.js @@ -11,6 +11,7 @@ import { shareJwtTextElement, } from "./dom-elements.js"; import { CCPAModal } from "./ccpa-modal.js"; +import { TopBanner } from "./top-banner.js"; import queryString from "querystring"; @@ -55,3 +56,4 @@ setupHighlighting(); setupJwtCounter(); setupShareJwtButton(shareJwtButton, shareJwtTextElement); CCPAModal(); +TopBanner(); diff --git a/src/website/introduction/index.js b/src/website/introduction/index.js index f0076d8f..c75a1b41 100644 --- a/src/website/introduction/index.js +++ b/src/website/introduction/index.js @@ -2,9 +2,11 @@ import { CCPAModal } from "../ccpa-modal.js"; import { setupJwtCounter } from "../counter.js"; import { setupHighlighting } from "../highlighting.js"; import { setupNavbar } from "../navbar.js"; +import { TopBanner } from "../top-banner.js"; // Initialization setupNavbar(); setupHighlighting(); setupJwtCounter(); CCPAModal(); +TopBanner(); diff --git a/src/website/libraries/index.js b/src/website/libraries/index.js index 81c2ad9f..e1aaa352 100644 --- a/src/website/libraries/index.js +++ b/src/website/libraries/index.js @@ -2,6 +2,7 @@ import { CCPAModal } from "../ccpa-modal.js"; import { setupJwtCounter } from "../counter.js"; import { setupHighlighting } from "../highlighting.js"; import { setupNavbar } from "../navbar.js"; +import { TopBanner } from "../top-banner.js"; import { setupLibraries } from "./libraries.js"; // Initialization @@ -10,3 +11,4 @@ setupLibraries(); setupHighlighting(); setupJwtCounter(); CCPAModal(); +TopBanner(); diff --git a/views/website/navigation.pug b/views/website/navigation.pug index 1388f24c..4b01443a 100644 --- a/views/website/navigation.pug +++ b/views/website/navigation.pug @@ -1,4 +1,13 @@ -nav.navbar.closed +.top-banner-bg +.top-banner + .top-banner-container + a(href="https://a0.to/jwt-io-feedback" target="_blank") Help us shape the future of jwt.io! Learn more about upcoming changes and share feedback. + span(aria-hiden="true") → + button.close-top-banner + + +.top-banner-spacer + +nav.navbar.closed.top-banner-open .container .top-mobile .menu-trigger From 59f098d576b9d77a069c5f4a6c0bf4391bdc2f61 Mon Sep 17 00:00:00 2001 From: Byron Motoche <116190812+byron-okta@users.noreply.github.com> Date: Thu, 25 Jul 2024 09:09:55 -0500 Subject: [PATCH 2/9] fix: update ttb copy jwt.io feedback (#703) --- 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 4b01443a..5a7625b7 100644 --- a/views/website/navigation.pug +++ b/views/website/navigation.pug @@ -1,7 +1,7 @@ .top-banner-bg .top-banner .top-banner-container - a(href="https://a0.to/jwt-io-feedback" target="_blank") Help us shape the future of jwt.io! Learn more about upcoming changes and share feedback. + 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 + 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 3/9] 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 4/9] 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 5/9] 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 6/9] 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 7/9] 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 8/9] 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 9/9] 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