feat: add gallery detail page and component

src/components/GalleryDetail.astro

@@ -0,0 +1,57 @@
+---
+import cx from 'classnames';
+
+import Picture from './Picture.astro';
+import { Headline } from '.';
+
+const { entry } = Astro.props;
+
+function randomPosition() {
+	const positions = ['start', 'center', 'end'];
+	const randomIndex = Math.floor(Math.random() * positions.length);
+	return positions[randomIndex];
+}
+
+const imageLength = entry.data.images.length;
+---
+
+<div class="col-span-full row-start-1 row-end-3 flex flex-col lg:flex-row">
+	<div class="p-gap lg:w-2/6">
+		<div
+			class="w-[66ch] lg:sticky lg:top-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))] lg:h-[max(30vh,_250px)] lg:w-full"
+		>
+			<Headline>{entry.data.title}</Headline>
+			<slot />
+		</div>
+	</div>
+	<div
+		class={cx(
+			'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 ',
+			{
+				'lg:pbs-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))]': imageLength > 1,
+				'lg:justify-items-center lg:items-center': imageLength === 1,
+			}
+		)}
+	>
+		{
+			entry.data.images.map(({ src }: { src: string }, index: number) => (
+				<Picture
+					alt={entry.data.title}
+					aspect={entry.data.aspect}
+					breakpoints={[300, 500, 700, 1000, 1280]}
+					class={cx('col-span-full w-full lg:col-span-3  lg:max-w-full', {
+						'justify-self-start lg:col-start-1':
+							randomPosition() === 'start' && imageLength > 1 && index > 0,
+						'justify-self-center lg:col-start-2':
+							randomPosition() === 'center' && imageLength > 1 && index > 0,
+						'justify-self-end lg:col-start-3':
+							randomPosition() === 'end' && imageLength > 1 && index > 0,
+						'lg:col-start-2': imageLength === 1 || index === 0,
+					})}
+					format={['webp', 'avif']}
+					src={src}
+				/>
+			))
+		}
+	</div>
+</div>

src/content/config.ts

@@ -49,7 +49,21 @@ const projectCollection = defineCollection({
 	}),
 });
 
+const sketchnotesCollection = defineCollection({
+	schema: z.object({
+		title: z.string(),
+		sort: z.number().optional(),
+		images: z.array(
+			z.object({
+				src: z.string(),
+				aspectRatio: z.number(),
+			})
+		),
+	}),
+});
+
 export const collections = {
 	haiku: haikuCollection,
 	projects: projectCollection,
+	sketchnotes: sketchnotesCollection,
 };

src/content/sketchnotes/being-a-good-listener.mdx

@@ -0,0 +1,9 @@
+---
+title: Being a Good Listener
+sort: 100
+images:
+  - src: /assets/images/sketchnotes/being-a-good-listener.jpg
+    aspectRatio: 1.35
+---
+
+Sketchnote of the video [Being A Good Listener](https://youtu.be/-BdbiZcNBXg) by **The School of Life**.

src/content/sketchnotes/better-conversation.mdx

@@ -0,0 +1,9 @@
+---
+title: Better Conversations
+sort: 90
+images:
+  - src: /assets/images/sketchnotes/better-conversation.jpg
+    aspectRatio: 0.75
+---
+
+A Sketchnote I did of the TED Talk **Celeste Headlee** [10 ways to have a better conversation](https://www.ted.com/talks/celeste_headlee_10_ways_to_have_a_better_conversation).

src/content/sketchnotes/bikablo-practice.mdx

@@ -0,0 +1,15 @@
+---
+title: Bikablo Practice
+sort: 80
+images:
+  - src: /assets/images/sketchnotes/bikablo-practice-1.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/bikablo-practice-2.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/bikablo-practice-3.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/bikablo-practice-4.jpg
+    aspectRatio: 0.75
+---
+
+I practiced the vocabulary from the [Bikablo books](https://bikablo.com/en/tools/).

src/content/sketchnotes/how-to-speak-so-that-people-want-to-listen.mdx

@@ -0,0 +1,9 @@
+---
+title: How to Speak So That People Want to Listen
+sort: 70
+images:
+  - src: /assets/images/sketchnotes/how-to-speak.jpg
+    aspectRatio: 0.75
+---
+
+Sketchnote of the TED-Talk [How to speak so that people want to listen](https://www.ted.com/talks/julian_treasure_how_to_speak_so_that_people_want_to_listen#t-185141) by **Julian Treasure**.

src/content/sketchnotes/random-sketches.mdx

@@ -0,0 +1,23 @@
+---
+title: Random Sketches
+sort: 60
+images:
+  - src: /assets/images/sketchnotes/random-sketches-1.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-2.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-3.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-4.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-5.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-6.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-7.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-8.jpg
+    aspectRatio: 0.75
+---
+
+A collection of random sketches where I tried different visuals and lettering styles.

src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx

@@ -0,0 +1,9 @@
+---
+title: Self-Actualization vs. Self-Image Actualization
+sort: 50
+images:
+  - src: /assets/images/sketchnotes/self-actualization.jpg
+    aspectRatio: 1.35
+---
+
+**Bruce Lee** on the difference between **Self-Actualization** and **Self-Image Actualization**. Most people pursue only the first and never find their true selves.

src/content/sketchnotes/the-art-of-enough.mdx

@@ -0,0 +1,9 @@
+---
+title: The Art of Enough
+sort: 40
+images:
+  - src: /assets/images/sketchnotes/the-art-of-enough.jpg
+    aspectRatio: 0.75
+---
+
+Sketchnote for the article [The Art of Enough](https://experiencelife.com/article/the-art-of-enough/), about consumption, spending mindful, and buying quality.

src/content/sketchnotes/the-wim-hof-method.mdx

@@ -0,0 +1,9 @@
+---
+title: The Wim Hof Method
+sort: 10
+images:
+  - src: /assets/images/sketchnotes/wim-hof-method.jpg
+    aspectRatio: 0.75
+---
+
+Sketchnote of the **Wim Hof Method**. A breathing technique, which allowed him to hold 26 world records of the extreme kind: Walking on Mount Everest in shorts, buried in ice for hours.

src/content/sketchnotes/this-is-water.mdx

@@ -0,0 +1,11 @@
+---
+title: This is Water
+sort: 110
+images:
+  - src: /assets/images/sketchnotes/this-is-water-1.jpg
+    aspectRatio: 1.35
+  - src: /assets/images/sketchnotes/this-is-water-2.jpg
+    aspectRatio: 0.70
+---
+
+I always wanted to do a Sketchnote for the Commencement Speech **This Is Water** to Kenyon College class of 2005 by the late **David Foster Wallace**.

src/content/sketchnotes/title-lettering.mdx

@@ -0,0 +1,9 @@
+---
+title: Title Lettering
+sort: 30
+images:
+  - src: /assets/images/sketchnotes/title-lettering.jpg
+    aspectRatio: 1.35
+---
+
+Title lettering in one of my Sketchnote books.

src/content/sketchnotes/weight-idea.mdx

@@ -0,0 +1,9 @@
+---
+title: Weight Idea
+sort: 20
+images:
+  - src: /assets/images/sketchnotes/weight-idea.jpg
+    aspectRatio: 1.35
+---
+
+Some ideas I had about how to visualize weights for my training diary.

src/pages/sketchnotes/[...slug].astro

@@ -6,14 +6,14 @@ import { sortBySortKey } from '../../utils/sort-by-sortkey';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHeader from '../../components/PageHeader.astro';
 import Pagination from '../../components/Pagination.astro';
-import { Headline } from '../../components';
+import GalleryDetail from '../../components/GalleryDetail.astro';
 
 import { mapping } from '../../mdx-components';
 
 export async function getStaticPaths() {
 	const sketchnotesEntries = await getCollection('sketchnotes');
 	const numberOfPages = sketchnotesEntries.length;
-	sketchnotesEntries.sort(sortBySortKey).reverse();
+	sketchnotesEntries.sort(sortBySortKey);
 
 	return sketchnotesEntries.map((entry, index) => ({
 		params: { slug: entry.slug },
@@ -33,35 +33,15 @@ const { Content } = await entry.render();
 ---
 
 <BaseLayout title={entry.data.title} header={false} footer={false}>
-	<div class="grid h-full grid-cols-18 grid-rows-haiku">
+	<div class="grid h-full grid-cols-18">
 		<PageHeader
 			class="!mbe-0 z-10 col-span-full row-start-1 bg-transparent dark:bg-transparent"
 			navigation={false}
 			backLink="/sketchnotes/"
 		/>
-		<div
-			class="haiku:grid-cols-haiku-xl col-span-full row-start-1 row-end-3 grid w-full grid-cols-haiku"
-		>
-			<div class="grid h-full w-full items-center">
-				<div>
-					<Headline>{entry.data.title}</Headline>
+		<GalleryDetail entry={entry}>
 			<Content components={mapping} />
-				</div>
-			</div>
-			<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
-				{
-					entry.data.images.map(({ src }: { src: string }) => (
-						<div class="grid h-full w-full items-center">
-							<img
-								alt={entry.data.title}
-								class="h-full w-full object-cover"
-								src={src}
-							/>
-						</div>
-					))
-				}
-			</div>
-		</div>
+		</GalleryDetail>
 		<Pagination
 			nextText={'Next'}
 			nextUrl={next.slug && `/sketchnotes/${next.slug}`}