site/src/layouts/partials/ExamplesMain.astro

---
import { getVersionedDocsPath } from '@libs/path'
import { getConfig } from '@libs/config'
import { getData } from '@libs/data'
import { getSlug } from '@libs/utils'
---

{
  getData('examples').map(({ category, description, examples, external }) => {
    return (
      <div class="bd-content">
        <h2 id={getSlug(category)}>{category}</h2>
        <p>{description}</p>
        <div class="row">
          {examples.map((example, index) => {
            if (external) {
              return (
                <article class="md:col-6 lg:col-4 mb-3 d-flex gap-3">
                  <svg class="bi flex-shrink-0 mt-1" aria-hidden="true">
                    <use href="#box-seam" />
                  </svg>
                  <div>
                    <h3 class="h5 mb-1">
                      <a
                        class="d-block underline-offset-1"
                        href={`${getConfig().github_org}${example.url}/`}
                        target="_blank"
                        rel="noopener"
                        id={`starter-${index}`}
                      >
                        {example.name}
                      </a>
                    </h3>
                    <p class="fg-2">{example.description}</p>
                    <p>
                      <a
                        class="icon-link small theme-secondary underline-offset-1"
                        href={`https://stackblitz.com/github/twbs${example.url}?file=${
                          example.indexPath ? example.indexPath : 'index.html'
                        }`}
                        target="_blank"
                        rel="noopener"
                        aria-labelledby={`edit-${index} starter-${index}`}
                      >
                        <svg class="bi flex-shrink-0" aria-hidden="true">
                          <use href="#lightning-charge-fill" />
                        </svg>
                        <span id={`edit-${index}`}>Edit in StackBlitz</span>
                      </a>
                    </p>
                  </div>
                </article>
              )
            }

            return (
              <article class="sm:col-6 md:col-3 mb-3">
                <a
                  class="d-block underline-offset-1"
                  href={`/docs/${getConfig().docs_version}/examples/${getSlug(example.name)}/`}
                >
                  <img
                    class="img-thumbnail mb-3 examples-thumb"
                    data-light-src={getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}.png`)}
                    data-light-srcset={`${getVersionedDocsPath(
                      `/assets/img/examples/${getSlug(example.name)}.png`
                    )}, ${getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}@2x.png`)} 2x`}
                    data-dark-src={getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}-dark.png`)}
                    data-dark-srcset={`${getVersionedDocsPath(
                      `/assets/img/examples/${getSlug(example.name)}-dark.png`
                    )}, ${getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}-dark@2x.png`)} 2x`}
                    srcset={`${getVersionedDocsPath(
                      `/assets/img/examples/${getSlug(example.name)}.png`
                    )}, ${getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}@2x.png`)} 2x`}
                    src={getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}.png`)}
                    alt=""
                    width="480"
                    height="300"
                    loading="lazy"
                  />
                  <h3 class="h5 mb-1">{example.name}</h3>
                </a>
                <p class="fg-2">{example.description}</p>
              </article>
            )
          })}
        </div>
      </div>
    )
  })
}

<script is:inline>
  const applyExamplesThumbTheme = () => {
    const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark'
    const thumbs = document.querySelectorAll('.examples-thumb')

    thumbs.forEach((thumb) => {
      const src = isDark ? thumb.dataset.darkSrc : thumb.dataset.lightSrc
      const srcset = isDark ? thumb.dataset.darkSrcset : thumb.dataset.lightSrcset

      if (src && thumb.getAttribute('src') !== src) {
        thumb.setAttribute('src', src)
      }

      if (srcset && thumb.getAttribute('srcset') !== srcset) {
        thumb.setAttribute('srcset', srcset)
      }
    })
  }

  applyExamplesThumbTheme()

  new MutationObserver(applyExamplesThumbTheme).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['data-bs-theme']
  })
</script>