@altano/astro-opengraph 0.1.0 → 1.0.0

package/dist/config.d.ts

@@ -1,9 +1,8 @@
-import { OpengraphImageConfigDeserialized, OpengraphImageConfigResolved, OpengraphImageConfigSerializableMaybeMocked } from "./types-Lk5HqHkQ.js";
+import { OpengraphImageConfigDeserialized, OpengraphImageConfigResolved, OpengraphImageConfigSerializableMaybeMocked } from "./types-BGbFKpbi.js";
 
 //#region src/config.d.ts
 declare function deserializeVirtualConfig(configMaybeMocked: OpengraphImageConfigSerializableMaybeMocked): Promise<OpengraphImageConfigDeserialized>;
 declare function getResolvedConfig(): Promise<OpengraphImageConfigResolved>;
-
 //#endregion
 export { deserializeVirtualConfig, getResolvedConfig };
 //# sourceMappingURL=config.d.ts.map

package/dist/config.js

@@ -1,3 +1,43 @@
-import { deserializeVirtualConfig, getResolvedConfig } from "./config-CzK0JuaO.js";
+import { readFile } from "node:fs/promises";
+//#region src/config.ts
+async function deserializeVirtualConfig(configMaybeMocked) {
+	const config = typeof configMaybeMocked === "function" ? configMaybeMocked() : configMaybeMocked;
+	const fontsWithBuffers = await Promise.all(config.imageOptions.fonts.map(async (font) => {
+		const data = await readFile(font.path);
+		return {
+			...font,
+			data
+		};
+	}));
+	return {
+		...config,
+		imageOptions: {
+			...config.imageOptions,
+			fonts: fontsWithBuffers
+		}
+	};
+}
+const imageOptionDefaults = {
+	width: 1200,
+	height: 630
+};
+const metaTagDefaults = { "og:image": `/opengraph.png` };
+async function getResolvedConfig() {
+	const lazyConfig = (await import("virtual:astro-opengraph/user-config")).default;
+	const deserialized = await deserializeVirtualConfig(lazyConfig);
+	return {
+		...deserialized,
+		imageOptions: {
+			...imageOptionDefaults,
+			...deserialized.imageOptions
+		},
+		componentMetaTagFallbacks: {
+			...deserialized.componentMetaTagFallbacks,
+			...metaTagDefaults
+		}
+	};
+}
+//#endregion
+export { deserializeVirtualConfig, getResolvedConfig };
 
-export { deserializeVirtualConfig, getResolvedConfig };
+//# sourceMappingURL=config.js.map

package/dist/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../src/config.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\";\n\nimport type {\n  FontWithBuffer,\n  MetaTagDefaults,\n  OpengraphImageConfigDeserialized,\n  OpengraphImageConfigResolved,\n  OpengraphImageConfigSerializableMaybeMocked,\n} from \"./types.js\";\n\nexport async function deserializeVirtualConfig(\n  configMaybeMocked: OpengraphImageConfigSerializableMaybeMocked,\n): Promise<OpengraphImageConfigDeserialized> {\n  const config =\n    typeof configMaybeMocked === \"function\"\n      ? configMaybeMocked() // We're running in vitest which is only capable of mocking functions\n      : configMaybeMocked;\n  const fontsWithBuffers: FontWithBuffer[] = await Promise.all(\n    config.imageOptions.fonts.map(async (font) => {\n      const data = await readFile(font.path);\n      return {\n        ...font,\n        data: data,\n      };\n    }),\n  );\n\n  return {\n    ...config,\n    imageOptions: {\n      ...config.imageOptions,\n      fonts: fontsWithBuffers,\n    },\n  };\n}\n\nconst imageOptionDefaults = {\n  width: 1200,\n  height: 630,\n} as const;\n\nconst metaTagDefaults: MetaTagDefaults = {\n  \"og:image\": `/opengraph.png`,\n};\n\nexport async function getResolvedConfig(): Promise<OpengraphImageConfigResolved> {\n  // Grab the virtual module that holds the integration's user config\n  const module = await import(\"virtual:astro-opengraph/user-config\");\n  const lazyConfig = module.default;\n  const deserialized = await deserializeVirtualConfig(lazyConfig);\n  return {\n    ...deserialized,\n    imageOptions: {\n      ...imageOptionDefaults,\n      ...deserialized.imageOptions,\n    },\n    componentMetaTagFallbacks: {\n      ...deserialized.componentMetaTagFallbacks,\n      ...metaTagDefaults,\n    },\n  };\n}\n"],"mappings":";;AAUA,eAAsB,yBACpB,mBAC2C;CAC3C,MAAM,SACJ,OAAO,sBAAsB,aACzB,mBAAmB,GACnB;CACN,MAAM,mBAAqC,MAAM,QAAQ,IACvD,OAAO,aAAa,MAAM,IAAI,OAAO,SAAS;EAC5C,MAAM,OAAO,MAAM,SAAS,KAAK,KAAK;AACtC,SAAO;GACL,GAAG;GACG;GACP;GACD,CACH;AAED,QAAO;EACL,GAAG;EACH,cAAc;GACZ,GAAG,OAAO;GACV,OAAO;GACR;EACF;;AAGH,MAAM,sBAAsB;CAC1B,OAAO;CACP,QAAQ;CACT;AAED,MAAM,kBAAmC,EACvC,YAAY,kBACb;AAED,eAAsB,oBAA2D;CAG/E,MAAM,cADS,MAAM,OAAO,wCACF;CAC1B,MAAM,eAAe,MAAM,yBAAyB,WAAW;AAC/D,QAAO;EACL,GAAG;EACH,cAAc;GACZ,GAAG;GACH,GAAG,aAAa;GACjB;EACD,2BAA2B;GACzB,GAAG,aAAa;GAChB,GAAG;GACJ;EACF"}

package/dist/endpoint.d.ts

@@ -1,11 +1,13 @@
-import { ImageOptions } from "./types-Lk5HqHkQ.js";
+import { ImageOptions } from "./types-BGbFKpbi.js";
 import { APIRoute } from "astro";
 
 //#region src/endpoint.d.ts
 type Options = {
-  // We don't just type this as `AstroComponentFactory` because astro typing is
-  // hard to get right and simply importing a .astro file doesn't give you
-  // something typed as a factory.
+  /**
+  * We don't just type this as `AstroComponentFactory` because astro typing is
+  * hard to get right and simply importing a .astro file doesn't give you
+  * something typed as a factory.
+  */
   template: unknown;
   /**
   * Custom "Content-Type" header, only used in SSR. Defaults to "image/png"
@@ -22,7 +24,6 @@ declare function makeOpengraphEndpoint({
   imageOptionOverrides,
   contentType
 }: Options): APIRoute;
-
 //#endregion
 export { makeOpengraphDevEndpoint, makeOpengraphEndpoint };
 //# sourceMappingURL=endpoint.d.ts.map

package/dist/endpoint.js

@@ -1,43 +1,35 @@
-import { getResolvedConfig } from "./config-CzK0JuaO.js";
+import { getResolvedConfig } from "./config.js";
 import { experimental_AstroContainer } from "astro/container";
 import { isAstroComponentFactory } from "astro/runtime/server/render/astro/factory.js";
 import { getConfiguredImageService, imageConfig } from "astro:assets";
 import satori from "satori";
 import { html } from "satori-html";
 import he from "he";
-
 //#region src/image.ts
 /**
 * Convert an html string to an image
 */
 async function htmlToPNG(html$1, satoriOptions) {
-	const responseTextWithDecodedHtmlEntities = he.decode(html$1);
-	const vnode = html(responseTextWithDecodedHtmlEntities);
-	const svg = await satori(vnode, satoriOptions);
+	const svg = await satori(html(he.decode(html$1)), satoriOptions);
 	const fileBuffer = Buffer.from(svg, "utf-8");
-	const uint8Array = new Uint8Array(fileBuffer.buffer, fileBuffer.byteOffset, fileBuffer.byteLength);
-	return bufferToTransformedPNG(uint8Array);
+	return bufferToTransformedPNG(new Uint8Array(fileBuffer.buffer, fileBuffer.byteOffset, fileBuffer.byteLength));
 }
 /**
 * Convert a buffer to an image using the astro local image service
 */
 async function bufferToTransformedPNG(imageBuffer) {
-	const imageService = await getConfiguredImageService();
-	return imageService.transform(imageBuffer, {
+	return (await getConfiguredImageService()).transform(imageBuffer, {
 		src: "",
 		format: "png"
 	}, imageConfig);
 }
-
 //#endregion
 //#region src/endpoint.ts
 function makeOpengraphDevEndpoint({ template, contentType = "text/html" }) {
 	return async ({ locals, params, props, request }) => {
-		const config = await getResolvedConfig();
-		if (config.command !== "dev") return new Response(null, { status: 404 });
+		if ((await getResolvedConfig()).command !== "dev") return new Response(null, { status: 404 });
 		if (!isAstroComponentFactory(template)) throw new Error(`Given is not an Astro template.`);
-		const container = await experimental_AstroContainer.create();
-		const templateStr = await container.renderToString(template, {
+		const templateStr = await (await experimental_AstroContainer.create()).renderToString(template, {
 			partial: false,
 			request,
 			params,
@@ -50,24 +42,20 @@ function makeOpengraphDevEndpoint({ template, contentType = "text/html" }) {
 function makeOpengraphEndpoint({ template, imageOptionOverrides, contentType = "image/png" }) {
 	return async ({ locals, params, props, request }) => {
 		if (!isAstroComponentFactory(template)) throw new Error(`Given is not an Astro template.`);
-		const container = await experimental_AstroContainer.create();
-		const templateStr = await container.renderToString(template, {
+		const png = await htmlToPNG(await (await experimental_AstroContainer.create()).renderToString(template, {
 			partial: false,
 			request,
 			params,
 			locals,
 			props
-		});
-		const config = await getResolvedConfig();
-		const imageOptions = {
-			...config.imageOptions,
+		}), {
+			...(await getResolvedConfig()).imageOptions,
 			...imageOptionOverrides
-		};
-		const png = await htmlToPNG(templateStr, imageOptions);
-		return new Response(png.data, { headers: { "Content-Type": contentType } });
+		});
+		return new Response(new Uint8Array(png.data), { headers: { "Content-Type": contentType } });
 	};
 }
-
 //#endregion
 export { makeOpengraphDevEndpoint, makeOpengraphEndpoint };
+
 //# sourceMappingURL=endpoint.js.map

package/dist/endpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"endpoint.js","names":["htmlToVNode","html"],"sources":["../src/image.ts","../src/endpoint.ts"],"sourcesContent":["import { getConfiguredImageService, imageConfig } from \"astro:assets\";\nimport satori, { type SatoriOptions } from \"satori\";\nimport { html as htmlToVNode } from \"satori-html\";\nimport he from \"he\";\n\nimport type { LocalImageService } from \"astro\";\n\n/**\n * Convert an html string to an image\n */\nexport async function htmlToPNG(\n  html: string,\n  satoriOptions: SatoriOptions,\n): Promise<ReturnType<LocalImageService[\"transform\"]>> {\n  // html text => vnode\n  const responseTextWithDecodedHtmlEntities = he.decode(html);\n  const vnode = htmlToVNode(responseTextWithDecodedHtmlEntities);\n\n  // vnode => svg\n  const svg = await satori(vnode as React.ReactNode, satoriOptions);\n\n  // svg => buffer\n  const fileBuffer = Buffer.from(svg, \"utf-8\");\n  const uint8Array = new Uint8Array(\n    fileBuffer.buffer,\n    fileBuffer.byteOffset,\n    fileBuffer.byteLength,\n  );\n\n  // buffer => transformed png\n  return bufferToTransformedPNG(uint8Array);\n}\n\n/**\n * Convert a buffer to an image using the astro local image service\n */\nasync function bufferToTransformedPNG(\n  imageBuffer: Uint8Array,\n): ReturnType<LocalImageService[\"transform\"]> {\n  const imageService = (await getConfiguredImageService()) as LocalImageService;\n\n  return imageService.transform(\n    imageBuffer,\n    { src: \"\", format: \"png\" },\n    imageConfig,\n  );\n}\n","import type { APIRoute } from \"astro\";\nimport { experimental_AstroContainer } from \"astro/container\";\nimport { isAstroComponentFactory } from \"astro/runtime/server/render/astro/factory.js\";\nimport { getResolvedConfig } from \"./config.js\";\nimport type { ImageOptions } from \"./types.js\";\nimport { htmlToPNG } from \"./image.js\";\n\ntype Options = {\n  /**\n   * We don't just type this as `AstroComponentFactory` because astro typing is\n   * hard to get right and simply importing a .astro file doesn't give you\n   * something typed as a factory.\n   */\n  template: unknown;\n  /**\n   * Custom \"Content-Type\" header, only used in SSR. Defaults to \"image/png\"\n   */\n  contentType?: string;\n  imageOptionOverrides?: Partial<ImageOptions>;\n};\n\nexport function makeOpengraphDevEndpoint({\n  template,\n  contentType = \"text/html\",\n}: Options): APIRoute {\n  return async ({ locals, params, props, request }) => {\n    const config = await getResolvedConfig();\n    if (config.command !== \"dev\") {\n      return new Response(null, { status: 404 });\n    }\n\n    if (!isAstroComponentFactory(template)) {\n      throw new Error(`Given is not an Astro template.`);\n    }\n\n    const container = await experimental_AstroContainer.create();\n    const templateStr = await container.renderToString(template, {\n      partial: false,\n      request,\n      params,\n      locals,\n      props,\n    });\n\n    return new Response(templateStr, {\n      headers: {\n        \"Content-Type\": contentType,\n      },\n    });\n  };\n}\n\nexport function makeOpengraphEndpoint({\n  template,\n  imageOptionOverrides,\n  contentType = \"image/png\",\n}: Options): APIRoute {\n  return async ({ locals, params, props, request }) => {\n    if (!isAstroComponentFactory(template)) {\n      throw new Error(`Given is not an Astro template.`);\n    }\n\n    const container = await experimental_AstroContainer.create();\n    const templateStr = await container.renderToString(template, {\n      partial: false,\n      request,\n      params,\n      locals,\n      props,\n    });\n\n    const config = await getResolvedConfig();\n    const imageOptions = {\n      ...config.imageOptions,\n      ...imageOptionOverrides,\n    };\n    const png = await htmlToPNG(templateStr, imageOptions);\n\n    return new Response(new Uint8Array(png.data), {\n      headers: {\n        \"Content-Type\": contentType,\n      },\n    });\n  };\n}\n"],"mappings":";;;;;;;;;;;AAUA,eAAsB,UACpB,QACA,eACqD;CAMrD,MAAM,MAAM,MAAM,OAHJA,KAD8B,GAAG,OAAOC,OAAK,CACG,EAGX,cAAc;CAGjE,MAAM,aAAa,OAAO,KAAK,KAAK,QAAQ;AAQ5C,QAAO,uBAPY,IAAI,WACrB,WAAW,QACX,WAAW,YACX,WAAW,WACZ,CAGwC;;;;;AAM3C,eAAe,uBACb,aAC4C;AAG5C,SAFsB,MAAM,2BAA2B,EAEnC,UAClB,aACA;EAAE,KAAK;EAAI,QAAQ;EAAO,EAC1B,YACD;;;;ACxBH,SAAgB,yBAAyB,EACvC,UACA,cAAc,eACM;AACpB,QAAO,OAAO,EAAE,QAAQ,QAAQ,OAAO,cAAc;AAEnD,OADe,MAAM,mBAAmB,EAC7B,YAAY,MACrB,QAAO,IAAI,SAAS,MAAM,EAAE,QAAQ,KAAK,CAAC;AAG5C,MAAI,CAAC,wBAAwB,SAAS,CACpC,OAAM,IAAI,MAAM,kCAAkC;EAIpD,MAAM,cAAc,OADF,MAAM,4BAA4B,QAAQ,EACxB,eAAe,UAAU;GAC3D,SAAS;GACT;GACA;GACA;GACA;GACD,CAAC;AAEF,SAAO,IAAI,SAAS,aAAa,EAC/B,SAAS,EACP,gBAAgB,aACjB,EACF,CAAC;;;AAIN,SAAgB,sBAAsB,EACpC,UACA,sBACA,cAAc,eACM;AACpB,QAAO,OAAO,EAAE,QAAQ,QAAQ,OAAO,cAAc;AACnD,MAAI,CAAC,wBAAwB,SAAS,CACpC,OAAM,IAAI,MAAM,kCAAkC;EAiBpD,MAAM,MAAM,MAAM,UAbE,OADF,MAAM,4BAA4B,QAAQ,EACxB,eAAe,UAAU;GAC3D,SAAS;GACT;GACA;GACA;GACA;GACD,CAAC,EAGmB;GACnB,IAFa,MAAM,mBAAmB,EAE5B;GACV,GAAG;GACJ,CACqD;AAEtD,SAAO,IAAI,SAAS,IAAI,WAAW,IAAI,KAAK,EAAE,EAC5C,SAAS,EACP,gBAAgB,aACjB,EACF,CAAC"}

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-import { ComponentMetaTagFallbacks, ImageOptionsWithFontPaths, OpengraphImageConfig } from "./types-Lk5HqHkQ.js";
+import { ComponentMetaTagFallbacks, ImageOptionsWithFontPaths, OpengraphImageConfig } from "./types-BGbFKpbi.js";
 import { AstroIntegration } from "astro";
 
 //#region src/integration.d.ts
 declare const _default: (config: OpengraphImageConfig) => AstroIntegration;
-
 //#endregion
-export { ComponentMetaTagFallbacks, ImageOptionsWithFontPaths, OpengraphImageConfig, _default as default };
+export { type ComponentMetaTagFallbacks, type ImageOptionsWithFontPaths, type OpengraphImageConfig, _default as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -22,18 +22,15 @@ function vitePluginOpengraphImageUserConfig(config) {
 		}
 	};
 }
-
 //#endregion
 //#region src/integration.ts
 var integration_default = (config) => ({
 	name: "@altano/astro-opengraph",
 	hooks: { async "astro:config:setup"({ updateConfig, command, addDevToolbarApp }) {
-		const imageOptions = await config.getImageOptions();
-		const configSerializable = {
-			imageOptions,
+		updateConfig({ vite: { plugins: [vitePluginOpengraphImageUserConfig({
+			imageOptions: await config.getImageOptions(),
 			command
-		};
-		updateConfig({ vite: { plugins: [vitePluginOpengraphImageUserConfig(configSerializable)] } });
+		})] } });
 		addDevToolbarApp({
 			id: "@altano/astro-opengraph",
 			name: "Open Graph",
@@ -42,7 +39,7 @@ var integration_default = (config) => ({
 		});
 	} }
 });
-
 //#endregion
 export { integration_default as default };
+
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/virtual-user-config.ts","../src/integration.ts"],"sourcesContent":["import type { ViteUserConfig } from \"astro\";\n\nimport type { OpengraphImageConfigSerializable } from \"./types.js\";\n\nfunction resolveVirtualModuleId<T extends string>(id: T): `\\0${T}` {\n  return `\\0${id}`;\n}\n\n/**\n * Vite plugin that exposes OpengraphImage user config and project context via\n * virtual modules.\n */\nexport function vitePluginOpengraphImageUserConfig(\n  config: OpengraphImageConfigSerializable,\n): NonNullable<ViteUserConfig[\"plugins\"]>[number] {\n  /** Map of virtual module names to their code contents as strings. */\n  const modules = {\n    \"virtual:astro-opengraph/user-config\": `export default ${JSON.stringify(\n      config,\n    )}`,\n  } satisfies Record<string, string>;\n\n  /** Mapping names prefixed with `\\0` to their original form. */\n  const resolutionMap = Object.fromEntries(\n    (Object.keys(modules) as (keyof typeof modules)[]).map((key) => [\n      resolveVirtualModuleId(key),\n      key,\n    ]),\n  );\n\n  return {\n    name: \"vite-plugin-astro-opengraph-user-config\",\n    resolveId(id): string | void {\n      if (id in modules) return resolveVirtualModuleId(id);\n    },\n    load(id): string | void {\n      const resolution = resolutionMap[id];\n      if (resolution) return modules[resolution];\n    },\n  };\n}\n","import type { AstroIntegration } from \"astro\";\nimport type {\n  OpengraphImageConfig,\n  OpengraphImageConfigSerializable,\n} from \"./types.js\";\nimport { vitePluginOpengraphImageUserConfig } from \"./virtual-user-config.js\";\n\nexport default (config: OpengraphImageConfig): AstroIntegration => ({\n  name: \"@altano/astro-opengraph\",\n  hooks: {\n    async \"astro:config:setup\"({\n      updateConfig,\n      command,\n      addDevToolbarApp,\n    }): Promise<void> {\n      const imageOptions = await config.getImageOptions();\n      const configSerializable: OpengraphImageConfigSerializable = {\n        imageOptions,\n        command,\n      };\n      updateConfig({\n        vite: {\n          // Shove the serializable config into the virtual module for later\n          // retrieval in the middleware\n          plugins: [vitePluginOpengraphImageUserConfig(configSerializable)],\n        },\n      });\n      addDevToolbarApp({\n        id: \"@altano/astro-opengraph\",\n        name: \"Open Graph\",\n        // icon: \"🌠\",\n        icon: \"image\",\n        // We don't use `@altano/astro-opengraph/toolbar` because that won't\n        // resolve when serving the test fixture for e2e runs (`pnpm\n        // test:e2e:server`)\n        entrypoint: new URL(\"./toolbar/index.js\", import.meta.url),\n      });\n    },\n  },\n});\n"],"mappings":";AAIA,SAAS,uBAAyC,IAAiB;AACjE,QAAO,KAAK;;;;;;AAOd,SAAgB,mCACd,QACgD;;CAEhD,MAAM,UAAU,EACd,uCAAuC,kBAAkB,KAAK,UAC5D,OACD,IACF;;CAGD,MAAM,gBAAgB,OAAO,YAC1B,OAAO,KAAK,QAAQ,CAA8B,KAAK,QAAQ,CAC9D,uBAAuB,IAAI,EAC3B,IACD,CAAC,CACH;AAED,QAAO;EACL,MAAM;EACN,UAAU,IAAmB;AAC3B,OAAI,MAAM,QAAS,QAAO,uBAAuB,GAAG;;EAEtD,KAAK,IAAmB;GACtB,MAAM,aAAa,cAAc;AACjC,OAAI,WAAY,QAAO,QAAQ;;EAElC;;;;AChCH,IAAA,uBAAgB,YAAoD;CAClE,MAAM;CACN,OAAO,EACL,MAAM,qBAAqB,EACzB,cACA,SACA,oBACgB;AAMhB,eAAa,EACX,MAAM,EAGJ,SAAS,CAAC,mCAR+C;GAC3D,cAFmB,MAAM,OAAO,iBAAiB;GAGjD;GACD,CAKmE,CAAC,EAClE,EACF,CAAC;AACF,mBAAiB;GACf,IAAI;GACJ,MAAM;GAEN,MAAM;GAIN,YAAY,IAAI,IAAI,sBAAsB,OAAO,KAAK,IAAI;GAC3D,CAAC;IAEL;CACF"}

package/dist/toolbar/index.d.ts

@@ -2,7 +2,6 @@ import { DevToolbarApp } from "astro";
 
 //#region src/toolbar/index.d.ts
 declare const app: DevToolbarApp;
-
 //#endregion
 export { app as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/toolbar/index.js

@@ -2,7 +2,6 @@ import { render } from "preact";
 import { defineToolbarApp } from "astro/toolbar";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-
 //#region src/toolbar/styles.tsx
 const styles = `
   :host astro-dev-toolbar-window {
@@ -34,7 +33,6 @@ const styles = `
     transition: max-width 0.1s;
   }
 `;
-
 //#endregion
 //#region src/toolbar/components/Summary.tsx
 function Summary({ children }) {
@@ -47,7 +45,6 @@ function Summary({ children }) {
 		children
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/ExternalLinkicon.tsx
 function ExternalLinkicon({ width = 27, height = 27, fill = "#020202" }) {
@@ -81,34 +78,29 @@ function ExternalLinkicon({ width = 27, height = 27, fill = "#020202" }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/LinkOrText.tsx
 function LinkOrText({ maybeLinkText }) {
 	let parsedMaybeLink = null;
 	try {
-		if (maybeLinkText != null) {
-			const url = new URL(maybeLinkText);
-			parsedMaybeLink = /* @__PURE__ */ jsxs("a", {
-				href: url.toString(),
-				target: "_blank",
-				children: [
-					maybeLinkText,
-					" ",
-					/* @__PURE__ */ jsx(ExternalLinkicon, {
-						width: 10,
-						height: 10,
-						fill: "white"
-					})
-				]
-			});
-		}
+		if (maybeLinkText != null) parsedMaybeLink = /* @__PURE__ */ jsxs("a", {
+			href: new URL(maybeLinkText).toString(),
+			target: "_blank",
+			children: [
+				maybeLinkText,
+				" ",
+				/* @__PURE__ */ jsx(ExternalLinkicon, {
+					width: 10,
+					height: 10,
+					fill: "white"
+				})
+			]
+		});
 	} catch (_) {
 		parsedMaybeLink = maybeLinkText;
 	}
 	return parsedMaybeLink;
 }
-
 //#endregion
 //#region src/toolbar/hooks/useMetaTagInfo.tsx
 const useHeadObserver = () => {
@@ -129,11 +121,9 @@ const useHeadObserver = () => {
 	return headRef;
 };
 function useMetaTagInfo() {
-	const headRef = useHeadObserver();
-	const opengraphMetaTags = headRef?.current?.querySelectorAll("meta[property^='og:']") ?? [];
+	const opengraphMetaTags = useHeadObserver()?.current?.querySelectorAll("meta[property^='og:']") ?? [];
 	return Array.from(opengraphMetaTags).map((tag) => [tag.getAttribute("content"), tag.getAttribute("property")]);
 }
-
 //#endregion
 //#region src/toolbar/components/MetaTags.tsx
 function MetaTags() {
@@ -164,7 +154,6 @@ function MetaTagContent({ tag }) {
 		children: /* @__PURE__ */ jsx(LinkOrText, { maybeLinkText: content })
 	})] });
 }
-
 //#endregion
 //#region src/toolbar/hooks/useHoverState.tsx
 function useHoverState(setHoverState) {
@@ -178,7 +167,6 @@ function useHoverState(setHoverState) {
 	}, [setHoverState]);
 	return ref;
 }
-
 //#endregion
 //#region src/toolbar/hooks/useImageURL.tsx
 function useImageURL() {
@@ -188,12 +176,10 @@ function useImageURL() {
 }
 function useImageURLIfAvailable() {
 	const [imageUrlRef] = useState(() => {
-		const meta = document.querySelector("meta[property=\"og:image\"]");
-		return meta?.getAttribute("content") ?? null;
+		return document.querySelector("meta[property=\"og:image\"]")?.getAttribute("content") ?? null;
 	});
 	return imageUrlRef;
 }
-
 //#endregion
 //#region src/toolbar/components/Image.tsx
 function Image({ imageSize, handleLoadError }) {
@@ -216,32 +202,27 @@ function Image({ imageSize, handleLoadError }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/ZoomLabel.tsx
 function ZoomLabel({ imageSize }) {
-	const formattedNumber = (imageSize / 100).toLocaleString(void 0, { minimumFractionDigits: 2 });
-	return `${formattedNumber}x`;
+	return `${(imageSize / 100).toLocaleString(void 0, { minimumFractionDigits: 2 })}x`;
 }
-
 //#endregion
 //#region src/toolbar/components/ZoomButton.tsx
 function ZoomButton({ value, imageSize, setImageSize }) {
-	const isSelected = value === imageSize;
 	return /* @__PURE__ */ jsx("astro-dev-toolbar-button", {
 		size: "small",
 		style: {
 			padding: 0,
 			margin: 0
 		},
-		buttonStyle: isSelected ? "gray" : "ghost",
+		buttonStyle: value === imageSize ? "gray" : "ghost",
 		className: "zoom-button",
 		role: "radio",
 		onClick: () => setImageSize(value),
 		children: /* @__PURE__ */ jsx(ZoomLabel, { imageSize: value })
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/ToolbarSection.tsx
 function ToolbarSection({ icon, children }) {
@@ -262,7 +243,6 @@ function ToolbarSection({ icon, children }) {
 		}), children]
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/ImageZoomToolbar.tsx
 function ImageZoomToolbar({ isHovered, imageSize, setImageSize }) {
@@ -296,7 +276,6 @@ function ImageZoomToolbar({ isHovered, imageSize, setImageSize }) {
 		] })
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/CopyImageUrlButton.tsx
 function CopyImageUrlButton() {
@@ -331,7 +310,6 @@ function CopyImageUrlButton() {
 		})
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/ImageSection.tsx
 function ImageSection({ isHovered, handleLoadError }) {
@@ -354,7 +332,6 @@ function ImageSection({ isHovered, handleLoadError }) {
 		})]
 	})] });
 }
-
 //#endregion
 //#region src/toolbar/components/Error.tsx
 function Error$1({ message, icon }) {
@@ -377,14 +354,11 @@ function Error$1({ message, icon }) {
 		]
 	});
 }
-
 //#endregion
 //#region src/toolbar/components/getRelativeUrl.tsx
 function getRelativeUrl(absoluteUrl) {
-	const url = new URL(absoluteUrl);
-	return url.pathname;
+	return new URL(absoluteUrl).pathname;
 }
-
 //#endregion
 //#region src/toolbar/components/ToolbarApp.tsx
 function ToolbarApp() {
@@ -410,31 +384,28 @@ function ToolbarApp() {
 		})]
 	}), /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx(Summary, { children: "Meta Tags" }), /* @__PURE__ */ jsx(MetaTags, {})] })] });
 }
-
 //#endregion
 //#region src/toolbar/components/ToolbarAppWindow.tsx
 function ToolbarAppWindow() {
 	return /* @__PURE__ */ jsxs("astro-dev-toolbar-window", { children: [/* @__PURE__ */ jsx("style", { children: styles }), /* @__PURE__ */ jsx(ToolbarApp, {})] });
 }
-
 //#endregion
 //#region src/toolbar/index.tsx
 const SESSION_KEY_OPEN = "@altano/astro-opengraph/toolbar:is-open";
-const app = defineToolbarApp({ init(canvas, app$1) {
-	app$1.onToggled((event) => {
+const app = defineToolbarApp({ init(canvas, app) {
+	app.onToggled((event) => {
 		if (event.state) {
 			sessionStorage.setItem(SESSION_KEY_OPEN, "true");
 			render(/* @__PURE__ */ jsx(ToolbarAppWindow, {}), canvas);
 		} else sessionStorage.removeItem(SESSION_KEY_OPEN);
 	});
-	app$1.toggleNotification({
+	app.toggleNotification({
 		state: document.querySelector("meta[property=\"og:image\"]") != null,
 		level: "info"
 	});
-	if (sessionStorage.getItem(SESSION_KEY_OPEN) != null) app$1.toggleState({ state: true });
+	if (sessionStorage.getItem(SESSION_KEY_OPEN) != null) app.toggleState({ state: true });
 } });
-var toolbar_default = app;
-
 //#endregion
-export { toolbar_default as default };
+export { app as default };
+
 //# sourceMappingURL=index.js.map

package/dist/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Error","Error"],"sources":["../../src/toolbar/styles.tsx","../../src/toolbar/components/Summary.tsx","../../src/toolbar/components/ExternalLinkicon.tsx","../../src/toolbar/components/LinkOrText.tsx","../../src/toolbar/hooks/useMetaTagInfo.tsx","../../src/toolbar/components/MetaTags.tsx","../../src/toolbar/hooks/useHoverState.tsx","../../src/toolbar/hooks/useImageURL.tsx","../../src/toolbar/components/Image.tsx","../../src/toolbar/components/ZoomLabel.tsx","../../src/toolbar/components/ZoomButton.tsx","../../src/toolbar/components/ToolbarSection.tsx","../../src/toolbar/components/ImageZoomToolbar.tsx","../../src/toolbar/components/CopyImageUrlButton.tsx","../../src/toolbar/components/ImageSection.tsx","../../src/toolbar/components/Error.tsx","../../src/toolbar/components/getRelativeUrl.tsx","../../src/toolbar/components/ToolbarApp.tsx","../../src/toolbar/components/ToolbarAppWindow.tsx","../../src/toolbar/index.tsx"],"sourcesContent":["export const styles = /* css */ `\n  :host astro-dev-toolbar-window {\n    max-height: calc(100vh - 80px);\n    overflow-y: auto;\n  }\n\n  button {\n    background: none;\n    color: inherit;\n    border: none;\n    font: inherit;\n    cursor: pointer;\n    outline: inherit;\n  }\n\n  details {\n    margin-block-end: 10px;\n  }\n  details:last-of-type {\n    margin-block-end: 0;\n  }\n\n  details[open] summary, .image {\n    margin-block-end: 7px;\n  }\n\n  .image img {\n    transition: max-width 0.1s;\n  }\n`;\n","import type Preact from \"preact\";\n\nexport function Summary({\n  children,\n}: {\n  children: string;\n}): Preact.JSX.Element {\n  return (\n    <summary\n      style={{\n        cursor: \"pointer\",\n        fontWeight: 700,\n        color: \"white\",\n      }}\n    >\n      {children}\n    </summary>\n  );\n}\n","import type Preact from \"preact\";\n\nexport function ExternalLinkicon({\n  width = 27,\n  height = 27,\n  fill = \"#020202\",\n}: {\n  width?: number;\n  height?: number;\n  fill?: string;\n}): Preact.JSX.Element {\n  return (\n    <span\n      style={{\n        display: \"inline-block\",\n        width,\n        height,\n      }}\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 120 120\">\n        <path d=\"M120.09 16.696H60.256V.096L120.09.09z\" fill={fill} />\n        <path\n          d=\"M57.99 48.64l42.573-42.574 13.475 13.475-42.574 42.58z\"\n          fill={fill}\n        />\n        <path\n          d=\"M119.98.107l.02 59.83-16.59.013-.02-59.846zM3 23.5h17v87H3zm83.49 52.56h17V113h-17z\"\n          fill={fill}\n        />\n        <path d=\"M3 16.692h40.655v17H3zM3 96h100.49v17H3z\" fill={fill} />\n      </svg>\n    </span>\n  );\n}\n","import type Preact from \"preact\";\nimport { ExternalLinkicon } from \"./ExternalLinkicon.js\";\n\ntype LinkOrTextType = Preact.JSX.Element | string | null;\n\nexport function LinkOrText({\n  maybeLinkText,\n}: {\n  maybeLinkText: string | null;\n}): LinkOrTextType {\n  let parsedMaybeLink: LinkOrTextType = null;\n  try {\n    if (maybeLinkText != null) {\n      const url = new URL(maybeLinkText);\n      parsedMaybeLink = (\n        <a href={url.toString()} target=\"_blank\">\n          {maybeLinkText}{\" \"}\n          <ExternalLinkicon width={10} height={10} fill=\"white\" />\n        </a>\n      );\n    }\n  } catch (_) {\n    parsedMaybeLink = maybeLinkText;\n  }\n  return parsedMaybeLink;\n}\n","import { useEffect, useRef, useState } from \"preact/hooks\";\n\nexport type MetaTagInfo = [content: string | null, property: string | null];\n\nconst useHeadObserver = (): React.RefObject<HTMLHeadElement | null> => {\n  const [_generation, setGeneration] = useState<number>(0);\n  const forceRerender = (): void => setGeneration((old) => ++old);\n  const headRef = useRef(document.querySelector(\"head\"));\n\n  // useEffect(() => {\n  //   console.log({ generation });\n  // }, [generation]);\n\n  useEffect(() => {\n    // console.log({ \"headRef.current\": headRef.current });\n    if (headRef.current == null) {\n      // assume we must have a head by now, and if we don't, we will never get\n      // one.\n      return;\n    }\n    const observer = new MutationObserver(forceRerender);\n    observer.observe(headRef.current, {\n      attributes: true,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  return headRef;\n};\n\nexport function useMetaTagInfo(): MetaTagInfo[] {\n  const headRef = useHeadObserver();\n  const opengraphMetaTags =\n    headRef?.current?.querySelectorAll(\"meta[property^='og:']\") ?? [];\n  // console.log({\n  //   opengraphMetaTags: opengraphMetaTags,\n  //   opengraphMetaTagsLength: opengraphMetaTags.length,\n  // });\n  return Array.from(opengraphMetaTags).map(\n    (tag: Element): MetaTagInfo => [\n      tag.getAttribute(\"content\"),\n      tag.getAttribute(\"property\"),\n    ],\n  );\n}\n","import type Preact from \"preact\";\nimport { LinkOrText } from \"./LinkOrText.js\";\nimport { useMetaTagInfo, type MetaTagInfo } from \"../hooks/useMetaTagInfo.js\";\n\nexport function MetaTags(): Preact.JSX.Element {\n  const tags = useMetaTagInfo();\n\n  return (\n    <dl\n      data-testid=\"astro-opengraph-toolbar\"\n      style={{\n        margin: 0,\n        display: \"grid\",\n        gridTemplateColumns: \"max-content 1fr\",\n        gap: 7,\n        columnGap: 13,\n      }}\n    >\n      {tags.map((tag) => (\n        <MetaTagContent key={tag[1]} tag={tag} />\n      ))}\n    </dl>\n  );\n}\n\nfunction MetaTagContent({ tag }: { tag: MetaTagInfo }): Preact.JSX.Element {\n  const [content, property] = tag;\n  return (\n    <>\n      <dt\n        style={{\n          color: \"white\",\n          textAlign: \"right\",\n          fontWeight: 500,\n        }}\n      >\n        {property}\n      </dt>\n      <dd style={{ margin: 0 }}>\n        <LinkOrText maybeLinkText={content} />\n      </dd>\n    </>\n  );\n}\n","import type Preact from \"preact\";\nimport { useRef, useEffect } from \"preact/hooks\";\n\nexport function useHoverState<TElement extends HTMLElement>(\n  setHoverState: (isHover: boolean) => void,\n): Preact.RefObject<TElement> {\n  const ref = useRef<TElement>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    const { signal } = controller;\n    ref.current?.addEventListener(\"mouseenter\", () => setHoverState(true), {\n      signal,\n    });\n    ref.current?.addEventListener(\"mouseleave\", () => setHoverState(false), {\n      signal,\n    });\n\n    return () => controller.abort();\n  }, [setHoverState]);\n\n  return ref;\n}\n","import { useState } from \"preact/hooks\";\n\nexport function useImageURL(): string {\n  const imageUrl = useImageURLIfAvailable();\n  if (imageUrl == null) {\n    throw new Error(\n      `Shouldn't be rendering this component without an image URL`,\n    );\n  }\n  return imageUrl;\n}\n\nexport function useImageURLIfAvailable(): string | null {\n  const [imageUrlRef] = useState(() => {\n    const meta = document.querySelector('meta[property=\"og:image\"]');\n    return meta?.getAttribute(\"content\") ?? null;\n  });\n  return imageUrlRef;\n}\n","import type Preact from \"preact\";\nimport { useImageURL } from \"../hooks/useImageURL.js\";\n\nexport function Image({\n  imageSize,\n  handleLoadError,\n}: {\n  imageSize: number;\n  handleLoadError: () => void;\n}): Preact.JSX.Element {\n  const imageUrl = useImageURL();\n  return (\n    <div className=\"image\">\n      <a href={imageUrl} target=\"_blank\" title=\"Open image in new tab\">\n        <img\n          onError={handleLoadError}\n          alt=\"Open Graph\"\n          src={imageUrl}\n          style={{\n            maxHeight: \"100%\",\n            maxWidth: `${imageSize}%`,\n          }}\n        />\n      </a>\n    </div>\n  );\n}\n","export function ZoomLabel({ imageSize }: { imageSize: number }): string {\n  const formattedNumber = (imageSize / 100).toLocaleString(undefined, {\n    minimumFractionDigits: 2,\n  });\n  return `${formattedNumber}x`;\n}\n","import type Preact from \"preact\";\nimport { ZoomLabel } from \"./ZoomLabel.js\";\n\nexport function ZoomButton({\n  value,\n  imageSize,\n  setImageSize,\n}: {\n  value: number;\n  imageSize: number;\n  setImageSize: (size: number) => void;\n}): Preact.JSX.Element {\n  const isSelected = value === imageSize;\n  return (\n    <astro-dev-toolbar-button\n      size=\"small\"\n      style={{ padding: 0, margin: 0 }}\n      buttonStyle={isSelected ? \"gray\" : \"ghost\"}\n      className=\"zoom-button\"\n      role=\"radio\"\n      onClick={() => setImageSize(value)}\n    >\n      <ZoomLabel imageSize={value} />\n    </astro-dev-toolbar-button>\n  );\n}\n","import type { ComponentChildren } from \"preact\";\nimport type Preact from \"preact\";\n\nexport function ToolbarSection({\n  icon,\n  children,\n}: {\n  icon: Preact.JSX.Element;\n  children: ComponentChildren;\n}): Preact.JSX.Element {\n  return (\n    <div\n      style={{\n        fontSize: 12,\n        display: \"flex\",\n        alignItems: \"center\",\n        columnGap: 5,\n      }}\n    >\n      <div\n        style={{\n          display: \"inline-block\",\n          width: 12,\n          height: 12,\n        }}\n      >\n        {icon}\n      </div>\n      {children}\n    </div>\n  );\n}\n","import type Preact from \"preact\";\nimport { ZoomButton } from \"./ZoomButton.js\";\nimport { ToolbarSection } from \"./ToolbarSection.js\";\n\nexport function ImageZoomToolbar({\n  isHovered,\n  imageSize,\n  setImageSize,\n}: {\n  isHovered: boolean;\n  imageSize: number;\n  setImageSize: (size: number) => void;\n}): Preact.JSX.Element {\n  return (\n    <ToolbarSection icon={<astro-dev-toolbar-icon icon=\"gear\" />}>\n      {!isHovered ? (\n        <ZoomButton\n          value={imageSize}\n          imageSize={imageSize}\n          setImageSize={setImageSize}\n        />\n      ) : (\n        <>\n          <ZoomButton\n            value={25}\n            imageSize={imageSize}\n            setImageSize={setImageSize}\n          />\n          <ZoomButton\n            value={50}\n            imageSize={imageSize}\n            setImageSize={setImageSize}\n          />\n          <ZoomButton\n            value={75}\n            imageSize={imageSize}\n            setImageSize={setImageSize}\n          />\n          <ZoomButton\n            value={100}\n            imageSize={imageSize}\n            setImageSize={setImageSize}\n          />\n        </>\n      )}\n    </ToolbarSection>\n  );\n}\n","import { useState, useRef, useEffect, useCallback } from \"preact/hooks\";\nimport type Preact from \"preact\";\nimport type { MouseEventHandler } from \"preact/compat\";\nimport type { DevToolbarButton } from \"astro/runtime/client/dev-toolbar/ui-library/button.js\";\nimport { useImageURL } from \"../hooks/useImageURL.js\";\nimport { ToolbarSection } from \"./ToolbarSection.js\";\n\ntype Timer = ReturnType<typeof setTimeout>;\n\nexport function CopyImageUrlButton(): Preact.JSX.Element {\n  const imageUrl = useImageURL();\n  const [wasRecentlyClicked, setWasRecentlyClicked] = useState(false);\n  const checkTimer = useRef<Timer | null>(null);\n\n  useEffect(() => {\n    if (wasRecentlyClicked && checkTimer.current == null) {\n      checkTimer.current = setTimeout(() => {\n        setWasRecentlyClicked(false);\n        // TODO investigate\n        // eslint-disable-next-line react-compiler/react-compiler\n        checkTimer.current = null;\n      }, 3_000);\n    }\n  }, [wasRecentlyClicked]);\n\n  const handleClick: MouseEventHandler<DevToolbarButton> = useCallback(\n    (evt) => {\n      // Copy the text inside the text field\n      void navigator.clipboard.writeText(imageUrl);\n      setWasRecentlyClicked(true);\n      evt.stopPropagation();\n      evt.preventDefault();\n    },\n    [imageUrl],\n  );\n\n  return (\n    <ToolbarSection icon={<astro-dev-toolbar-icon icon=\"copy\" />}>\n      <div style={{ display: \"flex\", alignItems: \"center\" }}>\n        <astro-dev-toolbar-button\n          size=\"small\"\n          buttonStyle=\"gray\"\n          onClick={handleClick}\n        >\n          {wasRecentlyClicked ? \"Copied to clipboard\" : \"Copy image URL\"}\n        </astro-dev-toolbar-button>\n      </div>\n    </ToolbarSection>\n  );\n}\n","import { Image } from \"./Image.js\";\nimport { ImageZoomToolbar } from \"./ImageZoomToolbar.js\";\nimport { CopyImageUrlButton } from \"./CopyImageUrlButton.js\";\nimport type Preact from \"preact\";\nimport { useState } from \"preact/hooks\";\n\nexport function ImageSection({\n  isHovered,\n  handleLoadError,\n}: {\n  isHovered: boolean;\n  handleLoadError: () => void;\n}): Preact.JSX.Element {\n  const [imageSize, setImageSize] = useState(100);\n\n  return (\n    <>\n      <Image imageSize={imageSize} handleLoadError={handleLoadError} />\n      <div\n        data-testid=\"image-section-toolbar\"\n        style={{\n          display: \"flex\",\n          flexDirection: \"row\",\n          alignItems: \"center\",\n          columnGap: 15,\n        }}\n      >\n        <CopyImageUrlButton />\n        <ImageZoomToolbar\n          isHovered={isHovered}\n          imageSize={imageSize}\n          setImageSize={setImageSize}\n        />\n      </div>\n    </>\n  );\n}\n","import type { Icon } from \"astro/runtime/client/dev-toolbar/ui-library/icons.js\";\nimport type Preact from \"preact\";\n\nexport function Error({\n  message,\n  icon,\n}: {\n  message: string;\n  icon: Icon;\n}): Preact.JSX.Element {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 10,\n        alignItems: \"center\",\n      }}\n    >\n      <astro-dev-toolbar-icon style={{ width: 24, height: 24 }} icon={icon} />{\" \"}\n      {message}\n    </div>\n  );\n}\n","export function getRelativeUrl(absoluteUrl: string): string {\n  const url = new URL(absoluteUrl);\n  return url.pathname;\n}\n","import type Preact from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport { Summary } from \"./Summary.js\";\nimport { MetaTags } from \"./MetaTags.js\";\nimport { useHoverState } from \"../hooks/useHoverState.js\";\nimport { useImageURLIfAvailable } from \"../hooks/useImageURL.js\";\nimport { ImageSection } from \"./ImageSection.js\";\nimport { Error } from \"./Error.js\";\nimport { getRelativeUrl } from \"./getRelativeUrl.js\";\n\nexport function ToolbarApp(): Preact.JSX.Element {\n  const [isImageDetailsHovered, setIsImageDetailsHovered] = useState(false);\n  const imageDetailsRef = useHoverState<HTMLDetailsElement>(\n    setIsImageDetailsHovered,\n  );\n  const imageUrl = useImageURLIfAvailable();\n  const [imageLoadStatus, setImageLoadStatus] = useState<\"pending\" | \"error\">(\n    \"pending\",\n  );\n\n  if (imageUrl == null) {\n    return (\n      <Error icon=\"warning\" message=\"No Open Graph image found on this page\" />\n    );\n  } else if (imageLoadStatus === \"error\") {\n    return (\n      <Error\n        icon=\"bug\"\n        message={`Error loading image at ${getRelativeUrl(imageUrl)}`}\n      />\n    );\n  }\n\n  return (\n    <>\n      <details open className=\"image\" ref={imageDetailsRef}>\n        <Summary>Image</Summary>\n        <ImageSection\n          isHovered={isImageDetailsHovered}\n          handleLoadError={() => setImageLoadStatus(\"error\")}\n        />\n      </details>\n\n      <details>\n        <Summary>Meta Tags</Summary>\n        <MetaTags />\n      </details>\n    </>\n  );\n}\n","import type Preact from \"preact\";\nimport { styles } from \"../styles.js\";\nimport { ToolbarApp } from \"./ToolbarApp.js\";\n\nexport function ToolbarAppWindow(): Preact.JSX.Element {\n  return (\n    <astro-dev-toolbar-window>\n      <style>{styles}</style>\n      <ToolbarApp />\n    </astro-dev-toolbar-window>\n  );\n}\n","import { render } from \"preact\";\n\nimport { defineToolbarApp } from \"astro/toolbar\";\nimport { ToolbarAppWindow } from \"./components/ToolbarAppWindow.js\";\nimport type { DevToolbarApp } from \"astro\";\n\nconst SESSION_KEY_OPEN = \"@altano/astro-opengraph/toolbar:is-open\";\n\nconst app: DevToolbarApp = defineToolbarApp({\n  init(canvas, app) {\n    app.onToggled((event) => {\n      if (event.state) {\n        sessionStorage.setItem(SESSION_KEY_OPEN, \"true\");\n        render(<ToolbarAppWindow />, canvas);\n      } else {\n        sessionStorage.removeItem(SESSION_KEY_OPEN);\n      }\n    });\n\n    app.toggleNotification({\n      state: document.querySelector('meta[property=\"og:image\"]') != null,\n      level: \"info\",\n    });\n\n    if (sessionStorage.getItem(SESSION_KEY_OPEN) != null) {\n      app.toggleState({ state: true });\n    }\n  },\n});\n\nexport default app;\n"],"mappings":"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"}

package/dist/{types-Lk5HqHkQ.d.ts → types-BGbFKpbi.d.ts}

@@ -65,7 +65,6 @@ type OpengraphImageConfigResolved = {
   componentMetaTagFallbacks: ComponentMetaTagFallbacks & MetaTagDefaults;
   command: Command;
 };
-
 //#endregion
 export { ComponentMetaTagFallbacks, ImageOptions, ImageOptionsWithFontPaths, OpengraphImageConfig, OpengraphImageConfigDeserialized, OpengraphImageConfigResolved, OpengraphImageConfigSerializableMaybeMocked };
-//# sourceMappingURL=types-Lk5HqHkQ.d.ts.map
+//# sourceMappingURL=types-BGbFKpbi.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/astro-opengraph",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Open Graph Tools for Astro",
   "keywords": [
     "astro",
@@ -36,6 +36,7 @@
     "assets",
     "components",
     "dist/**/*.js",
+    "dist/**/*.js.map",
     "dist/**/*.d.ts"
   ],
   "dependencies": {
@@ -44,44 +45,44 @@
     "satori-html": "^0.3.2"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/preact": "^4.0.8",
-    "@astrojs/svelte": "^7.0.9",
-    "@astrojs/vue": "^5.0.9",
-    "@inox-tools/astro-tests": "0.5.1",
-    "@playwright/test": "1.51.1",
+    "@astrojs/check": "^0.9.8",
+    "@astrojs/preact": "^5.0.2",
+    "@astrojs/svelte": "^8.0.3",
+    "@astrojs/vue": "^6.0.1",
+    "@inox-tools/astro-tests": "^0.9.1",
+    "@playwright/test": "1.58.2",
     "@types/he": "^1.2.3",
-    "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^22.13.10",
-    "@vitest/coverage-v8": "^3.1.4",
-    "astro": "^5.8.0",
+    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/node": "^25.5.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "astro": "^6.0.8",
     "depcheck": "^1.4.7",
-    "jest-image-snapshot": "^6.4.0",
-    "preact": "^10.26.5",
-    "sharp": "^0.33.1",
-    "svelte": "^5.25.12",
-    "tsdown": "^0.12.3",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.6",
-    "vitest": "^3.1.4",
-    "vue": "^3.5.13",
-    "zx": "^8.5.2",
+    "jest-image-snapshot": "^6.5.1",
+    "preact": "^10.28.2",
+    "sharp": "^0.33.5",
+    "svelte": "^5.53.5",
+    "tsdown": "^0.21.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.1.0",
+    "vue": "^3.5.27",
+    "zx": "^8.8.5",
     "@altano/assets": "0.0.1",
     "@altano/build-config": "0.0.1",
     "@altano/testing": "0.0.1",
-    "@altano/tiny-async-pool": "4.0.0",
+    "@altano/tiny-async-pool": "4.0.2",
     "@altano/tsconfig": "0.0.1",
-    "@altano/vitest-plugins": "1.1.0"
+    "@altano/vitest-plugins": "1.1.2"
   },
   "peerDependencies": {
-    "astro": "5.x.x",
+    "astro": "6.x.x",
     "preact": ">=10"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown --config-loader unrun",
     "check:types:astro": "node --experimental-strip-types ./scripts/check-fixtures.ts",
     "check:types:src": "tsc --noEmit",
     "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
@@ -92,7 +93,7 @@
     "lint": "eslint",
     "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
     "lint:timing": "TIMING=1 eslint src/**/*.ts*",
-    "test:e2e": "playwright test",
+    "test:e2e": "NODE_OPTIONS='--no-experimental-strip-types' playwright test",
     "test:e2e:server": "astro --root tests/fixtures/ui-frameworks --port 3913 dev",
     "test:e2e:ui": "playwright test --ui",
     "test:unit": "vitest --run",

package/dist/config-CzK0JuaO.js

@@ -1,45 +0,0 @@
-import { readFile } from "node:fs/promises";
-
-//#region src/config.ts
-async function deserializeVirtualConfig(configMaybeMocked) {
-	const config = typeof configMaybeMocked === "function" ? configMaybeMocked() : configMaybeMocked;
-	const fontsWithBuffers = await Promise.all(config.imageOptions.fonts.map(async (font) => {
-		const data = await readFile(font.path);
-		return {
-			...font,
-			data
-		};
-	}));
-	return {
-		...config,
-		imageOptions: {
-			...config.imageOptions,
-			fonts: fontsWithBuffers
-		}
-	};
-}
-const imageOptionDefaults = {
-	width: 1200,
-	height: 630
-};
-const metaTagDefaults = { "og:image": `/opengraph.png` };
-async function getResolvedConfig() {
-	const module = await import("virtual:astro-opengraph/user-config");
-	const lazyConfig = module.default;
-	const deserialized = await deserializeVirtualConfig(lazyConfig);
-	return {
-		...deserialized,
-		imageOptions: {
-			...imageOptionDefaults,
-			...deserialized.imageOptions
-		},
-		componentMetaTagFallbacks: {
-			...deserialized.componentMetaTagFallbacks,
-			...metaTagDefaults
-		}
-	};
-}
-
-//#endregion
-export { deserializeVirtualConfig, getResolvedConfig };
-//# sourceMappingURL=config-CzK0JuaO.js.map