docs: update theme and tutorial

docs/css/custom.css

@@ -0,0 +1,23 @@
+.termynal-comment {
+    color: #4a968f;
+    font-style: italic;
+    display: block;
+}
+
+.termy [data-termynal] {
+    white-space: pre-wrap;
+}
+
+a.external-link::after {
+    /* \00A0 is a non-breaking space
+        to make the mark be on the same line as the link
+    */
+    content: "\00A0[↪]";
+}
+
+a.internal-link::after {
+    /* \00A0 is a non-breaking space
+        to make the mark be on the same line as the link
+    */
+    content: "\00A0↪";
+}

docs/css/termynal.css

@@ -0,0 +1,110 @@
+/**
+ * termynal.js
+ *
+ * @author Ines Montani <[email protected]>
+ * @version 0.0.1
+ * @license MIT
+ */
+
+:root {
+    --color-bg: #252a33;
+    --color-text: #eee;
+    --color-text-subtle: #a2a2a2;
+}
+
+[data-termynal] {
+    width: 750px;
+    max-width: 100%;
+    background: var(--color-bg);
+    color: var(--color-text);
+    /* font-size: 18px; */
+    font-size: 15px;
+    /* font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace; */
+    font-family: 'Roboto Mono', 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
+    border-radius: 4px;
+    padding: 75px 45px 35px;
+    position: relative;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    line-height: 1.2;
+}
+
+[data-termynal]:before {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    /* A little hack to display the window buttons in one pseudo element. */
+    background: #d9515d;
+    -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+            box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+}
+
+[data-termynal]:after {
+    content: 'bash';
+    position: absolute;
+    color: var(--color-text-subtle);
+    top: 5px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+a[data-terminal-control] {
+    text-align: right;
+    display: block;
+    color: #aebbff;
+}
+
+[data-ty] {
+    display: block;
+    line-height: 2;
+}
+
+[data-ty]:before {
+    /* Set up defaults and ensure empty lines are displayed. */
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+}
+
+[data-ty="input"]:before,
+[data-ty-prompt]:before {
+    margin-right: 0.75em;
+    color: var(--color-text-subtle);
+}
+
+[data-ty="input"]:before {
+    content: '$';
+}
+
+[data-ty][data-ty-prompt]:before {
+    content: attr(data-ty-prompt);
+}
+
+[data-ty-cursor]:after {
+    content: attr(data-ty-cursor);
+    font-family: monospace;
+    margin-left: 0.5em;
+    -webkit-animation: blink 1s infinite;
+            animation: blink 1s infinite;
+}
+
+
+/* Cursor animation */
+
+@-webkit-keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}
+
+@keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}

docs/js/custom.js

@@ -0,0 +1,105 @@
+document.querySelectorAll(".use-termynal").forEach(node => {
+    node.style.display = "block";
+    new Termynal(node, {
+        lineDelay: 500
+    });
+});
+const progressLiteralStart = "---> 100%";
+const promptLiteralStart = "$ ";
+const customPromptLiteralStart = "# ";
+const termynalActivateClass = "termy";
+let termynals = [];
+
+function createTermynals() {
+    document
+        .querySelectorAll(`.${termynalActivateClass} .highlight`)
+        .forEach(node => {
+            const text = node.textContent;
+            const lines = text.split("\n");
+            const useLines = [];
+            let buffer = [];
+            function saveBuffer() {
+                if (buffer.length) {
+                    let isBlankSpace = true;
+                    buffer.forEach(line => {
+                        if (line) {
+                            isBlankSpace = false;
+                        }
+                    });
+                    dataValue = {};
+                    if (isBlankSpace) {
+                        dataValue["delay"] = 0;
+                    }
+                    if (buffer[buffer.length - 1] === "") {
+                        // A last single <br> won't have effect
+                        // so put an additional one
+                        buffer.push("");
+                    }
+                    const bufferValue = buffer.join("<br>");
+                    dataValue["value"] = bufferValue;
+                    useLines.push(dataValue);
+                    buffer = [];
+                }
+            }
+            for (let line of lines) {
+                if (line === progressLiteralStart) {
+                    saveBuffer();
+                    useLines.push({
+                        type: "progress"
+                    });
+                } else if (line.startsWith(promptLiteralStart)) {
+                    saveBuffer();
+                    const value = line.replace(promptLiteralStart, "").trimEnd();
+                    useLines.push({
+                        type: "input",
+                        value: value
+                    });
+                } else if (line.startsWith("// ")) {
+                    saveBuffer();
+                    const value = "💬 " + line.replace("// ", "").trimEnd();
+                    useLines.push({
+                        value: value,
+                        class: "termynal-comment",
+                        delay: 0
+                    });
+                } else if (line.startsWith(customPromptLiteralStart)) {
+                    saveBuffer();
+                    const promptStart = line.indexOf(promptLiteralStart);
+                    if (promptStart === -1) {
+                        console.error("Custom prompt found but no end delimiter", line)
+                    }
+                    const prompt = line.slice(0, promptStart).replace(customPromptLiteralStart, "")
+                    let value = line.slice(promptStart + promptLiteralStart.length);
+                    useLines.push({
+                        type: "input",
+                        value: value,
+                        prompt: prompt
+                    });
+                } else {
+                    buffer.push(line);
+                }
+            }
+            saveBuffer();
+            const div = document.createElement("div");
+            node.replaceWith(div);
+            const termynal = new Termynal(div, {
+                lineData: useLines,
+                noInit: true,
+                lineDelay: 500
+            });
+            termynals.push(termynal);
+        });
+}
+
+function loadVisibleTermynals() {
+    termynals = termynals.filter(termynal => {
+        if (termynal.container.getBoundingClientRect().top - innerHeight <= 0) {
+            termynal.init();
+            return false;
+        }
+        return true;
+    });
+}
+window.addEventListener("scroll", loadVisibleTermynals);
+createTermynals();
+loadVisibleTermynals();