First post

const bos = new BOS({
  distance: '60px',
  duration: 700,
  delay: 50,
  easing: 'ease-in-out',
  once: true,
  rootMargin: '0px',
  threshold: 0.2,
  watchElements: true,
});

const escapeHtml = (s = '') =>
  String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);


async function getData() {
  const [entries, headers] = await Promise.all([
    fetch('https://cms.kuligpost.com/api/content/my-blog/faq').then((r) => r.json()),
    fetch('https://cms.kuligpost.com/api/content/my-blog/header-home').then((r) =>
      r.json(),
    ),
  ]);

const header = document.getElementById('header');

header.innerHTML = headers
  .map(
    ({ data }) => `
      <h1 data-bos="slide-left">${escapeHtml(data.title)}</h1>
      <img src="https://cms.kuligpost.com${data.image}" class="img-fluid rounded-4" data-bos="slide-down" />
    `,
  )
  .join('');

    
  const faqs = entries.map(({ id, data }) => ({ id, ...data }));
  const accordion = document.getElementById('faq');
faqs.reverse()
accordion.innerHTML = faqs
  .map(
    (data) => `
      <div class="accordion-item">
        <h2 class="accordion-header" id="heading-${data.id}">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#item-${data.id}"
            aria-expanded="false"
            aria-controls="item-${data.id}"
          >${escapeHtml(data.question)}
          </button>
        </h2>

        <div
          id="item-${data.id}"
          class="accordion-collapse collapse"
          aria-labelledby="heading-${data.id}"
          data-bs-parent="#faq"
        >
          <div class="accordion-body">
            <p class="mb-0">${escapeHtml(data.answer)}</p>

          </div>
        </div>
      </div>
    `,
  )
  .join('');

}
getData();