Add custom termynal handling for docs, with fenced code

docs/css/custom.css

@@ -0,0 +1,4 @@
+.termynal-comment {
+    color: #999;
+    font-style: italic;
+}

docs/css/termynal.css

@@ -0,0 +1,101 @@
+/**
+ * termynal.js
+ *
+ * @author Ines Montani <ines@ines.io>
+ * @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-family: '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;
+}
+
+[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;
+}
+
+[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/index.md

@@ -44,9 +44,13 @@ Typer stands on the shoulders of a giant. Its only internal dependency is <a hre
 
 ## Installation
 
-```bash
-pip install typer
+<div class="termy">
+```console
+$ pip install typer
+---> 100%
+Successfully installed typer
 ```
+</div>
 
 ## Example
 
@@ -70,45 +74,33 @@ if __name__ == "__main__":
 
 Run your application:
 
-```bash
-python main.py
-```
-
-you will get a response like:
+<div class="termy">
+```console
+// Run your application
+$ python main.py
 
-```
+// You get a nice error, you are missing NAME
 Usage: main.py [OPTIONS] NAME
 Try "main.py --help" for help.
 
 Error: Missing argument "NAME".
-```
-
-Now pass the `NAME` *argument*:
-
-```bash
-python main.py Camila
-```
-
-You will get a response like:
-
-```
-Hello Camila
-```
 
-And you automatically get a `--help` command:
+// You get a --help for free
+$ python main.py --help
 
-```bash
-python main.py --help
-```
-
-shows:
-
-```
 Usage: main.py [OPTIONS] NAME
 
 Options:
   --help  Show this message and exit.
+
+// Now pass the NAME argument
+$ python main.py Camila
+
+Hello Camila
+
+// It works! 🎉
 ```
+</div>
 
 ## Example upgrade
 
@@ -154,15 +146,11 @@ And that will:
 
 ### Run the upgraded example
 
-Get the main `--help`:
-
-```bash
-python main.py --help
-```
-
-shows:
+<div class="termy">
+```console
+// Check the --help
+$ python main.py --help
 
-```
 Usage: main.py [OPTIONS] COMMAND [ARGS]...
 
 Options:
@@ -171,80 +159,49 @@ Options:
 Commands:
   goodbye
   hello
-```
-
-You have 2 sub-commands (the 2 functions), `goodbye` and `hello`.
 
-Now get the help for `hello`:
+// You have 2 sub-commands (the 2 functions): goodbye and hello
 
-```bash
-python main.py hello --help
-```
+// Now get the --help for hello
 
-shows:
+$ python main.py hello --help
 
-```
 Usage: main.py hello [OPTIONS] NAME
 
 Options:
   --help  Show this message and exit.
-```
 
-And now get the help for `goodbye`:
+// And now get the --help for goodbye
 
-```bash
-python main.py goodbye --help
-```
-
-shows:
+$ python main.py goodbye --help
 
-```
 Usage: main.py goodbye [OPTIONS] NAME
 
 Options:
   --formal / --no-formal
   --help                  Show this message and exit.
-```
 
-Notice how it automatically creates a `--formal` and `--no-formal` for your `bool` *option*.
+// Automatic --formal and --no-formal for the bool option 🎉
 
----
+// And if you use it with the hello command
 
-And of course, if you use it, it does what you expect:
+$ python main.py hello Camila
 
-```bash
-python main.py hello Camila
-```
-
-shows:
-
-```
 Hello Camila
-```
-
-Then:
 
-```bash
-python main.py goodbye Camila
-```
+// And with the goodbye command
 
-shows:
+$ python main.py goodbye Camila
 
-```
 Bye Camila!
-```
 
-And:
+// And with --formal
 
-```bash
-python main.py goodbye --formal Camila
-```
+$ python main.py goodbye --formal Camila
 
-shows:
-
-```
 Goodbye Ms. Camila. Have a good day.
 ```
+</div>
 
 ### Recap
 

docs/js/custom.js

@@ -0,0 +1,76 @@
+document.querySelectorAll(".use-termynal").forEach(node => {
+    node.style.display = "block";
+    new Termynal(node);
+});
+const progressLiteralStart = "---> 100%";
+const promptLiteralStart = "$ ";
+const termynalActivateClass = "termy";
+
+function loadVisibleTermynals() {
+    document
+        .querySelectorAll(`.${termynalActivateClass} .codehilite`)
+        .forEach(node => {
+            if (node.getBoundingClientRect().top - innerHeight <= 0) {
+                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.length > 1 && buffer[buffer.length - 1] === "") {
+                            // The 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 {
+                        buffer.push(line);
+                    }
+                }
+                saveBuffer();
+                const div = document.createElement("div");
+                node.replaceWith(div);
+                const termynal = new Termynal(div, {
+                    lineData: useLines
+                });
+            }
+        });
+}
+window.addEventListener("scroll", loadVisibleTermynals);
+loadVisibleTermynals();