Inline servo demos into the website

_data/menu.json

@@ -11,7 +11,7 @@
   },
   { "title": "Download", "url": "/download/" },
   { "title": "Blog", "url": "/blog/" },
-  { "title": "Demos", "url": "https://demo.servo.org/" },
+  { "title": "Demos", "url": "/demos/" },
   {
     "title": "About",
     "url": "#",

assets/js/load-demos.js

@@ -0,0 +1,84 @@
+function fetchJSON(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            callback(JSON.parse(xhr.responseText));
+        }
+    };
+    xhr.open('GET', url, true);
+    xhr.send();
+}
+
+function createExperimentElement(info) {
+    var article = document.createElement('article');
+    article.className = 'experiment-preview';
+
+    var h4 = document.createElement('h4');
+    h4.textContent = info.name;
+
+    var link = document.createElement('a');
+    link.href = info.href ? "https://demo.servo.org/" + info.href : "https://youtu.be/" + info.youtube_id;
+    link.appendChild(h4);
+
+    article.appendChild(link);
+
+    var image = document.createElement('img');
+    if (info.href) {
+        image.src = "https://demo.servo.org/" + info.href + 'thumb.png';
+    } else {
+        image.src = 'https://img.youtube.com/vi/' + info.youtube_id + '/0.jpg';
+    }
+    image.width = 256;
+    image.height = 256;
+    link.appendChild(image);
+
+    var desc = document.createElement('div');
+    desc.className = 'experiment-desc';
+
+    var shortDesc = document.createElement('div');
+    shortDesc.innerHTML = info.desc;
+    desc.appendChild(shortDesc);
+
+    if (info.long_description) {
+        var longDesc = document.createElement('div');
+        longDesc.innerHTML = info.long_description;
+        longDesc.style.display = 'none';
+        desc.appendChild(longDesc);
+
+        var toggle = document.createElement('a');
+        toggle.textContent = 'Read More';
+        toggle.style.display = 'block';
+        toggle.style.marginTop = '10px';
+        toggle.style.color = 'blue';
+        toggle.style.cursor = 'pointer';
+        desc.appendChild(toggle);
+
+        toggle.onclick = function() {
+            if (longDesc.style.display === 'none') {
+                longDesc.style.display = 'block';
+                toggle.textContent = 'Read Less';
+            } else {
+                longDesc.style.display = 'none';
+                toggle.textContent = 'Read More';
+            }
+        };
+    }
+
+    article.appendChild(desc);
+    return article;
+}
+
+function addExperiments(containerId, experiments) {
+    var container = document.getElementById(containerId);
+    experiments.forEach(function(experiment) {
+        container.appendChild(createExperimentElement(experiment));
+    });
+}
+
+window.onload = function() {
+    fetchJSON('https://demo.servo.org/experiments.json', function(data) {
+        addExperiments('other-experiments', data.experiments);
+        addExperiments('technical-tests', data.tests);
+        addExperiments('videos', data.videos);
+    });
+};

demos.md

@@ -0,0 +1,72 @@
+---
+layout: default.html
+title: Demos
+---
+<style>
+
+.experiments-container {
+  font-size: 20px;
+  margin-bottom: 40px;
+}
+.experiments-group {
+  margin: auto;
+  margin-top: 10px;
+  width: 100%;
+  clear: both;
+}
+.experiment-previews {
+  text-align: left;
+  clear: both;
+}
+
+.experiment-preview {
+  display: inline-block;
+  padding: 20px;
+  margin: 20px;
+  transition: opacity 0.5s ease-in-out, background-color 0.25s ease-in-out;
+  text-align: center;
+  box-shadow: 3px 3px 5px #7c7c7c;
+  background-color: #dceff6;
+  vertical-align: top;
+}
+
+.experiment-preview a {
+  text-decoration: none;
+  color: initial;
+}
+.experiment-preview h2 {
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.experiment-preview:hover {
+  background-color: #a4e6ff;
+}
+
+.experiment-preview .experiment-desc {
+  width: 256px;
+  text-align: left;
+}
+</style>
+<div class="inner-container wpt-score-page">
+  <h1>{{ title }}</h1>
+  <p class="subtitle">
+    This page contains a number of demonstrations of Servo's rendering capabilities. The source code for these demos live in the <a href="https://github.com/servo/servo-experiments" target="_blank">servo-experiments</a> repo.
+  </p>
+
+  <main class="experiments-container">
+      <section class="experiments-group" id="other-experiments">
+          <h2 class="heading">Servo Experiments</h2>
+          <div class="experiment-previews"></div>
+      </section>
+      <section class="experiments-group" id="technical-tests">
+          <h2 class="heading">Servo Technical Tests</h2>
+          <div class="experiment-previews"></div>
+      </section>
+      <section class="experiments-group" id="videos">
+          <h2 class="heading">Servo Videos</h2>
+          <div class="experiment-previews"></div>
+      </section>
+  </main>
+</div>
+<script type="text/javascript" src="{{ '/js/load-demos.js' | url }}"></script>