Labs

blocks/labs/labs.css

@@ -0,0 +1,15 @@
+.labs {
+  padding: 10px 16px;
+  margin-bottom: 16px;
+  background-color: #e6118a;
+  color: #fff;
+  border-radius: var(--image-border-radius-l);
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+}
+
+.labs .header {
+  font-weight: 700;
+  font-size: var(--type-heading-m-size);
+  text-transform: uppercase;
+}

blocks/labs/labs.js

@@ -0,0 +1,7 @@
+export default function decorate(block) {
+  const header = document.createElement('div');
+  header.className = 'header';
+  header.textContent = 'Early-access technology';
+  block.innerHTML = `Ask us about this feature from the ${block.textContent.trim()} labs on your Slack channel!`;
+  block.prepend(header);
+}

helix-query.yaml

@@ -22,7 +22,7 @@ indices:
           parseTimestamp(headers['last-modified'], 'ddd, DD MMM YYYY hh:mm:ss GMT')
   docpages:
     target: /docpages-index
-    include: 
+    include:
       - /docs/**
       - /developer/**
     properties:
@@ -38,6 +38,10 @@ indices:
         select: head > meta[name="description"]
         value: |
           attribute(el, 'content')
+      labs:
+        select: head > meta[name="labs"]
+        value: |
+          attribute(el, 'content')
       lastModified:
         select: none
         value: |
@@ -46,5 +50,3 @@ indices:
         select: main
         value: |
           textContent(el)
-
-

scripts/scripts.js

@@ -514,7 +514,7 @@
   // get all links that end with .svg
   const svgLinks = main.querySelectorAll('div.default-content-wrapper a[href$=".svg"]');
   Array.from(svgLinks).forEach((svg) => {
     console.log(svg.parentElement.parentElement);
     const svgHref = new URL(svg.href).pathname;
 
     const svgEl = createTag('img', {
@@ -574,6 +574,20 @@
 
   await window.hlx.plugins.run('loadEager');
 
+  // labs banner
+  const labs = getMetadata('labs');
+  if (labs) {
+    const labsBanner = buildBlock('labs', labs);
+    const h1 = document.querySelector('h1');
+    if (h1) {
+      // insert above title
+      h1.parentElement.insertBefore(labsBanner, h1);
+    } else {
+      // insert at top of page
+      document.querySelector('main > div').append(labsBanner);
+    }
+  }
+
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);