content/console.md

@@ -0,0 +1,4 @@
++++
+title = "Console"
+template = "console.html"
++++

sass/console.scss

@@ -0,0 +1,5 @@
+.console {
+  background: gray;
+  width: 80vw;
+  min-height: 20vh;
+}

static/js/console.js

@@ -0,0 +1,43 @@
+const c = document.querySelector(".console")
+const ps1 = "[fr@website ~]$ "
+
+function write(key) {
+  console.log("KEY:", key)
+  switch(key) {
+    case "Enter":
+      c.innerHTML += "<br>"
+      c.innerHTML += ps1
+      return
+    case "000ctrll":
+      c.innerHTML = ""
+      c.innerHTML += ps1
+      return
+    default:
+      c.innerHTML += key
+  }
+}
+
+function customCtrlShortcuts(plusKey) {
+  document.addEventListener("keydown", e => {
+    if(e.ctrlKey && e.key == plusKey) {
+      e.preventDefault()
+      write("000ctrl"+plusKey)
+    }
+  })
+}
+
+// On load init the terminal
+window.addEventListener("load", () => {
+  write("000ctrll")
+})
+
+// Capture the keypress
+window.addEventListener("keypress", e => {
+  console.log(e)
+  write(e.key)
+})
+
+// Register custom ctrl shortcuts
+customCtrlShortcuts("l") // ctrl + l
+customCtrlShortcuts("c") // ctrl + c
+

templates/console.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block styles %}
+	<link rel="stylesheet" href="/console.css">
+{% endblock styles %}
+
+{% block content %}
+	<section class="console content">
+	</section>
+  <script src="/js/console.js" defer></script>
+{% endblock content %}