Updated the forms and search

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "removeptag"
+    ]
+}

blocks/forms/forms.js

@@ -1,29 +1,33 @@
 import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 
+
 export default function decorate(block) {
-    console.log(block);
-    const element = document.createElement('div');
-    element.innerHTML = `
-    <script async charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/embed/v2.js"></script>
-    <script async>
+
+    function loadHubSpotFormScript() {
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = '//js.hsforms.net/forms/embed/v2.js';
+    script.charset = 'utf-8';
+
+    // Define a callback function to create the form after the script loads
+    script.onload = function () {
         hbspt.forms.create({
-            region: "na1",
-            portalId: "1769030",
-            formId: "828820d8-9902-4b4e-8ff4-169076195288"
+        region: "na1",
+        portalId: "1769030",
+        formId: "828820d8-9902-4b4e-8ff4-169076195288",
+        target: '#myFormContainer' // Specify the container where the form should be rendered
         });
-    </script>`;
+    };
+
+    // Append the script to the document's head
+    document.head.appendChild(script);
+    }
+
+    // Call the function to load the HubSpot form script
+    loadHubSpotFormScript();
+
+    console.log(block);
+    const element = document.createElement('div');
+    element.id="myFormContainer";
     block.append(element);
-    // const ul = document.createElement('ul');
-    // [...block.children].forEach((row) => {
-    //     const li = document.createElement('li');
-    //     while (row.firstElementChild) li.append(row.firstElementChild);
-    //     [...li.children].forEach((div) => {
-    //     if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
-    //     else div.className = 'cards-card-body';
-    //     });
-    //     ul.append(li);
-    // });
-    // ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
-    // block.textContent = '';
-    // block.append(ul);
 }

blocks/header/header.css

@@ -6,6 +6,10 @@ header .nav-wrapper {
   position: fixed;
 }
 
+/* .header-wrapper {
+  position: absolute;
+} */
+
 header nav {
   box-sizing: border-box;
   display: grid;
@@ -272,4 +276,40 @@ header nav .nav-sections ul > li > ul > li {
 /* tools */
 header nav .nav-tools {
   grid-area: tools;
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 5px;
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+header nav .nav-tools input {
+  outline: none;
+  border: none;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.search-results {
+  position: absolute;
+  top: 65px;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  z-index: 10;
+  display: flex;
+  padding: 10px 50px;
+}
+.search-result {
+  display: flex;
+  padding: 5px;
+  box-shadow: 0px 0px 10px #ededed;
+  /* border-radius: 5px; */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
 }
+.search-result img {
+  height: 100px;
+  width: auto;
+}

blocks/header/header.js

@@ -85,6 +85,28 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
   }
 }
 
+function createSearchResultsBlock(results) {
+  const searchResultsBlock = document.createElement('div');
+  searchResultsBlock.classList.add('search-results'); // You can customize the class name
+
+  // Loop through the search results and create elements for each result
+  results.forEach(result => {
+    const resultElement = document.createElement('div');
+    resultElement.classList.add('search-result'); // You can customize the class name
+
+    // Customize the content based on your search result data
+    resultElement.innerHTML = `
+    <img src="${result.image}" alt="${result.title}">
+      <a href="${result.path}">${result.description}</a>
+    `;
+
+    // Append the result element to the search results block
+    searchResultsBlock.appendChild(resultElement);
+  });
+
+  return searchResultsBlock;
+}
+
 /**
  * decorates the header, mainly the nav
  * @param {Element} block The header block element
@@ -141,5 +163,47 @@ export default async function decorate(block) {
     navWrapper.className = 'nav-wrapper';
     navWrapper.append(nav);
     block.append(navWrapper);
+    const inputElement = document.createElement('input');
+    inputElement.setAttribute('type', 'text');
+    inputElement.setAttribute('placeholder', 'Search');
+
+    // Add an 'onchange' event handler to the input element
+    inputElement.addEventListener('change', function () {
+      const searchTerm = this.value.toLowerCase(); // Get the lowercase search term
+
+      // Fetch the JSON data from the URL
+      fetch('http://localhost:3000/query-index.json')
+        .then(response => response.json())
+        .then(jsonData => {
+          // Perform a search based on the fetched JSON data
+          const results = jsonData.data.filter(item => {
+            // Customize this condition to match your search criteria
+            return item.description.toLowerCase().includes(searchTerm);
+          });
+          console.log(results);
+          const resultBlock = document.querySelector('.search-results'); // Use .search-results for class selector
+          resultBlock ? resultBlock.remove() : null;
+          if (results.length > 0 && searchTerm != '') {
+            // Create a block based on the search results
+            const searchResultsBlock = createSearchResultsBlock(results);
+
+            // Use a more specific selector for your header
+            const header = document.querySelector('.header'); // Adjust this selector as needed
+            header.appendChild(searchResultsBlock);
+          }
+
+          // Get the header element and append the search results block to it
+        })
+        .catch(error => {
+          console.error("Error fetching JSON data:", error);
+        });
+    });
+
+
+    // Append the input element to the .nav-tools container
+    const navToolsContainer = document.querySelector('.nav-tools');
+    navToolsContainer.appendChild(inputElement);
+
+
   }
 }