Use CDN bundle in CDN example, add comments about CDN bundle to Robodog Markdown Snippets

//cc @kvz

website/src/examples/i18n/app.html

@@ -1,13 +1,19 @@
-<!-- Basic Uppy styles. You can use Transloadit's CDN, Edgly:
-https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css -->
-<link rel="stylesheet" href="/uppy/uppy.min.css">
+<!-- Load Uppy CSS bundle. It is advisable to install Uppy 
+  from npm/yarn instead, and pick and choose the plugins/styles you need.
+  But for experimenting, you can use Transloadit’s CDN, Edgly: -->
+<link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css">
 
 <div class="UppyDragDrop"></div>
+<div class="for-ProgressBar"></div>
 
-<!-- Load Uppy pre-built bundled version. You can use Transloadit's CDN, Edgly:
-https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js -->
-<script src="/uppy/uppy.min.js"></script>
-<script src="/uppy/locales/ru_RU.min.js"></script>
+<div class="uploaded-files">
+  <h5>Uploaded files:</h5>
+  <ol></ol>
+</div>
+
+<!-- Load Uppy JS bundle. -->
+<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
+<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.9.0/ru_RU.min.js"></script>
 <script>
   var uppy = Uppy.Core({ 
     debug: true, 
@@ -24,8 +30,18 @@ https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js -->
       }
     }
   });
-  uppy.use(Uppy.ProgressBar, { target: 'body', fixed: true, hideAfterFinish: false });
+  uppy.use(Uppy.ProgressBar, { 
+    target: '.for-ProgressBar',
+     hideAfterFinish: false 
+  });
   uppy.use(Uppy.Tus, { endpoint: 'https://master.tus.io/files/' });
+  uppy.on('upload-success', function (file, response) {
+    var url = response.uploadURL
+    var fileName = file.name
+  
+    document.querySelector('.uploaded-files ol').innerHTML +=
+      '<li><a href="' + url + '" target="_blank">' + fileName + '</a></li>'
+  });
 
   console.log('--> Uppy pre-built version with Tus, DragDrop & Russian language pack has loaded');
 </script>

website/src/examples/i18n/app.scss

@@ -0,0 +1,35 @@
+/* Drag & Drop CSS to style the demo itself */
+
+.for-ProgressBar {
+  position: relative;
+}
+
+.uploaded-files{
+  background: rgba(240, 238, 238, 0.35);
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 5px;
+  h5 {
+    margin: 0;
+    font-size: 15px;
+    color: rgb(114, 114, 114);
+    font-weight: 500;
+  }
+  ol {
+    color: rgb(55, 55, 55);
+    margin: 0;
+    padding-left: 18px;
+    li {
+      font-size: 15px;
+      padding-top: 10px;
+      word-break: break-all;
+      a {
+        color: rgb(34, 117, 215);
+        &:hover {
+          color: rgb(34, 117, 215);
+          border-bottom: 1px solid rgb(34, 117, 215);
+        }
+      }
+    }
+  }
+}

website/src/examples/markdown-snippets/app.es6

@@ -1,6 +1,9 @@
 /* eslint-env browser */
 const marked = require('marked')
 const dragdrop = require('drag-drop')
+// Add Robodog JS. It is advisable to install Robodog from npm/yarn.
+// But for experimenting, you can use also Transloadit’s CDN, Edgly:
+// <script src="https://transloadit.edgly.net/releases/uppy/robodog/v1.4.0/robodog.min.js"></script>
 const robodog = require('@uppy/robodog')
 
 const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0'

website/src/examples/markdown-snippets/app.html

@@ -1,4 +1,6 @@
-  <!-- Basic Uppy styles -->
+<!-- Add Robodog styles. It is advisable to install Robodog from npm/yarn.
+  But for experimenting, you can use also Transloadit’s CDN, Edgly:
+  <link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/robodog/v1.4.0/robodog.min.css"> -->
   <link rel="stylesheet" href="/uppy/robodog.min.css">
   <form id="new" class="form-snippet">
     <h2>Create a new snippet</h2>