diff --git a/README.md b/README.md index 0338980b..9a667813 100644 --- a/README.md +++ b/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 diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 34c469e8..c0d12899 100644 --- a/blocks/columns/columns.css +++ b/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; diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 487f5f14..9805c7e9 100644 --- a/blocks/footer/footer.css +++ b/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; diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 66f89b3c..707cb528 100644 --- a/blocks/footer/footer.js +++ b/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'); diff --git a/blocks/header/header.js b/blocks/header/header.js index 8c81c146..b7f4c625 100644 --- a/blocks/header/header.js +++ b/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'); diff --git a/blocks/sponsors/sponsors.css b/blocks/sponsors/sponsors.css index a44191ad..592609c4 100644 --- a/blocks/sponsors/sponsors.css +++ b/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; -} \ No newline at end of file diff --git a/blocks/sponsors/sponsors.js b/blocks/sponsors/sponsors.js index c46fd2f2..7f860e69 100644 --- a/blocks/sponsors/sponsors.js +++ b/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 = `

${sponsor.title}

-

${sponsor.description}

-

${sponsor.title.replace(' ', '')}.com

`; +

${sponsor.description}

+

${sponsor.title.replace(' ', '')}.com

`; wrapper.append(front, back); card.append(wrapper); block.append(card); diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json new file mode 100644 index 00000000..8eb566b5 --- /dev/null +++ b/tools/sidekick/config.json @@ -0,0 +1,4 @@ +{ + "project": "The Presidents Cup", + "host": "www.presidentscup.com" +} \ No newline at end of file