Implement image galleries

README.md

@@ -21,6 +21,7 @@ My blog, originally based on the very helpful eleventy-base-blog v8, although it
 	* Each individual tag
 * /now page that nicely handles posts tagged with "now"
 * Blogroll generated from _data/blogroll.js, with an automatically updated .opml so that visitors can import every blog in the list
+* Image galleries
 
 ### Technical
 * Reusable web components:

_data/galleries.js

@@ -0,0 +1,248 @@
+export default [
+	{
+		title: "Pop Tart Flavor Memes",
+		description:
+			"One day, almost certainly when I ought to have been doing something more important, I discovered a meme format featuring Pop Tart boxes edited to have outlandish flavors on the packaging. Naturally, I had to collect as many as I could find. Here's what I've got:",
+		synopsis: "Some very unusual Pop Tart flavors…",
+		url: "/img/gallery/poptarts/",
+		date: new Date("November 26, 2024"),
+		galleryImage: "pop_tart_flavor_2.webp",
+		galleryImageAlt: "",
+		pictures: [
+			{
+				title: "Frosted New England Clam Chowder",
+				filename: "pop_tart_flavor_1.webp",
+				altText: "",
+				thumbAltText: "Frosted New England Clam Chowder",
+				caption: "",
+			},
+			{
+				title: "Frosted Tree Bark",
+				filename: "pop_tart_flavor_2.webp",
+				altText: "",
+				thumbAltText: "Frosted Tree Bark",
+				caption: "",
+			},
+			{
+				title: "Frosted Boot Leather",
+				filename: "pop_tart_flavor_3.webp",
+				altText: "",
+				thumbAltText: "Frosted Boot Leather",
+				caption: "I've dropped this bad boy on a twitter thread or two.",
+			},
+			{
+				title: "Frosted Kermit",
+				filename: "pop_tart_flavor_4.webp",
+				altText: "",
+				thumbAltText: "Frosted Kermit",
+				caption: "Is it worth it?",
+			},
+			{
+				title: "Frosted Bare Chest",
+				filename: "pop_tart_flavor_5.webp",
+				altText: "",
+				thumbAltText: "Frosted Bare Chest",
+				caption: "",
+			},
+			{
+				title: "Frosted Lysol Wipes",
+				filename: "pop_tart_flavor_6.webp",
+				altText: "",
+				thumbAltText: "Frosted Lysol Wipes",
+				caption: "",
+			},
+			{
+				title: "Mine Tarts",
+				filename: "pop_tart_flavor_7.webp",
+				altText: "Minecraft Frosted Grass Block",
+				thumbAltText: "Minecraft Frosted Grass Block",
+				caption: "",
+			},
+			{
+				title: "Frosted Earth Worms",
+				filename: "pop_tart_flavor_8.webp",
+				altText: "",
+				thumbAltText: "Frosted Earth Worms",
+				caption: "",
+			},
+			{
+				title: "Frosted Ground Beef",
+				filename: "pop_tart_flavor_9.webp",
+				altText: "",
+				thumbAltText: "Frosted Ground Beef",
+				caption: "",
+			},
+			{
+				title: "Frosted Black Coffee",
+				filename: "pop_tart_flavor_10.webp",
+				altText: "",
+				thumbAltText: "Frosted Black Coffee",
+				caption: "Unironically: I'd eat this.",
+			},
+			{
+				title: "Frosted Gasoline",
+				filename: "pop_tart_flavor_11.webp",
+				altText: "",
+				thumbAltText: "Frosted Gasoline",
+				caption: "",
+			},
+			{
+				title: "Frosted Tide Pods",
+				filename: "pop_tart_flavor_12.webp",
+				altText: "",
+				thumbAltText: "Frosted Tide Pods",
+				caption: `I once saw a lady drop a container of Tide Pods in the supermarket; without thinking I blurted out: "Oop, five second rule!" and didn't even get a laugh. Brutal.`,
+			},
+			{
+				title: "Frosted Hot Dog Water",
+				filename: "pop_tart_flavor_13.webp",
+				altText: "",
+				thumbAltText: "Frosted Hot Dog Water",
+				caption:
+					"Frankly, I'd sooner have the frosted lysol wipe Pop Tarts. 🤮",
+			},
+			{
+				title: "NY Style Sewer Rat",
+				filename: "pop_tart_flavor_14.webp",
+				altText: "",
+				thumbAltText: "NY Style Sewer Rat",
+				caption: "",
+			},
+			{
+				title: "Frosted Caviar",
+				filename: "pop_tart_flavor_15.webp",
+				altText: "",
+				thumbAltText: "Frosted Caviar",
+				caption: "",
+			},
+			{
+				title: "Frosted Elmer's Glue",
+				filename: "pop_tart_flavor_16.webp",
+				altText: "",
+				thumbAltText: "Frosted Elmer's Glue",
+				caption: "",
+			},
+			{
+				title: "Crusty!",
+				filename: "pop_tart_flavor_17.webp",
+				altText: "Crusty! Cement Flavor",
+				thumbAltText: "Crusty! Cement Flavor",
+				caption: "",
+			},
+			{
+				title: "Frosted Nuclear Waste",
+				filename: "pop_tart_flavor_18.webp",
+				altText: "Frosted Nuclear Waste: Made with real waste!",
+				thumbAltText: "Frosted Nuclear Waste: Made with real waste!",
+				caption: "",
+			},
+			{
+				title: "Frosted Beans",
+				filename: "pop_tart_flavor_19.webp",
+				altText: "",
+				thumbAltText: "Frosted Beans",
+				caption: "I'd give it a shot.",
+			},
+			{
+				title: "Shower Pack",
+				filename: "pop_tart_flavor_20.webp",
+				altText:
+					"Shower Pack, 3 in 1 formula! Shampoo, conditioner, and body wash.",
+				thumbAltText:
+					"Shower Pack, 3 in 1 formula! Shampoo, conditioner, and body wash.",
+				caption: "",
+			},
+			{
+				title: "Limited Edition",
+				filename: "pop_tart_flavor_21.webp",
+				altText: "Limited Edition: Just the Crust",
+				thumbAltText: "Limited Edition: Just the Crust",
+				caption: "",
+			},
+			{
+				title: "Frosted McDonald's Sprite",
+				filename: "pop_tart_flavor_22.webp",
+				altText: "Frosted",
+				thumbAltText: "Frosted",
+				caption: "",
+			},
+			{
+				title: "Frosted Fresh Cut Grass",
+				filename: "pop_tart_flavor_23.webp",
+				altText: "",
+				thumbAltText: "Frosted Fresh Cut Grass",
+				caption: "",
+			},
+			{
+				title: "Frosted Windex",
+				filename: "pop_tart_flavor_24.webp",
+				altText: "",
+				thumbAltText: "Frosted Windex",
+				caption: "",
+			},
+			{
+				title: "Frosted Popcorn Ceiling",
+				filename: "pop_tart_flavor_25.webp",
+				altText: "",
+				thumbAltText: "Frosted Popcorn Ceiling",
+				caption: "",
+			},
+			{
+				title: "Frosted Sharkboy & Lavagirl",
+				filename: "pop_tart_flavor_26.webp",
+				altText: "",
+				thumbAltText: "Frosted Sharkboy & Lavagirl",
+				caption: "",
+			},
+			{
+				title: "Frosted The Sun",
+				filename: "pop_tart_flavor_27.webp",
+				altText: "",
+				thumbAltText: "Frosted The Sun",
+				caption: "I don't know why, but I feel like these would be delicious.",
+			},
+			{
+				title: "Frosted Axe",
+				filename: "pop_tart_flavor_28.webp",
+				altText: "Frosted Axe body Spray",
+				thumbAltText: "Frosted Axe body Spray",
+				caption: "I would simply die.",
+			},
+			{
+				title: "Frosted Miracle Whip",
+				filename: "pop_tart_flavor_29.webp",
+				altText: "",
+				thumbAltText: "Frosted Miracle Whip",
+				caption: "",
+			},
+			{
+				title: "Frosted Water",
+				filename: "pop_tart_flavor_30.webp",
+				altText: "",
+				thumbAltText: "Frosted Water",
+				caption: "I'd give it a shot.",
+			},
+			{
+				title: "Encrusted",
+				filename: "pop_tart_flavor_31.webp",
+				altText: "Encrusted Play-Doh",
+				thumbAltText: "Encrusted Play-Doh",
+				caption: "They'd smell delicious at least.",
+			},
+			{
+				title: "Frosted Aluminum Foil",
+				filename: "pop_tart_flavor_32.webp",
+				altText: "",
+				thumbAltText: "Frosted Aluminum Foil",
+				caption: "",
+			},
+			{
+				title: "Frosted Orange Juice and Toothpaste",
+				filename: "pop_tart_flavor_33.webp",
+				altText: "",
+				thumbAltText: "Frosted Orange Juice and Toothpaste",
+				caption: "Honestly, this may be the worst of them all.",
+			},
+		],
+	},
+];

_includes/postslist.njk

@@ -15,7 +15,7 @@
 				</h3>
 			</a>
 			<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
-			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ post.content | truncate(105) | safe }}{% endif %}
+			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ post.data.description | truncate(105) | safe }}{% endif %}
 		</div>
 	</article>
 	{% endfor %}

_includes/structuredData.njk

@@ -1,4 +1,4 @@
-{% if title %}
+{% if title and structuredData != "none" %}
 <!-- Structured Data -->
 <script type="application/ld+json">
 {

content/about/index.md

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 eleventyNavigation:
   key: About
-  order: 3
+  order: 2
 ---
 <article>
 <h1>About me and my website.</h1>

content/blog.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 eleventyNavigation:
   key: Blog
-  order: 2
+  order: 3
 ---
 <h1>Nathan’s Blog.</h1>
 

content/feeds.njk

@@ -8,6 +8,8 @@ pagination:
     - post
     - posts
     - tagList
+    - gallery
+    - galleryImages
   addAllPagesToCollections: true
 eleventyComputed:
   title: “{{ tag }}”

content/galleries.njk

@@ -0,0 +1,24 @@
+---
+pagination:
+  data: galleries
+  size: 1
+  alias: gallery
+layout: layouts/base.njk
+tags: gallery
+structuredData: none
+eleventyComputed:
+  title: "{{ gallery.title }}"
+	permalink: "/gallery/{{ gallery.title | slugify }}/"
+	description: "{{ gallery.description }}"
+---
+<h1>{{ gallery.title }}</h1>
+<p class="page-block nodropcap">{{ gallery.description }}</p>
+<section class="gallery-images">
+	{% for picture in gallery.pictures %}
+	<a href="/gallery/{{ gallery.title | slugify }}/{{ picture.filename | slugify }}/">
+		<wc-card class="gallery-image-container">
+			<img alt="{{ gallery.thumbAltText }}" class="gallery-image" src="{{ gallery.url }}{{ picture.filename }}">
+		</wc-card>
+	</a>
+	{% endfor %}
+</section>

content/galleries/index.njk

@@ -0,0 +1,32 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Pics
+  order: 4
+---
+<h1>Image Galleries</h1>
+<p class="page-block nodropcap">
+Some pictures I thought would be worth posting.
+</p>
+<section class="postlist">
+<div class="postlist-item-container">
+	{% for gallery in galleries %}
+	<article class="postlist-item">
+		<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">
+			<div class="post-image-container">
+				<img class="post-image" {% if gallery.galleryImage %} src="{{ gallery.url }}{{ gallery.galleryImage }}" alt="{{ gallery.galleryImageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
+			</div>
+		</a>
+		<div class="post-copy">
+			<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">
+				<h3>
+					{{ gallery.title }}
+				</h3>
+			</a>
+			<time class="postlist-date" datetime="{{ gallery.date }}">{{ gallery.date | readableDate("LLLL yyyy") }}</time>
+			<p>{{ gallery.synopsis | truncate(105) | safe }}</p>
+		</div>
+	</article>
+	{% endfor %}
+</div>
+</section>

content/galleryImage.njk

@@ -0,0 +1,40 @@
+---
+pagination:
+  data: collections.galleryImages
+  size: 1
+  alias: picture
+layout: layouts/base.njk
+structuredData: none
+eleventyComputed:
+  title: "Image: {{ picture.title }}"
+	permalink: "/gallery/{{ picture.containingGallery | slugify }}/{{ picture.filename | slugify }}/"
+	description: "{{ picture.title }} from gallery: {{ picture.containingGallery}}"
+---
+<article>
+	<h1>{{ picture.title }}</h1>
+	<div class="buttonContainer">
+		{% if picture.previousImage %}
+		<a href="../{{ picture.previousImage | slugify }}">
+			<button type="button">🡠 Previous</button>
+		</a>
+		{% endif %}
+		<a href="/gallery/{{ picture.containingGallery | slugify }}/">
+			<button type="button">Gallery</button>
+		</a>
+		{% if picture.nextImage %}
+		<a href="../{{ picture.nextImage | slugify }}">
+			<button type="button">Next 🡢</button>
+		</a>
+		{% endif %}
+	</div>
+	<figure>
+		<a href="{{ picture.baseUrl }}/{{ picture.filename }}">
+			<img src="{{ picture.baseUrl }}/{{ picture.filename }}" alt="{{ picture.altText }}">
+		</a>
+		{% if picture.caption %}
+		<figcaption>
+			{{ picture.caption }}
+		</figcaption>
+		{% endif %}
+	</figure>
+</article>

content/now.njk

@@ -1,8 +1,5 @@
 ---
 layout: layouts/base.njk
-eleventyNavigation:
-  key: Now
-  order: 4
 ---
 <article class="post">
 <h1>Now: What’s Been Going on Lately?</h1>

content/sitemap/index.njk

@@ -17,6 +17,7 @@ layout: layouts/base_full_width_text.njk
 			</li>
 			<li><a href="/blog">Blog</a></li>
 			<li><a href="/blogroll">Blogroll</a></li>
+			<li><a href="/galleries">Galleries</a></li>
 			<li><a href="/now">Now</a></li>
 			<li><a href="/tags">Tags</a></li>
 		</ul>

eleventy.config.js

@@ -29,6 +29,24 @@ export default async function (eleventyConfig) {
 		return newText;
 	};
 
+	// Collections
+	eleventyConfig.addCollection("galleryImages", (collection) => {
+		const galleries = collection.getAll()[0].data.galleries;
+		let galleryImages = [];
+
+		galleries.forEach((gallery) => {
+			gallery.pictures.forEach((picture, i, arr) => {
+				picture.containingGallery = `${gallery.title}`;
+				picture.baseUrl = `${gallery.url}`;
+				i ? (picture.previousImage = arr[i - 1].filename) : null;
+				i + 1 != arr.length ? (picture.nextImage = arr[i + 1].filename) : null;
+				galleryImages.push(picture);
+			});
+		});
+
+		return galleryImages;
+	});
+
 	// Transforms
 	eleventyConfig.addTransform("prettier", function (content, outputPath) {
 		if (outputPath && outputPath.endsWith(".html")) {
@@ -180,7 +198,7 @@ export default async function (eleventyConfig) {
 
 	eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
 		return (tags || []).filter(
-			(tag) => ["all", "nav", "post", "posts"].indexOf(tag) === -1,
+			(tag) => ["all", "nav", "post", "posts", "gallery"].indexOf(tag) === -1,
 		);
 	});
 

public/css/index.css

@@ -59,7 +59,7 @@
 	--text-color-link: var(--text-color);
 	--text-color-tag: var(--contrast-color);
 
-	/* Font Size Scaling Tokens - https://utopia.fyi/ */
+	/* Font Size Scaling Tokens - https://utopia.fyi/type/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 	--step--2: clamp(0.8681rem, 0.8163rem + 0.259vw, 0.96rem);
 	--step--1: clamp(1.0417rem, 0.9525rem + 0.446vw, 1.2rem);
 	--step-0: clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem);
@@ -72,7 +72,7 @@
 	--step-7: clamp(4.479rem, 2.9727rem + 7.5312vw, 7.1526rem);
 	--step-8: clamp(5.3748rem, 3.3658rem + 10.0449vw, 8.9407rem);
 
-	/* Space Scaling Tokens - https://utopia.fyi/ */
+	/* Space Scaling Tokens - https://utopia.fyi/space/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7|8|9|10|11|12,s-l&g=s,s,l,12 */
 	--space-3xs: clamp(0.3125rem, 0.2773rem + 0.1761vw, 0.375rem);
 	--space-2xs: clamp(0.625rem, 0.5546rem + 0.3521vw, 0.75rem);
 	--space-xs: clamp(0.9375rem, 0.8319rem + 0.5282vw, 1.125rem);
@@ -81,9 +81,16 @@
 	--space-l: clamp(2.5rem, 2.2183rem + 1.4085vw, 3rem);
 	--space-xl: clamp(3.75rem, 3.3275rem + 2.1127vw, 4.5rem);
 	--space-2xl: clamp(5rem, 4.4366rem + 2.8169vw, 6rem);
-	--space-3xl: clamp(7.5rem, 6.6549rem + 4.2254vw, 9rem);
+	--space-3xl: clamp(6.25rem, 5.5458rem + 3.5211vw, 7.5rem);
+	--space-4xl: clamp(7.5rem, 6.6549rem + 4.2254vw, 9rem);
+	--space-5xl: clamp(8.75rem, 7.7641rem + 4.9296vw, 10.5rem);
+	--space-6xl: clamp(10rem, 8.8732rem + 5.6338vw, 12rem);
+	--space-7xl: clamp(11.25rem, 9.9824rem + 6.338vw, 13.5rem);
+	--space-8xl: clamp(12.5rem, 11.0915rem + 7.0423vw, 15rem);
+	--space-9xl: clamp(13.75rem, 12.2007rem + 7.7465vw, 16.5rem);
+	--space-10xl: clamp(15rem, 13.3099rem + 8.4507vw, 18rem);
 
-	/* One-up pairs - https://utopia.fyi/ */
+	/* One-up pairs */
 	--space-3xs-2xs: clamp(0.3125rem, 0.066rem + 1.2324vw, 0.75rem);
 	--space-2xs-xs: clamp(0.625rem, 0.3433rem + 1.4085vw, 1.125rem);
 	--space-xs-s: clamp(0.9375rem, 0.6206rem + 1.5845vw, 1.5rem);
@@ -91,12 +98,19 @@
 	--space-m-l: clamp(1.875rem, 1.2412rem + 3.169vw, 3rem);
 	--space-l-xl: clamp(2.5rem, 1.3732rem + 5.6338vw, 4.5rem);
 	--space-xl-2xl: clamp(3.75rem, 2.4824rem + 6.338vw, 6rem);
-	--space-2xl-3xl: clamp(5rem, 2.7465rem + 11.2676vw, 9rem);
+	--space-2xl-3xl: clamp(5rem, 3.5915rem + 7.0423vw, 7.5rem);
+	--space-3xl-4xl: clamp(6.25rem, 4.7007rem + 7.7465vw, 9rem);
+	--space-4xl-5xl: clamp(7.5rem, 5.8099rem + 8.4507vw, 10.5rem);
+	--space-5xl-6xl: clamp(8.75rem, 6.919rem + 9.1549vw, 12rem);
+	--space-6xl-7xl: clamp(10rem, 8.0282rem + 9.8592vw, 13.5rem);
+	--space-7xl-8xl: clamp(11.25rem, 9.1373rem + 10.5634vw, 15rem);
+	--space-8xl-9xl: clamp(12.5rem, 10.2465rem + 11.2676vw, 16.5rem);
+	--space-9xl-10xl: clamp(13.75rem, 11.3556rem + 11.9718vw, 18rem);
 
-	/* Custom pairs - https://utopia.fyi/ */
+	/* Custom pairs */
 	--space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem);
 
-	/* Fluid Grid Tokens - https://utopia.fyi/ */
+	/* Fluid Grid Tokens - https://utopia.fyi/grid/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,s,l,12 */
 	--grid-max-width: 55.5rem;
 	--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
 	--grid-columns: 12;
@@ -208,6 +222,18 @@ body {
 	padding-top: var(--space-m);
 	padding-bottom: var(--space-m);
 }
+button {
+	height: var(--space-m-l);
+}
+.buttonContainer {
+	display: flex;
+	flex-flow: row nowrap;
+	column-gap: var(--space-xs);
+	margin-bottom: var(--space-m);
+	button {
+		margin-top: var(--space-s);
+	}
+}
 button,
 .nav-item {
 	font-family: var(--font-family-ui);
@@ -908,6 +934,22 @@ article.post {
 		margin: var(--space-2xs) auto;
 	}
 }
+.gallery-images {
+	display: flex;
+	flex-flow: row wrap;
+	row-gap: var(--space-xs-s);
+	column-gap: var(--space-m-l);
+	.gallery-image-container {
+		width: var(--space-7xl-8xl);
+		height: var(--space-7xl-8xl);
+		.gallery-image {
+			border-radius: var(--border-radius);
+			width: var(--space-7xl-8xl);
+			height: var(--space-7xl-8xl);
+			object-fit: cover;
+		}
+	}
+}
 /* Add fleuron after <p> in article when footnotes are present */
 p:has(+ hr.footnotes-sep):after {
 	content: "\2766";