feat: add gallery index page for Sketchnotes

src/content/config.ts

@@ -53,6 +53,7 @@ const sketchnotesCollection = defineCollection({
 	schema: z.object({
 		title: z.string(),
 		sort: z.number().optional(),
+		coverSize: z.enum(['small', 'medium', 'large']).default('small'),
 		images: z.array(
 			z.object({
 				src: z.string(),

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

@@ -1,6 +1,7 @@
 ---
 title: Being a Good Listener
 sort: 100
+coverSize: medium
 images:
   - src: /assets/images/sketchnotes/being-a-good-listener.jpg
     aspectRatio: 1.35

src/content/sketchnotes/bikablo-practice.mdx

@@ -1,6 +1,7 @@
 ---
 title: Bikablo Practice
 sort: 80
+coverSize: large
 images:
   - src: /assets/images/sketchnotes/bikablo-practice-1.jpg
     aspectRatio: 0.75

src/content/sketchnotes/random-sketches.mdx

@@ -1,6 +1,7 @@
 ---
 title: Random Sketches
 sort: 60
+coverSize: large
 images:
   - src: /assets/images/sketchnotes/random-sketches-1.jpg
     aspectRatio: 0.75

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

@@ -1,6 +1,7 @@
 ---
 title: Self-Actualization vs. Self-Image Actualization
 sort: 50
+coverSize: medium
 images:
   - src: /assets/images/sketchnotes/self-actualization.jpg
     aspectRatio: 1.35

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

@@ -1,6 +1,7 @@
 ---
 title: This is Water
 sort: 110
+coverSize: large
 images:
   - src: /assets/images/sketchnotes/this-is-water-1.jpg
     aspectRatio: 1.35

src/content/sketchnotes/weight-idea.mdx

@@ -1,6 +1,7 @@
 ---
 title: Weight Idea
 sort: 20
+coverSize: medium
 images:
   - src: /assets/images/sketchnotes/weight-idea.jpg
     aspectRatio: 1.35

src/pages/sketchnotes.astro

@@ -0,0 +1,66 @@
+---
+import cx from 'classnames';
+
+import { getCollection } from 'astro:content';
+
+import { sortBySortKey } from '../utils/sort-by-sortkey';
+
+import GridLayout from '../layouts/GridLayout.astro';
+import PageTitle from '../components/PageTitle.astro';
+import Picture from '../components/Picture.astro';
+import { Link } from '../components';
+import { Content as Intro } from '../text/sketchnotes/intro.mdx';
+
+import { mapping } from '../mdx-components';
+
+const allSketchnotes = await getCollection('sketchnotes');
+allSketchnotes.sort(sortBySortKey);
+---
+
+<GridLayout title="Sketchnotes" grid="wide" class="grid" innerGrid>
+	<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>
+
+	<article
+		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+	>
+		<Intro components={mapping} />
+	</article>
+
+	<nav class="md:col-start-1 md:col-end-16" aria-label="Sketchnotes">
+		<ol
+			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-gallery md:grid-cols-gallery md:grid-rows-gallery"
+		>
+			{
+				allSketchnotes.map(({ slug, data }) => (
+					<li
+						class={cx({
+							'md:col-span-3 md:row-span-2':
+								data.images[0].aspectRatio > 1 && data.coverSize === 'small',
+							'md:col-span-2 md:row-span-3':
+								data.images[0].aspectRatio < 1 && data.coverSize === 'small',
+							'md:col-span-4 md:row-span-3':
+								data.images[0].aspectRatio > 1 && data.coverSize === 'medium',
+							'md:col-span-3 md:row-span-4':
+								data.images[0].aspectRatio < 1 && data.coverSize === 'medium',
+							'md:col-span-6 md:row-span-5':
+								data.images[0].aspectRatio > 1 && data.coverSize === 'large',
+							'md:col-span-5 md:row-span-6':
+								data.images[0].aspectRatio < 1 && data.coverSize === 'large',
+						})}
+					>
+						<Link title={data.title} href={`/sketchnotes/${slug}/`}>
+							<Picture
+								aspect={data.images[0].aspectRatio}
+								src={data.images[0].src}
+								alt={data.title}
+								class="h-full mbe-10 md:w-full md:object-cover md:!mbe-0 [&_img]:!block [&_img]:!h-full [&_img]:border-solid [&_picture]:!block [&_picture]:!h-full"
+								format={['webp', 'avif']}
+								breakpoints={[300, 500, 700, 1000, 1280]}
+							/>
+						</Link>
+					</li>
+				))
+			}
+		</ol>
+	</nav>
+</GridLayout>

src/text/sketchnotes/intro.mdx

@@ -0,0 +1 @@
+I started learning Sketchnotes in 2015. Sketchnotes are a way to visualize notes with text and images. I use them to take notes at conferences, meetings, and when I’m reading books. I’ve found that they help me to remember things better, and they are more fun to look at than a page full of text.

tailwind.config.cjs

@@ -53,11 +53,16 @@ module.exports = {
 				'haiku-xl': 'repeat(auto-fit, minmax(25rem, 1fr)',
 				'haiku-list': 'repeat(auto-fill, minmax(3rem, 1fr))',
 				toolbox: 'repeat(auto-fit, minmax(80px, 1fr))',
+				gallery: 'repeat(auto-fit, minmax(50px, 1fr))',
 			},
 			gridTemplateRows: ({ theme }) => ({
 				layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`,
 				haiku: `clamp(3rem, ${theme('spacing.column')}, 9rem) 1fr`,
+				gallery: '50px',
 			}),
+			gridAutoRows: {
+				gallery: '50px',
+			},
 			columns: {
 				13: '13',
 				14: '14',