prefer page icons over manifest

Author: fennifith

worker/src/url-metadata/fetch-page-icon.ts

@@ -6,58 +6,69 @@ import { fetchAsBrowser } from "./fetch-page-html";
 import { isElement } from "./is-element";
 
 export async function fetchPageIcon(src: URL, srcHast: Root): Promise<URL> {
-	// <link rel="manifest" href="/manifest.json">
-	const manifestPath: Element | undefined = find(srcHast, (node) => {
-		return isElement(node) && node.tagName === "link" && String(node.properties.rel).includes("manifest");
-	});
-
 	let iconHref: URL | undefined;
 
-	if (manifestPath?.properties?.href) {
-		console.log("Found manifest", manifestPath.properties.href, "for", src.href);
+	// <link rel="shortcut icon" type="image/png" href="https://example.com/img.png">
+	// <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=2a">
+	const iconExtensions = [".svg", ".png", ".jpg", ".jpeg"];
+	const favicon: Element | undefined = find(srcHast, (node) => {
+		if (!isElement(node) || node.tagName !== "link") return false;
 
-		// `/manifest.json`
-		const manifestRelativeURL = String(manifestPath.properties.href);
-		const fullManifestURL = new URL(manifestRelativeURL, src);
+		const rel = (node as Element).properties?.rel?.toString() ?? "";
+		const href = (node as Element).properties?.href?.toString() ?? "";
+		let hrefUrl: URL | undefined;
+		try {
+			// Need to check the file extension through URL.pathname to omit query params
+			hrefUrl = new URL(href, src);
+		} catch (e) {
+			// do nothing
+		}
 
-		const manifest = await fetchAsBrowser(fullManifestURL)
-			.then((r) => r.json())
-			.catch(() => null);
+		const extname = path.extname(hrefUrl?.pathname ?? "");
+		return rel.includes("icon") && iconExtensions.includes(extname);
+	});
 
-		if (manifest) {
-			const largestIcon = getLargestManifestIcon(manifest);
-			if (largestIcon?.icon) {
-				console.log("Found iconHref from manifest.json:", largestIcon.icon.src);
-				iconHref = new URL(largestIcon.icon.src, src.origin);
-			}
-		}
+	if (favicon?.properties?.href) {
+		console.log("Found iconHref from <link> tags:", favicon.properties.href);
+		iconHref = new URL(favicon.properties.href.toString(), src);
 	}
 
 	if (!iconHref) {
-		// <link rel="shortcut icon" type="image/png" href="https://example.com/img.png">
-		// <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=2a">
-		const iconExtensions = [".svg", ".png", ".jpg", ".jpeg"];
-		const favicon: Element | undefined = find(srcHast, (node) => {
-			if (!isElement(node) || node.tagName !== "link")
-				return false;
+		// <link rel="manifest" href="/manifest.json">
+		const manifestPath: Element | undefined = find(srcHast, (node) => {
+			return (
+				isElement(node) &&
+				node.tagName === "link" &&
+				String(node.properties.rel).includes("manifest")
+			);
+		});
 
-			const rel = (node as Element).properties?.rel?.toString() ?? "";
-			const href = (node as Element).properties?.href?.toString() ?? "";
-			let hrefUrl: URL|undefined;
-			try {
-				// Need to check the file extension through URL.pathname to omit query params
-				hrefUrl = new URL(href, src);
-			} catch (e) {
-				// do nothing
-			}
+		if (manifestPath?.properties?.href) {
+			console.log(
+				"Found manifest",
+				manifestPath.properties.href,
+				"for",
+				src.href,
+			);
 
-			const extname = path.extname(hrefUrl?.pathname ?? "");
-			return rel.includes("icon") && iconExtensions.includes(extname);
-		});
+			// `/manifest.json`
+			const manifestRelativeURL = String(manifestPath.properties.href);
+			const fullManifestURL = new URL(manifestRelativeURL, src);
 
-		if (favicon?.properties?.href) {
-			console.log("Found iconHref from <link> tags:", favicon.properties.href);
-			iconHref = new URL(favicon.properties.href.toString(), src);
+			const manifest = await fetchAsBrowser(fullManifestURL)
+				.then((r) => r.json())
+				.catch(() => null);
+
+			if (manifest) {
+				const largestIcon = getLargestManifestIcon(manifest);
+				if (largestIcon?.icon) {
+					console.log(
+						"Found iconHref from manifest.json:",
+						largestIcon.icon.src,
+					);
+					iconHref = new URL(largestIcon.icon.src, src.origin);
+				}
+			}
 		}
 	}
 

worker/src/url-metadata/image-to-s3.ts

@@ -26,6 +26,7 @@ export async function imageToS3(
 		const uploadKey = `${key}-${urlHash}.svg`;
 
 		if (await exists(bucket, uploadKey)) {
+			console.log(`Using existing object for ${uploadKey}`);
 			return uploadKey;
 		} else {
 			await upload(bucket, uploadKey, tags, stream.Readable.from([optimizedSvg]));
@@ -47,6 +48,7 @@ export async function imageToS3(
 
 	const uploadKey = `${key}-${urlHash}.${extension}`;
 	if (await exists(bucket, uploadKey)) {
+		console.log(`Using existing object for ${uploadKey}`);
 		return uploadKey;
 	} else {
 		await upload(bucket, uploadKey, tags, transformerStream);