gistfile1.txt

<script context="module" lang="ts">
  /**
	 * @type {import('@sveltejs/kit').Load}
	 */
  const posts = import.meta.glob('./contents/*.svx')

  let body = []

  for (const path in posts) {
    body.push(posts[path]().then(({metadata}) => metadata))
  }
  /**
	 * @type {import('@sveltejs/kit').Load}
	 */
  export async function load({ page, fetch }) {
    let posts = await Promise.all(body);
    posts.sort((a, b) => (new Date(b.published_at) - new Date(a.published_at)));
    console.log(posts)
    return {
      props: {
        posts
      }
    };
  }
</script>

<script>
  import {onMount} from 'svelte';
  import Tag from "$lib/Tag.svelte";
  export let posts;

  onMount(async () => {
		const targets = document.querySelectorAll("img");
    const lazyLoad = (target) => {
    const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          console.log(entry)
          if (entry.isIntersecting) {
            const img = entry.target;
            const src = img.getAttribute("data-src");

            img.setAttribute("src", src);
            img.classList.add("fade-out");
            img.classList.add("fade-in");
            observer.disconnect();
          }
        })
      }, { threshold: [0.9] });
      io.observe(target);
    }
    targets.forEach(lazyLoad);
	});
</script>

<svelte:head>
  <title>Watches.CEO - Unbiased watch reviews</title>
</svelte:head>

<!--Title-->
<div class="font-sans">


  <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">


    {#each posts as {title, tags, outline, slug, cover, published_at}, i}
      <div class="rounded overflow-hidden shadow-lg">
        <a href="/contents/{slug}" >

        <img class="w-full" alt="cover" data-src={cover}>


        </a>


        <div class="px-6 py-4">
          <a
            class="text-white space-y-3"
            rel="prefetch"
            href="/contents/{slug}"
          >

          <div class="font-bold text-xl mb-2" style="font-family: Vollkorn SC, serif; font-weight:700; font-size:1.8rem;">

            {title}</div>

          <div class="flex flex-row justify-between">
            <p class="text-sm font-normal text-gray-300">
              Tags:
              {#each tags as tag}
                <Tag { tag }/>
              {/each}
            </p>
            <p>{published_at}</p>
          </div>
          </a>
        </div>
      </div>
    {/each}

  </div>
</div>

<style>



.fade-out{
    opacity: 0;
}

.fade-in{
    opacity: 1.0 !important;;
    transition: all 1200ms;
}
</style>