Add gallery to index.

_data/galleries.js

@@ -245,4 +245,119 @@ export default [
 			},
 		],
 	},
+	{
+		title: "Shots from April 2024",
+		description:
+			"Sol and I went out for a walk down the street with a couple of cameras.",
+		synopsis:
+			"Sol and I went out for a walk down the street with a couple of cameras.",
+		url: "/img/gallery/april2024/",
+		date: new Date("January 23, 2025"),
+		galleryImage: "april_2024_4.webp",
+		galleryImageAlt: "",
+		pictures: [
+			{
+				title: "Sol shoots some flowers.",
+				filename: "april_2024_1.webp",
+				altText:
+					"A person in a beanie staring down a camera viewfinder at some tulips.",
+				thumbAltText:
+					"A person in a beanie staring down a camera viewfinder at some tulips.",
+				caption: "",
+			},
+			{
+				title: "We were being watched…",
+				filename: "april_2024_2.webp",
+				altText: "Some cats staring at us through a window screen.",
+				thumbAltText: "Some cats staring at us through a window screen.",
+				caption: "Somehow I don't mind these nosy neighbors.",
+			},
+			{
+				title: "A pole.",
+				filename: "april_2024_3.webp",
+				altText: "A closeup of a black painted pole with stickers on it.",
+				thumbAltText: "A closeup of a black painted pole with stickers on it.",
+				caption: "",
+			},
+			{
+				title: "Love this storefront.",
+				filename: "april_2024_4.webp",
+				altText:
+					"A storefront painted vividly with lots of colors, dots and flowers.",
+				thumbAltText:
+					"A storefront painted vividly with lots of colors, dots and flowers.",
+				caption: "",
+			},
+			{
+				title: "Another pole.",
+				filename: "april_2024_5.webp",
+				altText: "A wide, beige painted pole covered in ads and notices.",
+				thumbAltText: "A wide, beige painted pole covered in ads and notices.",
+				caption: "",
+			},
+			{
+				title: "Can't get enough of that pole.",
+				filename: "april_2024_6.webp",
+				altText:
+					"A mushroom-like green canopy on top of the beige pole, with lettering spelling out Roscoe Village.",
+				thumbAltText:
+					"A mushroom-like green canopy on top of the beige pole, with lettering spelling out Roscoe Village.",
+				caption: "",
+			},
+			{
+				title: "The infamous Chicago Rat Hole.",
+				filename: "april_2024_7.webp",
+				altText:
+					"An impression in the sidewalk of what is likely a squirrel; it is filled with coins and rocks left as tribute.",
+				thumbAltText:
+					"An impression in the sidewalk of what is likely a squirrel; it is filled with coins and rocks left as tribute.",
+				caption: "That has to be a squirrel.",
+			},
+			{
+				title: "A courtesy to cyclists.",
+				filename: "april_2024_8.webp",
+				altText:
+					"A crusty old parking meter with a ghost sticker and graffiti on it. Inside of the meter window reads: Meter remains as a courtesy to cyclists. Please pay at pay box.",
+				thumbAltText:
+					"A crusty old parking meter with a ghost sticker and graffiti on it. Inside of the meter window reads: Meter remains as a courtesy to cyclists. Please pay at pay box.",
+				caption: "",
+			},
+			{
+				title: "A brick building.",
+				filename: "april_2024_9.webp",
+				altText:
+					"The front of a red brick building with two potted plants in front of the door. The wall has many of those little square glass-tiles to allow in light while affording privacy.",
+				thumbAltText:
+					"The front of a red brick building with two potted plants in front of the door. The wall has many of those little square glass-tiles to allow in light while affording privacy.",
+				caption: "",
+			},
+			{
+				title: "Weed.",
+				filename: "april_2024_10.webp",
+				altText:
+					"A closeup of a dandelion ready to have its seeds blown into the wind.",
+				thumbAltText:
+					"A closeup of a dandelion ready to have its seeds blown into the wind.",
+				caption: "",
+			},
+			{
+				title: "Another creative storefront",
+				filename: "april_2024_11.webp",
+				altText:
+					"A storefront with painted illustrations of a woman giving a baby a bath, and several stylized women carrying baskets of fruit and flowers on their heads.",
+				thumbAltText:
+					"A storefront with painted illustrations of a woman giving a baby a bath, and several stylized women carrying baskets of fruit and flowers on their heads.",
+				caption: "",
+			},
+			{
+				title: "A robin crossing the street.",
+				filename: "april_2024_12.webp",
+				altText:
+					"A robin runs across the street, casting a long shadow for such a small fellow.",
+				thumbAltText:
+					"A robin runs across the street, casting a long shadow for such a small fellow.",
+				caption: "",
+			},
+		],
+	},
 ];

content/galleries/index.njk

@@ -8,30 +8,4 @@ eleventyNavigation:
 <p class="page-block nodropcap">
 Photography trips, memes, and other pictures I thought would be worth sharing.
 </p>
-<section class="postlist">
+{% include "gallerieslist.njk" %}
-<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>
-			<p>{{ gallery.synopsis | truncate(105) | safe }}</p>
-			<div class="post-metadata">
-				<div class="post-metadata-copy">
-					<p>Posted on the&nbsp;<time class="postlist-date" datetime="{{ gallery.date | htmlDateString}}">{{ gallery.date | niceDate("LLLL yyyy") }}</time></p>
-				</div>
-			</div>
-		</div>
-	</article>
-	<hr>
-	{% endfor %}
-</div>
-</section>

content/index.njk

@@ -5,7 +5,26 @@ eleventyNavigation:
   order: 1
 numberOfLatestPostsToShow: 3
 numberOfNowPostsToShow: 1
+numberOfGalleriesToShow: 1
+hideGalleryDescriptions: 1
 ---
+<h2>Latest gallery:</h2>
+{% set postsCount = galleries | length %}
+{% set latestPostsCount = postsCount | min(numberOfNowPostsToShow) %}
+{% set postslist = collections.now | head(-1 * numberOfNowPostsToShow) %}
+{% set postslistCounter = postsCount %}
+{% set showPostListHeader = false %}
+{% include "gallerieslist.njk" %}
+
+{% set morePosts = postsCount - numberOfNowPostsToShow %}
+{% if morePosts > 0 %}
+<a href="/galleries/">
+	<button type="button">
+		See {{ morePosts }} more »
+	</button>
+</a>
+{% endif %}
+
 <div class="now">
 	<h2>Life updates:</h2>
 {% set postsCount = collections.now | length %}

public/css/index.css

@@ -269,7 +269,7 @@ nav {
 .now {
 	display: grid;
 	grid-column: var(--span-grid);
-	padding-bottom: var(--space-l);
+	padding: var(--space-l) 0;
 }
 ol {
 	padding-left: 0;