cdrdpyj/src/pages/news/[id].astro

55 lines
1.6 KiB
Plaintext

---
import { YouTube } from 'astro-embed';
import MainLayout from "../../layouts/MainLayout.astro";
import Header from "../../components/Header.astro";
import CarouselSection from "../../components/section/CarouselSection.astro";
import { Image } from "@unpic/astro";
import { getCollection, render } from "astro:content";
import TitleSection from "../../components/section/TitleSection.astro";
import FooterSection from '../../components/section/FooterSection.astro';
export const prerender = true;
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
const posts = await getCollection("news");
return posts.map((post) => ({
params: { id: post.id },
props: { post },
}));
}
// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props;
const { Content } = await render(post);
---
<MainLayout>
<div class="container mx-auto py-16">
<Header />
</div>
<TitleSection title={post.data.title} />
<div class="container mx-auto">
{post.data.gallery && <CarouselSection images={post.data.gallery} />}
<div class="grid md:grid-cols-10">
<div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]">
<Content />
</div>
<div class="md:col-span-3 bg-tertiary md:sticky top-0 h-fit">
{ post.data.youtube && (
<YouTube id={post.data.youtube} />
)}
{post.data.gallery && (
post.data.gallery.map(galleryImage => (
<Image src={galleryImage.image} alt={galleryImage.text} />
))
)}
</div>
</div>
</div>
</MainLayout>
<FooterSection />