docs: improvements

nuxt · Oct 2, 2020 · d73ae00 · d73ae00
1 parent 89af3f2
commit d73ae00
Show file tree

Hide file tree

Showing 9 changed files with 441 additions and 59 deletions.
diff --git a/docs/content/en/examples/random-provider.md b/docs/content/en/examples/random-provider.md
@@ -5,11 +5,17 @@ position: 9
 category: Examples
 ---
 
+Example of creating a `random` provider to fetch a random image on [Unsplash](https://unsplash.com).
+
+Let's create a `./providers/random/` directory with two files inside:
+- `index.js`: our entry point for our provider, exporting `runtime` and `runtimeOptions`
+- `runtime.js`: our runtime sending back an url
+
 <code-group>
-  <code-block label="Provider Main" active>
+  <code-block label="index.js" active>
 
   ```js{}[~/providers/random/index.js]
-  export default function(providerOptions) {
+  export default function (providerOptions) {
     return {
       runtime: require.resolve('./runtime'),
       runtimeOptions: providerOptions
@@ -18,7 +24,7 @@ category: Examples
   ```
 
   </code-block>
-  <code-block label="Runtime">
+  <code-block label="runtime.js">
 
   ```js{}[~/providers/random/runtime.js]  
   export default {
@@ -30,10 +36,14 @@ category: Examples
   }
   ```
   </code-block>
-  <code-block label="nuxt.config">
+</code-group>
+
+Let's use our random provider in our Nuxt application:
+
+<code-group>
+  <code-block label="nuxt.config.js" active>
 
   ```js{}[nuxt.config.js]
-  
   export default {
     image: {
       providers: {
@@ -44,20 +54,21 @@ category: Examples
   ```
   </code-block>
 
-  <code-block label="Page">
+  <code-block label="pages/index.vue">
 
   ```vue{}[~/pages/index.js]
   <template>
-    <nuxt-image src="random:/" width="600px" height="400px" />
+    <nuxt-image src="random:/" width="600" height="400" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="random:/" width="600px" height="400px" />
+    <nuxt-image src="random:/" width="600" height="400"></nuxt-image>
   </div>
 
   </code-block>
-</code-group>
+
+</code-group>
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -9,8 +9,8 @@ features:
   - CDN Support
 ---
 
-<img src="/preview.png" class="light-img" />
-<img src="/preview-dark.png" class="dark-img" />
+<nuxt-image src="/preview.png" width="664" height="332" class="light-img"></nuxt-image>
+<nuxt-image src="/preview-dark.png" width="664" height="332" class="dark-img"></nuxt-image>
 
 Optimised images for [NuxtJS](https://nuxtjs.org).
 

diff --git a/docs/content/en/nuxt-image.md b/docs/content/en/nuxt-image.md
@@ -28,7 +28,7 @@ Nuxt image module will allow you to modify and serve your images using cloud ser
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
@@ -50,7 +50,7 @@ Nuxt image module will allow you to modify and serve your images using cloud ser
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169"></nuxt-image>
   </div>
 
   </code-block>
@@ -69,7 +69,7 @@ Presets are predefined sets of image modifiers that can be used create unified f
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="+jpg-cover:/nuxt-icon.png" width="50px" height="50px" />
+    <nuxt-image src="+jpg-cover:/nuxt-icon.png" width="50" height="50" />
   </template>
   ```
 
@@ -97,7 +97,7 @@ Presets are predefined sets of image modifiers that can be used create unified f
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="+jpg-cover:/nuxt-icon.png" width="150px" height="150px" />
+    <nuxt-image src="+jpg-cover:/nuxt-icon.png" width="150" height="150"></nuxt-image>
   </div>
 
   </code-block>
@@ -114,7 +114,7 @@ As you may notice providers and presets has a different in their usage, and it i
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
@@ -147,7 +147,7 @@ As you may notice providers and presets has a different in their usage, and it i
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </div>
 
   </code-block>
@@ -164,7 +164,7 @@ Legacy mode is just and `<img>` tag with `srcsets`, no fixed size and no lazy lo
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
@@ -294,15 +294,15 @@ There are five standard values you can use with this property.
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image size="cover" src="/nuxt-icon.png" width="200px" height="100px" />
+    <nuxt-image size="cover" src="/nuxt-icon.png" width="200" height="100" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-  <nuxt-image size="cover" src="/nuxt-icon.png" width="200px" height="100px" />
+  <nuxt-image size="cover" src="/nuxt-icon.png" width="200" height="100" />
   </div>
 
   </code-block>
@@ -319,8 +319,8 @@ In addition of standard operation, every provider can have their own operation.
   <template>
     <nuxt-image
       src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png"
-      width="300px" 
-      height="169px"
+      width="300" 
+      height="169"
       :operations="imageOperations"
     />
   </template>
@@ -342,8 +342,8 @@ In addition of standard operation, every provider can have their own operation.
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
     <nuxt-image
-      width="300px" 
-      height="169px"
+      width="300" 
+      height="169"
       src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" :operations="{r: '0:100'}"
     />
     <a href="https://cloudinary.com/documentation/image_transformations#rounding_corners_and_creating_circular_images">
@@ -352,4 +352,4 @@ In addition of standard operation, every provider can have their own operation.
   </div>
 
   </code-block>
-</code-group>
+</code-group>
diff --git a/docs/content/en/options.md b/docs/content/en/options.md
@@ -42,15 +42,15 @@ Here is a sample to use `cloudinary`:
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300px" height="169px" />
+    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169"></nuxt-image>
   </div>
 
   </code-block>
@@ -91,21 +91,15 @@ Presets are collections of pre-defined configuration for your projects. Presets
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image
-      legacy
-      src="+avatar:/nuxt-icon.png"
-    />
+    <nuxt-image legacy src="+avatar:/nuxt-icon.png" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image
-      legacy
-      src="+avatar:/nuxt-icon.png"
-    />
+    <nuxt-image legacy src="+avatar:/nuxt-icon.png"></nuxt-image>
   </div>
 
   </code-block>

diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -6,6 +6,37 @@ export default theme({
     // https://github.com/bdrtsky/nuxt-ackee
     'nuxt-ackee'
   ],
+  modules: [
+    '@nuxt/image'
+  ],
+  image: {
+    providers: {
+      local: {},
+      cloudinary: {
+        baseURL: 'https://res.cloudinary.com/nuxt/image/upload/'
+      },
+      random: '~~/providers/random'
+    },
+    presets: [
+      {
+        name: 'jpg-cover',
+        modifiers: {
+          size: 'cover',
+          format: 'jpg',
+          width: 300,
+          height: 300
+        }
+      },
+      {
+        name: 'avatar',
+        modifiers: {
+          format: 'jpg',
+          width: 50,
+          height: 50
+        }
+      }
+    ]
+  },
   ackee: {
     server: 'https://ackee.nuxtjs.com',
     domainId: '7e54dba4-1702-4c2a-9fb4-e0657449fb95',

diff --git a/docs/package.json b/docs/package.json
@@ -9,5 +9,8 @@
     "@nuxt/content-theme-docs": "latest",
     "nuxt-ackee": "latest",
     "nuxt-edge": "latest"
+  },
+  "dependencies": {
+    "@nuxt/image": "^0.0.1"
   }
 }
diff --git a/docs/providers/random/index.js b/docs/providers/random/index.js
@@ -0,0 +1,6 @@
+export default function (providerOptions) {
+  return {
+    runtime: require.resolve('./runtime'),
+    runtimeOptions: providerOptions
+  }
+}
diff --git a/docs/providers/random/runtime.js b/docs/providers/random/runtime.js
@@ -0,0 +1,7 @@
+export default {
+  generateURL (src, modifiers, options) {
+    return {
+      url: 'https://source.unsplash.com/random/600x400'
+    }
+  }
+}