feat(astro): add Astro support (#16)

Co-authored-by: Leander Gilles <Leander@neugelb.com>
Co-authored-by: Matt Kane <m@mk.gg>

README.md

@@ -2,7 +2,7 @@
 
 A cross-framework component for responsive, high-performance images using image CDNs.
 
-[`@unpic/react`](https://github.com/ascorbic/unpic-img/tree/main/packages/react) • [`@unpic/vue`](https://github.com/ascorbic/unpic-img/tree/main/packages/vue) • [`@unpic/solid`](https://github.com/ascorbic/unpic-img/tree/main/packages/solid) • [`@unpic/svelte`](https://github.com/ascorbic/unpic-img/tree/main/packages/svelte)
+[`@unpic/react`](https://github.com/ascorbic/unpic-img/tree/main/packages/react) • [`@unpic/vue`](https://github.com/ascorbic/unpic-img/tree/main/packages/vue) • [`@unpic/solid`](https://github.com/ascorbic/unpic-img/tree/main/packages/solid) • [`@unpic/svelte`](https://github.com/ascorbic/unpic-img/tree/main/packages/svelte) • [`@unpic/astro`](https://github.com/ascorbic/unpic-img/tree/main/packages/astro)
 
 ## Features
 
@@ -27,6 +27,7 @@ For details of usage, see the individual framework packages:
 - [`@unpic/vue`](https://github.com/ascorbic/unpic-img/tree/main/packages/vue)
 - [`@unpic/solid`](https://github.com/ascorbic/unpic-img/tree/main/packages/solid)
 - [`@unpic/svelte`](https://github.com/ascorbic/unpic-img/tree/main/packages/svelte)
+- [`@unpic/astro`](https://github.com/ascorbic/unpic-img/tree/main/packages/astro)
 
 ## FAQ
 

examples/astro/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/astro/README.md

@@ -0,0 +1,46 @@
+# Astro Starter Kit: Minimal
+
+```
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `npm install`          | Installs dependencies                            |
+| `npm run dev`          | Starts local dev server at `localhost:3000`      |
+| `npm run build`        | Build your production site to `./dist/`          |
+| `npm run preview`      | Preview your build locally, before deploying     |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

examples/astro/astro.config.mjs

@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});

examples/astro/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "astro-demo",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@unpic/astro": "workspace:^",
+    "astro": "^2.0.0"
+  }
+}

examples/astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

examples/astro/src/pages/index.astro

@@ -0,0 +1,39 @@
+---
+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>
+			<Image
+			  src="https://images.unsplash.com/photo-1674255909399-9bcb2cab6489?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=996&q=80"
+			  layout="fullWidth"
+			  alt=""
+			  priority
+			  height={400}
+			  background="auto"
+			/>
+			<Image
+			  src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
+			  layout="constrained"
+			  width={800}
+			  height={600}
+			  alt="Shopify"
+			/>
+			<Image
+			  src="https://bunnyoptimizerdemo.b-cdn.net/bunny7.jpg?width=300"
+			  width={400}
+			  height={300}
+			  layout="fixed"
+			  alt="Bunny.net"
+			/>
+		  </div>
+	</body>
+</html>

examples/astro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}

packages/astro/README.md

@@ -0,0 +1,38 @@
+# `@unpic/astro` 🖼 📐
+
+Astro component for responsive, high-performance images.
+
+## Features
+
+- Just an `<img>` tag! No extra elements, no runtime JavaScript. Easy to style.
+- Automatically generates correct srcset and sizes attributes for responsive images
+- Handles responsive resizing of images, preserving aspect ratio
+- Uses native lazy loading and aync decoding for offscreen images
+- Handles different image layouts: fixed, constrained and full width
+- Uses eager loading and high priority fetching for important images
+- Delivers modern image formats, including WebP and AVIF if supported by your browser
+- No built step or server-side rendering required: uses your existing image CDN or CMS, with no additional configuration
+- Uses [unpic](https://github.com/ascorbic/unpic) to support most image CDNs, including Cloudinary, Imgix, and Shopify
+- Can generate a low-res background image for a blurred placeholder effect
+
+## Installation and usage
+
+```bash
+npm install @unpic/astro
+```
+
+```astro
+---
+import { Image } from "@unpic/astro"
+---
+
+<Image
+    src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
+    layout="constrained"
+    width={800}
+    height={600}
+    alt="A lovely bath"
+/>
+```
+
+For the supported props, see [the main README](https://github.com/ascorbic/unpic-img/#props).

packages/astro/index.ts

@@ -0,0 +1,4 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+export { default as Image } from "./src/Image.astro";

packages/astro/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@unpic/astro",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro"
+  ],
+  "devDependencies": {
+    "astro": "^2.0.0"
+  },
+  "dependencies": {
+    "@unpic/core": "workspace:^"
+  },
+  "peerDependencies": {
+    "astro": "^2.0.0"
+  }
+}

packages/astro/src/Image.astro

@@ -0,0 +1,11 @@
+---
+import { transformProps, UnpicImageProps } from "@unpic/core";
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = UnpicImageProps<HTMLAttributes<'img'>> 
+
+const props: Props = Astro.props;
+---
+
+<img {...transformProps(props as any)} />

packages/astro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}

release-please-config.json

@@ -4,7 +4,10 @@
     "packages/react": {},
     "packages/solid": {},
     "packages/vue": {},
-    "packages/svelte": {}
+    "packages/svelte": {},
+    "packages/astro": {
+      "release-as": "0.0.1"
+    }
   },
   "plugins": ["node-workspace"],
   "bump-minor-pre-major": true,