67 lines
1.7 KiB
Plaintext
67 lines
1.7 KiB
Plaintext
---
|
|
import ImageCarousel from "@components/ImageCarousel.astro";
|
|
import SectionTitle from "@components/SectionTitle.astro";
|
|
import MainLayout from "@layouts/MainLayout.astro";
|
|
|
|
import { getCollection, render } from "astro:content";
|
|
|
|
import {
|
|
getAllProjectImages,
|
|
getFullExternalURLOfImage,
|
|
getProjectHero
|
|
} from "@/lib/utils";
|
|
|
|
export async function getStaticPaths() {
|
|
const projects = await getCollection("projects");
|
|
return projects.map((project) => ({
|
|
params: { slug: project.id },
|
|
props: { project }
|
|
}));
|
|
}
|
|
|
|
const { project } = Astro.props;
|
|
const { Content } = await render(project);
|
|
|
|
const images = getAllProjectImages(project);
|
|
const hero = getProjectHero(project);
|
|
|
|
const seoImage: SiteImage = {
|
|
externalURL: await getFullExternalURLOfImage(hero),
|
|
src: hero.src,
|
|
alt: project.data.images.hero.alt
|
|
};
|
|
---
|
|
|
|
<MainLayout
|
|
title={project.data.title}
|
|
description={project.data.description}
|
|
image={seoImage}
|
|
>
|
|
<div class="w-full">
|
|
<section id="cta" class="text-white">
|
|
<div class="flex h-64 w-full items-center justify-center">
|
|
<ImageCarousel
|
|
images={images}
|
|
className="absolute -z-40 h-full w-full"
|
|
foreground={true}
|
|
interval={2000}
|
|
transitionDuration="duration-1000"
|
|
quality={50}
|
|
height={256}
|
|
shuffle={true}
|
|
/>
|
|
<h1 class="font-header text-4xl uppercase text-shadow-lg/75">
|
|
{project.data.title}
|
|
</h1>
|
|
</div>
|
|
</section>
|
|
<section id="projects" class="bg-white dark:bg-gray-950">
|
|
<div <div class="mx-auto max-w-4xl px-8 py-16 text-center">
|
|
<SectionTitle>{project.data.title}</SectionTitle>
|
|
|
|
<Content />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</MainLayout>
|