ascorbic · kodiakhq · Jan 27, 2024 · Jan 27, 2024 · Jan 27, 2024 · Jan 27, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -22,6 +22,12 @@ module.exports = {
       "error",
       { ignoreRestSiblings: true },
     ],
+    "prefer-const": [
+      "error",
+      {
+        destructuring: "all",
+      },
+    ],
   },
   overrides: [
     {

diff --git a/examples/astro/astro.config.mjs b/examples/astro/astro.config.mjs
@@ -2,6 +2,8 @@ import { defineConfig } from "astro/config";
 import { imageService } from "@unpic/astro/service";
 export default defineConfig({
   image: {
-    service: imageService(),
+    service: imageService({
+      placeholder: "blurhash",
+    }),
   },
 });
diff --git a/examples/astro/src/pages/index.astro b/examples/astro/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import { Image } from "@unpic/astro";
+import lighthouse from "../formentor.jpg";
 ---
 
 <html lang="en">
@@ -18,21 +19,31 @@ import { Image } from "@unpic/astro";
         alt=""
         priority
         height={400}
-        background="auto"
+        background="blurhash"
       />
       <Image
         src="https://cdn.shopify.com/static/sample-images/garnished.jpeg"
         layout="constrained"
         width={800}
         height={600}
         alt="Shopify"
+        background="lqip"
+      />
+      <Image
+        src={lighthouse}
+        layout="constrained"
+        width={800}
+        height={600}
+        alt="Lighthouse"
+        background="#953c3c;"
       />
       <Image
         src="https://bunnyoptimizerdemo.b-cdn.net/bunny7.jpg?width=300"
         width={400}
         height={300}
         layout="fixed"
         alt="Bunny.net"
+        background="dominantColor"
       />
     </div>
   </body>

diff --git a/examples/astro/src/pages/placeholders.astro b/examples/astro/src/pages/placeholders.astro
@@ -0,0 +1,113 @@
+---
+import { Image } from "@unpic/astro";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Astro</title>
+  </head>
+  <body>
+    <div>
+      <figure>
+        <figcaption>background="dominantColor"</figcaption>
+        <Image
+          src="https://images.unsplash.com/photo-1617718295766-0f839c2853e7"
+          alt="dominantColor"
+          layout="fixed"
+          width={400}
+          height={300}
+          background="dominantColor"
+        />
+      </figure>
+      <figure>
+        <figcaption>background="blurhash"</figcaption>
+        <Image
+          src="https://images.unsplash.com/photo-1617718295766-0f839c2853e7"
+          alt="blurhash"
+          layout="fixed"
+          width={400}
+          height={300}
+          background="blurhash"
+        />
+      </figure>
+      <figure>
+        <figcaption>background="lqip"</figcaption>
+        <Image
+          src="https://images.unsplash.com/photo-1617718295766-0f839c2853e7"
+          alt="lqip"
+          layout="fixed"
+          width={400}
+          height={300}
+          background="lqip"
+        />
+      </figure>
+    </div>
+  </body>
+  <div>
+    <figure>
+      <figcaption>background="dominantColor"</figcaption>
+      <Image
+        src="https://cdn.shopify.com/static/sample-images/garnished.jpeg"
+        alt="dominantColor"
+        layout="fixed"
+        width={400}
+        height={300}
+        background="dominantColor"
+      />
+    </figure>
+    <figure>
+      <figcaption>background="blurhash"</figcaption>
+
+      <Image
+        src="https://cdn.shopify.com/static/sample-images/garnished.jpeg"
+        alt="blurhash"
+        layout="fixed"
+        width={400}
+        height={300}
+        background="blurhash"
+      />
+    </figure>
+    <figure>
+      <figcaption>background="lqip"</figcaption>
+      <Image
+        src="https://cdn.shopify.com/static/sample-images/garnished.jpeg"
+        alt="lqip"
+        layout="fixed"
+        width={400}
+        height={300}
+        background="lqip"
+      />
+    </figure>
+  </div>
+
+  <script>
+    document.querySelectorAll("img").forEach((img) => {
+      img.addEventListener("mouseover", () => {
+        img.setAttribute("data-src", img.src);
+        img.setAttribute("data-srcset", img.srcset);
+        img.src =
+          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3C/svg%3E";
+        img.removeAttribute("srcset");
+      });
+      img.addEventListener("mouseout", () => {
+        img.src = img.getAttribute("data-src")!;
+        img.srcset = img.getAttribute("data-srcset")!;
+      });
+    });
+  </script>
+  <style>
+    figure {
+      display: inline-block;
+      margin: 0;
+    }
+    figcaption {
+      font-family: "Courier New", Courier, monospace;
+      padding: 5px;
+      text-align: center;
+    }
+  </style>
+</html>
diff --git a/examples/astro/src/pages/service.md → examples/astro/src/pages/service-md.md b/examples/astro/src/pages/service.md → examples/astro/src/pages/service-md.md
@@ -2,4 +2,4 @@
 
 ![Food](https://cdn.shopify.com/static/sample-images/garnished.jpeg)
 
-![Lighthouse](../formentor.jpg#w=100)
+![Lighthouse](../formentor.jpg)
diff --git a/...s/astro/src/pages/service-component.astro → examples/astro/src/pages/service.astro b/...s/astro/src/pages/service-component.astro → examples/astro/src/pages/service.astro
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -27,7 +27,10 @@
     "astro": "^4.0.0"
   },
   "dependencies": {
-    "@unpic/core": "workspace:^"
+    "@unpic/core": "workspace:^",
+    "@unpic/pixels": "^1.2.1",
+    "@unpic/placeholder": "^0.1.2",
+    "blurhash": "^2.0.5"
   },
   "peerDependencies": {
     "astro": "^2.0.0 || ^3.0.0 || ^4.0.0"

diff --git a/packages/astro/src/Image.astro b/packages/astro/src/Image.astro
@@ -1,11 +1,51 @@
 ---
-import { transformProps, type UnpicImageProps } from "@unpic/core";
+import {
+  inferImageDimensions,
+  transformProps,
+  type UnpicImageProps,
+} from "@unpic/core";
+import type { ImageMetadata } from "astro";
 
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from "astro/types";
+import { getBackground } from "./background";
+import { imageConfig } from "astro:assets";
+import type { UnpicConfig } from "./service";
+import { getDefaultImageCdn } from "./utils";
 
-type Props = UnpicImageProps<HTMLAttributes<'img'>> 
+export interface UnpicProps
+  extends Omit<UnpicImageProps<HTMLAttributes<"img">>, "src"> {
+  placeholder?: "none" | "blurhash" | "dominantColor" | "lqip" | ({} & string);
+  src: string | ImageMetadata;
+}
 
-const props: Props = Astro.props;
+type Props = UnpicProps;
+
+const { placeholder, ...props }: Props = Astro.props;
+
+let imgProps: UnpicImageProps<HTMLAttributes<"img">>;
+
+if (typeof props.src === "object") {
+  imgProps = {
+    ...props,
+    src: props.src.src,
+    ...inferImageDimensions(props, props.src),
+  } as UnpicImageProps<HTMLAttributes<"img">>;
+} else {
+  imgProps = {
+    ...props,
+  } as UnpicImageProps<HTMLAttributes<"img">>;
+}
+
+const config: UnpicConfig = imageConfig.service?.config;
+
+imgProps.layout ||= config?.layout;
+imgProps.background ||= placeholder ?? config?.placeholder;
+
+if (!imgProps.cdn) {
+  imgProps.cdn = getDefaultImageCdn(config);
+}
+
+imgProps.background = await getBackground(imgProps);
 ---
 
-<img {...transformProps(props)} />
+<img {...transformProps(imgProps)} />
diff --git a/packages/astro/src/Source.astro b/packages/astro/src/Source.astro
@@ -1,9 +1,40 @@
 ---
-import { transformSourceProps, type UnpicSourceProps } from "@unpic/core";
+import {
+  inferImageDimensions,
+  transformSourceProps,
+  type UnpicSourceProps as UnpicBaseSourceProps,
+} from "@unpic/core";
+import { imageConfig } from "astro:assets";
+import type { UnpicConfig } from "./service";
+import { getDefaultImageCdn } from "./utils";
+
+export interface UnpicSourceProps extends Omit<UnpicBaseSourceProps, "src"> {
+  src: string | ImageMetadata;
+}
 
 type Props = UnpicSourceProps;
 
-const props: Props = Astro.props;
+const props = Astro.props as Props;
+
+let sourceProps: UnpicBaseSourceProps;
+
+if (typeof props.src === "object") {
+  sourceProps = {
+    ...props,
+    src: props.src.src,
+    ...inferImageDimensions(props, props.src),
+  } as UnpicBaseSourceProps;
+} else {
+  sourceProps = props as UnpicBaseSourceProps;
+}
+
+const config: UnpicConfig = imageConfig.service?.config;
+
+sourceProps.layout ||= config?.layout;
+
+if (!sourceProps.cdn) {
+  sourceProps.cdn = getDefaultImageCdn(config);
+}
 ---
 
-<source {...transformSourceProps(props)} />
+<source {...transformSourceProps(sourceProps)} />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		![Food](https://cdn.shopify.com/static/sample-images/garnished.jpeg)

		![Lighthouse](../formentor.jpg#w=100)
		![Lighthouse](../formentor.jpg)