From 63015f4cae3cd783e84071dd9b6117c75a7a7933 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Mon, 23 Jan 2017 14:53:23 -0800
Subject: [PATCH] docs: inline js and css in "getting started" section

To fix confusion about where the <script> tag should be added. It
belongs right before </body>, not in the <head>.

Prompted by this issue: https://github.com/feross/render-media/issues/23
---
 docs/get-started.md | 236 +++++++++++++++++++++-----------------------
 1 file changed, 115 insertions(+), 121 deletions(-)
diff --git a/docs/get-started.md b/docs/get-started.md
index a9369cc6..1c9e3547 100644
--- a/docs/get-started.md
+++ b/docs/get-started.md
@@ -200,85 +200,56 @@ keep in mind that the browser can only download torrents that are seeded by
 WebRTC peers (web peers). Use [WebTorrent Desktop](https://webtorrent.io/desktop)
 or [Instant.io](https://instant.io) to seed torrents to the WebTorrent network.
 
-Javascript:
-
-```js
-var torrentId = 'https://webtorrent.io/torrents/sintel.torrent'
-
-var client = new WebTorrent()
-
-// HTML elements
-var $body = document.body
-var $progressBar = document.querySelector('#progressBar')
-var $numPeers = document.querySelector('#numPeers')
-var $downloaded = document.querySelector('#downloaded')
-var $total = document.querySelector('#total')
-var $remaining = document.querySelector('#remaining')
-var $uploadSpeed = document.querySelector('#uploadSpeed')
-var $downloadSpeed = document.querySelector('#downloadSpeed')
-
-// Download the torrent
-client.add(torrentId, function (torrent) {
-
-  // Stream the file in the browser
-  torrent.files[0].appendTo('#output')
-
-  // Trigger statistics refresh
-  torrent.on('done', onDone)
-  setInterval(onProgress, 500)
-  onProgress()
-
-  // Statistics
-  function onProgress () {
-    // Peers
-    $numPeers.innerHTML = torrent.numPeers + (torrent.numPeers === 1 ? ' peer' : ' peers')
-
-    // Progress
-    var percent = Math.round(torrent.progress * 100 * 100) / 100
-    $progressBar.style.width = percent + '%'
-    $downloaded.innerHTML = prettyBytes(torrent.downloaded)
-    $total.innerHTML = prettyBytes(torrent.length)
-
-    // Remaining time
-    var remaining
-    if (torrent.done) {
-      remaining = 'Done.'
-    } else {
-      remaining = moment.duration(torrent.timeRemaining / 1000, 'seconds').humanize()
-      remaining = remaining[0].toUpperCase() + remaining.substring(1) + ' remaining.'
-    }
-    $remaining.innerHTML = remaining
-
-    // Speed rates
-    $downloadSpeed.innerHTML = prettyBytes(torrent.downloadSpeed) + '/s'
-    $uploadSpeed.innerHTML = prettyBytes(torrent.uploadSpeed) + '/s'
-  }
-  function onDone () {
-    $body.className += ' is-seed'
-    onProgress()
-  }
-})
-
-// Human readable bytes util
-function prettyBytes(num) {
-  var exponent, unit, neg = num < 0, units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  if (neg) num = -num
-  if (num < 1) return (neg ? '-' : '') + num + ' B'
-  exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1)
-  num = Number((num / Math.pow(1000, exponent)).toFixed(2))
-  unit = units[exponent]
-  return (neg ? '-' : '') + num + ' ' + unit
-}
-```
-
-HTML:
-
 ```html
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>WebTorrent video player</title>
+    <style>
+      #output video {
+        width: 100%;
+      }
+      #progressBar {
+          height: 5px;
+          width: 0%;
+          background-color: #35b44f;
+          transition: width .4s ease-in-out;
+      }
+      body.is-seed .show-seed {
+          display: inline;
+      }
+      body.is-seed .show-leech {
+          display: none;
+      }
+      .show-seed {
+          display: none;
+      }
+      #status code {
+          font-size: 90%;
+          font-weight: 700;
+          margin-left: 3px;
+          margin-right: 3px;
+          border-bottom: 1px dashed rgba(255,255,255,0.3);
+      }
+
+      .is-seed #hero {
+          background-color: #154820;
+          transition: .5s .5s background-color ease-in-out;
+      }
+      #hero {
+          background-color: #2a3749;
+      }
+      #status {
+          color: #fff;
+          font-size: 17px;
+          padding: 5px;
+      }
+      a:link, a:visited {
+          color: #30a247;
+          text-decoration: none;
+      }
+    </style>
   </head>
   <body>
     <div id="hero">
@@ -310,59 +281,82 @@ HTML:
     </div>
     <!-- Include the latest version of WebTorrent -->
     <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
-    <!-- Moment is used to show human readable remaining time -->
+
+    <!-- Moment is used to show a human-readable remaining time -->
     <script src="http://momentjs.com/downloads/moment.min.js"></script>
+
+    <script>
+      var torrentId = 'https://webtorrent.io/torrents/sintel.torrent'
+
+      var client = new WebTorrent()
+
+      // HTML elements
+      var $body = document.body
+      var $progressBar = document.querySelector('#progressBar')
+      var $numPeers = document.querySelector('#numPeers')
+      var $downloaded = document.querySelector('#downloaded')
+      var $total = document.querySelector('#total')
+      var $remaining = document.querySelector('#remaining')
+      var $uploadSpeed = document.querySelector('#uploadSpeed')
+      var $downloadSpeed = document.querySelector('#downloadSpeed')
+
+      // Download the torrent
+      client.add(torrentId, function (torrent) {
+
+        // Stream the file in the browser
+        torrent.files[0].appendTo('#output')
+
+        // Trigger statistics refresh
+        torrent.on('done', onDone)
+        setInterval(onProgress, 500)
+        onProgress()
+
+        // Statistics
+        function onProgress () {
+          // Peers
+          $numPeers.innerHTML = torrent.numPeers + (torrent.numPeers === 1 ? ' peer' : ' peers')
+
+          // Progress
+          var percent = Math.round(torrent.progress * 100 * 100) / 100
+          $progressBar.style.width = percent + '%'
+          $downloaded.innerHTML = prettyBytes(torrent.downloaded)
+          $total.innerHTML = prettyBytes(torrent.length)
+
+          // Remaining time
+          var remaining
+          if (torrent.done) {
+            remaining = 'Done.'
+          } else {
+            remaining = moment.duration(torrent.timeRemaining / 1000, 'seconds').humanize()
+            remaining = remaining[0].toUpperCase() + remaining.substring(1) + ' remaining.'
+          }
+          $remaining.innerHTML = remaining
+
+          // Speed rates
+          $downloadSpeed.innerHTML = prettyBytes(torrent.downloadSpeed) + '/s'
+          $uploadSpeed.innerHTML = prettyBytes(torrent.uploadSpeed) + '/s'
+        }
+        function onDone () {
+          $body.className += ' is-seed'
+          onProgress()
+        }
+      })
+
+      // Human readable bytes util
+      function prettyBytes(num) {
+        var exponent, unit, neg = num < 0, units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        if (neg) num = -num
+        if (num < 1) return (neg ? '-' : '') + num + ' B'
+        exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1)
+        num = Number((num / Math.pow(1000, exponent)).toFixed(2))
+        unit = units[exponent]
+        return (neg ? '-' : '') + num + ' ' + unit
+      }
+    </script>
   </body>
 </html>
 ```
 
-CSS:
-
-```css
-#output video {
-  width: 100%;
-}
-#progressBar {
-    height: 5px;
-    width: 0%;
-    background-color: #35b44f;
-    transition: width .4s ease-in-out;
-}
-body.is-seed .show-seed {
-    display: inline;
-}
-body.is-seed .show-leech {
-    display: none;
-}
-.show-seed {
-    display: none;
-}
-#status code {
-    font-size: 90%;
-    font-weight: 700;
-    margin-left: 3px;
-    margin-right: 3px;
-    border-bottom: 1px dashed rgba(255,255,255,0.3);
-}
-
-.is-seed #hero {
-    background-color: #154820;
-    transition: .5s .5s background-color ease-in-out;
-}
-#hero {
-    background-color: #2a3749;
-}
-#status {
-    color: #fff;
-    font-size: 17px;
-    padding: 5px;
-}
-a:link, a:visited {
-    color: #30a247;
-    text-decoration: none;
-}
-```
-
 ## More Documentation
 
 Check out the [API Documentation](//webtorrent.io/docs) and [FAQ](//webtorrent.io/faq) for more details.
