support of wknd site

blocks/carousel/carousel.css

@@ -0,0 +1,94 @@
+main .carousel-container {
+  padding: 0;
+}
+
+main .carousel {
+  display: flex;
+  scroll-snap-type: x mandatory;
+  overflow: scroll hidden;
+  scroll-behavior: smooth;
+  max-width: 1680px;
+  margin: auto;
+}
+
+main .carousel picture {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  box-sizing: border-box;
+}
+
+main .carousel img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-position: 90%;
+}
+
+main .carousel > div {
+  width: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  position: relative;
+  min-height: 580px;
+  align-items: flex-end;
+  display: flex;
+}
+
+main .carousel div.carousel-text {
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: white;
+  min-height: 188px;
+  padding: 0 28px;
+}
+
+main .carousel div.carousel-text p {
+  margin: 10px 0 16px;
+  line-height: 1.2;
+}
+
+main .carousel div.carousel-text h2 {
+  margin: 0;
+  margin-top: 16px; 
+}
+
+main .carousel div.carousel-text .button {
+  margin: 0;
+}
+
+
+main .carousel::-webkit-scrollbar {
+    display: none;
+  }
+
+main .carousel-wrapper {
+  max-width: unset;
+}
+
+main .carousel-wrapper .carousel-buttons {
+  text-align: center;
+  margin-top: 0;
+  position: absolute;
+  display: flex;
+  right: 0;
+  left: 0;
+  justify-content: center;
+}
+
+main .carousel-buttons button {
+  display: block;
+  height: 10px;
+  width: 10px;
+  padding: 0;
+  margin: 5px;
+  border-radius: 5px;
+  background-color: var(--highlight-background-color);
+}
+
+main .carousel-buttons button.selected {
+  background-color: var(--link-color);
+}

blocks/carousel/carousel.js

@@ -0,0 +1,21 @@
+export default function decorate(block) {
+  const buttons = document.createElement('div');
+  buttons.className = 'carousel-buttons';
+  [...block.children].forEach((row, i) => {
+    const classes = ['image', 'text'];
+    classes.forEach((e, j) => {
+      row.children[j].classList.add(`carousel-${e}`);
+    });
+    /* buttons */
+    const button = document.createElement('button');
+    button.title = 'Carousel Nav';
+    if (!i) button.classList.add('selected');
+    button.addEventListener('click', () => {
+      block.scrollTo({ top: 0, left: row.offsetLeft - row.parentNode.offsetLeft, behavior: 'smooth' });
+      [...buttons.children].forEach((r) => r.classList.remove('selected'));
+      button.classList.add('selected');
+    });
+    buttons.append(button);
+  });
+  block.parentElement.append(buttons);
+}

blocks/featured-article/featured-article.css

@@ -0,0 +1,52 @@
+/* stylelint-disable */
+
+
+.featured-article {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+.featured-article .image {
+    display: flex;
+    -webkit-box-orient: vertical;
+    flex-direction: column;
+    flex: 2;
+}
+
+.featured-article .image picture {
+    width: 100%;
+    height: 100%;
+}
+
+.featured-article .image img {
+    margin-top: 0;
+    margin-bottom: 0;
+    object-fit: cover;
+    object-position: top;
+    width: 100%;
+    height: 100%;
+}
+
+.featured-article .text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: #ebebeb;
+    padding: 3.5em 2em 2em;
+}
+
+.featured-article .text p {
+    font-size: 14px;
+    margin: 0;
+    line-height: 1.75;
+}
+
+.featured-article .text p.pretitle {
+    font-size: 18px;
+    font-weight: 700;
+    margin: 0;
+    line-height: 1.75;
+}

blocks/featured-article/featured-article.js

@@ -0,0 +1,71 @@
+/**
+ * Loads a fragment.
+ * @param {string} path The path to the fragment
+ * @returns {Document} The document
+ */
+async function loadFragment(path) {
+  if (path && path.startsWith('/')) {
+    const resp = await fetch(path);
+    if (resp.ok) {
+      const parser = new DOMParser();
+      return parser.parseFromString(await resp.text(), 'text/html');
+    }
+  }
+  return null;
+}
+
+/**
+ * Retrieves the content of metadata tags.
+ * @param {string} name The metadata name (or property)
+ * @param doc Document object to query for the metadata. Defaults to the window's document
+ * @returns {string} The metadata value(s)
+ */
+function getMetadata(name, doc = document) {
+  const attr = name && name.includes(':') ? 'property' : 'name';
+  const meta = [...doc.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', ');
+  return meta || '';
+}
+
+/**
+ * @param {HTMLElement} $block The header block element
+ */
+export default async function decorate($block) {
+  const link = $block.querySelector('a');
+  const path = link ? link.getAttribute('href') : $block.textContent.trim();
+  const doc = await loadFragment(path);
+  if (!doc) {
+    return;
+  }
+  // find metadata
+  const title = getMetadata('og:title', doc);
+  const desc = getMetadata('og:description', doc);
+
+  const $pre = document.createElement('p');
+  $pre.classList.add('pretitle');
+  $pre.textContent = 'Featured Article';
+
+  const $h2 = document.createElement('h2');
+  $h2.textContent = title;
+
+  const $p = document.createElement('p');
+  $p.textContent = desc;
+
+  const $link = document.createElement('div');
+  $link.append(link);
+  link.textContent = 'Read More';
+  link.className = 'button primary';
+
+  const $text = document.createElement('div');
+  $text.classList.add('text');
+  $text.append($pre, $h2, $p, $link);
+
+  const $image = document.createElement('div');
+  $image.classList.add('image');
+  // find image
+  const $hero = doc.querySelector('body > main picture');
+  if ($hero) {
+    $image.append($hero);
+  }
+
+  $block.replaceChildren($image, $text);
+}

blocks/footer/footer.js

@@ -7,8 +7,9 @@ import { loadFragment } from '../fragment/fragment.js';
  */
 export default async function decorate(block) {
   // load footer as fragment
-  const footerMeta = getMetadata('footer');
-  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
+/*  const footerMeta = getMetadata('footer');
+  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';*/
+  const footerPath = '/adapt_to/wknd/footer';
   const fragment = await loadFragment(footerPath);
 
   // decorate footer DOM