Merge

README.md

@@ -3,6 +3,7 @@
 ## Environments
 - Preview: https://main--pga-presidents-cup--hlxsites.hlx.page/
 - Live: https://main--pga-presidents-cup--hlxsites.hlx.live/
+- Production: https://www.presidentscup.com
 
 ## Installation
 

blocks/columns/columns.css

@@ -57,6 +57,11 @@ main .columns > div > div.columns-contains-image {
   }
 }
 
+main .columns .icon {
+  margin: 0 auto;
+  width: 70%;
+}
+
 main .columns h2 {
   margin-top: 0;
   text-transform: uppercase;

blocks/footer/footer.css

@@ -108,7 +108,7 @@ footer .footer .footer-partners img {
 }
 
 /* nav */
-footer .footer .footer-nav {
+footer .footer .footer-partners + .footer-nav {
   border-top: 1px solid var(--footer-border-color);
 }
 
@@ -232,8 +232,10 @@ footer .footer .footer-copyright {
   }
 }
 
-footer .footer #ot-sdk-btn.ot-sdk-show-settings, footer .footer #ot-sdk-btn.optanon-show-settings,
-footer .footer #ot-sdk-btn.ot-sdk-show-settings:hover, footer .footer #ot-sdk-btn.optanon-show-settings:hover {
+footer .footer #ot-sdk-btn.ot-sdk-show-settings,
+footer .footer #ot-sdk-btn.optanon-show-settings,
+footer .footer #ot-sdk-btn.ot-sdk-show-settings:hover,
+footer .footer #ot-sdk-btn.optanon-show-settings:hover {
   color: var(--footer-text-color);
   text-transform: uppercase;
   cursor: pointer;

blocks/footer/footer.js

@@ -3,11 +3,11 @@ import {
   decorateIcons,
   decorateLinkedPictures,
   createOptimizedPicture,
-  lookupPages,
   wrapImgsInLinks,
-  fetchPlaceholders,
 } from '../../scripts/scripts.js';
 
+import { setupSponsors, setupSponsorsV2 } from '../sponsors/sponsors.js';
+
 function setupCookieChoices(section) {
   const cookieLink = section.querySelector('a[href*="onetrust-link"]');
   if (cookieLink) {
@@ -26,27 +26,30 @@ function setupSocialButtons(section) {
 }
 
 async function setupPartners(section) {
-  const pages = await lookupPages();
-  const { sponsorOrder } = await fetchPlaceholders();
-  const sponsors = pages.filter((e) => e.path.startsWith('/sponsors/'));
-  const orderedSponsors = [];
-  if (sponsorOrder) {
-    sponsorOrder.split(',').forEach((sp) => {
-      // eslint-disable-next-line no-param-reassign
-      sp = sp.trim();
-      const match = sponsors.find((sponsor) => sponsor.title === sp);
-      if (match) {
-        // remove match from sponsors
-        sponsors.splice(sponsors.indexOf(match), 1);
-        // add match to ordered sponsors
-        orderedSponsors.push(match);
-      }
-    });
+  let sponsors = [];
+  try {
+    // const resp = await fetch('/drafts/shsteimer/sponsors');
+    const resp = await fetch('/sponsors');
+    // eslint-disable-next-line no-await-in-loop
+    const html = await resp.text();
+    const dp = new DOMParser();
+    const sponsorsDoc = dp.parseFromString(html, 'text/html');
+    if (sponsorsDoc.querySelector('.sponsors.v2')) {
+      const sponsorRows = [...sponsorsDoc.querySelector('.sponsors.v2').children];
+      sponsors = await setupSponsorsV2(sponsorRows);
+    } else {
+      // backwards compat, kill off after marge and content update
+      const sponsorLinks = [...sponsorsDoc.querySelectorAll('.sponsors a')].map((a) => a.href);
+      sponsors = await setupSponsors(sponsorLinks);
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log(err);
   }
 
   const wrapper = document.createElement('div');
   // combine ordered sponsors with any remaining unordered sponsors
-  [...orderedSponsors, ...sponsors].forEach((sponsor) => {
+  sponsors.forEach((sponsor) => {
     const partner = document.createElement('div');
     partner.className = 'footer-partner';
     const link = document.createElement('a');
@@ -76,7 +79,7 @@ export default async function decorate(block) {
     const footer = document.createElement('div');
     footer.innerHTML = html;
 
-    const hasPartners = footer.children.length > 4;
+    let hasPartners = footer.children.length > 4;
     let classes = ['partners', 'nav', 'links', 'social', 'copyright'];
     if (!hasPartners) {
       classes = ['nav', 'links', 'social', 'copyright'];
@@ -86,6 +89,13 @@ export default async function decorate(block) {
       if (section) section.classList.add(`footer-${c}`);
     });
 
+    const pageHasSponsers = document.querySelector('.block.sponsors');
+    if (pageHasSponsers) {
+      // hide partners in footer when page contains sponsors block
+      hasPartners = false;
+      footer.querySelector('.footer-partners').remove();
+    }
+
     // setup ribbon
     const ribbon = document.createElement('div');
     ribbon.classList.add('footer', 'footer-ribbon');

blocks/header/header.js

@@ -2,12 +2,13 @@ import {
   readBlockConfig,
   fetchPlaceholders,
   decorateIcons,
-  lookupPages,
   createOptimizedPicture,
   wrapImgsInLinks,
   decorateLinkedPictures,
 } from '../../scripts/scripts.js';
 
+import { setupSponsors, setupSponsorsV2 } from '../sponsors/sponsors.js';
+
 /**
  * collapses all open nav sections
  * @param {Element} sections The container element
@@ -26,8 +27,26 @@ function displayNextPartner(proud) {
 }
 
 async function setupPartners(section, ph) {
-  const pages = await lookupPages();
-  const sponsors = pages.filter((e) => e.path.startsWith('/sponsors/'));
+  let sponsors = [];
+  try {
+    // const resp = await fetch('/drafts/shsteimer/sponsors');
+    const resp = await fetch('/sponsors');
+    // eslint-disable-next-line no-await-in-loop
+    const html = await resp.text();
+    const dp = new DOMParser();
+    const sponsorsDoc = dp.parseFromString(html, 'text/html');
+    if (sponsorsDoc.querySelector('.sponsors.v2')) {
+      const sponsorRows = [...sponsorsDoc.querySelector('.sponsors.v2').children];
+      sponsors = await setupSponsorsV2(sponsorRows);
+    } else {
+      // backwards compat, kill off after marge and content update
+      const sponsorLinks = [...sponsorsDoc.querySelectorAll('.sponsors a')].map((a) => a.href);
+      sponsors = await setupSponsors(sponsorLinks);
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log(err);
+  }
 
   if (sponsors.length > 0) {
     const hasWhiteBg = [...section.classList].includes('white');

blocks/sponsors/sponsors.css

@@ -53,7 +53,8 @@ main .sponsors .sponsors-sponsor:hover > div {
   transform: rotateY(180deg);
 }
 
-main .sponsors .sponsors-sponsor-front, main .sponsors .sponsors-sponsor-back {
+main .sponsors .sponsors-sponsor-front,
+main .sponsors .sponsors-sponsor-back {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -73,13 +74,3 @@ main .sponsors .sponsors-sponsor-back {
   background-color: var(--sponsors-background-color);
   transform: rotateY(180deg);
 }
-
-/* hide duplicate sponsors in footer */
-body footer .footer .footer-partners {
-  display: none;
-  visibility: hidden;
-}
-
-body footer .footer .footer-nav {
-  border-top: 0;
-}

blocks/sponsors/sponsors.js

@@ -5,27 +5,86 @@ import {
   toClassName,
 } from '../../scripts/scripts.js';
 
-export default async function decorate(block) {
-  const pages = await lookupPages();
-  const { sponsorOrder } = await fetchPlaceholders();
-  const sponsors = pages.filter((e) => e.path.startsWith('/sponsors/'));
-  const orderedSponsors = [];
-  if (sponsorOrder) {
-    sponsorOrder.split(',').forEach((sp) => {
-      // eslint-disable-next-line no-param-reassign
-      sp = sp.trim();
-      const match = sponsors.find((sponsor) => sponsor.title === sp);
-      if (match) {
-        // remove match from sponsors
-        sponsors.splice(sponsors.indexOf(match), 1);
-        // add match to ordered sponsors
-        orderedSponsors.push(match);
-      }
+export async function setupSponsorsV2(sponsorRows = []) {
+  const sponsors = [];
+  sponsorRows.forEach((sponsorRow) => {
+    const link = sponsorRow.querySelector('a');
+    const images = sponsorRow.querySelectorAll('picture');
+    const headline = sponsorRow.querySelector('h1');
+    const description = sponsorRow.querySelector('h1 + p');
+
+    sponsors.push({
+      title: headline.textContent,
+      image: images[0].querySelector('img').src,
+      logoWhite: images[1].querySelector('img').src,
+      description: description.textContent,
+      link: link.href,
     });
+  });
+
+  return sponsors;
+}
+
+export async function setupSponsors(sponsorLinks = []) {
+  let sponsors = [];
+  let orderedSponsors = [];
+
+  if (sponsorLinks.length) {
+    for (let i = 0; i < sponsorLinks.length; i += 1) {
+      const sponsorLink = sponsorLinks[i];
+      // eslint-disable-next-line no-await-in-loop
+      const resp = await fetch(sponsorLink);
+      // eslint-disable-next-line no-await-in-loop
+      const html = await resp.text();
+      const dp = new DOMParser();
+      const sponsorDoc = dp.parseFromString(html, 'text/html');
+      const title = sponsorDoc.querySelector('title').textContent;
+      const image = sponsorDoc.querySelector('meta[property="og:image"]').content;
+      const description = sponsorDoc.querySelector('meta[property="og:description"]').content;
+      const link = sponsorDoc.querySelector('meta[name="external-link"]').content;
+      const logoWhite = sponsorDoc.querySelector('meta[name="logo-white"]').content;
+
+      sponsors.push({
+        title, image, description, link, logoWhite,
+      });
+    }
+  } else {
+    const pages = await lookupPages();
+    const { sponsorOrder } = await fetchPlaceholders();
+    sponsors = pages.filter((e) => e.path.startsWith('/sponsors/'));
+    orderedSponsors = [];
+    if (sponsorOrder) {
+      sponsorOrder.split(',').forEach((sp) => {
+        // eslint-disable-next-line no-param-reassign
+        sp = sp.trim();
+        const match = sponsors.find((sponsor) => sponsor.title === sp);
+        if (match) {
+          // remove match from sponsors
+          sponsors.splice(sponsors.indexOf(match), 1);
+          // add match to ordered sponsors
+          orderedSponsors.push(match);
+        }
+      });
+    }
+  }
+  return ([...orderedSponsors, ...sponsors]);
+}
+
+export default async function decorate(block) {
+  let sponsors;
+  if (block.classList.contains('v2')) {
+    // use new content model
+    const sponsorRows = [...block.children];
+    sponsors = await setupSponsorsV2(sponsorRows);
+  } else {
+    // backwards compatability, can be killed off after this is merged and content is updated
+    const sponsorLinks = [...block.querySelectorAll('a')].map((a) => a.href);
+    sponsors = await setupSponsors(sponsorLinks);
   }
 
-  // combine ordered sponsors with any remaining unordered sponsors
-  [...orderedSponsors, ...sponsors].forEach((sponsor) => {
+  block.textContent = '';
+
+  sponsors.forEach((sponsor) => {
     const card = document.createElement('div');
     card.className = 'sponsors-sponsor';
     const wrapper = document.createElement('div');
@@ -35,8 +94,8 @@ export default async function decorate(block) {
     const back = document.createElement('div');
     back.className = `sponsors-sponsor-back sponsor-${toClassName(sponsor.title)}`;
     back.innerHTML = `<h2>${sponsor.title}</h2>
-      <p>${sponsor.description}</p>
-      <p class="button-container"><a class="button" href="${sponsor.link}">${sponsor.title.replace(' ', '')}.com</a></p>`;
+        <p>${sponsor.description}</p>
+        <p class="button-container"><a class="button" href="${sponsor.link}">${sponsor.title.replace(' ', '')}.com</a></p>`;
     wrapper.append(front, back);
     card.append(wrapper);
     block.append(card);

tools/sidekick/config.json

@@ -0,0 +1,4 @@
+{
+  "project": "The Presidents Cup",
+  "host": "www.presidentscup.com"
+}