chore: fix og images (#766)

Author: ascorbic

docs/astro.config.mjs

@@ -6,13 +6,17 @@ import sitemap from "@astrojs/sitemap";
 import { imageService } from "@unpic/astro/service";
 import icon from "astro-icon";
 
+import netlify from "@astrojs/netlify";
+
 // https://astro.build/config
 export default defineConfig({
   image: {
     service: imageService({
       placeholder: "blurhash",
     }),
+    domains: ["images.unsplash.com"],
   },
+
   integrations: [
     // Enable Preact to support Preact JSX components.
     preact({
@@ -33,10 +37,13 @@ export default defineConfig({
     sitemap(),
     icon(),
   ],
+
   markdown: {
     shikiConfig: {
       theme: "one-dark-pro",
     },
   },
+
   site: `https://unpic.pics`,
+  adapter: netlify(),
 });

docs/netlify.toml

@@ -1,4 +1,4 @@
 [images]
-remote_images = "https://images.unsplash.com/.*"
+remote_images = "https://images.unsplash.com/*"
 [dev]
 command = "pnpm --filter docs dev"

docs/package.json

@@ -15,6 +15,7 @@
     "@algolia/client-search": "^5.19.0",
     "@astrojs/markdown-remark": "^6.0.2",
     "@astrojs/mdx": "^4.0.6",
+    "@astrojs/netlify": "^6.1.0",
     "@astrojs/preact": "^4.0.2",
     "@astrojs/react": "^4.1.5",
     "@astrojs/rss": "^4.0.11",
@@ -31,7 +32,7 @@
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "@unpic/astro": "workspace:^",
+    "@unpic/astro": "^",
     "@unpic/placeholder": "^0.1.2",
     "@unpic/react": "workspace:^",
     "astro": "^5.1.7",

docs/src/components/BlogSEO.astro

@@ -3,24 +3,27 @@ import type { CollectionEntry } from "astro:content";
 import { SITE, OPEN_GRAPH } from "../consts";
 
 import { getImage } from "astro:assets";
+import { transformUrl } from "unpic";
 
 type Props = { canonicalUrl: URL } & CollectionEntry<"blog">["data"];
 
 const { image, title, description, canonicalUrl } = Astro.props;
 const formattedContentTitle = `${title ?? ""} – ${SITE.title}`;
 
-const img = await getImage({
-  src: image ?? "",
-  width: 1200,
-  height: 630,
-});
+const img = image
+  ? transformUrl({
+      url: image,
+      width: 1200,
+      height: 630,
+      fallback: "astro",
+    })
+  : null;
 
 const og = new URL("/og-blog.png", Astro.site);
 og.searchParams.set("title", title ?? "");
-og.searchParams.set("img", img.src ?? "");
+og.searchParams.set("img", img ?? "");
 
 const imageSrc = og.toString();
-const canonicalImageSrc = new URL(imageSrc, Astro.site).toString();
 const imageAlt = description ?? OPEN_GRAPH.image.alt;
 ---
 
@@ -32,7 +35,10 @@ const imageAlt = description ?? OPEN_GRAPH.image.alt;
 <meta property="og:type" content="article" />
 <meta property="og:url" content={canonicalUrl} />
 <meta property="og:locale" content={SITE.defaultLanguage} />
-<meta property="og:image" content={img.src} />
+<meta
+  property="og:image"
+  content={img ? new URL(img, Astro.site).href : imageSrc}
+/>
 <meta property="og:image:alt" content={imageAlt} />
 <meta
   name="description"
@@ -46,7 +52,7 @@ const imageAlt = description ?? OPEN_GRAPH.image.alt;
 <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
 <meta name="twitter:title" content={formattedContentTitle} />
 <meta name="twitter:description" content={description ?? SITE.description} />
-<meta name="twitter:image" content={canonicalImageSrc} />
+<meta name="twitter:image" content={imageSrc} />
 <meta name="twitter:image:alt" content={imageAlt} />
 
 <!--

packages/solid/package.json

@@ -140,4 +140,4 @@
     "./dist/index/server.js": "./dist/index/index.js",
     "./dist/base/server.js": "./dist/base/index.js"
   }
-}
+}