Merge branch 'main' into intern-experiment-v2

blocks/card-list/card-list.css

@@ -88,4 +88,18 @@
 
 .card-list-wrapper .cards .cards-card-details {
   overflow-x: hidden;
+}
+
+/* card cateogry filtering */
+.cards-wrapper .category-filter-wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  justify-content: start;
+  align-items: center;
+}
+
+.cards-wrapper .category-filter-wrapper select {
+  font-size: var(--type-body-l-size);
+  max-width: 20rem;
 }

blocks/card-list/card-list.js

@@ -80,36 +80,40 @@ async function decorateCardListByUrl(block) {
   if (blockPartyJson.data && (blockPartyJson.data.length > 0)) {
     // create a 2D array to pass to the cards block
     const cardsArr = [];
-    let cardsRow = [];
-    const blockPartyList = blockPartyJson.data.filter((row) => row.approved === 'true');
-    await blockPartyList.forEach(async (row, i) => {
-      // limit each row to only 2 columns, otherwise create a new row
-      if ((i !== 0) && (i % 2) === 0) {
-        cardsArr.push(cardsRow);
-        cardsRow = [];
-      }
-      let githubName = '';
-      if (row.githubProfile && (row.permission === 'on')) {
-        const ghProfile = stripTags(row.githubProfile).split('/');
-        const ghUsername = ghProfile[ghProfile.length - 1];
-        if (ghUsername) {
-          githubName = `<code>${ghUsername}</code>`;
-        } else {
-          githubName = `<code>${stripTags(row.githubProfile)}</code>`;
+    const cardsRow = [];
+    const categories = new Set();
+    blockPartyJson.data
+      .filter((row) => row.approved === 'true')
+      .reverse() // sort newest entries first, unless highlighted
+      .sort((a, b) => {
+        if (a.highlight && !b.highlight) return -1;
+        if (!a.highlight && b.highlight) return 1;
+        return 0;
+      }).forEach((row) => {
+        let githubName = '';
+        if (row.githubProfile && (row.permission === 'on')) {
+          const ghProfile = stripTags(row.githubProfile).split('/');
+          const ghUsername = ghProfile[ghProfile.length - 1];
+          if (ghUsername) {
+            githubName = `<code>${ghUsername}</code>`;
+          } else {
+            githubName = `<code>${stripTags(row.githubProfile)}</code>`;
+          }
         }
-      }
-      let cardDetails = `<p class="block-party-card-title"><em>${stripTags(row.category)}</em>${githubName}</p>`;
-      cardDetails += `<p><a href="${stripTags(row.githubUrl)}" target="_blank">${stripTags(row.title)}</a></p>`;
-      if (row.showcaseUrl) {
-        cardDetails += `<p><a href="${stripTags(row.showcaseUrl)}" target="_blank">Preview</a></p>`;
-      }
-      cardDetails += `${truncate(urlify(stripTags(row.description), 'b', 'i', 'u', 'p', 'br'), 25)}`;
-      cardsRow.push(cardDetails);
-    });
+        categories.add(row.category);
+        let cardDetails = `<p class="block-party-card-title"><em>${stripTags(row.category)}</em>${githubName}</p>`;
+        cardDetails += `<p><a href="${stripTags(row.githubUrl)}" target="_blank">${stripTags(row.title)}</a></p>`;
+        if (row.showcaseUrl) {
+          cardDetails += `<p><a href="${stripTags(row.showcaseUrl)}" target="_blank">Preview</a></p>`;
+        }
+        cardDetails += `${truncate(urlify(stripTags(row.description), 'b', 'i', 'u', 'p', 'br'), 25)}`;
+        cardsRow.push(cardDetails);
+      });
     cardsArr.push(cardsRow);
 
     // build out cards using the existing cards block
     const cardsBlock = buildBlock('cards', cardsArr);
+    cardsBlock.classList.add('two');
     // replace existing block with the new cards block
     const blockWrapper = block.parentElement;
     block.remove();
@@ -118,6 +122,46 @@ async function decorateCardListByUrl(block) {
     decorateBlock(cardsBlock);
     await loadBlock(cardsBlock);
 
+    const categoryFilter = document.createElement('div');
+    categoryFilter.classList.add('category-filter-wrapper');
+    const categoryFilterSelect = document.createElement('select');
+    categoryFilterSelect.id = 'category-filter';
+    categoryFilterSelect.classList.add('category-filter');
+    categoryFilter.append(categoryFilterSelect);
+    [...categories].sort((a, b) => {
+      if (a.toLowerCase() === 'other') return 1;
+      if (b.toLowerCase() === 'other') return -1;
+      return a.localeCompare(b);
+    }).forEach((category) => {
+      const option = document.createElement('option');
+      option.value = category;
+      option.text = category;
+      categoryFilterSelect.append(option);
+    });
+    const optionAll = document.createElement('option');
+    optionAll.value = '';
+    optionAll.text = 'All';
+    categoryFilterSelect.prepend(optionAll);
+
+    categoryFilterSelect.addEventListener('change', () => {
+      const selectedCategory = categoryFilterSelect.value;
+      cardsBlock.querySelectorAll('.cards-card').forEach((card) => {
+        const cardCategory = card.querySelector('.block-party-card-title em').textContent;
+        if (selectedCategory === '' || cardCategory === selectedCategory) {
+          card.classList.remove('hidden');
+        } else {
+          card.classList.add('hidden');
+        }
+      });
+    });
+
+    const categoryFilterLabel = document.createElement('label');
+    categoryFilterLabel.htmlFor = 'category-filter';
+    categoryFilterLabel.textContent = 'Category';
+    categoryFilter.prepend(categoryFilterLabel);
+
+    cardsBlock.before(categoryFilter);
+
     // add listener to hide/show the description overflow dialog
     const extras = blockWrapper.querySelectorAll('.cards-card span.extra');
     extras.forEach((el) => {
@@ -137,6 +181,6 @@ export default async function decorate(block) {
   if (block.classList.contains('image-card-listing')) {
     decorateCardListByListElement(block);
   } else {
-    decorateCardListByUrl(block);
+    await decorateCardListByUrl(block);
   }
 }

blocks/cards/cards.js

@@ -10,7 +10,7 @@ export default function decorate(block) {
   const classes = ['one', 'two', 'three', 'four', 'five'];
   const row = block.children[0];
   if (row) {
-    block.classList.add(classes[row.children.length - 1]);
+    if (classes[row.children.length - 1]) block.classList.add(classes[row.children.length - 1]);
   }
   block.querySelectorAll(':scope > div > div').forEach((cell) => {
     if (cell.firstChild) {

blocks/feed/feed.css

@@ -50,6 +50,15 @@
   line-height: var(--type-body-s-lh);
 }
 
+.feed.recent .desc {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 @media screen and (min-width: 768px) {
   .feed.recent > div > div {
     grid-template-columns: 1fr 1fr 1fr;

blocks/labs/labs.css

@@ -13,3 +13,18 @@
   font-size: var(--type-heading-m-size);
   text-transform: uppercase;
 }
+
+.labs a {
+  color: #fff;
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.home-template .labs {
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: -2em;
+  z-index: 10;
+  position: relative;
+  text-align: center;
+}

blocks/labs/labs.js

@@ -1,8 +1,15 @@
 export default function decorate(block) {
   const header = document.createElement('div');
   header.className = 'header';
-  const parts = block.innerText.split(/:/)
-    .map((p) => p.trim());
+  let parts;
+  if (block.querySelector('h1, h2, h3, h4, h5, h6')) {
+    parts = [block.querySelector('h1, h2, h3, h4, h5, h6').innerText];
+    block.querySelector('h1, h2, h3, h4, h5, h6').remove();
+    parts.push(block.innerHTML);
+  } else {
+    parts = block.innerText.split(/:/)
+      .map((p) => p.trim());
+  }
   if (parts.length === 1) {
     parts.unshift('Early-access technology');
     parts[1] = `Ask us about this feature from the ${parts[1]} labs on your Slack channel!`;

blocks/releases/releases.css

@@ -22,11 +22,18 @@
     background-color: #F4F8CF;
 }
 
-
 .releases .release-helix-cli {
     background-color: #FFEBD4;
 }
 
+.releases .release-aem-lib {
+    background-color: #CFEBF8;
+}
+
+.releases .release-helix-config-service {
+    background-color: #EDD1FF;
+}
+
 .releases .release {
     padding: 16px 32px 32px;
     margin: 16px 0;
@@ -63,10 +70,12 @@
 }
 
 .releases .helix-admin .release-helix-admin,
-.releases .helix-pipeline-service .release-helix-pipeline-service, 
-.releases .helix-importer-ui .release-helix-importer-ui, 
+.releases .helix-pipeline-service .release-helix-pipeline-service,
+.releases .helix-importer-ui .release-helix-importer-ui,
 .releases .helix-sidekick-extension .release-helix-sidekick-extension,
 .releases .helix-cli .release-helix-cli,
+.releases .helix-config-service .release-helix-config-service,
+.releases .aem-lib .release-aem-lib,
 .releases .franklin-sidekick-library .release-franklin-sidekick-library {
     display: block;
 }

blocks/releases/releases.js

@@ -19,6 +19,7 @@ const displayNames = {
   'helix-cli': 'Command Line Interface',
   'helix-sidekick-extension': 'Sidekick Extension',
   'franklin-sidekick-library': 'Sidekick Library',
+  'aem-lib': 'AEM Library',
 };
 
 function createRelease(release) {
@@ -69,7 +70,7 @@ function createRelease(release) {
     ul.append(li);
   });
 
-  div.innerHTML = `<p class="releases-date">${fullDate}</p><h2 id="${release.repo}-${release.tag}">${displayNames[release.repo]} <a href="${release.url}">${release.tag}</a></h2>`;
+  div.innerHTML = `<p class="releases-date">${fullDate}</p><h2 id="${release.repo}-${release.tag}">${displayNames[release.repo] || release.repo} <a href="${release.url}">${release.tag}</a></h2>`;
   addAnchorLink(div.querySelector('h2'));
 
   div.append(releaseBody);

blocks/sidekick-generator/sidekick-generator.js

@@ -31,19 +31,24 @@ function run(evt) {
   }
 
   let finalGitUrl = giturl;
+  let owner;
+  let repo;
+  let ref;
   const giturlAsUrl = new URL(giturl);
   if (giturlAsUrl.hostname.endsWith('hlx.page')
     || giturlAsUrl.hostname.endsWith('hlx.live')
     || giturlAsUrl.hostname.endsWith('aem.page')
     || giturlAsUrl.hostname.endsWith('aem.live')) {
     const segs = giturlAsUrl.hostname.split('.')[0].split('--');
-    const owner = segs[2];
-    const repo = segs[1];
-    const ref = segs[0] || 'main';
+    [ref, repo, owner] = segs;
 
     finalGitUrl = `https://github.com/${owner}/${repo}/tree/${ref}`;
+  } else {
+    [, owner, repo,, ref = 'main'] = giturlAsUrl.pathname.split('/');
   }
 
+  // update title
+  document.title = `${project || `${repo}`} for ${document.title}`;
   // update URL
   const url = new URL(window.location.href);
   const usp = url.searchParams;