photos.astro

---
import { getLiveCollection } from 'astro:content'
import Layout from '../layouts/Layout.astro'

export const prerender = false

const { entries: photos, error } = await getLiveCollection('photos', { limit: 10 })

if (error) {
  console.error('Failed to load photos: ', error.message)
}
---

<Layout title="Photos">

  <style is:global>

    @import "tailwindcss";
    @reference "../assets/css/global.css";

    article > *:not(.media-gallery){
      display: none;
    }

    article,
    .media-gallery {
      @apply contents;
    }
    .media-item {
      @apply rounded-2xl w-full h-full object-cover;
    }

  </style>

  <div class="grid md:grid-cols-2 gap-8 grid-flow-dense">

    {photos?.map((article) => (
      <article set:html={article.rendered.html} data-url={article.data.url} />
    ))}
  </div>

  <script>
    const articles = document.querySelectorAll('article')

    articles.forEach(article => {
      const images = article.querySelectorAll('img')

      images.forEach(img => {
        img.setAttribute('lazy', true)
        const url = article.getAttribute('data-url');
        if (!url) return;
        const a = document.createElement('a');
        a.href = url;
        img.parentNode.insertBefore(a, img);
        a.appendChild(img);
      });

    });
  </script>

</Layout>