achat-maison-albi-fr/src/pages/insights/[...slug].astro

---
// Import section components
import { SITE } from "@/data_files/constants";
import MainLayout from "@/layouts/MainLayout.astro";
import { Image } from "astro:assets";
import { getCollection } from "astro:content";

// Use `getStaticPaths` to generate static routes for generated pages on build
export async function getStaticPaths() {
  const insightPosts = await getCollection("insights");
  return insightPosts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

// Get the props for this page that define a specific insight post
const { post } = Astro.props;

const { Content } = await post.render();

const pageTitle: string = `${post.data.title} | ${SITE.title}`;
---

<MainLayout title={pageTitle}>
  <section class="py-6 sm:py-8 lg:py-12">
    <div class="mx-auto max-w-screen-xl px-4 md:px-8">
      <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
        <div>
          <div class="h-64 overflow-hidden rounded-lg shadow-lg md:h-auto">
            <Image
              class="h-full w-full object-cover object-center"
              src={post.data.cardImage}
              alt={post.data.cardImageAlt}
              draggable={"false"}
              format={"avif"}
            />
          </div>
          <div id="pin" class="mt-10">
            <div class="mb-4 h-0.5 w-full bg-[#fa5a15]" id="progress"></div>
            <h2 class="text-pretty text-sm font-light text-neutral-500">
              Table of Contents:
            </h2>
          </div>
        </div>

        <div class="md:pt-8">
          <h1
            class="mb-4 text-balance text-center text-2xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-3xl md:mb-6 md:text-left"
          >
            {post.data.title}
          </h1>

          <article
            class="text-pretty text-lg text-neutral-700 dark:text-neutral-300"
          >
            <Content />
          </article>
        </div>
      </div>
    </div>
  </section>
</MainLayout>

<style is:global>
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    margin-top: 2.5rem;
  }
  h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  p {
    margin-top: 1.5rem;
  }

  @keyframes grow-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  #progress {
    transform-origin: 0 50%;
    animation: grow-progress auto linear;
    animation-timeline: scroll(block root);
  }
</style>

<script>
  import { gsap } from "gsap";
  import { ScrollTrigger } from "gsap/ScrollTrigger";

  gsap.registerPlugin(ScrollTrigger);

  gsap.timeline({
    scrollTrigger: {
      scrub: 1,
      pin: true,
      trigger: "#pin",
      markers: true,
      start: "top 20%",
      endTrigger: "footer",
      end: "top bottom",
    },
  });
</script>