feat(imgix): additional documentation and modifiers (#316)

docs/pages/en/4.providers/imgix.md

@@ -18,3 +18,39 @@ export default {
   }
 }
 ```
+
+## imgix `fit` values
+
+Beside [the standard values for `fit` property](/components/nuxt-img#fit) of Nuxt image and Nuxt picture, imgix offers the following for extra resizing experience:
+
+* `clamp` - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, "clamp".
+
+* `clip` - The default fit setting for imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image.
+
+* `facearea` - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with [faceindex](https://docs.imgix.com/apis/rendering/face-detection/faceindex) to identify a specific face, as well as [facepad](https://docs.imgix.com/apis/rendering/face-detection/facepad) to include additional padded area around the face to zoom out from the immediate area around the faces.
+
+* `fillMax` - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions.
+
+## imgix modifiers
+
+Beside the [standard modifiers](/components/nuxt-img#modifiers), you can also pass all imgix-specific render API parameters to the `modifiers` prop.
+
+For a full list of these modifiers and their uses, check out [imgix's image Rendering API documentation](https://docs.imgix.com/apis/rendering).
+
+## imgix best practices
+
+Some common best practices when using imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well.  Combine this with some top of intelligent cropping and resizing and you will have a great image!
+
+```html
+<nuxt-img
+  provider="imgix"
+  src="/blog/woman-hat.jpg"
+  width="300"
+  height="500"
+  fit="cover"
+  :modifiers="{ auto: 'format,compress', crop: 'faces' }"
+/>
+```
+
+This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the [woman in the hat](https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces).
+

playground/providers.ts

@@ -67,6 +67,18 @@ export const providers: Provider[] = [
       { src: '/plant.jpeg' }
     ]
   },
+  // imgix
+  {
+    name: 'imgix',
+    samples: [
+      {
+        src: 'blog/woman-hat.jpg',
+        width: 300,
+        height: 300,
+        fit: 'cover'
+      }
+    ]
+  },
   // Glide
   {
     name: 'glide',

src/runtime/providers/imgix.ts

@@ -6,15 +6,142 @@ export const operationsGenerator = createOperationsGenerator({
   keyMap: {
     width: 'w',
     height: 'h',
-    format: 'fm'
+    format: 'fm',
+    quality: 'q',
+    backgroundColor: 'bg',
+    rotate: 'rot',
+    mask: 'mask',
+    auto: 'auto',
+    crop: 'crop',
+    brightness: 'bri',
+    contrast: 'con',
+    exposure: 'exp',
+    gamma: 'gam',
+    highlight: 'high',
+    hueShift: 'hue',
+    invert: 'invert',
+    saturation: 'sat',
+    shadow: 'shad',
+    sharpen: 'sharp',
+    unsharpMask: 'usm',
+    unsharpMaskRadius: 'usmrad',
+    vibrance: 'vib',
+    blend: 'blend',
+    blendAlign: 'blend-align',
+    blendAlpha: 'blend-alpha',
+    blendColor: 'blend-color',
+    blendCrop: 'blend-crop',
+    blendFit: 'blend-fit',
+    blendHeight: 'blend-h',
+    blendMode: 'blend-mode',
+    blendPadding: 'blend-pad',
+    blendSize: 'blend-size',
+    blendWidth: 'blend-w',
+    blendXPosition: 'blend-x',
+    blendYPosition: 'blend-y',
+    padding: 'pad',
+    borderBottom: 'border-bottom',
+    borderLeft: 'border-left',
+    innerBorderRadius: 'border-radius-inner',
+    outerBorderRadius: 'border-radius',
+    borderRight: 'border-right',
+    borderTop: 'border-top',
+    borderSizeColor: 'border',
+    paddingBottom: 'pad-bottom',
+    paddingLeft: 'pad-left',
+    paddingRight: 'pad-right',
+    paddingTop: 'pad-top',
+    paletteColorCount: 'colors',
+    colorPaletteExtraction: 'palette',
+    cssPrefix: 'prefix',
+    expirationTimestamp: 'expires',
+    faceIndex: 'faceindex',
+    facePadding: 'facepad',
+    jsonFaceData: 'faces',
+    fillMode: 'fill',
+    fillColor: 'fill-color',
+    gridColors: 'grid-colors',
+    gridSize: 'grid-size',
+    transparency: 'transparency',
+    focalPointDebug: 'fp-debug',
+    focalPointXPosition: 'fp-x',
+    focalPointYPosition: 'fp-y',
+    focalPointZoom: 'fp-z',
+    clientHints: 'ch',
+    chromaSubsampling: 'chromasub',
+    colorQuantization: 'colorquant',
+    colorSpace: 'cs',
+    download: 'dl',
+    dotsPerInch: 'dpi',
+    losslessCompression: 'lossless',
+    maskBackgroundColor: 'mask-bg',
+    maskCornerRadius: 'corner-radius',
+    noiseReductionSharp: 'nrs',
+    noiseReductionBound: 'nr',
+    pdfPageNumber: 'page',
+    pdfAnnotation: 'pdf-annotation',
+    pixelDensity: 'dpr',
+    orientation: 'orient',
+    flipAxis: 'flip',
+    aspectRatio: 'ar',
+    maximumHeight: 'max-h',
+    maximumWidth: 'max-w',
+    minimumHeight: 'min-h',
+    minimumWidth: 'min-w',
+    sourceRectangleRegion: 'rect',
+    gaussianBlur: 'blur',
+    duotoneAlpha: 'duotone-alpha',
+    duotone: 'duotone',
+    halftone: 'htn',
+    monochrome: 'monochrome',
+    pixellate: 'px',
+    sepiaTone: 'sepia',
+    textAlign: 'txt-align',
+    textClippingMode: 'txt-clip',
+    textColor: 'txt-color',
+    textFitMode: 'txt-fit',
+    textFont: 'txt-font',
+    textLigatures: 'txt-lig',
+    textOutlineColor: 'txt-line-color',
+    textOutline: 'txt-line',
+    textPadding: 'txt-pad',
+    textShadow: 'txt-shad',
+    textFontSize: 'txt-size',
+    textWidth: 'txt-width',
+    textString: 'txt',
+    trimColor: 'trim-color',
+    trimMeanDifference: 'trim-md',
+    trimStandardDeviation: 'trim-sd',
+    trimTolerance: 'trim-tol',
+    trimImage: 'trim',
+    textLeading: 'txt-lead',
+    textTracking: 'txt-track',
+    typesettingEndpoint: '~text',
+    watermarkAlignment: 'mark-align',
+    watermarkAlpha: 'mark-alpha',
+    watermarkBaseURL: 'mark-base',
+    watermarkFitMode: 'mark-fit',
+    watermarkHeight: 'mark-h',
+    watermarkPadding: 'mark-pad',
+    watermarkRotation: 'mark-rot',
+    watermarkScale: 'mark-sclae',
+    watermarkTile: 'mark-tile',
+    watermarkWidth: 'mark-w',
+    watermarkXPosition: 'mark-x',
+    watermarkYPosition: 'mark-y',
+    watermarkImageURL: 'mark'
   },
   valueMap: {
     fit: {
       fill: 'scale',
-      inside: 'fit-max',
-      outside: 'fit-min',
+      inside: 'max',
+      outside: 'min',
       cover: 'crop',
-      contain: 'fill'
+      contain: 'fill',
+      clamp: 'clamp',
+      clip: 'clip',
+      facearea: 'facearea',
+      fillMax: 'fillmax'
     }
   },
   joinWith: '&',