fix(twicpics): fix minor issues and adds custom operations (#132)

* TwicPics provider fixes & examples

* Optimizes TwicPics runtime

* Removes duplicate TwicPics examples

* Adds `focus`and `zoom` to TwicPics’ operations

playground/pages/index.vue

@@ -35,6 +35,13 @@
 
       <h2>JPEG image on TwicPics</h2>
       <NuxtImg provider="twicpics" src="/football.jpg" />
+      <NuxtImg
+        provider="twicpics"
+        src="/football.jpg"
+        width="250"
+        height="400"
+        :operations="{ focus: 'auto' }"
+      />
       <NuxtImg provider="twicpics" src="/football.jpg" width="100" height="100" quality="1" />
 
       <h2>JPEG image on Fastly</h2>

src/providers/twicpics/runtime.ts

@@ -13,16 +13,37 @@ const fits = createMapper({
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {
-    format: 'format',
+    format: 'output',
     quality: 'quality',
-    background: 'background'
+    background: 'background',
+    focus: 'focus',
+    zoom: 'zoom'
   },
   valueMap: {
-    format (value) {
+    format (value: string) {
       if (value === 'jpg') {
         return 'jpeg'
       }
       return value
+    },
+    background (value: string) {
+      if (value.startsWith('#')) {
+        return value.replace('#', '')
+      }
+      return value
+    },
+    focus: {
+      auto: 'auto',
+      faces: 'faces',
+      north: '50px0p',
+      northEast: '100px0p',
+      northWest: '0px0p',
+      west: '0px50p',
+      southWest: '100px100p',
+      south: '50px100p',
+      southEast: '0px100p',
+      east: '100px50p',
+      center: '50px50p'
     }
   },
   joinWith: '/',
@@ -36,9 +57,7 @@ export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/'
     providerModifiers[fits(fit)] = `${width || '-'}x${height || '-'}`
   }
   const operations = operationsGenerator(providerModifiers)
-  const twicpicsOperations = (operations) ? '?twic=v1/' + operations : ''
-
   return {
-    url: joinURL(baseURL, src + twicpicsOperations)
+    url: joinURL(baseURL, src + (operations ? ('?twic=v1/' + operations) : ''))
   }
 }