From 0b5156cb4e67fb3c4c5da57dca1ebb542f72212a Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sat, 10 Mar 2018 19:59:21 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20add=20code=20sample=20to=20examp?=
 =?UTF-8?q?les?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/index.html | 88 ++++++++++++++++++++++++++++++++-----------------
 docs/index.js   | 53 ++++++++++++++++++++++++++++-
 2 files changed, 110 insertions(+), 31 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 32cffe2..f2de859 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,8 +5,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>VuePromised</title>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.0.0/dist/siimple.min.css">
+  <title>VuePromised</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.0.0/dist/siimple.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/prismjs@1.12.2/themes/prism.css">
 
  <style>
    figure {
@@ -29,6 +30,9 @@
      display: flex;
      align-items: center;
    }
+   [v-cloak] {
+     display: none;
+   }
  </style>
 </head>
 
@@ -36,7 +40,9 @@
 
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="https://unpkg.com/vue"></script>
-  <script src="https://unpkg.com/vue-promised"></script>
+  <script src="https://unpkg.com/vue-promised/dist/vue-promised.min.js"></script>
+  <script src="https://unpkg.com/prismjs@1.12.2/prism.js"></script>
+  <script src="https://unpkg.com/vue-prism-component@1.0.1/dist/vue-prism-component.min.js"></script>
 
   <div id="app">
 
@@ -51,33 +57,38 @@
       </div>
     </div>
 
-    <div class="siimple-content--medium">
-      <div class="siimple-box siimple-box--white">
-        <h2 class="siimple-h2 text-center">Single promise</h2>
+    <div class="siimple-content--medium" v-cloak>
+      <div class="siimple-box siimple-box--white text-center">
+        <h2 class="siimple-h2">Single promise</h2>
 
-        <div class="siimple-content--fluid text-center">
+        <div class="siimple-content--fluid">
           <button class="siimple-btn siimple-btn--blue" @click="trySuccess">Fetch a new comic</button>
           <button class="siimple-btn siimple-btn--red" @click="tryError">Purposely fail</button>
         </div>
 
         <div class="space"></div>
 
-        <Promised :promise="promise">
-          <div class="siimple-spinner siimple-spinner--teal"></div>
-          <figure class="text-center" slot-scope="data">
-            <img :alt="data.transcript" :src="data.img"/>
-            <figcaption>#{{ data.num }} - {{ data.title }}</figcaption>
-          </figure>
-          <div slot="catch" slot-scope="error" class="siimple-alert siimple-alert--orange">
-            Error: {{ error.message }}
-          </div>
-        </Promised>
+        <demo-code :code="samples.single">
+          <Promised :promise="promise">
+            <div class="siimple-spinner siimple-spinner--teal"></div>
+            <figure class="text-center" slot-scope="data">
+              <img :alt="data.transcript" :src="data.img"/>
+              <figcaption>#{{ data.num }} - {{ data.title }}</figcaption>
+            </figure>
+            <div slot="catch" slot-scope="error" class="siimple-alert siimple-alert--orange">
+              Error: {{ error.message }}
+            </div>
+          </Promised>
+        </demo-code>
 
       </div>
 
       <div class="siimple-box siimple-box--white text-center">
         <h2 class="siimple-h2">Multiple promises</h2>
 
+        <a class="siimple-link siimple-small" target="_blank" href="https://github.com/posva/vue-promised/issues/4">psst, I need help to improve the API, see #4 to help</a>
+        <br/>
+
         <button class="siimple-btn siimple-btn--blue" @click="tryMultipleSuccess">Add another image</button>
         <button class="siimple-btn siimple-btn--red" @click="tryMultipleError">Fail one promise</button>
         <button class="siimple-btn siimple-btn--navy" @click="resetMultiple">Reset promises</button>
@@ -85,19 +96,22 @@ <h2 class="siimple-h2">Multiple promises</h2>
 
         <div class="space"></div>
 
-        <Promised :promises="promises" ref="multiplePromised">
-          <div class="siimple-spinner siimple-spinner--teal"></div>
-          <div slot-scope="items">
-            <h3>{{ items.length }} promises resolved</h3>
-            <figure v-for="item in items">
-              <img :alt="item.transcript" :src="item.img"/>
-              <figcaption>#{{ item.num }} - {{ item.title }}</figcaption>
-            </figure>
-          </div>
-          <div slot="catch" slot-scope="errors" class="siimple-tip siimple-tip--exclamation siimple-tip--red">
-            Failed {{ errors.length }} promises
-          </div>
-        </Promised>
+        <demo-code :code="samples.multiple">
+          <Promised :promises="promises" ref="multiplePromised">
+            <div class="siimple-spinner siimple-spinner--teal"></div>
+            <div slot-scope="items">
+              <h3>{{ items.length }} promises resolved</h3>
+              <figure v-for="item in items" :key="item.num">
+                <img :alt="item.transcript" :src="item.img"/>
+                <figcaption>#{{ item.num }} - {{ item.title }}</figcaption>
+              </figure>
+            </div>
+            <div slot="catch" slot-scope="errors" class="siimple-tip siimple-tip--exclamation siimple-tip--red">
+              Failed {{ errors.length }} promises
+            </div>
+          </Promised>
+        </demo-code>
+
       </div>
 
       <div class="siimple-footer" align="center">
@@ -107,6 +121,20 @@ <h3>{{ items.length }} promises resolved</h3>
     </div>
   </div>
 
+  <script type="text/x-template" id="demo-code">
+    <div>
+      <h5>
+        <a class="siimple-link" href="#" role="button" @click.prevent="showCode = !showCode">{{ seeLabel }}</a>
+      </h5>
+      <div class="demo__demo" v-if="!showCode">
+        <slot/>
+      </div>
+      <div class="demo__code" v-else>
+        <Prism language="html" :code="code"/>
+      </div>
+    </div>
+  </script>
+
   <script src="index.js"></script>
 
 </body>
diff --git a/docs/index.js b/docs/index.js
index 6db06cb..73061b8 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -1,4 +1,4 @@
-/* global Vue, VuePromised, axios */
+/* global Vue, VuePromised, axios, PrismComponent */
 // eslint-disable-next-line
 const delay = (t, value) => new Promise(r => setTimeout(r.bind(null, value), t))
 
@@ -11,6 +11,27 @@ function getRandomImage (max) {
     .then(res => res.data)
 }
 
+Vue.component('DemoCode', {
+  template: '#demo-code',
+  props: {
+    code: String,
+  },
+
+  data () {
+    return {
+      showCode: false,
+    }
+  },
+
+  computed: {
+    seeLabel () {
+      return this.showCode ? 'See demo' : 'See code'
+    },
+  },
+
+  components: { Prism: PrismComponent },
+})
+
 // eslint-disable-next-line
 new Vue({
   el: '#app',
@@ -18,6 +39,36 @@ new Vue({
   data: () => ({
     promise: null,
     promises: [],
+
+    samples: {
+      single: `\
+<Promised :promise="promise">
+  <div class="loading-spinner"></div>
+  <figure slot-scope="data">
+    <img :alt="data.transcript" :src="data.img"/>
+    <figcaption>#{{ data.num }} - {{ data.title }}</figcaption>
+  </figure>
+  <div slot="catch" slot-scope="error" class="message--error">
+    Error: {{ error.message }}
+  </div>
+</Promised>
+`,
+      multiple: `\
+<Promised :promises="promises">
+  <div class="loading-spinner"></div>
+  <div slot-scope="items">
+    <h3>{{ items.length }} promises resolved</h3>
+    <figure v-for="item in items">
+      <img :alt="item.transcript" :src="item.img"/>
+      <figcaption>#{{ item.num }} - {{ item.title }}</figcaption>
+    </figure>
+  </div>
+  <div slot="catch" slot-scope="errors" class="tip--error">
+    Failed {{ errors.length }} promises
+  </div>
+</Promised>
+`
+    },
   }),
 
   created () {