refactor: replace all images

src/components/BasicImage.astro

@@ -12,8 +12,9 @@ interface Props {
 	height?: string | number;
 	href?: string;
 	loading?: 'lazy' | 'eager';
-	noSpacing?: boolean;
+	noMargin?: boolean;
 	quality?: number;
+	role?: string;
 	size?: 'regular' | 'wide' | 'fullsize';
 	source?: string;
 	sourceUrl?: string;
@@ -29,7 +30,7 @@ const {
 	height,
 	href,
 	loading = 'lazy',
-	noSpacing,
+	noMargin,
 	quality,
 	size,
 	source,
@@ -71,11 +72,11 @@ const wrapperProps = href ? { href } : {};
 
 <figure
 	class:list={[
-		'mbs-0 mie-0 mis-0',
+		'mis mbe-13 mbs-0 mie-0',
 		{
 			'figure-wide': size === 'wide',
 			'figure-fullsize': size === 'fullsize',
-			'mbe-13': true,
+			'!mbe-0': noMargin,
 		},
 		className,
 	]}

src/components/GalleryDetail.astro

@@ -1,5 +1,5 @@
 ---
-import Image from './Image.astro';
+import BasicImage from './BasicImage.astro';
 import Headline from './Headline.astro';
 
 const { entry } = Astro.props;
@@ -49,7 +49,7 @@ const imageLength = entry.data.images.length;
 						},
 					]}
 				>
-					<Image alt={entry.data.title} src={src} />
+					<BasicImage alt={entry.data.title} src={src} />
 				</div>
 			))
 		}

src/components/JournalList.astro

@@ -1,5 +1,5 @@
 ---
-import { Picture } from 'astro:assets';
+import BasicImage from '../components/BasicImage.astro';
 
 import type { CollectionEntry } from 'astro:content';
 interface Props {
@@ -27,13 +27,11 @@ const { entries } = Astro.props;
 				>
 					<div class="absolute z-10 h-full w-full">
 						{data.cover ? (
-							<Picture
+							<BasicImage
 								alt={data.title}
-								formats={['avif', 'webp']}
+								class="!m-0 block !h-full w-full object-cover"
-								height="937"
 								role="presentation"
 								src={data.cover}
-								width="1500"
 							/>
 						) : (
 							<div

src/components/ProjectImage.astro

@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import Image from './Image.astro';
+import BasicImage from './BasicImage.astro';
 
 interface Props {
 	project: CollectionEntry<'projects'>;
@@ -10,18 +10,13 @@ const { project } = Astro.props;
 ---
 
 {
-	project.data.image &&
+	project.data.image && (
-		(project.data.image.src.includes('.svg') ? (
+		<BasicImage
-			<div class="image-shadow mbe-0 mbs-0">
+			alt={project.data.title}
-				<img class="image-border" alt={project.data.title} src={project.data.image.src} />
+			aria-label={project.data.title}
-			</div>
+			class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
-		) : (
+			noMargin
-			<Image
+			src={project.data.image.src}
-				alt={project.data.title}
+		/>
-				aria-label={project.data.title}
+	)
-				class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
-				noMargin
-				src={project.data.image.src}
-			/>
-		))
 }

src/content/ai-art/after-humanity.mdx

@@ -4,41 +4,41 @@ date: 2023-02-05
 sort: 210
 coverSize: medium
 images:
-  - src: /assets/images/ai-art/after-humanity/1.webp
+  - src: /images/ai-art/after-humanity/1.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/2.webp
+  - src: /images/ai-art/after-humanity/2.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/3.webp
+  - src: /images/ai-art/after-humanity/3.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/4.webp
+  - src: /images/ai-art/after-humanity/4.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/5.webp
+  - src: /images/ai-art/after-humanity/5.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/6.webp
+  - src: /images/ai-art/after-humanity/6.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/7.webp
+  - src: /images/ai-art/after-humanity/7.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/8.webp
+  - src: /images/ai-art/after-humanity/8.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/9.webp
+  - src: /images/ai-art/after-humanity/9.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/10.webp
+  - src: /images/ai-art/after-humanity/10.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/11.webp
+  - src: /images/ai-art/after-humanity/11.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/12.webp
+  - src: /images/ai-art/after-humanity/12.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/13.webp
+  - src: /images/ai-art/after-humanity/13.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/14.webp
+  - src: /images/ai-art/after-humanity/14.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/15.webp
+  - src: /images/ai-art/after-humanity/15.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/16.webp
+  - src: /images/ai-art/after-humanity/16.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/17.webp
+  - src: /images/ai-art/after-humanity/17.webp
     aspectRatio: 1
-  - src: /assets/images/ai-art/after-humanity/18.webp
+  - src: /images/ai-art/after-humanity/18.webp
     aspectRatio: 1
 ---
 

src/content/ai-art/ai-taking-over-the-world.mdx

@@ -4,7 +4,7 @@ date: 2022-12-14
 sort: 70
 coverSize: medium
 images:
-  - src: /assets/images/ai-art/ai-taking-over-the-world/1.webp
+  - src: /images/ai-art/ai-taking-over-the-world/1.webp
     aspectRatio: 1.6
 ---