add fallback embed thumbnail on loading error

Author: fennifith

public/icons/website.svg

@@ -4,6 +4,7 @@ import * as path from "node:path";
 import { fileURLToPath } from "node:url";
 
 const copyFiles = async (srcDir: string, destDir: string) => {
+	await fs.promises.mkdir(destDir, { recursive: true });
 	const readDir = await fs.promises.readdir(srcDir);
 
 	await Promise.all(

public/link.png

@@ -13,6 +13,7 @@ export interface IFramePlaceholderProps {
 	propsToPreserve: string;
 	pageTitle: string;
 	pageIcon: string;
+	pageIconFallback: string;
 }
 
 /** @jsxImportSource hastscript */
@@ -35,6 +36,9 @@ export function IFramePlaceholder({
 						decoding="async"
 						data-nozoom="true"
 						data-dont-round="true"
+						{...{
+							onerror: `this.src='${props.pageIconFallback}';this.onerror='';`,
+						}}
 					/>
 				</div>
 				<div class="embed__header__info">

src/utils/markdown/astro-integration-copy-generated.ts

@@ -21,7 +21,7 @@ interface RehypeUnicornIFrameClickToRunProps {
 }
 
 // default icon, used if a frame's favicon cannot be resolved
-const defaultPageIcon = "/link.png";
+const defaultPageIcon = "/icons/website.svg";
 
 function getIconPath(src: URL) {
 	return `generated/${src.hostname}.favicon`;
@@ -215,6 +215,7 @@ export const rehypeUnicornIFrameClickToRun: Plugin<
 					src: String(src),
 					pageTitle: String(dataFrameTitle ?? "") || info.title || "",
 					pageIcon: info.iconFile,
+					pageIconFallback: defaultPageIcon,
 					propsToPreserve: JSON.stringify(propsToPreserve),
 				});