Merge branch 'main' into 93-hero-slides

blocks/community-directory/community-directory.js

@@ -15,7 +15,7 @@ export default async function decorate(block) {
   const list = document.createElement('div');
   list.classList.add('cards-list');
   index.data.forEach((community) => {
-    const communityName = community['LiveBy Community'];
+    const communityName = community['liveby-community'];
 
     const card = document.createElement('div');
     card.classList.add('cards-item');

blocks/hero/hero.css

@@ -62,6 +62,25 @@ main .section.full-width > .hero-wrapper {
   padding: 0 16px;
 }
 
+.hero.block.keep-scale {
+  display: block;
+  height: auto;
+}
+
+.hero.block.keep-scale > div{
+  padding: 0;
+}
+
+.hero.block.keep-scale .images {
+  position: relative;
+  height: auto;
+}
+
+.hero.block.keep-scale .images picture {
+  position: relative;
+  height: auto;
+}
+
 .hero.block > div .content {
   display: flex;
   height: 100%;
@@ -82,6 +101,30 @@ main .section.full-width > .hero-wrapper {
   color: var(--white);
 }
 
+.hero.block > .row > .headline {
+  color: var(--white);
+  font-size: var(--body-font-size-m);
+  line-height: 23px;
+  padding-left: 16px;
+}
+
+.hero.block > .row > .headline > .title {
+  letter-spacing: 1.38px;
+  text-transform: uppercase;
+  margin-bottom: 5px;
+}
+
+.hero.block > .row > .headline > .desc {
+  letter-spacing: 1.38px;
+  margin-bottom: 5px;
+}
+
+.hero.block > .row > .headline a {
+  background-color: transparent;
+  border: 1px solid var(--white);
+  color: var(--white);
+}
+
 @media screen and (min-width: 600px) {
   .hero.block {
     height: 620px;
@@ -113,5 +156,22 @@ main .section.full-width > .hero-wrapper {
   .hero.block > div {
     margin-top: 100px;
   }
-}
 
+  .hero.block.keep-scale > div {
+    margin-top: unset;
+  }
+
+  .hero.block > .row {
+    display: flex;
+  }
+
+  .hero.block > .row > .content {
+    flex: 2;
+  }
+
+  .hero.block > .row > .headline {
+    flex: 1;
+    margin-top: 150px;
+    margin-left: 20px;
+  }
+}

blocks/hero/hero.js

@@ -56,8 +56,36 @@ export default async function decorate(block) {
     }
   }
 
+  const headline = block.querySelectorAll('div.hero > div > div');
+  const validInnerHtml = new Set(['headline', 'description', 'cta']);
+  const filteredList = Array.from(headline)
+    .filter((node) => validInnerHtml.has(node.innerHTML.trim().toLowerCase()));
+
+  const headlineWrapper = document.createElement('div');
+  if (filteredList.length) {
+    headlineWrapper.classList.add('headline');
+    filteredList.forEach((div) => {
+      const nextElement = div.nextElementSibling;
+      if (div.innerHTML.toLowerCase() === 'headline') nextElement.classList.add('title');
+      else if (div.innerHTML.toLowerCase() === 'description') nextElement.classList.add('desc');
+      else if (div.innerHTML.toLowerCase() === 'cta') {
+        const button = document.createElement('p');
+        button.innerHTML = nextElement.innerHTML;
+        button.classList.add('button-container');
+        div.parentNode.replaceChild(button, nextElement);
+      }
+      headlineWrapper.append(nextElement);
+    });
+  }
+
   const wrapper = document.createElement('div');
-  wrapper.append(images, contentWrapper);
+  wrapper.append(images);
+  // don't add contentWrapper if it's empty
+  if (contentWrapper.innerHTML !== '') wrapper.append(contentWrapper);
+  if (headlineWrapper.hasChildNodes()) {
+    wrapper.classList.add('row');
+    wrapper.append(headlineWrapper);
+  }
   block.replaceChildren(wrapper);
 
   if (pictures.length > 1) {

blocks/look-ahead-list/look-ahead-list.css

@@ -0,0 +1,106 @@
+.section.look-ahead-list-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.look-ahead-list-container > .default-content-wrapper {
+  text-align: center;
+}
+
+.look-ahead-list-container > .look-ahead-list-wrapper {
+  text-align: center;
+}
+
+.look-ahead-list .dropdown {
+  display: flex;
+  text-align: center;
+  border: 1px solid var(--primary-color);
+}
+
+.look-ahead-list .dropdown:focus-within {
+  box-shadow: 0 0 0 1px rgb(38 132 255);
+}
+
+.look-ahead-list {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.look-ahead-list input {
+  width: 97%;
+  padding: 5px 0 5px 20px;
+  font-size: 16px;
+  text-transform: uppercase;
+  border: 0;
+}
+
+.look-ahead-list input:focus {
+  border: 0;
+  outline: none;
+}
+
+.look-ahead-list > div::after {
+  position: relative;
+  top: 8pt;
+  content: "";
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  margin-right: 8px;
+  border-right: 2px solid #ccc;
+  border-top: 2px solid #ccc;
+  transform: rotate(45deg);
+}
+
+.look-ahead-list > div:hover::after {
+  border-right: 2px solid #999;
+  border-top: 2px solid #999;
+}
+
+/* Style for the dropdown content */
+.look-ahead-list .dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  box-shadow: 0 0 0 1px rgba(0 0 0 / 10%), 0 4px 11px rgba(0 0 0 / 10%);
+  max-height: 200px;
+  width: 100%;
+  overflow-y: auto;
+  top: 39px;
+  z-index: 1;
+}
+
+/* Style for the dropdown options */
+.look-ahead-list .dropdown-content a {
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Style for the selected option */
+.look-ahead-list .dropdown-content a:hover {
+  background-color: var(--color-tertiary);
+}
+
+@media (min-width: 992px) {
+  .section.look-ahead-list-container {
+    width: 36%;
+  }
+
+  .section.look-ahead-list-container.community-directory-container .look-ahead-list {
+    max-width: 228px;
+  }
+
+  .section.look-ahead-list-container.community-directory-container {
+    width: 100%;
+  }
+
+  .section .look-ahead-list-wrapper {
+    text-align: left;
+    padding-left: 10px;
+  }
+}

blocks/look-ahead-list/look-ahead-list.js

@@ -0,0 +1,86 @@
+import { readBlockConfig } from '../../scripts/aem.js';
+
+// Get the communities from the community index
+let queryIndex;
+async function getQueryIndex() {
+  if (!queryIndex) {
+    const resp = await fetch('/communities/query-index.json');
+    if (resp.ok) {
+      queryIndex = await resp.json();
+    }
+  }
+  return queryIndex;
+}
+
+// Filter communties based on input control
+function filterFunction() {
+  let i;
+  const input = document.getElementById('myInput');
+  const filter = input.value.toUpperCase();
+  const div = document.getElementById('myDropdown');
+  const a = div.getElementsByTagName('a');
+  for (i = 0; i < a.length;) {
+    const txtValue = a[i].textContent || a[i].innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      a[i].style.display = '';
+    } else {
+      a[i].style.display = 'none';
+    }
+    i += 1;
+  }
+}
+
+// Show/hide the dropdown when clicking on the input field
+function dropClick(event) {
+  if (event.target.closest('.dropdown') !== null) {
+    document.getElementById('myDropdown').style.display = 'block';
+  }
+}
+
+// Close the dropdown if the user clicks outside of it
+function closeDropdown(event) {
+  let i;
+  if (!event.target.matches('#myInput')) {
+    const dropdowns = document.getElementsByClassName('dropdown-content');
+    for (i = 0; i < dropdowns.length;) {
+      const openDropdown = dropdowns[i];
+      if (openDropdown.style.display === 'block') {
+        openDropdown.style.display = 'none';
+      }
+      i += 1;
+    }
+  }
+}
+
+export default async function decorate(block) {
+  const config = readBlockConfig(block);
+  block.innerHTML = '';
+  const index = await getQueryIndex();
+
+  const list = document.createElement('div');
+  list.classList.add('dropdown');
+
+  const txtInput = document.createElement('input');
+  txtInput.type = 'text';
+  txtInput.placeholder = config.placeholder;
+  txtInput.id = 'myInput';
+  txtInput.addEventListener('input', filterFunction);
+  block.addEventListener('click', dropClick);
+  list.append(txtInput);
+
+  const dropContent = document.createElement('div');
+  dropContent.classList.add('dropdown-content');
+  dropContent.id = 'myDropdown';
+
+  index.data.forEach((community) => {
+    const communityName = community['liveby-community'];
+    const listItem = document.createElement('a');
+    listItem.href = community.path;
+    listItem.innerText = `${communityName.split(',')[0]} (${communityName})`;
+    dropContent.append(listItem);
+  });
+  list.append(dropContent);
+  block.append(list);
+}
+
+window.addEventListener('click', closeDropdown);

helix-query.yaml

@@ -0,0 +1,44 @@
+version: 1
+auto-generated: true
+indices:
+  default:
+    include:
+      - /**
+    exclude:
+      - /drafts/**
+      - /tools/**
+      - /seach/**
+    target: /query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+  communities:
+    include:
+      - /communities/*
+    target: /communities/query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      liveby-community:
+        select: head > meta[name="liveby-community"]
+        value: attribute(el, "content")