${category}
`], - [h1], - [`${readTime}
`], - [``], - [`${publishedDate}
`], - [`${articleBlurb}
`], - ]); - div.append(articleHeaderBlockEl); - mainEl.prepend(div); + // Protect against recursion from fragment block + if (!main.closest(`.${template}`)) { + return; + } + const name = template.replace('-template', ''); + try { + const tpl = await import(`${window.hlx.codeBasePath}/scripts/templates/${name}.js`); + if (tpl.default) { + await tpl.default(main); + } + } catch (error) { + // eslint-disable-next-line no-console + console.log(`failed to load template script for ${name}`, error); + } } /** @@ -163,10 +132,10 @@ async function loadFonts() { * Builds all synthetic blocks in a container element. * @param {Element} main The container element */ -function buildAutoBlocks(main) { +async function buildAutoBlocks(main) { try { buildHeroBlock(main); - buildArticleHeader(main); + await decorateTemplate(main); } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); @@ -178,11 +147,11 @@ function buildAutoBlocks(main) { * @param {Element} main The main element */ // eslint-disable-next-line import/prefer-default-export -export function decorateMain(main) { +export async function decorateMain(main) { // hopefully forward compatible button decoration decorateButtons(main); decorateIcons(main); - buildAutoBlocks(main); + await buildAutoBlocks(main); decorateSections(main); decorateBlocks(main); buildTwoColumnGrid(main); @@ -312,7 +281,7 @@ async function loadEager(doc) { decorateTemplateAndTheme(); const main = doc.querySelector('main'); if (main) { - decorateMain(main); + await decorateMain(main); document.body.classList.add('appear'); await waitForLCP(LCP_BLOCKS); } diff --git a/cigaradvisor/scripts/templates/blog-post.js b/cigaradvisor/scripts/templates/blog-post.js new file mode 100644 index 00000000..31c1b26f --- /dev/null +++ b/cigaradvisor/scripts/templates/blog-post.js @@ -0,0 +1,53 @@ +import { decorateExternalLink } from '../scripts.js'; +import { buildBlock, getMetadata } from '../aem.js'; + +export default async function decorate(main) { + // eslint-disable-next-line no-use-before-define + decorateExternalLink(main); + const paragraphs = main.querySelectorAll('p'); + paragraphs.forEach((paragraph) => { + if (paragraph.querySelector('picture') !== null) { + const imageWrapper = document.createElement('div'); + imageWrapper.classList.add('article-image-wrapper'); + if (paragraph.querySelector('a') !== null) { + const a = paragraph.querySelector('a'); + a.replaceChildren(paragraph.querySelector('picture')); + imageWrapper.append(a); + } else { + imageWrapper.append(paragraph.querySelector('picture')); + } + const nextSibling = paragraph.nextElementSibling; + if (nextSibling && nextSibling.tagName === 'P' && nextSibling.querySelector('em')) { + nextSibling.classList.add('article-image-caption'); + imageWrapper.append(nextSibling); + } + paragraph.replaceChildren(imageWrapper); + } + }); + const h3 = main.querySelectorAll('h3'); + h3.forEach((heading) => { + const p = document.createElement('p'); + p.innerHTML = ' '; + heading.prepend(p); + }); + const div = document.createElement('div'); + const h1 = main.querySelector('h1'); + const picture = main.querySelector('picture'); + const category = getMetadata('category'); + const authorLink = getMetadata('author'); + const publishedDate = getMetadata('publisheddate'); + const readTime = document.querySelector('meta[name="readingtime"]').content; + const articleBlurb = getMetadata('articleblurb'); + + const articleHeaderBlockEl = buildBlock('articleheader', [ + [picture], + [`${category}
`], + [h1], + [`${readTime}
`], + [``], + [`${publishedDate}
`], + [`${articleBlurb}
`], + ]); + div.append(articleHeaderBlockEl); + main.prepend(div); +} diff --git a/cigaradvisor/styles/reset.css b/cigaradvisor/styles/reset.css new file mode 100644 index 00000000..adb2bf91 --- /dev/null +++ b/cigaradvisor/styles/reset.css @@ -0,0 +1,67 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, button, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + + /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */ + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +source { + font-size: 0; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote::before, blockquote::after, +q::before, q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + padding: 0; + background: none; + border: none; + color: inherit; +} diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index d9695a24..89b288b1 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -10,6 +10,8 @@ * governing permissions and limitations under the License. */ +@import url('reset.css'); + @font-face { font-family: 'Open Sans Fallback'; font-style: normal; @@ -155,13 +157,6 @@ --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif; --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive; - /* body sizes */ - --text-size-xs: 12px; - --text-size-sm: 14px; - --text-size-md: 16px; - --text-size-lg: 18px; - --text-size-xl: 24px; - /* heading sizes */ --heading-font-size-xxs: 18px; --heading-font-size-xs: 20px; @@ -171,7 +166,7 @@ --heading-font-size-xl: 40px; /* Font Weights */ - --font-weight-extrabold: 900; + --font-weight-heavy: 900; --font-weight-bold: 700; --font-weight-semibold: 600; --font-weight-normal: 400; @@ -187,9 +182,16 @@ --body-font-size-xl: 20px; --body-font-size-xxl: 24px; + /* Line Heights */ + --line-height-xs: 1.15em; + --line-height-s: 1.25em; + --line-height-m: 1.5em; + --line-height-l: 1.75em; + --line-height-xl: 2em; + /* misc */ --nav-height: 100px; - --icon-size: var(--text-size-xl); + --icon-size: var(--body-font-size-xxl); } body { diff --git a/helix-query.yaml b/helix-query.yaml index 6945c2f9..2bfcf8ea 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -58,27 +58,33 @@ indices: - /cigaradvisor/author/** target: /cigaradvisor/author/query-index.json properties: - name: - select: div:nth-of-type(1) > h2:nth-of-type(1) - value: textContent(el) title: - select: div:nth-of-type(1) > h3:nth-of-type(1) + select: head > title value: textContent(el) description: - select: div:nth-of-type(1) > p:nth-of-type(2) - value: textContent(el) + select: head > meta[property="og:description"] + value: attribute(el, "content") image: - select: div:nth-of-type(1) > p:nth-of-type(1) > picture:nth-of-type(1) > img - value: match(attribute(el, 'src'), "(?:https:\/\/[^/]+)?(.+)") + select: head > meta[property="og:image"] + value: attribute(el, "content") + name: + select: div.author-detail > div:nth-of-type(1) > div:nth-of-type(2) + value: textContent(el) + author-title: + select: div.author-detail > div:nth-of-type(2) > div:nth-of-type(2) + value: textContent(el) + intro: + select: div.author-detail > div:nth-of-type(4) > div:nth-of-type(2) + value: textContent(el) twitter: - select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a + select: div.author-detail ul > li > a value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?twitter\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$') facebook: - select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a + select: div.author-detail ul > li > a value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?facebook\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$') instagram: - select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a + select: div.author-detail ul > li > a value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?instagram\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$') youtube: - select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a + select: div.author-detail ul > li > a value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?youtube\.com\/user\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')