feat(support): add blocks (Search, Table, Sidebar) to support pages

blocks/content-text-body/content-text-body.css

@@ -1,12 +1,12 @@
 /* Section - Content Text Body */
 .section.content-text-body-container .content-text-body,
 .section.content-text-body-container .divider {
-  max-width: 840px;
+  max-width: var(--body-text-container);
 }
 
 .section.content-text-body-container > div,
 .section.content-text-body-container > div:first-child {
-  margin-bottom: 96px;
+  margin-bottom: var(--spacer-layout-06);
 }
 
 /* Block - Content Text Body */

blocks/right-nav/right-nav.css

@@ -0,0 +1,46 @@
+/* Block - Right Nav */
+.right-nav h3,
+.right-nav h4,
+.right-nav h5 {
+  margin-top: 0;
+  font-size: var(--font-size-21);
+  font-family: var(--sans-serif-font-medium);
+}
+
+.right-nav p {
+  font-size: var(--font-size-16);
+}
+
+/* Section - Right Nav */
+.section.right-nav-container .default-content-wrapper h2,
+.section.right-nav-container .default-content-wrapper h3 {
+  margin-bottom: 0;
+}
+
+/* Desktop */
+@media only screen and (min-width: 1200px) {
+	.section.right-nav-container > div {
+		width: var(--text-max-container);
+	}
+
+	.section.right-nav-container {
+		position: relative;
+		display: grid;
+		grid-template-columns: 3fr 1fr;
+		width: var(--secton-max-container);
+		margin: 0 auto var(--spacer-layout-07) auto;
+		align-items: flex-start;
+	}
+
+	.section.right-nav-container > *:not(.right-nav-wrapper) {
+		grid-column-start: 1;
+	}
+
+	.section.right-nav-container > .right-nav-wrapper {
+		grid-column-start: 2;
+		grid-row-start: 1;
+		padding-top: var(--spacer-layout-07);
+    margin-left: var(--gap-120);
+    width: var(--sidebar-max-container);
+	}
+}

blocks/search/search.css

@@ -0,0 +1,75 @@
+/* Search Block CSS */
+.search.block {
+  width: 100%;
+  font-family: var(--sans-serif-font-light);
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-001-em);
+  line-height: var(--line-height-160);
+  font-weight: var(--font-weight-light);
+  color: var(--neutral-carbon);
+}
+
+.search.block form {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--spacer-element-10);
+  background-color: var(--neutral-bone);
+  border-bottom: 1px solid var(--neutral-carbon);
+}
+
+.search.block form input {
+  font-size: var(--font-size-16);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacer-element-03) var(--spacer-element-05);
+  border: 0;
+  background-color: var(--neutral-bone);
+}
+
+.search.block form span.search-icon {
+  display: block;
+  position: relative;
+  background: url('../../icons/search.svg') no-repeat;
+  color: var(--neutral-carbon);
+  height: var(--spacer-element-07);
+  width: var(--spacer-element-07);
+  margin: var(--spacer-element-04) var(--spacer-element-04) 0 0;
+  padding: 0 var(--spacer-element-07) 0 0;
+  min-width: var(--spacer-element-05);
+}
+
+.search.block div.results ul {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: unset;
+  margin: 0;
+  box-shadow: var(--box-shadow-small);
+}
+
+.search.block div.results ul li {
+  padding: var(--spacer-element-05);
+  text-decoration: none;
+  display: block;
+  margin: 0;
+  border-bottom: 1px solid var(--neutral-sand);
+}
+
+.search.block div.results ul li:hover {
+  background-color: var(--purple-20);
+  cursor: pointer;
+}
+
+.search.block div.results ul li a {
+  text-decoration: none;
+  border: unset;
+  color: var(--neutral-carbon);
+}
+
+/* Tablet styles */
+@media only screen and (min-width: 768px) {
+  .search.block {
+    width: var(--text-max-container);
+  }
+}

blocks/search/search.js

@@ -0,0 +1,47 @@
+import { createTag, getSearchIndex } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
+
+let index;
+let searchTerm = '';
+let results;
+
+async function showResults() {
+  // clear the results
+  results.innerHTML = '';
+  // filter and redraw the results
+  const ul = createTag('ul');
+  index
+    .filter((row) => (row.title.toLowerCase().includes(searchTerm.toLowerCase())
+      || row.description.toLowerCase().includes(searchTerm.toLowerCase())))
+    .forEach((row) => {
+      const link = createTag('a', { href: row.path, 'aria-label': row.title }, row.title);
+      const li = createTag('li', { class: 'search-result' }, link);
+      ul.append(li);
+    });
+  results.append(ul);
+}
+
+export default async function decorate(block) {
+  const cfg = await readBlockConfig(block);
+  block.textContent = '';
+  const filter = cfg.filter || '';
+  index = await getSearchIndex(filter);
+  const input = createTag('input', {
+    type: 'text',
+    placeholder: 'Type a search term or article type, such as release notes or news.',
+  });
+  const form = createTag('form', { onsubmit: 'event.preventDefault();' }, input);
+  const searchIcon = createTag('span', { class: 'search-icon' });
+  results = createTag('div', { class: 'results' });
+  form.append(searchIcon);
+  block.append(form);
+  block.append(results);
+
+  // Search input listener
+  input.addEventListener('input', async (e) => {
+    // saving the input value
+    searchTerm = e.target.value;
+    // re-displaying results based on the new search_term
+    await showResults();
+  });
+}

blocks/table/table.css

@@ -0,0 +1,35 @@
+/* Section - Table */
+main .section > .table-wrapper {
+  margin-top: var(--spacer-layout-04);
+  margin-bottom: var(--spacer-layout-04);
+}
+
+/* Block - Table */
+.table.block {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--spacer-element-06) var(--spacer-element-06) 0 0;
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+}
+
+table thead tr {
+  background-color: var(--neutral-bone);
+}
+
+table tr td, 
+table tr th {
+  padding: var(--spacer-element-06);
+  font-size: var(--font-size-16);
+  line-height: 160%;
+  text-align: left;
+  width: 20%;
+  border-bottom: 1px solid var(--neutral-sand);
+}
+
+table p {
+  font-size: var(--font-size-16);
+}

scripts/scripts.js

@@ -748,6 +748,24 @@ export async function lookupDocuments(pathnames) {
   return (result);
 }
 
+/**
+ * Gets details about pages that are indexed filtered by path
+ * @param {String} filter return only pages that start with this filter
+ */
+
+export async function getSearchIndex(filter) {
+  if (!window.pageIndex) {
+    const resp = await fetch(`${window.hlx.codeBasePath}/query-index.json`);
+    const json = await resp.json();
+    window.pageIndex = {
+      data: json.data,
+    };
+  }
+
+  const result = window.pageIndex.data.filter((row) => row.path.startsWith(filter));
+  return (result);
+}
+
 /**
  * Gets pdf and documents list that are indexed
  */

styles/styles.css

@@ -251,6 +251,7 @@
   --section-width-tablet-large: 928px;
   --text-max-container: 648px;
   --sidebar-max-container: 360px;
+  --body-text-container: 840px;
 
   /* box shadow */
   --box-shadow-large: 0 var(--spacer-element-02) var(--spacer-element-06) 0 rgb(185 181 174 / 40%);
@@ -1075,7 +1076,8 @@ a.button span.icon.bookmark {
 /* Paragraph link styles */
 main h2 a:not(.button):any-link,
 main p a:not(.button):any-link,
-main ul a:not(.button):any-link {
+main ul a:not(.button):any-link,
+main table a:not(.button):any-link {
   text-decoration: none;
   color: var(--primary-purple);
   border-bottom: 1px solid var(--primary-purple);
@@ -1088,9 +1090,11 @@ main h2 a:not(.button):any-link {
 main h2 a:not(.button):hover,
 main p a:not(.button):hover,
 main ul a:not(.button):hover,
+main table a:not(.button):hover,
 main h2 a:not(.button):active,
 main p a:not(.button):active,
-main ul a:not(.button):active {
+main ul a:not(.button):active,
+main table a:not(.button):active {
   background: var(--gradient-left-right);
   background-clip: text;
   -webkit-background-clip: text;