Home update

_includes/demo.html

@@ -1,5 +1,7 @@
-<h2 id="demo">Demo</h2>
-<div id="terminal"></div>
-<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css" />
-<script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
+<div class="demo">
+    <div class="inner"></div>
+</div>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css" />
+<script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
+<script src="https://unpkg.com/[email protected]/lib/xterm-addon-webgl.js"></script>
 <script src="{{ "/js/demo.js" | prepend: site.baseurl }}"></script>

_pages/index.html

@@ -5,17 +5,25 @@
 
 <div class="home">
 
-  <article>
-    {% capture about %}{% include xtermjs-description.md %}{% endcapture %}
-    {{ about | markdownify }}
-  </article>
+  <div class="logo">
+    <img src="/images/logo-full.png">
+  </div>
 
-  {% capture getting_started %}{% include getting-started.md %}{% endcapture %}
-  {{ getting_started | markdownify }}
+  <div class="description">
+    <p>Build terminals in the browser</p>
+  </div>
 
+  <div class="npm-install">
+    <div class="text">npm install xterm</div>
+    <button class="copy" title="Copy to clipboard" onclick="navigator.clipboard.writeText('npm install xterm'); document.querySelector('.copy').textContent = '\u2713'">Copy</div>
+  </div>
+
   {% include demo.html %}
 
+  {% capture getting_started %}{% include getting-started.md %}{% endcapture %}
+  {{ getting_started | markdownify }}
+
   {% capture real_world_uses %}{% include real-world-uses.md %}{% endcapture %}
   {{ real_world_uses | markdownify }}
 
-</div>
+</div>

_sass/_home.scss

@@ -0,0 +1,49 @@
+.home {
+    .logo {
+        text-align: center;
+    }
+
+    .description {
+        // max-width: 500px;
+        text-align: center;
+        font-size: 1.3em;
+        margin: 1em auto;
+        opacity: 0.8;
+    }
+
+    .npm-install {
+        display: flex;
+        width: 300px;
+        margin: auto;
+        justify-content: space-between;
+        background-color: #F8F8F8;
+        padding: 5px 14px 5px 20px;
+        border-radius: 4px;
+        .text {
+            font-family: monospace;
+            padding: 2px 0;
+        }
+        .copy {
+            border: 0;
+            background: none;
+            padding: 2px 6px;
+            &:hover {
+                background-color: #00000020;
+            }
+        }
+    }
+}
+
+.demo {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0 50px;
+    .inner {
+        padding: 10px 20px;
+        border-radius: 4px;
+        background-color: #2D2E2C;
+        &.other-theme {
+            background-color: #282a36;
+        }
+    }
+}

css/main.scss

@@ -186,4 +186,5 @@ h4:hover, h5:hover, h6:hover {
 }
 
 @import 'code';
+@import 'home';
 @import 'syntax_highlight';