https://github.com/mattstein/astro-imgproxy

Astro imgproxy plugin.
https://github.com/mattstein/astro-imgproxy

Last synced: about 2 months ago
JSON representation

Astro imgproxy plugin.

• Host: GitHub
• URL: https://github.com/mattstein/astro-imgproxy
• Owner: mattstein
• Created: 2023-07-24T16:43:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-24T19:17:02.000Z (over 1 year ago)
• Last Synced: 2024-10-19T03:04:52.199Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 39.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Astro imgproxy Plugin

A plugin for adding [imgproxy](https://github.com/imgproxy/imgproxy) support to an Astro project in two parts:

1. Remark plugin for transforming Markdown image URLs.

2. Utilities for prepping imgproxy URLs in other contexts like Astro components.

## Setup

**`.env`**:

```shell

IMGPROXY_KEY="my-key"

IMGPROXY_SALT="my-salt"

IMGPROXY_BASE_URL="https://my-improxy-instance.foo"

```

**`astro.config.mjs`**:

```js

import imgproxy from "astro-imgproxy/remark";

export default defineConfig({

  // ...

  markdown: {

    // ...

    remarkPlugins: [imgproxy],

    // ...

  },

});

```

## Usage

By default, the remark plugin doesn’t change anything.

To use it, you’ll need to add `?imgproxy` params to any absolute image URLs you’d like to transform.

The URL param’s argument should be a comma-separated list of imgproxy [processing options](https://docs.imgproxy.net/generating_the_url?id=processing-options).

Check out the tests for example input and output.

## Examples

### Markdown

Markdown image format:

```md

![](https://my-images.foo/original.png?imgproxy=s:2400)

```

Since you can use HTML in Markdown, the plugin should also grab valid `src` and `srcset` references, too:

```html

  

  

  

```

### Elsewhere

If you need to transform a URL in an Astro component or some other place on your site, you can use `isImgproxyUrl` to test whether a given image URL looks like it should be transformed for imgproxy, and `transformUrl` to transform it.

```js

import { isImgproxyUrl, transformUrl } from "astro-imgproxy";

// ...

if (isImgproxyUrl(myUrl)) {

  const transformed = transformUrl(myUrl);

}

```