DOC-1069 Adds the ability to set announcements on the pages too (#249)

* Adds the ability to set announcements on the pages too

* adds the ability to create announcements domain-wide

* modify to work with page components

* remove domain-wide implementation

* enable page/product/site announcements

* gets key from the data attribute

* Allow users to close site-wide, product-wide, and page-level announcements separately

---------

Co-authored-by: JakeSCahill <[email protected]>

Author: Deflaimun

src/css/bloblang-playground.css

@@ -42,17 +42,19 @@
 }
 
 .bloblang-playground .banner-container {
-  display: flex;
+  display: none;
   position: relative;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
 }
 
-.bloblang-playground .banner-container .close-button {
+.bloblang-playground .banner-container .close {
   position: absolute;
   top: 10px;
   right: 10px;
+  margin-top: 0;
+  padding: 0;
   background: transparent;
   border: none;
   font-size: 20px;
@@ -61,7 +63,7 @@
   transition: color 0.3s, transform 0.2s;
 }
 
-.bloblang-playground .banner-container .close-button:hover {
+.bloblang-playground .banner-container .close:hover {
   color: #000000;
   transform: scale(1.2);
 }
@@ -345,7 +347,7 @@ html[data-theme=dark] .bloblang-playground .button:hover {
 }
 
 @media (max-width: 600px) {
-  .bloblang-playground .banner-container .close-button {
+  .bloblang-playground .banner-container .close {
     top: 5px;
     right: 5px;
     font-size: 18px;

src/partials/announcement-bar.hbs

@@ -1,4 +1,20 @@
-{{#if (and site.keys.announcement (ne page.component.name 'api'))}}
-<div class="announcement-bar" role="banner" id="announcement"><div class="announcement-content"> {{site.keys.announcementText}} <a href="{{{site.keys.announcementLink}}}">{{site.keys.announcementLinkText}}</a>
-</div><button id="close-announcement" type="button" aria-label="close" class="close"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div>
-{{/if}}
+{{#if (and (ne page.component.name 'api') (or page.attributes.announcement page.component.latest.asciidoc.attributes.announcement site.keys.announcement))}}
+<div class="announcement-bar" role="banner" id="announcement"
+     data-announcement-key="{{#if page.attributes.announcement}}page-{{page.component.name}}-{{page.relativeSrcPath}}{{else if page.component.latest.asciidoc.attributes.announcement}}component-{{page.component.name}}{{else if site.keys.announcement}}site-global{{/if}}">
+  <div class="announcement-content">
+    {{#if page.attributes.announcement}}
+      {{page.attributes.announcement-text}}
+      <a href="{{{page.attributes.announcement-link}}}">{{page.attributes.announcement-link-text}}</a>
+    {{else if page.component.latest.asciidoc.attributes.announcement}}
+      {{page.component.latest.asciidoc.attributes.announcement-text}}
+      <a href="{{{page.component.latest.asciidoc.attributes.announcement-link}}}">{{page.component.latest.asciidoc.attributes.announcement-link-text}}</a>
+    {{else if site.keys.announcement}}
+      {{site.keys.announcementText}}
+      <a href="{{{site.keys.announcementLink}}}">{{site.keys.announcementLinkText}}</a>
+    {{/if}}
+  </div>
+  <button id="close-announcement" type="button" aria-label="close" class="close">
+    <svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg>
+  </button>
+</div>
+{{/if}}

src/partials/bloblang-playground.hbs

@@ -100,7 +100,7 @@ function initializeAceEditor(editorId, mode, readOnly = false, initialValue = ''
   editor.setTheme('ace/theme/github');
   editor.session.setMode(mode);
   editor.setReadOnly(readOnly);
-  editor.setValue(prettifyJSON(initialValue), 1);
+  editor.setValue(initialValue, 1);
   editor.session.setTabSize(TAB_SIZE);
   editor.session.setUseSoftTabs(true);
   editor.setOptions({

src/partials/bloblang-signup-form.hbs

@@ -1,5 +1,5 @@
 <div class="banner-container" id="bloblang-banner">
-  <button class="close-button" id="dismiss-banner" aria-label="Dismiss">&times;</button>
+  <button class="close" id="dismiss-banner" aria-label="Dismiss">&times;</button>
   <p>Sign up for updates about new features in the playground:</p>
   <form  data-netlify="true" name="bloblang-emails" method="POST" netlify-honeypot="bot-field" id="bloblang-form" class="banner-form">
     <input type="email" name="email" id="bloblang-email" placeholder="Enter your email..." required />
@@ -10,16 +10,6 @@
 document.addEventListener("DOMContentLoaded", () => {
   const banner = document.getElementById("bloblang-banner");
   const form = document.getElementById("bloblang-form");
-  const dismissButton = document.getElementById("dismiss-banner");
-  if (sessionStorage.getItem("bloblangBannerDismissed") === "true" && banner) {
-    banner.style.display = "none";
-  }
-    if (dismissButton) {
-    dismissButton.addEventListener("click", () => {
-      banner.style.display = "none";
-      sessionStorage.setItem("bloblangBannerDismissed", "true");
-    });
-  }
   if (form) {
     form.addEventListener("submit", (event) => {
       event.preventDefault();

src/partials/head.hbs

@@ -1,27 +1,40 @@
-<!-- Inline CSS to Hide Announcement Bar Initially -->
 <style>
   .announcement-bar {
     display: none;
     height: 0;
   }
+  .bloblang-playground .banner-container {
+    display: none;
+  }
 </style>
 <script>
   (function() {
     'use strict';
-    function handleBanner(bannerId, sessionKey) {
+    function handleBanner(bannerId, sessionKey, announcementType) {
       const banner = document.getElementById(bannerId);
       if (!banner) return;
 
-      const hasSeenBanner = window.sessionStorage.getItem(sessionKey) || false;
+      const storageKey = `${sessionKey}-${announcementType}`; // Use the announcement type to differentiate between different banners
+      const hasSeenBanner = window.sessionStorage.getItem(storageKey) || false;
       if (hasSeenBanner) {
+        if (announcementType !== 'bloblang') {
+          document.documentElement.style.setProperty('--announcement-bar-height', '0px');
+          document.documentElement.style.setProperty('--announcement-bar-height--desktop', '0px');
+        }
         banner.remove();
       } else {
+          if (announcementType !== 'bloblang') {
+            document.documentElement.style.setProperty('--announcement-bar-height', '50px');
+            document.documentElement.style.setProperty('--announcement-bar-height--desktop', '30px');
+          }
         banner.style.display = 'flex';
-        const closeButton = banner.querySelector('.close-button');
+        const closeButton = banner.querySelector('.close');
         if (closeButton) {
           closeButton.addEventListener('click', function () {
+            document.documentElement.style.setProperty('--announcement-bar-height', '0px');
+            document.documentElement.style.setProperty('--announcement-bar-height--desktop', '0px');
             banner.remove();
-            window.sessionStorage.setItem(sessionKey, 'true');
+            window.sessionStorage.setItem(storageKey, 'true');
           });
         }
       }
@@ -32,15 +45,11 @@
       (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
 
     document.documentElement.setAttribute('data-theme', initialTheme);
-
-    document.addEventListener('DOMContentLoaded', function() {
-      handleBanner('announcement', 'announcementClosed');
-      handleBanner('bloblang-banner', 'bloblangBannerDismissed');
-    });
     // This script and the styles must be in the head to avoid flashing when the default white background changes to dark https://github.com/redpanda-data/docs-ui/pull/174
     window.addEventListener('DOMContentLoaded', function() {
       const switchButton = document.getElementById('switch-theme');
       const announcementBar = document.getElementById('announcement');
+      let announcementLevel = '';
       if (switchButton) {
         setTheme(initialTheme);  // Apply initial theme on load
         switchButton.addEventListener('click', function() {
@@ -51,24 +60,11 @@
           setTheme(newTheme);
         });
       }
-      if (!announcementBar) return;
-      const hasSeenAnnouncement = window.sessionStorage.getItem('announcementClosed') || window.localStorage.getItem('announcementClosed') || false;
-      if (!hasSeenAnnouncement) {
-        document.documentElement.style.setProperty('--announcement-bar-height', '50px');
-        document.documentElement.style.setProperty('--announcement-bar-height--desktop', '30px');
-        announcementBar.style.display = 'flex';
-      } else {
-        document.documentElement.style.setProperty('--announcement-bar-height', '0px');
-        document.documentElement.style.setProperty('--announcement-bar-height--desktop', '0px');
+      if (announcementBar) {
+        announcementLevel = announcementBar.getAttribute('data-announcement-key');
+        handleBanner('announcement', 'announcementClosed', announcementLevel);
       }
-      var closeButton = document.getElementById('close-announcement');
-      if (!closeButton) return;
-      closeButton.addEventListener('click', function () {
-        document.documentElement.style.setProperty('--announcement-bar-height', '0px');
-        document.documentElement.style.setProperty('--announcement-bar-height--desktop', '0px');
-        announcementBar.remove();
-        window.sessionStorage.setItem('announcementClosed', 'true');
-      });
+      handleBanner('bloblang-banner', 'bloblangBannerDismissed', 'bloblang');
     });
   function setTheme(theme) {
     const rapidocEl = document.getElementById('api');