feat(cdn): add Autorender image CDN provider

.changeset/autorender-cdn-provider.md

@@ -0,0 +1,6 @@
+---
+'@responsive-image/cdn': minor
+'@responsive-image/ember': minor
+---
+
+Add Autorender image CDN provider

apps/docs/.vitepress/config.ts

@@ -114,6 +114,7 @@ export default defineConfig({
         link: '/',
         base: '/cdn',
         items: [
+          { text: 'Autorender', link: '/autorender' },
           { text: 'Cloudinary', link: '/cloudinary' },
           { text: 'Fastly', link: '/fastly' },
           { text: 'Imgix', link: '/imgix' },

apps/docs/src/cdn/autorender.md

@@ -0,0 +1,157 @@
+---
+outline: [2, 3]
+---
+
+# Autorender
+
+The image processing capabilities of the [Autorender](https://autorender.io) image CDN are supported by a helper function provided to you by this library.
+
+## Setup
+
+Make sure you have the `@responsive-image/cdn` package installed:
+
+::: code-group
+
+```bash [npm]
+npm install @responsive-image/cdn
+```
+
+```bash [yarn]
+yarn add @responsive-image/cdn
+```
+
+```bash [pnpm]
+pnpm add @responsive-image/cdn
+```
+
+:::
+
+You need to specify your Autorender `domain` and `workspace` in your configuration, which you can set up in your application (e.g. `app.js`). The workspace ID is the public routing identifier in your delivery URLs and is not a secret:
+
+```js
+import { setConfig } from '@responsive-image/core';
+
+setConfig('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
+});
+```
+
+## Usage
+
+Use the autorender provider function passing the source path of the image inside your workspace, and pass the return value to the [image component](../usage/component.md):
+
+::: code-group
+
+```gjs [Ember .gjs]
+import { ResponsiveImage } from '@responsive-image/ember';
+import { autorender } from '@responsive-image/cdn';
+
+<template>
+  <ResponsiveImage @src={{autorender 'products/chair.jpg'}} />
+</template>
+```
+
+```hbs [Ember .hbs]
+<ResponsiveImage @src={{responsive-image-autorender 'products/chair.jpg'}} />
+```
+
+```ts [Lit]
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { autorender } from '@responsive-image/cdn';
+import '@responsive-image/wc';
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+  render() {
+    return html`<responsive-image
+      .src=${autorender('products/chair.jpg')}
+    ></responsive-image>`;
+  }
+}
+```
+
+```tsx [React]
+import { ResponsiveImage } from '@responsive-image/react';
+import { autorender } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return <ResponsiveImage src={autorender('products/chair.jpg')} />;
+}
+```
+
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { autorender } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return <ResponsiveImage src={autorender('products/chair.jpg')} />;
+}
+```
+
+```svelte [Svelte]
+<script>
+  import { ResponsiveImage } from '@responsive-image/svelte';
+  import { autorender } from '@responsive-image/cdn';
+</script>
+
+<ResponsiveImage src={autorender('products/chair.jpg')} />
+```
+
+```vue [Vue]
+<script setup>
+import { ResponsiveImage } from '@responsive-image/vue';
+import { autorender } from '@responsive-image/cdn';
+</script>
+
+<template>
+  <ResponsiveImage :src="autorender('products/chair.jpg')" />
+</template>
+```
+
+:::
+
+### Aspect Ratio
+
+For the image component to be able to render `width` and `height` attributes to prevent layout shifts after loading has completed, it needs to know the aspect ratio of the source image. Unlike [local images](../usage/local-images.md) it cannot know this upfront, that's why it is recommended to supply the `aspectRatio` parameter if possible:
+
+```ts [Lit]
+autorender('products/chair.jpg', {
+  aspectRatio: 1.5,
+});
+```
+
+### Quality
+
+Use the `quality` parameter to pass a custom quality setting (`1`–`100`) instead of Autorender's per-format default:
+
+```ts [Lit]
+autorender('products/chair.jpg', {
+  quality: 50,
+});
+```
+
+### Image formats
+
+By default the component lets Autorender select the format from the request `Accept` header.
+
+If you want a `picture` tag with one or more specific formats as `source` tags you can specify them using the `formats` argument. Autorender supports `avif`, `webp`, `jpeg`, and `png`:
+
+```ts [Lit]
+autorender('products/chair.jpg', {
+  formats: ['avif', 'webp'],
+});
+```
+
+### Custom transforms
+
+Besides the resizing and format tokens the library adds implicitly, you can append any additional [Autorender transform tokens](https://www.autorender.io/docs/transformations/introduction) verbatim by passing a `transforms` array:
+
+```ts [Lit]
+autorender('products/chair.jpg', {
+  transforms: ['e_sharpen', 'br_16'],
+});
+```

apps/docs/src/cdn/index.md

@@ -6,6 +6,7 @@ With image CDNs the image processing is offloaded to the Cloud. This allows for
 
 The following image CDNs are supported by the `@responsive-image/cdn` package out of the box:
 
+- [Autorender](./autorender.md)
 - [Cloudinary](./cloudinary.md)
 - [Fastly](./fastly.md)
 - [Imgix](./imgix.md)

apps/ember-vite/app/app.js

@@ -12,6 +12,10 @@ export default class App extends Application {
 }
 
 setConfig('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
   cloudinary: {
     cloudName: 'responsive-image',
   },

apps/ember-vite/app/templates/index.hbs

@@ -20,6 +20,13 @@
   data-test-cloudinary-image
 />
 
+<h2>Autorender</h2>
+
+<ResponsiveImage
+  @src={{responsive-image-autorender "doc1/ar-juice.jpg"}}
+  data-test-autorender-image
+/>
+
 <h2>Fastly</h2>
 
 <ResponsiveImage @src={{responsive-image-fastly "image.webp" aspectRatio=2}} />

apps/ember-webpack/app/app.ts

@@ -12,6 +12,10 @@ export default class App extends Application {
 }
 
 setConfig<Config>('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
   cloudinary: {
     cloudName: 'responsive-image',
   },

apps/ember-webpack/app/templates/index.hbs

@@ -20,6 +20,13 @@
   data-test-cloudinary-image
 />
 
+<h2>Autorender</h2>
+
+<ResponsiveImage
+  @src={{responsive-image-autorender "doc1/ar-juice.jpg"}}
+  data-test-autorender-image
+/>
+
 <h2>Fastly</h2>
 
 <ResponsiveImage @src={{responsive-image-fastly "image.webp" aspectRatio=2}} />

apps/nuxt/app/app.vue

@@ -2,6 +2,7 @@
 import { ResponsiveImage } from '@responsive-image/vue';
 import {
   cloudinary,
+  autorender,
   fastly,
   imgix,
   netlify,
@@ -17,6 +18,10 @@ import imageGray from './images/aurora.jpg?grayscale&responsive';
 import { setConfig } from '@responsive-image/core';
 
 setConfig<Config>('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
   cloudinary: {
     cloudName: 'responsive-image',
   },
@@ -52,6 +57,11 @@ setConfig<Config>('cdn', {
       "
       data-test-cloudinary-image
     />
+    <h2>Autorender</h2>
+    <ResponsiveImage
+      :src="autorender('doc1/ar-juice.jpg')"
+      data-test-autorender-image
+    />
     <h2>Fastly</h2>
     <ResponsiveImage
       :src="fastly('image.webp', { aspectRatio: 2 })"

apps/react-vite/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { cloudinary, imgix, netlify } from '@responsive-image/cdn';
+import { autorender, cloudinary, imgix, netlify } from '@responsive-image/cdn';
 import { setConfig } from '@responsive-image/core';
 import { ResponsiveImage } from '@responsive-image/react';
 
@@ -13,6 +13,10 @@ import imagePortrait from './images/aurora.jpg?aspect=2:3&allowUpscale&responsiv
 import imageGray from './images/aurora.jpg?grayscale&responsive';
 
 setConfig('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
   cloudinary: {
     cloudName: 'responsive-image',
   },
@@ -39,6 +43,11 @@ createRoot(document.getElementById('root')!).render(
         })}
         data-test-cloudinary-image
       />
+      <h2>Autorender</h2>
+      <ResponsiveImage
+        src={autorender('doc1/ar-juice.jpg')}
+        data-test-autorender-image
+      />
       <h2>imgix</h2>
       <ResponsiveImage
         src={imgix('aurora-original.jpg', { aspectRatio: 1.4971927636 })}

apps/solid-start/src/app.tsx

@@ -8,6 +8,10 @@ import { setConfig } from '@responsive-image/core';
 import type { Config } from '@responsive-image/cdn';
 
 setConfig<Config>('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
   cloudinary: {
     cloudName: 'responsive-image',
   },

apps/solid-start/src/routes/index.tsx

@@ -1,4 +1,10 @@
-import { cloudinary, fastly, imgix, netlify } from '@responsive-image/cdn';
+import {
+  autorender,
+  cloudinary,
+  fastly,
+  imgix,
+  netlify,
+} from '@responsive-image/cdn';
 import { ResponsiveImage } from '@responsive-image/solid';
 import image from '../images/aurora.jpg?responsive';
 import imageLqipColor from '../images/aurora.jpg?lqip=color&responsive';
@@ -23,6 +29,11 @@ export default function Home() {
         })}
         data-test-cloudinary-image
       />
+      <h2>Autorender</h2>
+      <ResponsiveImage
+        src={autorender('doc1/ar-juice.jpg')}
+        data-test-autorender-image
+      />
       <h2>Fastly</h2>
       <ResponsiveImage
         src={fastly('image.webp', {

apps/svelte-kit/src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { ResponsiveImage } from '@responsive-image/svelte';
   import {
     cloudinary,
+    autorender,
     fastly,
     imgix,
     netlify,
@@ -17,6 +18,10 @@
   import { setConfig } from '@responsive-image/core';
 
   setConfig<Config>('cdn', {
+    autorender: {
+      domain: 'assets.autorender.io',
+      workspace: 'LOKVTtKVGb',
+    },
     cloudinary: {
       cloudName: 'responsive-image',
     },
@@ -46,6 +51,11 @@
   })}
   data-test-cloudinary-image
 />
+<h2>Autorender</h2>
+<ResponsiveImage
+  src={autorender('doc1/ar-juice.jpg')}
+  data-test-autorender-image
+/>
 <h2>Fastly</h2>
 <ResponsiveImage
   src={fastly('image.webp', { aspectRatio: 2 })}

apps/wc-lit/src/app.ts

@@ -1,6 +1,12 @@
 import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { cloudinary, fastly, imgix, netlify } from '@responsive-image/cdn';
+import {
+  autorender,
+  cloudinary,
+  fastly,
+  imgix,
+  netlify,
+} from '@responsive-image/cdn';
 import { setConfig } from '@responsive-image/core';
 import '@responsive-image/wc';
 import image from './images/aurora.jpg?responsive';
@@ -14,6 +20,10 @@ import imageGray from './images/aurora.jpg?grayscale&responsive';
 import type { Config } from '@responsive-image/cdn';
 
 setConfig<Config>('cdn', {
+  autorender: {
+    domain: 'assets.autorender.io',
+    workspace: 'LOKVTtKVGb',
+  },
   cloudinary: {
     cloudName: 'responsive-image',
   },
@@ -48,6 +58,13 @@ export class MyApp extends LitElement {
         data-test-cloudinary-image
       ></responsive-image>
 
+      <h2>Autorender</h2>
+
+      <responsive-image
+        .src=${autorender('doc1/ar-juice.jpg')}
+        data-test-autorender-image
+      ></responsive-image>
+
       <h2>Fastly</h2>
 
       <responsive-image