diff --git a/.gitignore b/.gitignore index 05cef6faf..138050767 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ node_modules *.log cache/ dist/ -ipx .DS_Store coverage sw.* diff --git a/docs/content/en/options.md b/docs/content/en/options.md index 1713809c2..049ee71c7 100644 --- a/docs/content/en/options.md +++ b/docs/content/en/options.md @@ -125,3 +125,35 @@ export default { } } ``` + +## `ipx` + +Internally nuxt image uses [ipx](https://github.com/nuxt-contrib/ipx) to modify and optimize images. + +- `dir`: The root directory of the all images. By default nuxt image looks `static` dir to find original images, +- `clearCache`: The ipx has a caching stategy to clear cached images to reduce massive disk usages. You can schedule the cache cleaning job using `clearCache` option in provide options. By default this cron job is disabled. + +```js{}[nuxt.config.js] +export default { + image: { + ipx: { + /** + * Public domain of your website + **/ + baseURL: 'https://awesome.com/', + /** + * Internal address of your website + **/ + internalBaseURL: 'http://192.168.1.100:3000/', + /** + * Input directory for images + **/ + dir: '~/static', + /** + * Enable/Disabel cache cleaning cron job + **/ + clearCache: false + } + } +} +``` \ No newline at end of file diff --git a/docs/content/en/providers.md b/docs/content/en/providers.md index 1ca7da0a4..1c7265ba3 100644 --- a/docs/content/en/providers.md +++ b/docs/content/en/providers.md @@ -5,36 +5,8 @@ position: 5 category: Guide --- -Complete list of internal providers. - -## `local` - -Local provider is an integration of ipx and image module. Local provider is an specific provider that uses for development, optimizing in-project. -By default local provider looks `static` dir to find original images, You can change `dir` inside `nuxt.config`. -The local provider has a caching stategy to clear cached images to reduce massive disk usages. You can schedule the cache cleaning job using `clearCache` option in provide options. By default this cron job is disabled. - -```js{}[nuxt.config.js] -export default { - image: { - providers: { - local: { - /** - * Public domain of your website - **/ - baseURL: 'https://awesome.com/', - /** - * Input directory for images - **/ - dir: '~/static', - /** - * Enable/Disabel cache cleaning cron job - **/ - clearCache: false - } - } - } -} -``` +Nuxt image have a generic way to work with external providers like Cloudinary. Here is a complete list of providers that supports out of the box. +If you looking for a specific provider outside of this list, you can [create your own provider](/custom-provider). ## `cloudinary` diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js index ebcc6fab0..8737c5c1f 100644 --- a/docs/nuxt.config.js +++ b/docs/nuxt.config.js @@ -11,7 +11,6 @@ export default theme({ ], image: { providers: { - local: {}, cloudinary: { baseURL: 'https://res.cloudinary.com/nuxt/image/upload/' }, diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 920bd5e35..1b86987c0 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -8,7 +8,6 @@ export default { '@nuxt/typescript-build' ], image: { - defaultProvider: 'local', presets: [ { name: 's50', @@ -19,7 +18,7 @@ export default { } ], providers: { - local: {}, + ipx: false, twicpics: { baseURL: 'https://i5acur1u.twic.pics' }, diff --git a/src/index.ts b/src/index.ts index e88c1fcbe..0fbefbe0a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,7 @@ import defu from 'defu' import fs from 'fs-extra' import upath from 'upath' import { ModuleOptions, ProviderFactory } from 'types' -import { downloadImage, getFileExtension, hash, tryRequire } from './utils' +import { downloadImage, getFileExtension, hash, logger, tryRequire } from './utils' import { cleanDoubleSlashes } from './runtime/utils' export type { Provider, RuntimeProvider } from 'types' @@ -19,13 +19,13 @@ function imageModule (moduleOptions: ModuleOptions) { ...moduleOptions } - // Ensure local provider is set - if (!options.providers.length || options.providers.local) { - options.providers.local = prepareLocalProvider(this, options.providers.local) + if (typeof options.providers.ipx !== 'undefined') { + logger.warn("'ipx' is a reserved name for provider. Please choose another name for your provider. This provider will ignore.") } + options.providers.ipx = prepareLocalProvider(this, options.providers.ipx || {}) if (!options.defaultProvider) { - options.defaultProvider = Object.keys(options.providers)[0] + options.defaultProvider = 'ipx' } interface ModuleProvider { diff --git a/src/providers/local/index.ts b/src/providers/ipx/index.ts similarity index 100% rename from src/providers/local/index.ts rename to src/providers/ipx/index.ts diff --git a/src/providers/local/runtime.ts b/src/providers/ipx/runtime.ts similarity index 100% rename from src/providers/local/runtime.ts rename to src/providers/ipx/runtime.ts diff --git a/test/unit/plugin.test.ts b/test/unit/plugin.test.ts index c990b67d0..18415f955 100644 --- a/test/unit/plugin.test.ts +++ b/test/unit/plugin.test.ts @@ -24,7 +24,6 @@ describe('Plugin', () => { } ], providers: { - local: {}, random: '~/providers/random', cloudinary: { baseURL: 'https://res.cloudinary.com/nuxt/image/upload' diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts index 36179abd9..f1d9cc062 100644 --- a/test/unit/providers.test.ts +++ b/test/unit/providers.test.ts @@ -1,5 +1,5 @@ import fs from 'fs-extra' -import local from '~/src/providers/local' +import local from '~/src/providers/ipx' import cloudinary from '~/src/providers/cloudinary' import twicpics from '~/src/providers/twicpics' import fastly from '~/src/providers/fastly' diff --git a/types/module.d.ts b/types/module.d.ts index d5d540411..276d37fa3 100644 --- a/types/module.d.ts +++ b/types/module.d.ts @@ -3,15 +3,16 @@ import { ImagePreset } from './runtime' export interface ModuleOptions { defaultProvider: string; - presets: ImagePreset[], + presets: ImagePreset[]; + ipx: { + baseURL: string; + dir?: string; + clearCache?: boolean | string; + } sizes: number[], internalUrl?: string providers: { - local: { - dir?: string - clearCache?: boolean | string; - } - [name: string]: any + [name: string]: any; } intersectOptions: object; }