forked from nuxt/image
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add
prepr cms image provider integration (nuxt#823)
- Loading branch information
1 parent
8782712
commit 6b8ab9c
Showing
14 changed files
with
270 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| # Prepr | ||
|
|
||
| Nuxt Image integration with Prepr CMS | ||
|
|
||
| Integration between [Prepr](https://prepr.io/) and Nuxt Image. | ||
|
|
||
| To use this provider you just need to specify the `projectName` of your project in Prepr. | ||
|
|
||
| ```ts [nuxt.config.ts] | ||
| export default defineNuxtConfig({ | ||
| image: { | ||
| prepr: { | ||
| // E.g.: https://YourProjectName.prepr.io/ | ||
| projectName: 'YourProjectName', | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ## Modifiers | ||
|
|
||
| The Prepr provider supports a number of additional modifiers. For a full list, | ||
| check out [the Prepr documentation](https://docs.prepr.io/reference/rest/v1/assets-resizing/). | ||
| All current transformations currently mentioned in Prepr docs are supported. | ||
|
|
||
| For the time being you might find the following links useful: | ||
|
|
||
| - [Assets Resizing via REST API](https://docs.prepr.io/reference/rest/v1/assets-resizing/) | ||
| - [Understanding your marketing and design team workflows](https://docs.prepr.io/managing-content/images) | ||
|
|
||
| ::alert{type="info"} | ||
| prepr.io does not provide a way to restrict what domains can | ||
| request assets to your project's CDN, nor limit the maximum size in `pixels` or | ||
| `bytes` of images that are served from the CDN. | ||
| :: | ||
|
|
||
| ### Convenience key modifiers | ||
|
|
||
| The following more readable modifiers are supported, in addition to Prepr's | ||
| native modifiers: | ||
|
|
||
| - `crop` is equivalent to `c` | ||
| - `format` is equivalent to `format` | ||
| - `height` is equivalent to `h` | ||
| - `quality` is equivalent to `q` | ||
| - `width` is equivalent to `w` | ||
|
|
||
| ### `fit` | ||
|
|
||
| In addition to the values specified in the Prepr docs, which are respected, the | ||
| following options from the [default fit behavior](/components/nuxt-img#fit) | ||
| are supported: | ||
|
|
||
| - `cover` - this will behave like the Prepr modifier `crop`, when passed without | ||
| a value (defaults to `centre`) | ||
|
|
||
| ::alert{type="warning"} | ||
| For the time being, other `fit` options are not supported by this provider. | ||
| :: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,6 +26,7 @@ const BuiltInProviders = [ | |
| 'ipx', | ||
| 'layer0', | ||
| 'netlify', | ||
| 'prepr', | ||
| 'none', | ||
| 'prismic', | ||
| 'sanity', | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export function formatter (key: string, value: string) { | ||
| return String(value) === 'true' ? key : `${key}_${value}` | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { joinURL } from 'ufo' | ||
|
|
||
| import type { ImageOptions, ResolvedImage, ImageCTX } from '../../../types' | ||
|
|
||
| import { formatter } from './formatter' | ||
| import { keyMap } from './keyMap' | ||
| import { valueMap } from './valueMap' | ||
|
|
||
| import { createOperationsGenerator } from '#image' | ||
|
|
||
| interface PreprImageOptions extends ImageOptions { | ||
| projectName: string | ||
| } | ||
|
|
||
| type PreprProviderGetImage = (src: string, options: PreprImageOptions, ctx: ImageCTX) => ResolvedImage | ||
|
|
||
| const operationsGenerator = createOperationsGenerator({ | ||
| formatter, | ||
| joinWith: ',', | ||
| keyMap, | ||
| valueMap | ||
| }) | ||
|
|
||
| const getImage: PreprProviderGetImage = (src, options, _ctx) => { | ||
| const { projectName } = options | ||
|
|
||
| if (typeof projectName !== 'string' || !projectName.trim()) { | ||
| throw new TypeError('[nuxt] [image] [prepr] No project name provided.') | ||
| } | ||
|
|
||
| const fileBucket = 'stream' | ||
| const fileOperations = operationsGenerator(options.modifiers) | ||
| const filePath = fileOperations ? joinURL(fileOperations, src) : src | ||
|
|
||
| const projectUrl = `https://${projectName.trim()}.${fileBucket}.prepr.io` | ||
|
|
||
| return { | ||
| url: joinURL(projectUrl, filePath) | ||
| } | ||
| } | ||
|
|
||
| export { getImage } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './getImage' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /** | ||
| * Key map is responsible for mapping readable "properties", which can be passed | ||
| * as modifiers of `NuxtImg` component, to URL path parameters that can be | ||
| * interpreted Prepr's REST API. | ||
| */ | ||
| const keyMap = { | ||
| crop: 'c', | ||
| format: 'format', | ||
| height: 'h', | ||
| quality: 'q', | ||
| width: 'w' | ||
| } as const | ||
|
|
||
| type KeyMapKey = keyof typeof keyMap | ||
| type KeyMapValue= typeof keyMap[KeyMapKey] | ||
|
|
||
| export { keyMap } | ||
| export type { KeyMapKey, KeyMapValue } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /** | ||
| * Value map is responsible for mapping readable "properties" defined in | ||
| * `keyMap.ts` aswell as native modifiers of `NuxtImg` component, to URL path | ||
| * parameter values that can be interpreted Prepr's REST API. | ||
| * | ||
| * ```Examples | ||
| * Prepr's `w` path param expects an arbitrary number, so, it does not need to be in `valueMap` | ||
| * | ||
| * Our custom param `width` maps to `w` in keyMap, so, it does not need to be in `valueMap` | ||
| * | ||
| * Prepr's `format` path param expects a string which can either be `jpg` or `png`, | ||
| * if we want to allow the user to pass <NuxtImage :modifiers="{ format: 'jpeg' }" />, | ||
| * because it is a valid option of <NuxtImg :format />, then we need to have | ||
| * `jpeg` to `jpg` because Prepr's API does not recognize `jpeg`. Similar things | ||
| * could be said for `fit=cover`, which should map to `fit=crop` | ||
| *``` | ||
| */ | ||
| const valueMap = { | ||
| format: { | ||
| jpeg: 'jpg' | ||
| }, | ||
| fit: { | ||
| cover: 'crop' // Prepr.io accepts value `crop` defaulting to value `centre` | ||
| } | ||
| } as const | ||
|
|
||
| type ValuesMapKey = keyof typeof valueMap | ||
| type ValuesMapValue = typeof valueMap[ValuesMapKey] | ||
|
|
||
| export { valueMap } | ||
| export type { ValuesMapKey, ValuesMapValue } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters