diff --git a/_data/_notifications-template.yml b/_data/_notifications-template.yml new file mode 100644 index 00000000..fc8bb2e5 --- /dev/null +++ b/_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. Register now. \ No newline at end of file diff --git a/_data/notifications.yml b/_data/notifications.yml new file mode 100644 index 00000000..f9e0320a --- /dev/null +++ b/_data/notifications.yml @@ -0,0 +1,6 @@ +# Notification Banner +Instrumenting Sentry: + background: '#141845' + textcolor: '#fff' + title: Instrumenting Sentry + description: 'Excited to introduce Memfault’s new sandbox demo! Try it out for yourself' \ No newline at end of file diff --git a/_includes/notification-banner.html b/_includes/notification-banner.html new file mode 100644 index 00000000..da9b259e --- /dev/null +++ b/_includes/notification-banner.html @@ -0,0 +1,8 @@ + 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 @@ {% include menu.html %} + + {% include notification-banner.html %} + diff --git a/_layouts/homepage.html b/_layouts/homepage.html index 7542b459..0dab66cb 100644 --- a/_layouts/homepage.html +++ b/_layouts/homepage.html @@ -9,6 +9,9 @@ {% include menu.html %} + + {% include notification-banner.html %} + diff --git a/_layouts/split-view.html b/_layouts/split-view.html index 358388c6..0875ae32 100644 --- a/_layouts/split-view.html +++ b/_layouts/split-view.html @@ -9,6 +9,9 @@ {% include menu.html %} + + {% include notification-banner.html %} + @@ -34,7 +37,7 @@ {% include pagination.html %} - + diff --git a/_sass/custom.scss b/_sass/custom.scss index 200c2073..5a62a2ca 100644 --- a/_sass/custom.scss +++ b/_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%) ; + } +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 6eefd113..b89190e3 100644 --- a/js/main.js +++ b/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(); \ No newline at end of file +searchScroll(); + +window.addEventListener('load', checkAndDisplayBanner);