feat: Move to the Picture Component

Signed-off-by: Florian Bouillon <f.bouillon@aptatio.com>

src/pages/404.astro

@@ -0,0 +1,25 @@
+---
+import Layout from 'layouts/Layout.astro'
+import I404 from 'assets/pages/404/404.svg'
+import I404Light from 'assets/pages/404/404.light.svg'
+import Button from 'components/global/Button.astro'
+import ButtonLink from 'components/global/ButtonLink.astro'
+import Picture from 'components/Picture.astro'
+---
+
+<Layout>
+	<main class="container flex flex-col gap-24 justify-center items-center md:mt-6">
+		<h1 class="text-6xl text-center font-bold">404 La page recherché n'existe pas :(</h1>
+		<Picture src={I404Light} srcDark={I404} alt="404 error image" />
+		<div class="flex gap-6">
+			<ButtonLink href="/">Retour à la page d'accueil</ButtonLink>
+			<Button id="back_button">Retour à la page précédente</Button>
+		</div>
+	</main>
+</Layout>
+
+<script>
+	(document.querySelector('button.back_button') as HTMLButtonElement).addEventListener('click', () => {
+		history.back()
+	})
+</script>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content'
 import { Image } from 'astro:assets'
 import Layout from 'layouts/Layout.astro'
+import Picture from 'components/Picture.astro'
 
 const projects = await getCollection('projects')
 const clients = await Promise.all((await getCollection('clients')).map(async (it) => ({...it, obj: await it.render()})))
@@ -18,7 +19,7 @@ const clients = await Promise.all((await getCollection('clients')).map(async (it
 			{projects.map((it) => (
 				<a href={`/projets/${it.slug}`} class="flex flex-col gap-4 mb-6 md:mb-0">
 					{it.data.image && (
-						<Image src={it.data.image} alt="" />
+						<Picture src={it.data.image} alt="" />
 					)}
 					<p>{it.data.title}</p>
 				</a>
@@ -43,7 +44,7 @@ const clients = await Promise.all((await getCollection('clients')).map(async (it
 						<div class="mt-6 md:mt-0 md:grid grid-cols-2 items-center">
 							<a href={client.data.site} target="_blank" rel="noreferrer nofollow" class="flex flex-col gap-4">
 								{client.data.logo && (
-									<Image class:list={{'mx-auto': true, 'md:mx-0': true, 'dark:invert': client.data.logo.invert}} src={client.data.logo.src} height={48} alt="" />
+									<Picture class:list={{'mx-auto': true, 'md:mx-0': true, 'dark:invert': client.data.logo.invert}} src={client.data.logo.src} height={48} alt="" />
 								) || (
 									<div>{client.data.title}</div>
 								)}

src/pages/projets/[project].astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import Picture from 'components/Picture.astro'
 import Article from 'layouts/Article.astro'
 
 export const prerender = true
@@ -11,16 +12,18 @@ export async function getStaticPaths() {
 	}))
 }
 // 2. For your template, you can get the entry directly from the prop
-const { entry } = Astro.props;
+const { entry } = Astro.props as Awaited<ReturnType<typeof getStaticPaths>>[0]['props'];
 const { Content } = await entry.render();
 ---
 <Article title={entry.data.title} image={[entry.data.image]} description={entry.data.description} link={entry.data.link} breadcrumb={[{text: 'Accueil', href: '/'}, {text: 'Projets', href: '/projets'}, {text: entry.data.title}]}>
 	<h1>{entry.data.title}</h1>
 	<p class="flex justify-end font-lights my-0">
-		<span>Sortie initial le {entry.data.created.toLocaleDateString('fr')}</span>
+		{entry.data.created && (
+			<span>Sortie initial le {entry.data.created.toLocaleDateString('fr')}</span>
+		)}
 		<!-- <p>Software updated: {entry.data.updated.toLocaleDateString()}</p> -->
 	</p>
 
-	<Content />
+	<Content components={{img: Picture }}/>
 
 </Article>