Moving external example code to the examples folder (#2457)

* Moving example code to examples folder

Example code from https://jsfiddle.net/phanan/5h0wx9np

* Example app to pull code from example folder

Once merged the URL https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-template-compilation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-template-compilation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/6744xnjk

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/943zfbsh

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/9c32kev2

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/1oqjojjx

* Example app to pull code from example folder

Once merged the following URLs will work: 
https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview
https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v3?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview
https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v2?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview
https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview

For testing, use:
https://codesandbox.io/embed/github/gareth/vuejs.org/tree/master/src/v2/examples/vue-20-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview
https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v3?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview
https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v2?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview
https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview

* Update migration.md

* Update migration.md

* Moving example code to examples folder

Code from https://jsfiddle.net/yyx990803/mhrckqgq

* Example app to pull code from example folder

Once deployed the link https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-svg-graph?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-svg-graph?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/pnqzspoe

* Example app to pull code from example folder

Once deployed, the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/yyx990803/c5g8xnar

* Example app to pull code from example folder

Once deployed the URL https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/d131Lebj

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-wrapper-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-wrapper-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/yyx990803/mwLbw11k

* Example app to pull code from example folder

Once deployed the URL https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/0dzvcf4d

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/yyx990803/y91wy85p

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/yyx990803/ff0sp9hw

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/chrisvfritz/pyLbpzzx

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/yyx990803/4dr2fLb7

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-todomvc?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-todomvc?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Moving example code to examples folder

Code from https://jsfiddle.net/Tertia/vbyon64p/6

* Example app to pull code from example folder

Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light

* Fixing typo

* Removing unnecessary raw tags

* Removing zero width characters

* Adding exclude for examples source code

Nunjucks throws errors due to use of `{{` and `}}` in the source code of examples, but it isn't rendered so not necessary for it to be checked and can't use 'raw' workaround since it's actual code that gets used.

Author: garethx

_config.yml

@@ -77,6 +77,11 @@ pagination_dir: page
 # Disqus
 disqus_shortname:
 
+# Include/Exclude Files/Folders
+exclude:
+## Exclude example code from Nunjucks
+  - "v2/examples/vue-20-*/*"
+
 # Extensions
 ## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
 ## Themes: https://github.com/hexojs/hexo/wiki/Themes

assets/why-vue/arabic.js.srt

@@ -411,7 +411,7 @@ H2 إلى قائمة غير مرتبة،
 
 94
 00:03:57,460 --> 00:03:59,850
-دعنا نلغي ​​العنصر الأخير من المصفوفة
+دعنا نلغي العنصر الأخير من المصفوفة
 
 95
 00:03:59,850 --> 00:04:01,828

src/v2/examples/commits.md

@@ -6,4 +6,4 @@ order: 1
 
 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/deepstream.md

@@ -6,4 +6,4 @@ order: 9
 
 > This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/elastic-header.md

@@ -4,4 +4,4 @@ type: examples
 order: 7
 ---
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/firebase.md

@@ -6,4 +6,4 @@ order: 10
 
 > This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/grid-component.md

@@ -6,4 +6,4 @@ order: 3
 
 > This is an example of creating a reusable grid component and using it with external data.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/index.md

@@ -6,4 +6,4 @@ order: 0
 
 > Dead simple Markdown editor.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/modal.md

@@ -6,4 +6,4 @@ order: 6
 
 > Features used: component, prop passing, content insertion, transitions.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/select2.md

@@ -6,4 +6,4 @@ order: 8
 
 > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/d131Lebj/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-wrapper-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>