first commit

xterminal/docs/demo/index.md

@@ -0,0 +1,72 @@
+# Live Demo
+
+---
+
+<style>
+    iframe { border: 0 none; }
+    .demo .bp-main { padding: 0; }
+</style>
+
+<div class="demo">
+
+<a href="../demo.html" target="_blank" rel="noreferrer">View fullpage demo</a>
+
+<browser-preview hidelabel>
+
+<iframe src="../demo.html" height="400px"></iframe>
+
+</browser-preview>
+
+</div>
+
+---
+
+:::details Code
+
+:::code-group
+
+```css [styles.css]
+@import url('https://unpkg.com/xterminal/dist/xterminal.css');
+
+.error {
+    color: rgb(248, 88, 88);
+}
+
+.spinner:after {
+    animation: changeContent 0.8s linear infinite;
+    content: "⠋";
+}
+
+@keyframes changeContent {
+    10% { content: "⠙"; }
+    20% { content: "⠹"; }
+    30% { content: "⠸"; }
+    40% { content: "⠼"; }
+    50% { content: "⠴"; }
+    60% { content: "⠦"; }
+    70% { content: "⠧"; }
+    80% { content: "⠇"; }
+    90% { content: "⠏"; }
+}
+```
+
+```html [index.html]
+<link rel="stylesheet" href="styles.css">
+
+<div id="app"></div>
+
+<script src="https://unpkg.com/xterminal/dist/xterminal.umd.js"></script>
+
+<script src="createShell.js"></script>
+<script src="createTerminal.js"></script>
+
+<script>
+    window.onload = () => createTerminal('#app');
+</script>
+```
+
+<<< @/public/demo.js#terminal{js:line-numbers} [createTerminal.js]
+
+<<< @/public/demo.js#shell{js:line-numbers} [createShell.js]
+
+:::