Merge pull request #59 from hlxsites/feature/template-hero-bugs

Feature/template hero bugs
hlxsites · Oct 31, 2023 · 0b481fc · 0b481fc
2 parents 7fff061 + 8fa9815
commit 0b481fc
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 86 deletions.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -1,50 +1,37 @@
-/* block specific CSS goes here */
-
-main .hero-container > div {
-  max-width: unset;
+.hero .hero-content {
+  min-height: 310px;
+  display: flex;
+  align-items: center;
+  color: #fff;
 }
 
-main .hero-container {
-  padding: 0;
+.hero .bg-primary {
+  background-position: 50% 50%;
+  background-size: cover;
 }
 
-#heading {
-  display: block;
-}
-
-/* main .hero {
-  position: relative;
-  padding: 32px;
-  min-height: 300px;
-} */
-
-main .hero h1 {
+.hero .hero-content h2 {
   line-height: 1.2;
   padding: 0;
   color: white;
   font-size: 44px;
   text-shadow: 0 0 6px rgba(0,0,0,50%);
 }
 
-/* main .hero picture {
-  position: absolute;
-  height : 310px;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  object-fit: cover;
-  box-sizing: border-box;
-} */
+@media (max-width: 1120px) {
+  .hero .hero-content {
+    min-height: 260px;
+  }
+}
 
-/* main .hero img {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-} */
+@media (max-width: 860px) {
+  .hero .hero-content {
+    min-height: 220px;
+  }
+}
 
-/*
-main .hero a:hover {
-  color: white;
-} */
+@media (max-width: 767px) {
+  .hero .hero-content {
+    min-height: 180px;
+  }
+}
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -1,25 +1,20 @@
-export default function decorate() {
-  const heroClass = document.getElementsByClassName('hero block');
-  heroClass[0].setAttribute('id', 'heading');
-  heroClass[0].children[0].setAttribute('class', 'outer');
-  heroClass[0].children[0].children[0].setAttribute('class', 'vertical');
-  const heroDiv = heroClass[0].children[0].children[0];
-  const pTags = heroDiv.getElementsByTagName('p');
-  const supTag = heroDiv.getElementsByTagName('sup');
-  supTag[0].style.fontSize = '60%';
-  const heroSrc = pTags[0].children[0].querySelector('img').src;
-  heroClass[0].style.backgroundImage = `url('${heroSrc}')`;
-  let innerElements = '';
-  for (let i = 0; i < pTags.length; i += 1) {
-    if (pTags[i].outerHTML.includes('class')) {
-      innerElements += pTags[i].innerHTML.replace('class="button"', 'style="background-color:#000;" class="hs-button" target="_blank"');
-    } else if (i === 1) {
-      const heroTitle = pTags[i].outerHTML.replace(/<p[ ]*>/g, '');
-      innerElements += heroTitle.replace(/<\/p>/g, '<br>');
-    } else if (i === 2) {
-      const heroDescription = pTags[i].outerHTML.replace(/<p[ ]*>/g, '<span style="font-size: 70%;">');
-      innerElements += heroDescription.replace(/<\/p>/g, '</span><br>');
+export default function decorate(block) {
+  const bgImage = block.children[0].querySelector('img');
+
+  const heroContainer = document.createElement('div');
+  heroContainer.className = 'bg-primary';
+
+  // Set background image using CSS property
+  heroContainer.style.backgroundImage = `url(${bgImage.src})`;
+  heroContainer.style.backgroundSize = 'cover'; // Adjust as needed
+
+  if (block.children.length > 1) {
+    const additionalContent = block.children[1]; // Change the index if needed
+    if (additionalContent) {
+      additionalContent.classList.add('outer', 'hero-content');
+      heroContainer.appendChild(additionalContent);
     }
   }
-  heroDiv.innerHTML = `<h1>${innerElements}</h1>`;
+  block.innerText = '';
+  block.appendChild(heroContainer);
 }
diff --git a/blocks/table/table.css b/blocks/table/table.css
@@ -1,11 +1,3 @@
-.bg-primary {
-    background-color: var(--primary-color);
-}
-
-.bg-transparent {
-    background-color: transparent!important;
-}
-
 table td {
     text-align: center;
 }

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -18,21 +18,6 @@ import {
 
 const LCP_BLOCKS = ['forms']; // add your LCP blocks to the list
 
-/**
- * Builds hero block and prepends to main in a new section.
- * @param {Element} main The container element
- */
-function buildHeroBlock(main) {
-  const h1 = main.querySelector('h1');
-  const picture = main.querySelector('picture');
-  // eslint-disable-next-line no-bitwise
-  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
-    const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [picture, h1] }));
-    main.prepend(section);
-  }
-}
-
 /**
  * load fonts.css and set a session storage flag
  */
@@ -45,6 +30,17 @@ async function loadFonts() {
   }
 }
 
+function capitalizeWords(str) {
+  const words = str.split(' ');
+  const capitalizedWords = words.map((word) => {
+    if (word.length > 0) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    }
+    return word;
+  });
+  return capitalizedWords.join(' ');
+}
+
 const TEMPLATE_LIST = [
   'default',
   'plasmids',
@@ -61,8 +57,9 @@ async function decorateTemplates(main) {
     const template = toClassName(getMetadata('template'));
     const templates = TEMPLATE_LIST;
     if (templates.includes(template)) {
-      const mod = await import(`../templates/${template}/${template}.js`);
-      loadCSS(`${window.hlx.codeBasePath}/templates/${template}/${template}.css`);
+      const templateName = capitalizeWords(template);
+      const mod = await import(`../templates/${templateName}/${templateName}.js`);
+      loadCSS(`${window.hlx.codeBasePath}/templates/${templateName}/${templateName}.css`);
       if (mod.default) {
         await mod.default(main);
       }
@@ -98,7 +95,6 @@ function buildEmbedBlocks(main) {
  */
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
     buildEmbedBlocks(main);
   } catch (error) {
     // eslint-disable-next-line no-console

diff --git a/styles/Typo.css b/styles/Typo.css
@@ -1081,3 +1081,11 @@ form.hs-form .hs-input[type="checkbox"] {
     display: table;
     clear: both;
 }
+
+.bg-primary {
+    background-color: var(--primary-color);
+}
+
+.bg-transparent {
+    background-color: transparent!important;
+}
diff --git a/templates/Default/Default.js b/templates/Default/Default.js
@@ -7,7 +7,9 @@ export default function buildAutoBlocks(block) {
 
   // Appending Hero banner
   const heroBanner = blocks.querySelector('.hero-wrapper');
-  defaultTemplate.appendChild(heroBanner);
+  if (heroBanner) {
+    defaultTemplate.appendChild(heroBanner);
+  }
 
   // Creating content wrapper
   const content = document.createElement('div');