wip: fetch images metadata

src/akte/prismic.ts

@@ -179,13 +179,11 @@ async function getImageTags(): Promise<Record<string, string>> {
 	return tagsCache
 }
 
-const IMAGES_JSON_DUMP = "https://lihbr.com/images.json"
-
-export async function getImages(args?: {
+async function getImages(args?: {
 	tag?: string
 	resolvedTag?: string
 	cursor?: string
-}): Promise<PrismicImage[]> {
+}): Promise<Omit<PrismicImage, "json">[]> {
 	const url = new URL("https://asset-api.prismic.io/assets")
 
 	url.searchParams.set("assetType", "image")
@@ -236,73 +234,84 @@ export async function getImages(args?: {
 		cursor: string
 	}
 
-	// Images JSON dump cache
-	const imagesJsonDumpRes = await fetch(IMAGES_JSON_DUMP)
-	let imagesJsonDump: Record<string, ImgixJson> = {}
+	const images: Omit<PrismicImage, "json">[] = items
+		.sort((a, b) => a.filename.localeCompare(b.filename))
+		.map((item) => ({
+			id: item.id,
+			url: item.url,
+			alt: item.alt,
+			copyright: item.credits,
+			dimensions: { width: item.width, height: item.height },
+			edit: { x: 0, y: 0, zoom: 1, background: "transparent" },
+			tags: item.tags.map((tag) => tag.name),
+		}))
+
+	if (images.length >= 1000) {
+		await new Promise((resolve) => setTimeout(resolve, 2000))
 
-	if (!imagesJsonDumpRes.ok) {
-		console.error(`Failed to fetch images JSON dump: ${imagesJsonDumpRes.statusText}`)
-		// throw new Error(`Failed to fetch images JSON dump: ${imagesJsonDumpRes.statusText}`)
-	} else {
-		imagesJsonDump = await imagesJsonDumpRes.json()
+		return [
+			...images,
+			...(await getImages({ resolvedTag, cursor })),
+		]
 	}
 
-	const images: PrismicImage[] = await Promise.all(
-		items.sort((a, b) => a.filename.localeCompare(b.filename)).map(async (item) => {
-			let json = imagesJsonDump[item.id]
+	return images
+}
 
-			if (!json) {
-				const res = await fetch(`${item.url.split("?").shift()}?fm=json`)
-				if (!res.ok) {
-					throw new Error(`Failed to fetch image JSON: ${res.statusText}`)
-				}
+const IMAGES_JSON_CACHE = "https://lihbr.com/images.json"
 
-				json = await res.json()
-				// Don't store XMP data
-				delete json.XMP
+export async function getImagesWithJson(args?: {
+	tag?: string
+	resolvedTag?: string
+	cursor?: string
+}): Promise<PrismicImage[]> {
+	const images = await getImages(args)
 
-				console.warn("fetching new image json", item.id)
-			}
+	// Fetch images JSON cache
+	const imagesJsonCacheRes = await fetch(IMAGES_JSON_CACHE)
 
-			return {
-				id: item.id,
-				url: item.url,
-				alt: item.alt,
-				copyright: item.credits,
-				dimensions: { width: item.width, height: item.height },
-				edit: { x: 0, y: 0, zoom: 1, background: "transparent" },
-				tags: item.tags.map((tag) => tag.name),
-				json,
+	if (!imagesJsonCacheRes.ok) {
+		throw new Error(`Failed to fetch images JSON dump: ${imagesJsonCacheRes.statusText}`)
+	}
+
+	const imagesJsonCache: Record<string, ImgixJson> = await imagesJsonCacheRes.json()
+
+	const imagesWithJson: PrismicImage[] = await Promise.all(images.map(async (image) => {
+		let json = imagesJsonCache[image.id]
+
+		if (!json) {
+			const res = await fetch(`${image.url.split("?").shift()}?fm=json`)
+			if (!res.ok) {
+				throw new Error(`Failed to fetch image JSON: ${res.statusText}`)
 			}
-		}),
-	)
 
-	if (images.length >= 1000) {
-		await new Promise((resolve) => setTimeout(resolve, 2000))
+			json = await res.json()
+			// Don't store XMP data
+			delete json.XMP
 
-		return [
-			...images,
-			...(await getImages({ resolvedTag, cursor })),
-		]
-	}
+			console.warn("fetching new image json", image.id)
+		}
 
-	// If we're in a Netlify build, safe meta to disk.
+		return { ...image, json }
+	}))
+
+	// If we're in a Netlify build, save meta to disk
 	if (process.env.NODE_ENV === "production" && process.env.BUILD_ID) {
-		const imagesJsonDumpPath = path.join(__dirname, "../public/images.json")
+		const imagesJsonCachePath = path.join(__dirname, "../public/images.json")
 
 		let imagesJson: Record<string, ImgixJson> = {}
 		try {
-			imagesJson = JSON.parse(await fs.readFile(imagesJsonDumpPath, "utf8"))
+			imagesJson = JSON.parse(await fs.readFile(imagesJsonCachePath, "utf8"))
 		} catch {
 			// Noop, file does not exists
 		}
 
-		for (const image of images) {
-			imagesJson[image.id!] = image.json
+		for (const imageWithJson of imagesWithJson) {
+			imagesJson[imageWithJson.id!] = imageWithJson.json
 		}
 
-		await fs.writeFile(imagesJsonDumpPath, JSON.stringify(imagesJson))
+		await fs.writeFile(imagesJsonCachePath, JSON.stringify(imagesJson))
 	}
 
-	return images
+	return imagesWithJson
 }

src/akte/types.ts

@@ -112,7 +112,7 @@ export type ImgixJson = {
 		Model?: string
 		DateTime?: string
 	}
-	XMP?: Record<string, string | undefined>
+	XMP?: never
 }
 
-export type PrismicImage = prismic.ImageFieldImage & { tags: string[], json: ImgixJson }
+export type PrismicImage = prismic.ImageFieldImage<"filled"> & { tags: string[], json: ImgixJson }

src/files/albums/[slug].ts

@@ -5,7 +5,7 @@ import * as prismic from "@prismicio/client"
 import { defineAkteFiles, NotFoundError } from "akte"
 
 import { dateToUSDate } from "../../akte/date"
-import { getClient, getImages } from "../../akte/prismic"
+import { getClient, getImagesWithJson } from "../../akte/prismic"
 import { sha256 } from "../../akte/sha256"
 
 import { heading } from "../../components/heading"
@@ -25,7 +25,7 @@ export const slug = defineAkteFiles<GlobalData, ["slugWithHash"]>().from({
 
 		const [doc, pictures] = await Promise.all([
 			getClient().getByUID("post__album", slug),
-			getImages({ tag: slug }),
+			getImagesWithJson({ tag: slug }),
 		])
 
 		if (!doc || !pictures.length) {
@@ -46,7 +46,7 @@ export const slug = defineAkteFiles<GlobalData, ["slugWithHash"]>().from({
 			}
 			files[`${doc.url}-${await sha256(doc.uid!, process.env.PRISMIC_TOKEN!, 7)}`] = {
 				doc,
-				pictures: await getImages({ tag: doc.uid! }),
+				pictures: await getImagesWithJson({ tag: doc.uid! }),
 			}
 		}