@altano/astro-opengraph 0.1.0-alpha.3 → 0.1.0

package/README.md

@@ -419,6 +419,15 @@ export const GET: APIRoute = makeOpengraphDevEndpoint({
 });
 ```
 
+You'll probably want to include a remote stylesheet that has your font face so that it renders correctly in HTML, since the integration's font configuration doesn't affect the HTML rendered version. For example, you might include this in your `./_opengraph.astro`:
+
+```
+<link
+  href=" https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.2.5/index.min.css "
+  rel="stylesheet"
+/>
+```
+
 # FAQ
 
 ## Question: How does this work?

package/components/meta.astro

@@ -1,5 +1,5 @@
 ---
-import { getResolvedConfig } from "../src/config";
+import { getResolvedConfig } from "@altano/astro-opengraph/config";
 
 export type Props = {
   /**

package/dist/config-CzK0JuaO.js

@@ -0,0 +1,45 @@
+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

package/dist/config.d.ts

@@ -1,4 +1,9 @@
-import type { OpengraphImageConfigDeserialized, OpengraphImageConfigResolved, OpengraphImageConfigSerializableMaybeMocked } from "./types.js";
-export declare function deserializeVirtualConfig(configMaybeMocked: OpengraphImageConfigSerializableMaybeMocked): Promise<OpengraphImageConfigDeserialized>;
-export declare function getResolvedConfig(): Promise<OpengraphImageConfigResolved>;
+import { OpengraphImageConfigDeserialized, OpengraphImageConfigResolved, OpengraphImageConfigSerializableMaybeMocked } from "./types-Lk5HqHkQ.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

@@ -0,0 +1,3 @@
+import { deserializeVirtualConfig, getResolvedConfig } from "./config-CzK0JuaO.js";
+
+export { deserializeVirtualConfig, getResolvedConfig };

package/dist/endpoint.d.ts

@@ -1,14 +1,28 @@
-import type { APIRoute } from "astro";
-import type { ImageOptions } from "./types.js";
+import { ImageOptions } from "./types-Lk5HqHkQ.js";
+import { APIRoute } from "astro";
+
+//#region src/endpoint.d.ts
 type Options = {
-    template: unknown;
-    /**
-     * Custom "Content-Type" header, only used in SSR. Defaults to "image/png"
-     */
-    contentType?: string;
-    imageOptionOverrides?: Partial<ImageOptions>;
+  // 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"
+  */
+  contentType?: string;
+  imageOptionOverrides?: Partial<ImageOptions>;
 };
-export declare function makeOpengraphDevEndpoint({ template, contentType, }: Options): APIRoute;
-export declare function makeOpengraphEndpoint({ template, imageOptionOverrides, contentType, }: Options): APIRoute;
-export {};
+declare function makeOpengraphDevEndpoint({
+  template,
+  contentType
+}: Options): APIRoute;
+declare function makeOpengraphEndpoint({
+  template,
+  imageOptionOverrides,
+  contentType
+}: Options): APIRoute;
+
+//#endregion
+export { makeOpengraphDevEndpoint, makeOpengraphEndpoint };
 //# sourceMappingURL=endpoint.d.ts.map

package/dist/endpoint.js

@@ -1,137 +1,73 @@
-// src/endpoint.ts
+import { getResolvedConfig } from "./config-CzK0JuaO.js";
 import { experimental_AstroContainer } from "astro/container";
 import { isAstroComponentFactory } from "astro/runtime/server/render/astro/factory.js";
-
-// src/config.ts
-import { readFile } from "node:fs/promises";
-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
-    }
-  };
-}
-var imageOptionDefaults = {
-  width: 1200,
-  height: 630
-};
-var 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
-    }
-  };
-}
-
-// src/image.ts
 import { getConfiguredImageService, imageConfig } from "astro:assets";
 import satori from "satori";
-import { html as htmlToVNode } from "satori-html";
+import { html } from "satori-html";
 import he from "he";
-async function htmlToPNG(html, satoriOptions) {
-  const responseTextWithDecodedHtmlEntities = he.decode(html);
-  const vnode = htmlToVNode(responseTextWithDecodedHtmlEntities);
-  const svg = await satori(vnode, satoriOptions);
-  const fileBuffer = Buffer.from(svg, "utf-8");
-  const uint8Array = new Uint8Array(
-    fileBuffer.buffer,
-    fileBuffer.byteOffset,
-    fileBuffer.byteLength
-  );
-  return bufferToTransformedPNG(uint8Array);
+
+//#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 fileBuffer = Buffer.from(svg, "utf-8");
+	const uint8Array = new Uint8Array(fileBuffer.buffer, fileBuffer.byteOffset, fileBuffer.byteLength);
+	return bufferToTransformedPNG(uint8Array);
 }
+/**
+* Convert a buffer to an image using the astro local image service
+*/
 async function bufferToTransformedPNG(imageBuffer) {
-  const imageService = await getConfiguredImageService();
-  return imageService.transform(
-    imageBuffer,
-    { src: "", format: "png" },
-    imageConfig
-  );
+	const imageService = await getConfiguredImageService();
+	return imageService.transform(imageBuffer, {
+		src: "",
+		format: "png"
+	}, imageConfig);
 }
 
-// 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 (!isAstroComponentFactory(template)) {
-      throw new Error(`Given is not an Astro template.`);
-    }
-    const container = await experimental_AstroContainer.create();
-    const templateStr = await container.renderToString(template, {
-      partial: false,
-      request,
-      params,
-      locals,
-      props
-    });
-    return new Response(templateStr, {
-      headers: {
-        "Content-Type": contentType
-      }
-    });
-  };
+//#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 (!isAstroComponentFactory(template)) throw new Error(`Given is not an Astro template.`);
+		const container = await experimental_AstroContainer.create();
+		const templateStr = await container.renderToString(template, {
+			partial: false,
+			request,
+			params,
+			locals,
+			props
+		});
+		return new Response(templateStr, { headers: { "Content-Type": contentType } });
+	};
 }
-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, {
-      partial: false,
-      request,
-      params,
-      locals,
-      props
-    });
-    const config = await getResolvedConfig();
-    const imageOptions = {
-      ...config.imageOptions,
-      ...imageOptionOverrides
-    };
-    const png = await htmlToPNG(templateStr, imageOptions);
-    return new Response(png.data, {
-      headers: {
-        "Content-Type": contentType
-      }
-    });
-  };
+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, {
+			partial: false,
+			request,
+			params,
+			locals,
+			props
+		});
+		const config = await getResolvedConfig();
+		const imageOptions = {
+			...config.imageOptions,
+			...imageOptionOverrides
+		};
+		const png = await htmlToPNG(templateStr, imageOptions);
+		return new Response(png.data, { headers: { "Content-Type": contentType } });
+	};
 }
-export {
-  makeOpengraphDevEndpoint,
-  makeOpengraphEndpoint
-};
+
+//#endregion
+export { makeOpengraphDevEndpoint, makeOpengraphEndpoint };
+//# sourceMappingURL=endpoint.js.map

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,65 +1,48 @@
-// src/virtual-user-config.ts
+//#region src/virtual-user-config.ts
 function resolveVirtualModuleId(id) {
-  return `\0${id}`;
+	return `\0${id}`;
 }
+/**
+* Vite plugin that exposes OpengraphImage user config and project context via
+* virtual modules.
+*/
 function vitePluginOpengraphImageUserConfig(config) {
-  const modules = {
-    "virtual:astro-opengraph/user-config": `export default ${JSON.stringify(
-      config
-    )}`
-  };
-  const resolutionMap = Object.fromEntries(
-    Object.keys(modules).map((key) => [
-      resolveVirtualModuleId(key),
-      key
-    ])
-  );
-  return {
-    name: "vite-plugin-astro-opengraph-user-config",
-    resolveId(id) {
-      if (id in modules) return resolveVirtualModuleId(id);
-    },
-    load(id) {
-      const resolution = resolutionMap[id];
-      if (resolution) return modules[resolution];
-    }
-  };
+	/** Map of virtual module names to their code contents as strings. */
+	const modules = { "virtual:astro-opengraph/user-config": `export default ${JSON.stringify(config)}` };
+	/** Mapping names prefixed with `\0` to their original form. */
+	const resolutionMap = Object.fromEntries(Object.keys(modules).map((key) => [resolveVirtualModuleId(key), key]));
+	return {
+		name: "vite-plugin-astro-opengraph-user-config",
+		resolveId(id) {
+			if (id in modules) return resolveVirtualModuleId(id);
+		},
+		load(id) {
+			const resolution = resolutionMap[id];
+			if (resolution) return modules[resolution];
+		}
+	};
 }
 
-// src/integration.ts
+//#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,
-        command
-      };
-      updateConfig({
-        vite: {
-          // Shove the serializable config into the virtual module for later
-          // retrieval in the middleware
-          plugins: [vitePluginOpengraphImageUserConfig(configSerializable)]
-        }
-      });
-      addDevToolbarApp({
-        id: "@altano/astro-opengraph",
-        name: "Open Graph",
-        // icon: "🌠",
-        icon: "image",
-        // We don't use `@altano/astro-opengraph/toolbar` because that won't
-        // resolve when serving the test fixture for e2e runs (`pnpm
-        // test:e2e:server`)
-        entrypoint: new URL("./toolbar/index.js", import.meta.url)
-      });
-    }
-  }
+	name: "@altano/astro-opengraph",
+	hooks: { async "astro:config:setup"({ updateConfig, command, addDevToolbarApp }) {
+		const imageOptions = await config.getImageOptions();
+		const configSerializable = {
+			imageOptions,
+			command
+		};
+		updateConfig({ vite: { plugins: [vitePluginOpengraphImageUserConfig(configSerializable)] } });
+		addDevToolbarApp({
+			id: "@altano/astro-opengraph",
+			name: "Open Graph",
+			icon: "image",
+			entrypoint: new URL("./toolbar/index.js", import.meta.url)
+		});
+	} }
 });
-export {
-  integration_default as default
-};
+
+//#endregion
+export { integration_default as default };
+//# sourceMappingURL=index.js.map

package/dist/toolbar/index.d.ts

@@ -1,3 +1,8 @@
-declare const _default: import("astro").DevToolbarApp;
-export default _default;
+import { DevToolbarApp } from "astro";
+
+//#region src/toolbar/index.d.ts
+declare const app: DevToolbarApp;
+
+//#endregion
+export { app as default };
 //# sourceMappingURL=index.d.ts.map