@altano/astro-opengraph 0.0.1-alpha.1 → 0.0.1-alpha.2

package/README.md

@@ -399,7 +399,7 @@ This integration makes use of the [experimental container APIs](https://docs.ast
 
 While in `astro dev` mode, you can use the included Astro dev toolbar app installed by this integration. It include a preview of the opengraph image as well as the `og:` meta tags on the page:
 
-![Screenshot of the Astro developer toolbar showing an Open Graph image](./readme-assets/dev-toolbar.png)
+![Screenshot of the Astro developer toolbar showing an Open Graph image](./assets/dev-toolbar.png)
 
 Once your site is live, you can use a tool like [opengraph.xyz](https://www.opengraph.xyz/) to preview the opengraph image/tags.
 

package/dist/config.d.ts

@@ -0,0 +1,4 @@
+import type { OpengraphImageConfigDeserialized, OpengraphImageConfigResolved, OpengraphImageConfigSerializableMaybeMocked } from "./types.js";
+export declare function deserializeVirtualConfig(configMaybeMocked: OpengraphImageConfigSerializableMaybeMocked): Promise<OpengraphImageConfigDeserialized>;
+export declare function getResolvedConfig(): Promise<OpengraphImageConfigResolved>;
+//# sourceMappingURL=config.d.ts.map

package/dist/endpoint.d.ts

@@ -0,0 +1,14 @@
+import type { APIRoute } from "astro";
+import type { ImageOptions } from "./types.js";
+type Options = {
+    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 {};
+//# sourceMappingURL=endpoint.d.ts.map

package/dist/endpoint.js

@@ -0,0 +1,137 @@
+// src/endpoint.ts
+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 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);
+}
+async function bufferToTransformedPNG(imageBuffer) {
+  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
+      }
+    });
+  };
+}
+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
+};

package/dist/image.d.ts

@@ -0,0 +1,7 @@
+import { type SatoriOptions } from "satori";
+import type { LocalImageService } from "astro";
+/**
+ * Convert an html string to an image
+ */
+export declare function htmlToPNG(html: string, satoriOptions: SatoriOptions): Promise<ReturnType<LocalImageService["transform"]>>;
+//# sourceMappingURL=image.d.ts.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./integration.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,65 @@
+// src/virtual-user-config.ts
+function resolveVirtualModuleId(id) {
+  return `\0${id}`;
+}
+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];
+    }
+  };
+}
+
+// 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)
+      });
+    }
+  }
+});
+export {
+  integration_default as default
+};

package/dist/integration.d.ts

@@ -0,0 +1,5 @@
+import type { AstroIntegration } from "astro";
+import type { OpengraphImageConfig } from "./types.js";
+declare const _default: (config: OpengraphImageConfig) => AstroIntegration;
+export default _default;
+//# sourceMappingURL=integration.d.ts.map

package/dist/toolbar/components/CopyImageUrlButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function CopyImageUrlButton(): React.JSX.Element;
+//# sourceMappingURL=CopyImageUrlButton.d.ts.map

package/dist/toolbar/components/ExternalLinkicon.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export declare function ExternalLinkicon({ width, height, fill, }: {
+    width?: number;
+    height?: number;
+    fill?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=ExternalLinkicon.d.ts.map

package/dist/toolbar/components/Image.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function Image({ imageSize }: {
+    imageSize: number;
+}): React.JSX.Element;
+//# sourceMappingURL=Image.d.ts.map

package/dist/toolbar/components/ImageSection.d.ts

@@ -0,0 +1,4 @@
+export declare function ImageSection({ isHovered, }: {
+    isHovered: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=ImageSection.d.ts.map

package/dist/toolbar/components/ImageZoomToolbar.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export declare function ImageZoomToolbar({ isHovered, imageSize, setImageSize, }: {
+    isHovered: boolean;
+    imageSize: number;
+    setImageSize: React.Dispatch<React.SetStateAction<number>>;
+}): React.JSX.Element;
+//# sourceMappingURL=ImageZoomToolbar.d.ts.map

package/dist/toolbar/components/LinkOrText.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+type LinkOrTextType = React.JSX.Element | string | null;
+export declare function LinkOrText({ maybeLinkText, }: {
+    maybeLinkText: string | null;
+}): LinkOrTextType;
+export {};
+//# sourceMappingURL=LinkOrText.d.ts.map

package/dist/toolbar/components/MetaTags.d.ts

@@ -0,0 +1,3 @@
+import type React from "react";
+export declare function MetaTags(): React.JSX.Element;
+//# sourceMappingURL=MetaTags.d.ts.map

package/dist/toolbar/components/Summary.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+export declare function Summary({ children }: {
+    children: string;
+}): React.JSX.Element;
+//# sourceMappingURL=Summary.d.ts.map

package/dist/toolbar/components/ToolbarApp.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function ToolbarApp(): React.JSX.Element;
+//# sourceMappingURL=ToolbarApp.d.ts.map

package/dist/toolbar/components/ToolbarAppWindow.d.ts

@@ -0,0 +1,3 @@
+import type React from "react";
+export declare function ToolbarAppWindow(): React.JSX.Element;
+//# sourceMappingURL=ToolbarAppWindow.d.ts.map

package/dist/toolbar/components/ToolbarSection.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+export declare function ToolbarSection({ icon, children, }: {
+    icon: React.ReactNode;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=ToolbarSection.d.ts.map

package/dist/toolbar/components/ZoomButton.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export declare function ZoomButton({ value, imageSize, setImageSize, }: {
+    value: number;
+    imageSize: number;
+    setImageSize: React.Dispatch<React.SetStateAction<number>>;
+}): React.JSX.Element;
+//# sourceMappingURL=ZoomButton.d.ts.map

package/dist/toolbar/components/ZoomLabel.d.ts

@@ -0,0 +1,4 @@
+export declare function ZoomLabel({ imageSize }: {
+    imageSize: number;
+}): string;
+//# sourceMappingURL=ZoomLabel.d.ts.map

package/dist/toolbar/hooks/useHoverState.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function useHoverState<TElement extends HTMLElement>(setHoverState: React.Dispatch<React.SetStateAction<boolean>>): React.RefObject<TElement | null>;
+//# sourceMappingURL=useHoverState.d.ts.map

package/dist/toolbar/hooks/useImageURL.d.ts

@@ -0,0 +1,3 @@
+export declare function useImageURL(): string;
+export declare function useImageURLIfAvailable(): string | null;
+//# sourceMappingURL=useImageURL.d.ts.map

package/dist/toolbar/hooks/useMetaTagInfo.d.ts

@@ -0,0 +1,3 @@
+export type MetaTagInfo = [content: string | null, property: string | null];
+export declare function useMetaTagInfo(): MetaTagInfo[];
+//# sourceMappingURL=useMetaTagInfo.d.ts.map

package/dist/toolbar/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("astro").DevToolbarApp;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/toolbar/index.js

@@ -0,0 +1,472 @@
+// src/toolbar/index.tsx
+import { createRoot } from "react-dom/client";
+import { defineToolbarApp } from "astro/toolbar";
+
+// src/toolbar/styles.tsx
+var styles = (
+  /* css */
+  `
+  :host astro-dev-toolbar-window {
+    max-height: calc(100vh - 80px);
+    overflow-y: auto;
+  }
+
+  button {
+    background: none;
+    color: inherit;
+    border: none;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
+
+  details {
+    margin-block-end: 10px;
+  }
+  details:last-of-type {
+    margin-block-end: 0;
+  }
+
+  details[open] summary, .image {
+    margin-block-end: 7px;
+  }
+
+  .image img {
+    transition: max-width 0.1s;
+  }
+`
+);
+
+// src/toolbar/components/ToolbarApp.tsx
+import { useState as useState4 } from "react";
+
+// src/toolbar/components/Summary.tsx
+import { jsx } from "react/jsx-runtime";
+function Summary({ children }) {
+  return /* @__PURE__ */ jsx(
+    "summary",
+    {
+      style: {
+        cursor: "pointer",
+        fontWeight: 700,
+        color: "white"
+      },
+      children
+    }
+  );
+}
+
+// src/toolbar/components/ExternalLinkicon.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ExternalLinkicon({
+  width = 27,
+  height = 27,
+  fill = "#020202"
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width,
+        height
+      },
+      children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", children: [
+        /* @__PURE__ */ jsx2("path", { d: "M120.09 16.696H60.256V.096L120.09.09z", fill }),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M57.99 48.64l42.573-42.574 13.475 13.475-42.574 42.58z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M119.98.107l.02 59.83-16.59.013-.02-59.846zM3 23.5h17v87H3zm83.49 52.56h17V113h-17z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ jsx2("path", { d: "M3 16.692h40.655v17H3zM3 96h100.49v17H3z", fill })
+      ] })
+    }
+  );
+}
+
+// src/toolbar/components/LinkOrText.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function LinkOrText({
+  maybeLinkText
+}) {
+  let parsedMaybeLink = null;
+  try {
+    if (maybeLinkText != null) {
+      const url = new URL(maybeLinkText);
+      parsedMaybeLink = /* @__PURE__ */ jsxs2("a", { href: url.toString(), target: "_blank", children: [
+        maybeLinkText,
+        " ",
+        /* @__PURE__ */ jsx3(ExternalLinkicon, { width: 10, height: 10, fill: "white" })
+      ] });
+    }
+  } catch (_) {
+    parsedMaybeLink = maybeLinkText;
+  }
+  return parsedMaybeLink;
+}
+
+// src/toolbar/hooks/useMetaTagInfo.tsx
+function useMetaTagInfo() {
+  return Array.from(document.querySelectorAll("meta[property^='og:']")).map(
+    (tag) => [
+      tag.getAttribute("content"),
+      tag.getAttribute("property")
+    ]
+  );
+}
+
+// src/toolbar/components/MetaTags.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function MetaTags() {
+  const tags = useMetaTagInfo();
+  return /* @__PURE__ */ jsx4(
+    "dl",
+    {
+      "data-testid": "astro-opengraph-toolbar",
+      style: {
+        margin: 0,
+        display: "grid",
+        gridTemplateColumns: "max-content 1fr",
+        gap: 7,
+        columnGap: 13
+      },
+      children: tags.map((tag) => /* @__PURE__ */ jsx4(MetaTagContent, { tag }, tag[1]))
+    }
+  );
+}
+function MetaTagContent({ tag }) {
+  const [content, property] = tag;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      "dt",
+      {
+        style: {
+          color: "white",
+          textAlign: "right",
+          fontWeight: 500
+        },
+        children: property
+      }
+    ),
+    /* @__PURE__ */ jsx4("dd", { style: { margin: 0 }, children: /* @__PURE__ */ jsx4(LinkOrText, { maybeLinkText: content }) })
+  ] });
+}
+
+// src/toolbar/hooks/useHoverState.tsx
+import { useRef, useEffect } from "react";
+function useHoverState(setHoverState) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+    ref.current?.addEventListener("mouseenter", () => setHoverState(true), {
+      signal
+    });
+    ref.current?.addEventListener("mouseleave", () => setHoverState(false), {
+      signal
+    });
+    return () => controller.abort();
+  }, [setHoverState]);
+  return ref;
+}
+
+// src/toolbar/hooks/useImageURL.tsx
+import { useState } from "react";
+function useImageURL() {
+  const imageUrl = useImageURLIfAvailable();
+  if (imageUrl == null) {
+    throw new Error(
+      `Shouldn't be rendering this component without an image URL`
+    );
+  }
+  return imageUrl;
+}
+function useImageURLIfAvailable() {
+  const [imageUrlRef] = useState(() => {
+    const meta = document.querySelector('meta[property="og:image"]');
+    return meta?.getAttribute("content") ?? null;
+  });
+  return imageUrlRef;
+}
+
+// src/toolbar/components/Image.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Image({ imageSize }) {
+  const imageUrl = useImageURL();
+  return /* @__PURE__ */ jsx5("div", { className: "image", children: /* @__PURE__ */ jsx5("a", { href: imageUrl, target: "_blank", title: "Open image in new tab", children: /* @__PURE__ */ jsx5(
+    "img",
+    {
+      alt: "Open Graph",
+      src: imageUrl,
+      style: {
+        maxHeight: "100%",
+        maxWidth: `${imageSize}%`
+      }
+    }
+  ) }) });
+}
+
+// src/toolbar/components/ZoomLabel.tsx
+function ZoomLabel({ imageSize }) {
+  const formattedNumber = (imageSize / 100).toLocaleString(void 0, {
+    minimumFractionDigits: 2
+  });
+  return `${formattedNumber}x`;
+}
+
+// src/toolbar/components/ZoomButton.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ZoomButton({
+  value,
+  imageSize,
+  setImageSize
+}) {
+  const isSelected = value === imageSize;
+  return /* @__PURE__ */ jsx6(
+    "astro-dev-toolbar-button",
+    {
+      size: "small",
+      style: { padding: 0, margin: 0 },
+      buttonStyle: isSelected ? "gray" : "ghost",
+      className: "zoom-button",
+      role: "radio",
+      onClick: () => setImageSize(value),
+      children: /* @__PURE__ */ jsx6(ZoomLabel, { imageSize: value })
+    }
+  );
+}
+
+// src/toolbar/components/ToolbarSection.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ToolbarSection({
+  icon,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        fontSize: 12,
+        display: "flex",
+        alignItems: "center",
+        columnGap: 5
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              display: "inline-block",
+              width: 12,
+              height: 12
+            },
+            children: icon
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/toolbar/components/ImageZoomToolbar.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function ImageZoomToolbar({
+  isHovered,
+  imageSize,
+  setImageSize
+}) {
+  return /* @__PURE__ */ jsx8(ToolbarSection, { icon: /* @__PURE__ */ jsx8("astro-dev-toolbar-icon", { icon: "gear" }), children: !isHovered ? /* @__PURE__ */ jsx8(
+    ZoomButton,
+    {
+      value: imageSize,
+      imageSize,
+      setImageSize
+    }
+  ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
+      ZoomButton,
+      {
+        value: 25,
+        imageSize,
+        setImageSize
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      ZoomButton,
+      {
+        value: 50,
+        imageSize,
+        setImageSize
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      ZoomButton,
+      {
+        value: 75,
+        imageSize,
+        setImageSize
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      ZoomButton,
+      {
+        value: 100,
+        imageSize,
+        setImageSize
+      }
+    )
+  ] }) });
+}
+
+// src/toolbar/components/CopyImageUrlButton.tsx
+import React2, {
+  useState as useState2,
+  useRef as useRef2,
+  useEffect as useEffect2
+} from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function CopyImageUrlButton() {
+  const imageUrl = useImageURL();
+  const [wasRecentlyClicked, setWasRecentlyClicked] = useState2(false);
+  const checkTimer = useRef2(null);
+  useEffect2(() => {
+    if (wasRecentlyClicked && checkTimer.current == null) {
+      checkTimer.current = setTimeout(() => {
+        setWasRecentlyClicked(false);
+        checkTimer.current = null;
+      }, 3e3);
+    }
+  }, [wasRecentlyClicked]);
+  const handleClick = React2.useCallback(
+    (evt) => {
+      void navigator.clipboard.writeText(imageUrl);
+      setWasRecentlyClicked(true);
+      evt.stopPropagation();
+      evt.preventDefault();
+    },
+    [imageUrl]
+  );
+  return /* @__PURE__ */ jsx9(ToolbarSection, { icon: /* @__PURE__ */ jsx9("astro-dev-toolbar-icon", { icon: "copy" }), children: /* @__PURE__ */ jsx9("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(
+    "astro-dev-toolbar-button",
+    {
+      size: "small",
+      buttonStyle: "gray",
+      onClick: handleClick,
+      children: wasRecentlyClicked ? "Copied to clipboard" : "Copy image URL"
+    }
+  ) }) });
+}
+
+// src/toolbar/components/ImageSection.tsx
+import { useState as useState3 } from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function ImageSection({
+  isHovered
+}) {
+  const [imageSize, setImageSize] = useState3(100);
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx10(Image, { imageSize }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        "data-testid": "image-section-toolbar",
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          columnGap: 15
+        },
+        children: [
+          /* @__PURE__ */ jsx10(CopyImageUrlButton, {}),
+          /* @__PURE__ */ jsx10(
+            ImageZoomToolbar,
+            {
+              isHovered,
+              imageSize,
+              setImageSize
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/toolbar/components/ToolbarApp.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function ToolbarApp() {
+  const [isImageDetailsHovered, setIsImageDetailsHovered] = useState4(false);
+  const imageDetailsRef = useHoverState(
+    setIsImageDetailsHovered
+  );
+  const imageUrl = useImageURLIfAvailable();
+  if (imageUrl == null) {
+    return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx11(
+        "astro-dev-toolbar-icon",
+        {
+          style: { width: 24, height: 24 },
+          icon: "warning"
+        }
+      ),
+      " ",
+      "No Open Graph image found on this page"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsxs7("details", { open: true, className: "image", ref: imageDetailsRef, children: [
+      /* @__PURE__ */ jsx11(Summary, { children: "Image" }),
+      /* @__PURE__ */ jsx11(ImageSection, { isHovered: isImageDetailsHovered })
+    ] }),
+    /* @__PURE__ */ jsxs7("details", { children: [
+      /* @__PURE__ */ jsx11(Summary, { children: "Meta Tags" }),
+      /* @__PURE__ */ jsx11(MetaTags, {})
+    ] })
+  ] });
+}
+
+// src/toolbar/components/ToolbarAppWindow.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function ToolbarAppWindow() {
+  return /* @__PURE__ */ jsxs8("astro-dev-toolbar-window", { children: [
+    /* @__PURE__ */ jsx12("style", { children: styles }),
+    /* @__PURE__ */ jsx12(ToolbarApp, {})
+  ] });
+}
+
+// src/toolbar/index.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SESSION_KEY_OPEN = "@altano/astro-opengraph/toolbar:is-open";
+var toolbar_default = defineToolbarApp({
+  init(canvas, app) {
+    const root = createRoot(canvas);
+    app.onToggled((event) => {
+      if (event.state) {
+        sessionStorage.setItem(SESSION_KEY_OPEN, "true");
+        root.render(/* @__PURE__ */ jsx13(ToolbarAppWindow, {}));
+      } else {
+        sessionStorage.removeItem(SESSION_KEY_OPEN);
+      }
+    });
+    app.toggleNotification({
+      state: document.querySelector('meta[property="og:image"]') != null,
+      level: "info"
+    });
+    if (sessionStorage.getItem(SESSION_KEY_OPEN) != null) {
+      app.toggleState({ state: true });
+    }
+  }
+});
+export {
+  toolbar_default as default
+};

package/dist/toolbar/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles = "\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";
+//# sourceMappingURL=styles.d.ts.map

package/dist/types.d.ts

@@ -0,0 +1,67 @@
+import type { SatoriOptions } from "satori";
+export type ImageOptions = SatoriOptions;
+export type FontWithBuffer = ImageOptions["fonts"][0];
+export type FontWithPath = Omit<FontWithBuffer, "data"> & {
+    path: string;
+};
+type ImageOptionsBase = {
+    width?: number;
+    height?: number;
+    debug?: boolean;
+};
+type ImageOptionsBaseResolved = {
+    width: number;
+    height: number;
+    debug?: boolean;
+};
+export type ImageOptionsWithFontPaths = ImageOptionsBase & {
+    fonts: FontWithPath[];
+};
+export type ImageOptionsWithFontBuffers = ImageOptionsBase & {
+    fonts: FontWithBuffer[];
+};
+export type ImageOptionsWithFontBuffersResolved = ImageOptionsBaseResolved & {
+    fonts: FontWithBuffer[];
+};
+export type ComponentMetaTagFallbacks = {
+    "og:title"?: string;
+    "og:description"?: string;
+    "og:image"?: string;
+};
+export type MetaTagDefaults = {
+    "og:image": string;
+};
+export type OpengraphImageConfig = {
+    /**
+     * Options to use for the image file that is generated. Most importantly, fonts
+     * must be provided.
+     */
+    getImageOptions(): Promise<ImageOptionsWithFontPaths>;
+    /**
+     * Defaults to use in the component for tags you don't manually set.
+     */
+    componentMetaTagFallbacks?: ComponentMetaTagFallbacks;
+};
+type AstroConfigSetupHookOptions = Parameters<Astro.IntegrationHooks["astro:config:setup"]>[0];
+type Command = AstroConfigSetupHookOptions["command"];
+/**
+ * This must remain JSON-serializable!
+ */
+export type OpengraphImageConfigSerializable = {
+    imageOptions: ImageOptionsWithFontPaths;
+    componentMetaTagFallbacks?: ComponentMetaTagFallbacks;
+    command: Command;
+};
+export type OpengraphImageConfigSerializableMaybeMocked = OpengraphImageConfigSerializable | (() => OpengraphImageConfigSerializable);
+export type OpengraphImageConfigDeserialized = {
+    imageOptions: ImageOptionsWithFontBuffers;
+    componentMetaTagFallbacks?: ComponentMetaTagFallbacks | undefined;
+    command: Command;
+};
+export type OpengraphImageConfigResolved = {
+    imageOptions: ImageOptionsWithFontBuffersResolved;
+    componentMetaTagFallbacks: ComponentMetaTagFallbacks & MetaTagDefaults;
+    command: Command;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/virtual-user-config.d.ts

@@ -0,0 +1,8 @@
+import type { ViteUserConfig } from "astro";
+import type { OpengraphImageConfigSerializable } from "./types.js";
+/**
+ * Vite plugin that exposes OpengraphImage user config and project context via
+ * virtual modules.
+ */
+export declare function vitePluginOpengraphImageUserConfig(config: OpengraphImageConfigSerializable): NonNullable<ViteUserConfig["plugins"]>[number];
+//# sourceMappingURL=virtual-user-config.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/astro-opengraph",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "description": "Open Graph Tools for Astro",
   "keywords": [
     "astro",
@@ -29,6 +29,7 @@
     "./toolbar": "./dist/toolbar/index.js"
   },
   "files": [
+    "assets",
     "components",
     "dist/**/*.js",
     "dist/**/*.d.ts"
@@ -57,11 +58,11 @@
     "typescript": "^5.8.2",
     "vite": "^6.2.5",
     "vitest": "^3.1.1",
+    "@altano/assets": "0.0.0",
     "@altano/testing": "0.0.0",
-    "@altano/tsconfig": "0.0.0",
+    "@altano/vitest-plugins": "1.1.0",
     "@altano/build-config": "0.0.0",
-    "@altano/assets": "0.0.0",
-    "@altano/vitest-plugins": "1.1.0"
+    "@altano/tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "@types/react": ">=18",