From c077a25999ecc1a93974b2f82246bc28ca533319 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 12:42:46 +0200 Subject: [PATCH 01/10] feat(ipx): support alias --- src/ipx.ts | 7 ++++--- src/types/module.ts | 3 ++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/ipx.ts b/src/ipx.ts index 0e62851fb..f0123e01c 100644 --- a/src/ipx.ts +++ b/src/ipx.ts @@ -3,15 +3,16 @@ import { update as updaterc } from 'rc9' import { mkdirp, readFile, writeFile } from 'fs-extra' import { lt } from 'semver' -import type { ProviderSetup } from './types' +import type { ProviderSetup, ImageProviders } from './types' export const ipxSetup: ProviderSetup = async (_providerOptions, moduleOptions, nuxt) => { const isStatic = nuxt.options.target === 'static' const runtimeDir = resolve(__dirname, 'runtime') - const ipxOptions = { + const ipxOptions: ImageProviders['ipx'] = { dir: resolve(nuxt.options.rootDir, moduleOptions.dir), domains: moduleOptions.domains, - sharp: moduleOptions.sharp + sharp: moduleOptions.sharp, + alias: moduleOptions.alias } // Add IPX middleware unless nuxtrc or user added a custom middleware diff --git a/src/types/module.ts b/src/types/module.ts index 79a0fbc6f..73ff573f8 100644 --- a/src/types/module.ts +++ b/src/types/module.ts @@ -32,7 +32,8 @@ export interface ModuleOptions extends ImageProviders { presets: { [name: string]: ImageOptions } dir: string domains: string[] - sharp: {} + sharp: any + alias: Record screens: CreateImageOptions['screens'], internalUrl: string providers: { [name: string]: InputProvider | any } & ImageProviders From 5cb44040835475a49cb589b34437affaa4b49c41 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 12:42:51 +0200 Subject: [PATCH 02/10] chore: update playground --- playground/nuxt.config.ts | 5 ++++- playground/providers.ts | 12 ++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 17e4107ef..a5362c991 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -16,12 +16,15 @@ export default { image: { domains: [ 'https://nuxtjs.org', - 'https://unsplash.com', + 'https://images.unsplash.com', 'https://upload.wikimedia.org' ], screens: { 750: 750 }, + alias: { + unsplash: 'https://images.unsplash.com' + }, twicpics: { baseURL: 'https://demo.twic.pics/' }, diff --git a/playground/providers.ts b/playground/providers.ts index dc407be81..62933ee2f 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -18,21 +18,29 @@ export const providers: Provider[] = [ { src: '/images/colors.jpg', from: 'Jeremy Thomas', + width: 300, + height: 300, link: 'https://unsplash.com/@jeremythomasphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText' }, { src: '/images/everest.jpg', - from: 'Mount Everest Wikipedia page', + from: 'Mount Everest Wikipedia page (alias)', + width: 300, + height: 300, link: 'https://en.wikipedia.org/wiki/Mount_Everest' }, { src: '/images/tacos.svg', from: 'Illustration from Icons8', + width: 300, + height: 300, link: 'https://icons8.com/illustrations/illustration/abstract-1419' }, { - src: 'https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1940&q=80', + src: '/unsplash/photo-1606112219348-204d7d8b94ee', from: 'Photo by Omid Armin', + width: 300, + height: 300, link: 'https://unsplash.com/@omidarmin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText' } ] From 4fe32792fc68ea766cbec0edcff1d6e90ae18e24 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:15:08 +0200 Subject: [PATCH 03/10] ipx 0.6.4 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 27312be3c..8106920cc 100755 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "fs-extra": "^10.0.0", "hasha": "^5.2.2", "image-meta": "^0.0.1", - "ipx": "^0.6.3", + "ipx": "^0.6.4", "is-https": "^4.0.0", "lru-cache": "^6.0.0", "node-fetch": "^2.6.1", diff --git a/yarn.lock b/yarn.lock index 7cdf9aed9..eb861ca76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6619,10 +6619,10 @@ ip@^1.1.5: resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo= -ipx@^0.6.3: - version "0.6.3" - resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.6.3.tgz#c1f8acbb5cde7a31daabffea9651e1a8aa836428" - integrity sha512-anf7M12iEn6hrQIaxaUYcXSzJaUEiMW42VT8OXniaC4s28L1pkslkwYM2WXOvcoXMYPwPJ6W7yuKgJvNm2UZvA== +ipx@^0.6.4: + version "0.6.4" + resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.6.4.tgz#df6757ab2c3ef717879d8d06accbfb156ba623e1" + integrity sha512-t1DvrB5tA52eSuGWNzxs2uJGsbcmTRP9Bv89OQk7xjOO/2UU1i7zniRXrL3pxg853UhvgXPHzwlTgqxejI99pA== dependencies: consola "^2.15.3" defu "^5.0.0" From 703d9328076c6fc8316be990f2c8513ff0293d4c Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:17:15 +0200 Subject: [PATCH 04/10] runtime support for alias --- src/runtime/image.ts | 16 ++++++++++++++-- src/runtime/providers/ipx.ts | 2 +- src/runtime/providers/static.ts | 2 ++ src/types/image.ts | 4 +++- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/runtime/image.ts b/src/runtime/image.ts index e18c104c1..e820ad7d5 100644 --- a/src/runtime/image.ts +++ b/src/runtime/image.ts @@ -1,5 +1,5 @@ import defu from 'defu' -import { hasProtocol, parseURL } from 'ufo' +import { hasProtocol, parseURL, joinURL, withLeadingSlash } from 'ufo' import type { ImageOptions, ImageSizesOptions, CreateImageOptions, ResolvedImage, MapToStatic, ImageCTX, $Img } from '../types/image' import { imageMeta } from './utils/meta' import { parseSize } from './utils' @@ -86,7 +86,7 @@ async function getMeta (ctx: ImageCTX, input: string, options?: ImageOptions) { } function resolveImage (ctx: ImageCTX, input: string, options: ImageOptions): ResolvedImage { - if (typeof input !== 'string') { + if (typeof input !== 'string' || input === '') { throw new TypeError(`input must be a string (received ${typeof input}: ${JSON.stringify(input)})`) } @@ -99,6 +99,18 @@ function resolveImage (ctx: ImageCTX, input: string, options: ImageOptions): Res const { provider, defaults } = getProvider(ctx, options.provider || ctx.options.provider) const preset = getPreset(ctx, options.preset) + // Normalize input with leading slash + input = hasProtocol(input) ? input : withLeadingSlash(input) + + // Resolve alias if provider is not ipx + if (!provider.supportsAlias) { + for (const base in ctx.options.alias) { + if (input.startsWith(base)) { + input = joinURL(ctx.options.alias[base], input.substr(base.length)) + } + } + } + // Externalize remote images if domain does not match with `domains` if (provider.validateDomains && hasProtocol(input)) { const inputHost = parseURL(input).host diff --git a/src/runtime/providers/ipx.ts b/src/runtime/providers/ipx.ts index c2cba7811..7c60df4fd 100644 --- a/src/runtime/providers/ipx.ts +++ b/src/runtime/providers/ipx.ts @@ -30,4 +30,4 @@ export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/_i } } -export const validateDomains = true +export const supportsAlias = true diff --git a/src/runtime/providers/static.ts b/src/runtime/providers/static.ts index af4ef1219..921467779 100644 --- a/src/runtime/providers/static.ts +++ b/src/runtime/providers/static.ts @@ -4,3 +4,5 @@ export const getImage: typeof _getImage = (src, options, ctx) => ({ ..._getImage(src, options, ctx), isStatic: true }) + +export const supportsAlias = true diff --git a/src/types/image.ts b/src/types/image.ts index 93f77d143..e006c054a 100644 --- a/src/types/image.ts +++ b/src/types/image.ts @@ -24,6 +24,7 @@ export interface ImageProvider { defaults?: any getImage: ProviderGetImage validateDomains?: Boolean + supportsAlias?: Boolean } export interface CreateImageOptions { @@ -35,7 +36,8 @@ export interface CreateImageOptions { } presets: { [name: string]: ImageOptions } provider: string - screens?: Record, + screens: Record, + alias: Record, domains: string[] } From 252792b9e1dc2e4028d1c783d64193f2dd41635c Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:17:24 +0200 Subject: [PATCH 05/10] normalize alias in module --- src/module.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/module.ts b/src/module.ts index 910a4849e..6c5b458ab 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,6 +1,6 @@ import { resolve } from 'upath' import defu from 'defu' -import { parseURL } from 'ufo' +import { parseURL, withLeadingSlash } from 'ufo' import type { Module } from '@nuxt/types' import { setupStaticGeneration } from './generate' import { resolveProviders, detectProvider } from './provider' @@ -29,7 +29,8 @@ const imageModule: Module = async function imageModule (moduleOpt }, internalUrl: '', providers: {}, - static: {} + static: {}, + alias: {} } const options: ModuleOptions = defu(moduleOptions, nuxt.options.image, defaults) @@ -39,6 +40,9 @@ const imageModule: Module = async function imageModule (moduleOpt .map(domain => parseURL(domain, 'https://').host) .filter(Boolean) as string[] + // Normalize alias to start with leading slash + options.alias = Object.fromEntries(Object.entries(options.alias).map(e => [withLeadingSlash(e[0]), e[1]])) + options.provider = detectProvider(options.provider, nuxt.options.target === 'static') options[options.provider] = options[options.provider] || {} @@ -46,7 +50,8 @@ const imageModule: Module = async function imageModule (moduleOpt 'screens', 'presets', 'provider', - 'domains' + 'domains', + 'alias' ]) const providers = resolveProviders(nuxt, options) From 7b639abca6d8e88e84e17d9df3aabd639611a5a7 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:17:32 +0200 Subject: [PATCH 06/10] update playground --- playground/nuxt.config.ts | 3 ++- playground/providers.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index a5362c991..b3c66d9c2 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -23,7 +23,8 @@ export default { 750: 750 }, alias: { - unsplash: 'https://images.unsplash.com' + unsplash: 'https://images.unsplash.com', // ipx + blog: '/remote/nuxt-org/blog' // cloudinary }, twicpics: { baseURL: 'https://demo.twic.pics/' diff --git a/playground/providers.ts b/playground/providers.ts index 62933ee2f..1bcd9d8be 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -53,7 +53,7 @@ export const providers: Provider[] = [ src: '/remote/nuxt-org/blog/going-full-static/main' }, { - src: '/remote/nuxt-org/blog/going-full-static/main', + src: '/blog/going-full-static/main', width: 200, height: 200, fit: 'cropping' From ab48fd6577464acfcc3554aa248c146e376b0bfe Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:25:47 +0200 Subject: [PATCH 07/10] update docs --- docs/pages/en/3.api/1.options.md | 48 ++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/docs/pages/en/3.api/1.options.md b/docs/pages/en/3.api/1.options.md index f5d4dd4c2..a52fd612e 100644 --- a/docs/pages/en/3.api/1.options.md +++ b/docs/pages/en/3.api/1.options.md @@ -175,3 +175,51 @@ export default { - For `static` provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing `dir` from `static` causes 404 errors. - For `ipx` provider, make sure to deploy customized `dir` as well. - For some providers (like vercel), using a directory other than `static/` for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the `static/` directory (deployment URL) + +## `alias` + +This option allows you to specify aliass for `src`. + +When using default ipx provider, URL aliases are shortenerd on server-side. +This is specially useful for optimizing external URLs and not including them in html source. + +When using other providers, aliases are resolved in runtime and included in html. (only usage simplified) + +**Example:** + +```ts [nuxt.config.js] +export default { + image: { + alias: { + unsplash: 'https://images.unsplash.com' + } + } +} +``` + +**Before** using alias: + +```html + +``` + +Generates: + +```html + +``` + +**After** using alias: + + +```html + +``` + +Generates: + +```html + +``` + +Both usage and output are simplified! From f5b8ad5ebc31e5c7fd227cf75f411d708a94d2d7 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:29:26 +0200 Subject: [PATCH 08/10] update docs --- docs/pages/en/3.api/1.options.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/pages/en/3.api/1.options.md b/docs/pages/en/3.api/1.options.md index a52fd612e..c5b739cc3 100644 --- a/docs/pages/en/3.api/1.options.md +++ b/docs/pages/en/3.api/1.options.md @@ -190,6 +190,9 @@ When using other providers, aliases are resolved in runtime and included in html ```ts [nuxt.config.js] export default { image: { + domains: [ + 'images.unsplash.com' + ], alias: { unsplash: 'https://images.unsplash.com' } From b1d48c007bbfe4d273edaf6aa2fb160f65647bb3 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:34:39 +0200 Subject: [PATCH 09/10] docs: fix typos --- docs/pages/en/3.api/1.options.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/pages/en/3.api/1.options.md b/docs/pages/en/3.api/1.options.md index c5b739cc3..34fed4985 100644 --- a/docs/pages/en/3.api/1.options.md +++ b/docs/pages/en/3.api/1.options.md @@ -178,12 +178,12 @@ export default { ## `alias` -This option allows you to specify aliass for `src`. +This option allows you to specify aliases for `src`. -When using default ipx provider, URL aliases are shortenerd on server-side. -This is specially useful for optimizing external URLs and not including them in html source. +When using the default ipx provider, URL aliases are shortened on the server-side. +This is especially useful for optimizing external URLs and not including them in HTML. -When using other providers, aliases are resolved in runtime and included in html. (only usage simplified) +When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified) **Example:** From 7bc0838f7edd5bba0ebcee0bdd76fbc8689193c7 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 1 Jul 2021 13:36:31 +0200 Subject: [PATCH 10/10] revert revert --- src/runtime/providers/ipx.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/runtime/providers/ipx.ts b/src/runtime/providers/ipx.ts index 7c60df4fd..fd86adad2 100644 --- a/src/runtime/providers/ipx.ts +++ b/src/runtime/providers/ipx.ts @@ -30,4 +30,5 @@ export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/_i } } +export const validateDomains = true export const supportsAlias = true