Post about new bikes, manually set excerpt

src/assets/js/dvorak-only.js

@@ -0,0 +1,52 @@
+window.customElements.define('dvorak-only', class extends HTMLElement {
+    isDvorak = false;
+    
+    isDvorakSpan = null;
+  
+    constructor() {
+      super();
+    
+      setInterval(this.checkDvorak, 200);
+    }
+  
+    checkDvorak = () => {
+      navigator.keyboard.getLayoutMap().then(layoutMap => {
+          this.isDvorak = layoutMap.get("KeyQ") === "'"
+              && layoutMap.get("KeyW") === ","
+              && layoutMap.get("KeyE") === "."
+              && layoutMap.get("KeyR") === "p"
+              && layoutMap.get("KeyT") === "y"
+              && layoutMap.get("KeyY") === "f";
+        
+          this.isDvorakSpan.innerText = this.isDvorak ? 'Using dvorak' : 'not using dvorak';
+      });
+    }
+    
+    connectedCallback() {
+      const shadow = this.attachShadow({ mode: "open" });
+      
+      const wrapper = document.createElement('div');
+      
+      this.inputSlot = document.createElement('slot');
+      this.inputSlot.setAttribute('name', 'input');
+
+      const input = document.createElement('input');
+      input.setAttribute('type', 'text');
+
+      this.inputSlot.appendChild(input);
+      
+      this.isDvorakSpan = document.createElement('span');
+      this.isDvorakSpan.innerText = this.isDvorak ? 'Using dvorak' : 'not using dvorak';
+        
+      wrapper.appendChild(this.isDvorakSpan);
+      wrapper.appendChild(this.inputSlot);
+
+      shadow.appendChild(wrapper);
+
+      this.inputSlot.assignedNodes()[0].addEventListener('keydown', (e) => {
+        if (!this.isDvorak) {
+          e.preventDefault();
+        }
+      });
+    }
+  });