CF UE EDS Block

latest.js

/* eslint-disable no-underscore-dangle */
// eslint-disable-next-line import/no-unresolved
import { html, render } from 'https://unpkg.com/htm/preact/standalone.module.js';

function Latest(props) {
  return html`
  <h2>Latest Destinations</h2>
  <ul data-aue-type="container" data-aue-label="Latest Destinations">
    ${props.destinations.map((item) => html`<li data-aue-type="reference" data-aue-label=${item.title} data-aue-resource=${`urn:aemconnection:${item._path}/jcr:content/data/master`} >
      <div class="latest-card-body">
        <div class="latest-card-image">
          <img data-aue-prop="image" data-aue-type="media" data-aue-label="Image" src=${`https://${host}${item.image._dynamicUrl}`} alt=${item.image.description} width="248" height="248" />
        </div>
        <div class="latest-card-content">
          <div class="latest-card-pretitle">
            <span data-aue-prop="pretitle" data-aue-type="text" data-aue-label="Pretitle">${item.pretitle}</span>
          </div>
          <h3 data-aue-prop="title" data-aue-type="text" data-aue-label="Title">${item.title}</h5>
          <div data-aue-prop="description" data-aue-type="richtext" data-aue-label="Description" dangerouslySetInnerHTML=${{ __html: item.description.html }} />
        </div>
      </div>
    </li>`)}
    </ul>`;
}

function fetchLatest(aem) {
  return fetch(`https://aem/your-json`)
    .then((response) => response.json())
    .then((json) => json.data.destinationList.items);
}

export default async function decorate(block) {
  const latest = await fetchLatest(aem);
  block.innerText = '';
  render(html`<${Latest} destinations=${latest} />`, block);
}