From eb932aaaeae63c8a0914b432c962b57393c5aa91 Mon Sep 17 00:00:00 2001 From: reliut-g Date: Wed, 8 Sep 2021 20:22:11 +0200 Subject: [PATCH 1/7] feat: allow strapi uploads using the local provider --- playground/nuxt.config.ts | 3 +++ playground/providers.ts | 30 ++++++++++++++++++++++++++++++ src/provider.ts | 1 + src/runtime/providers/strapi.ts | 27 +++++++++++++++++++++++++++ src/types/module.ts | 1 + 5 files changed, 62 insertions(+) create mode 100644 src/runtime/providers/strapi.ts diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 8bc009fb0..713f603f0 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -55,6 +55,9 @@ export default { sanity: { projectId: 'zp7mbokg' }, + strapi: { + baseURL: 'http://localhost:1337/uploads/' + }, unsplash: {}, vercel: { baseURL: 'https://image-component.nextjs.gallery/_next/image' diff --git a/playground/providers.ts b/playground/providers.ts index f6d47e021..b14e4afe5 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -249,6 +249,36 @@ export const providers: Provider[] = [ } ] }, + // Strapi + { + name: 'strapi', + samples: [ + { + src: '/4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Image 1' + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Thumbnail image', + modifiers: { breakpoint: 'thumbnail' } + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Small image', + modifiers: { breakpoint: 'small' } + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Medium image', + modifiers: { breakpoint: 'medium' } + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Large image', + modifiers: { breakpoint: 'large' } + } + ] + }, // Storyblok { name: 'storyblok', diff --git a/src/provider.ts b/src/provider.ts index 894cd408b..b0686deb6 100644 --- a/src/provider.ts +++ b/src/provider.ts @@ -17,6 +17,7 @@ const BuiltInProviders = [ 'sanity', 'static', 'twicpics', + 'strapi', 'storyblok', 'unsplash', 'vercel' diff --git a/src/runtime/providers/strapi.ts b/src/runtime/providers/strapi.ts new file mode 100644 index 000000000..ccdecd386 --- /dev/null +++ b/src/runtime/providers/strapi.ts @@ -0,0 +1,27 @@ +import { ProviderGetImage } from 'src' + +// https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload + +export const getImage: ProviderGetImage = (src, { modifiers, baseURL = 'http://localhost:1337/uploads' } = {}) => { + const breakpoint = modifiers?.breakpoint || '' + + if (src.startsWith('/')) { + src = src.slice(1) + } + + if (baseURL.endsWith('/')) { + baseURL = baseURL.replace(/\/$/, '') + } + + if (!breakpoint) { + return { + url: `${baseURL}/${src}` + } + } + + return { + url: `${baseURL}/${breakpoint}_${src}` + } +} + +export const validateDomains = true diff --git a/src/types/module.ts b/src/types/module.ts index dd2d1f95d..1093a4876 100644 --- a/src/types/module.ts +++ b/src/types/module.ts @@ -22,6 +22,7 @@ export interface ImageProviders { prismic?: any twicpics?: any storyblok?: any, + strapi?: any, ipx?: Partial static?: Partial } From 19307581050cc8806c826689de004519a3917360 Mon Sep 17 00:00:00 2001 From: reliut-g Date: Thu, 9 Sep 2021 11:39:23 +0200 Subject: [PATCH 2/7] refactor: use url utils from ufo --- src/runtime/providers/strapi.ts | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/runtime/providers/strapi.ts b/src/runtime/providers/strapi.ts index ccdecd386..2e5c0f3aa 100644 --- a/src/runtime/providers/strapi.ts +++ b/src/runtime/providers/strapi.ts @@ -1,26 +1,23 @@ import { ProviderGetImage } from 'src' +import { withBase, joinURL } from 'ufo' // https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload export const getImage: ProviderGetImage = (src, { modifiers, baseURL = 'http://localhost:1337/uploads' } = {}) => { - const breakpoint = modifiers?.breakpoint || '' - - if (src.startsWith('/')) { - src = src.slice(1) - } - - if (baseURL.endsWith('/')) { - baseURL = baseURL.replace(/\/$/, '') - } + const breakpoint = modifiers?.breakpoint ?? '' if (!breakpoint) { return { - url: `${baseURL}/${src}` + url: withBase(joinURL(src), baseURL) } } + if (src.startsWith('/')) { + src = src.slice(1) + } + return { - url: `${baseURL}/${breakpoint}_${src}` + url: withBase(joinURL(`${breakpoint}_${src}`), baseURL) } } From 8776fc00a43e782b0843a90141492b84392bdbca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eliut=20Gonz=C3=A1lez?= Date: Fri, 8 Oct 2021 17:36:44 +0200 Subject: [PATCH 3/7] refactor: use withoutLeadingSlash --- src/runtime/providers/strapi.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/runtime/providers/strapi.ts b/src/runtime/providers/strapi.ts index 2e5c0f3aa..6b42845f1 100644 --- a/src/runtime/providers/strapi.ts +++ b/src/runtime/providers/strapi.ts @@ -1,5 +1,5 @@ import { ProviderGetImage } from 'src' -import { withBase, joinURL } from 'ufo' +import { withBase, withoutLeadingSlash } from 'ufo' // https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload @@ -8,16 +8,12 @@ export const getImage: ProviderGetImage = (src, { modifiers, baseURL = 'http://l if (!breakpoint) { return { - url: withBase(joinURL(src), baseURL) + url: withBase(src, baseURL) } } - if (src.startsWith('/')) { - src = src.slice(1) - } - return { - url: withBase(joinURL(`${breakpoint}_${src}`), baseURL) + url: withBase(`${breakpoint}_${withoutLeadingSlash(src)}`, baseURL) } } From 11cb6e8106be791b3e309de334520e581fe94d4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eliut=20Gonz=C3=A1lez?= Date: Fri, 8 Oct 2021 18:11:40 +0200 Subject: [PATCH 4/7] docs: strapi documentation --- docs/content/en/4.providers/strapi.md | 55 +++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 docs/content/en/4.providers/strapi.md diff --git a/docs/content/en/4.providers/strapi.md b/docs/content/en/4.providers/strapi.md new file mode 100644 index 000000000..55c6d72a0 --- /dev/null +++ b/docs/content/en/4.providers/strapi.md @@ -0,0 +1,55 @@ +--- +title: Strapi Provider +description: 'Nuxt Image with Strapi integration' +navigation: + title: Strapi +--- + +Integration between [Strapi](https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html) and the image module. + +No specific configuration is required. You just need to specify `provider: 'strapi'` in your configuration to make it the default: + +```js{}[nuxt.config.js] +export default { + image: { + strapi: {} + } +} +``` + +Override default options: +```js{}[nuxt.config.js] +export default { + image: { + strapi: { + baseURL: 'http://localhost:1337/uploads/' + } + } +} +``` + +## Modifiers +The `breakpoint` modifier is used to specify the breakpoint for the image. + +By default, when the image is uploaded and `Enable responsive friendly upload` Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes: + +* `small`: 500px +* `medium`: 750px +* `large`: 1000px + +You can override the default breakpoints. See the [Upload configuration](https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration) in the Strapi documentation. + +If you don't set breakpoint modifier, the original image size will be used: + +```html + +``` + +Define breakpoint modifier: +```html + +``` + +:::alert{type="info"} +Only one breakpoint can be modified per image. +::: \ No newline at end of file From 3a43eb3f424feede28685353dd9e20717c26fdb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eliut=20Gonz=C3=A1lez?= Date: Fri, 8 Oct 2021 18:29:59 +0200 Subject: [PATCH 5/7] fix: typo. use strapi origin --- docs/content/en/4.providers/strapi.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/en/4.providers/strapi.md b/docs/content/en/4.providers/strapi.md index 55c6d72a0..87790e290 100644 --- a/docs/content/en/4.providers/strapi.md +++ b/docs/content/en/4.providers/strapi.md @@ -5,7 +5,7 @@ navigation: title: Strapi --- -Integration between [Strapi](https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html) and the image module. +Integration between [Strapi](https://strapi.io) and the image module. No specific configuration is required. You just need to specify `provider: 'strapi'` in your configuration to make it the default: From 1c820eac0ec8e3b50e616d0dc6d3ef6131ac7e19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eliut=20Gonz=C3=A1lez?= Date: Fri, 8 Oct 2021 18:30:43 +0200 Subject: [PATCH 6/7] fix: improve docs --- docs/content/en/4.providers/strapi.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/content/en/4.providers/strapi.md b/docs/content/en/4.providers/strapi.md index 87790e290..a27729a4a 100644 --- a/docs/content/en/4.providers/strapi.md +++ b/docs/content/en/4.providers/strapi.md @@ -7,8 +7,7 @@ navigation: Integration between [Strapi](https://strapi.io) and the image module. -No specific configuration is required. You just need to specify `provider: 'strapi'` in your configuration to make it the default: - +No specific configuration is required. You just need to specify `strapi` in your configuration to make it the default: ```js{}[nuxt.config.js] export default { image: { @@ -29,13 +28,15 @@ export default { ``` ## Modifiers -The `breakpoint` modifier is used to specify the breakpoint for the image. +The `breakpoint` modifier is used to specify the size of the image. By default, when the image is uploaded and `Enable responsive friendly upload` Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes: -* `small`: 500px -* `medium`: 750px -* `large`: 1000px +| Name | Largest Dimension | +| ------- | ----------------- | +| `small` | 500px | +| `medium`| 750px | +| `large` | 1000px | You can override the default breakpoints. See the [Upload configuration](https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration) in the Strapi documentation. From 96aca8f91fd604abe08a5d91bf314984c0c1005c Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Thu, 13 Jan 2022 14:58:09 +0100 Subject: [PATCH 7/7] Update docs/content/en/4.providers/strapi.md --- docs/content/en/4.providers/strapi.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/en/4.providers/strapi.md b/docs/content/en/4.providers/strapi.md index a27729a4a..808854e09 100644 --- a/docs/content/en/4.providers/strapi.md +++ b/docs/content/en/4.providers/strapi.md @@ -30,7 +30,7 @@ export default { ## Modifiers The `breakpoint` modifier is used to specify the size of the image. -By default, when the image is uploaded and `Enable responsive friendly upload` Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes: +By default, when the image is uploaded and **Enable responsive friendly upload** Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes: | Name | Largest Dimension | | ------- | ----------------- |