Merge pull request #243 from hlxsites/ian-banner

Add optional announcement banner
hlxsites · Jul 26, 2024 · 346c3b8 · 346c3b8
2 parents 0e5a06d + 1ef8cc9
commit 346c3b8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/blocks/article/article.css b/blocks/article/article.css
@@ -270,6 +270,23 @@ article [data-docs-heading] span {
   align-items: center;
 }
 
+.announcement {
+  padding-bottom: var(--spacing--10);
+}
+
+.announcement p {
+  color: white;
+  background-color: #aa0006;
+  margin: 0;
+  padding: 15px 10px;
+}
+
+.announcement a {
+  color: white;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
 .article-actions {
   align-items: center;
   display: flex;

diff --git a/blocks/article/article.js b/blocks/article/article.js
@@ -48,7 +48,8 @@ const TEMPLATE = /* html */ `
               <i class="icon-share-alt"></i>
           </a>
       </div>
-      </div>
+    </div>
+    <slot name="announcement"></slot>     
       <div class="banner contain">
           <div class="banner-inner">
             <span class="banner-inner-desktop">
@@ -402,6 +403,16 @@ async function renderContent(block, res, rerender = false) {
   block.classList.remove(`source-${isGdoc ? 'adoc' : 'gdoc'}`);
   block.classList.add(`source-${isGdoc ? 'gdoc' : 'adoc'}`);
 
+  // Set announcement
+  const announceStr = getMetadata('announcement');
+  if (announceStr) {
+    const announce = document.createElement('div');
+    announce.classList.add('announcement');
+    announce.innerHTML = announceStr;
+    announce.setAttribute('slot', 'announcement');
+    fragment.append(announce);
+  }
+
   if (articleFound) {
     const { html, info } = res;
     const article = parseFragment(html);