[Images] Added tutorials and examples (#21345)

* Added tutorials and examples

* Apply suggestions from code review

Co-authored-by: Nicholas Skehin <[email protected]>

* Using WranglerConfig component

---------

Co-authored-by: Jun Lee <[email protected]>
Co-authored-by: Nicholas Skehin <[email protected]>

Author: 3 people

src/content/docs/images/examples/index.mdx

@@ -0,0 +1,12 @@
+---
+type: overview
+hideChildren: true
+pcx_content_type: navigation
+title: Examples
+sidebar:
+  order: 11
+---
+
+import { ListExamples } from "~/components";
+
+<ListExamples directory="images/examples/" />

src/content/docs/images/examples/transcode-from-workers-ai.mdx

@@ -0,0 +1,29 @@
+---
+type: example
+summary: Transcode an image from Workers AI before uploading to R2
+pcx_content_type: example
+title: Transcode images
+sidebar:
+  order: 5
+description: Transcode an image from Workers AI before uploading to R2
+---
+
+```js
+const stream = await env.AI.run(
+  "@cf/bytedance/stable-diffusion-xl-lightning",
+  {
+    prompt: YOUR_PROMPT_HERE
+  }
+);
+
+// Convert to AVIF
+const image = (
+  await env.IMAGES.input(stream)
+    .output({format: "image/avif"})
+).response();
+
+const fileName = "image.avif";
+
+// Upload to R2
+await env.R2.put(fileName, image.body);
+```

src/content/docs/images/examples/watermark-from-kv.mdx

@@ -0,0 +1,48 @@
+---
+type: example
+summary: Draw a watermark from KV on an image from R2
+pcx_content_type: example
+title: Watermarks
+sidebar:
+  order: 5
+description: Draw a watermark from KV on an image from R2
+---
+
+```ts
+interface Env {
+    BUCKET: R2Bucket,
+    NAMESPACE: KVNamespace,
+    IMAGES: ImagesBinding,
+}
+export default {
+    async fetch(request, env, ctx): Promise<Response> {
+        const watermarkKey = "my-watermark";
+        const sourceKey = "my-source-image";
+
+        const cache = await caches.open("transformed-images");
+        const cacheKey = new URL(sourceKey + "/" + watermarkKey, request.url);
+        const cacheResponse = await cache.match(cacheKey);
+
+        if (cacheResponse) {
+            return cacheResponse;
+        }
+
+        let watermark = await env.NAMESPACE.get(watermarkKey, "stream");
+        let source = await env.BUCKET.get(sourceKey);
+
+        if (!watermark || !source) {
+            return new Response("Not found", { status: 404 });
+        }
+
+        const result = await env.IMAGES.input(source.body)
+            .draw(watermark)
+            .output({ format: "image/jpeg" });
+
+        const response = result.response();
+
+        ctx.waitUntil(cache.put(cacheKey, response.clone()));
+
+        return result.response();
+  },
+} satisfies ExportedHandler<Env>;
+```

src/content/docs/images/tutorials/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Tutorials
+pcx_content_type: navigation
+sidebar:
+  order: 10
+  group:
+    hideIndex: true
+---
+
+import { DirectoryListing } from "~/components";
+
+<DirectoryListing />