feat: vercel image optimization (#14)

* import process

* vercel image opt support

* test avif format

* change quality

* 100

* wider

* add changeset

* document

.changeset/sweet-rivers-sip.md

@@ -0,0 +1,6 @@
+---
+"domco": patch
+"create-domco": patch
+---
+
+Adds image optimization support for vercel adapter

README.md

@@ -7,3 +7,9 @@ npm create domco@latest
 ```
 
 [Read the document to get started](https://domco.robino.dev)
+
+| Key | Type    | Required | Example          | Description                                                                                                                             |
+| --- | ------- | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| url | String  | Yes      | `/assets/me.png` | The URL of the source image that should be optimized. Absolute URLs must match a pattern defined in the `remotePatterns` configuration. |
+| w   | Integer | Yes      | `200`            | The width (in pixels) that the source image should be resized to. Must match a value defined in the sizes configuration.                |
+| q   | Integer | Yes      | `75`             | The quality that the source image should be reduced to. Must be between 1 (lowest quality) to 100 (highest quality).                    |

apps/cloudflare/package.json

@@ -11,7 +11,6 @@
 		"preview:wrangler": "wrangler pages dev .cloudflare"
 	},
 	"devDependencies": {
-		"domco": "*",
-		"wrangler": "^3.74.0"
+		"domco": "*"
 	}
 }

apps/docs/src/content/deploy.md

@@ -66,7 +66,7 @@ export default defineConfig({
 
 The [Cloudflare](https://cloudflare.com) adapter outputs your app to work on Cloudflare Pages.
 
-![A screenshot of the Cloudflare Build Settings UI. Set the Framework Preset field to "None", set the build command to "npm run build", and the build output directory to ".cloudflare".](/cloudflare/build-settings.webp)
+![A screenshot of the Cloudflare Build Settings UI. Set the Framework Preset field to "None", set the build command to "npm run build", and the build output directory to ".cloudflare".](/_vercel/image?url=/images/cloudflare/build-settings.png&w=1280&q=100)
 
 - Functions run on the [Workers Runtime](https://developers.cloudflare.com/workers/runtime-apis/).
 - Outputs public assets to be served on Cloudflare's CDN.
@@ -75,7 +75,8 @@ The [Cloudflare](https://cloudflare.com) adapter outputs your app to work on Clo
 
 The [Vercel](https://vercel.com) adapter outputs your app to the [Build Output API](https://vercel.com/docs/build-output-api/v3) specification.
 
-![A screenshot of the Vercel Build and Development Settings UI. Set the Framework Preset field to "Other" and leave all of the other options blank.](/vercel/build-settings.webp)
+![A screenshot of the Vercel Build and Development Settings UI. Set the Framework Preset field to "Other" and leave all of the other options blank.](/_vercel/image?url=/images/vercel/build-settings.png&w=1280&q=100)
 
-- Supports [Node.js](https://vercel.com/docs/functions/runtimes#node.js), [Node.js with ISR](https://vercel.com/docs/incremental-static-regeneration), and [Edge Runtime](https://vercel.com/docs/functions/runtimes/edge-runtime).
+- Functions run on [Node.js](https://vercel.com/docs/functions/runtimes#node.js), [Node.js with ISR](https://vercel.com/docs/incremental-static-regeneration), or [Edge Runtime](https://vercel.com/docs/functions/runtimes/edge-runtime).
 - Outputs public assets to be served on Vercel's [Edge Network](https://vercel.com/docs/edge-network/overview).
+- Supports on demand [Image Optimization](https://vercel.com/docs/image-optimization) when configured in the adapter config. Set the `src` attribute of an image using the `/_vercel/image/...` [optimized URL format](https://vercel.com/docs/image-optimization#optimized-url-format). In `dev` and `preview` modes, domco will redirect to the original image.

apps/docs/vite.config.ts

@@ -11,6 +11,11 @@ export default defineConfig({
 				config: {
 					runtime: "edge",
 				},
+				images: {
+					domains: [],
+					sizes: [1280],
+					formats: ["image/avif"],
+				},
 			}),
 		}),
 	],