Add terminal like cd functionality

themes/maik-blog/assets/js/nav.js

@@ -0,0 +1,33 @@
+window.addEventListener("load", () => {
+  const terminal = document.getElementById('nav-terminal')
+
+  const keyDown = (e) => {
+    if (e.keyCode === 13) {
+      if (document.activeElement !== document.body) return
+      if (terminal.textContent.length === 0) return
+
+      if (terminal.textContent.includes("~")) terminal.textContent = ""
+
+      window.location.href = window.location.origin + "/" + terminal.textContent
+      return
+    }
+
+    if (e.keyCode === 8) {
+      terminal.textContent = terminal.textContent.slice(0, -1)
+      return
+    }
+
+    if (e.keyCode === 192) {
+      if (terminal.textContent.length !== 0) return
+
+      terminal.textContent += "~"
+      return
+    }
+
+    if ((e.keyCode < 65 || e.keyCode > 90) && (e.keyCode !== 191) ) return
+
+    terminal.textContent += e.key.toLowerCase()
+  }
+
+  document.addEventListener('keydown', keyDown)
+})

themes/maik-blog/assets/scss/_logo.scss

@@ -23,7 +23,7 @@
     width: 10px;
     height: 1rem;
     background: #252627;
-    margin-left: 5px;
+    margin-left: 2px;
     border-radius: 1px;
     animation: cursor 1s infinite;
 
@@ -37,7 +37,6 @@
       animation: none;
     }
   }
-
 }
 
 // // Fading
@@ -68,4 +67,4 @@
   100% {
     visibility: visible;
   }
-}
+}

themes/maik-blog/layouts/partials/javascript.html

@@ -1,7 +1,8 @@
 {{- $main := resources.Get "js/main.js" }}
 {{- $menu := resources.Get "js/menu.js" }}
 {{- $theme := resources.Get "js/theme.js" }}
-{{- $secureJS := slice $main $menu $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $nav := resources.Get "js/nav.js" }}
+{{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
 {{- if .Site.GoogleAnalytics }}

themes/maik-blog/layouts/partials/logo.html

@@ -5,7 +5,8 @@
         <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" />
         {{- else }}
         <span class="logo__mark">></span>
-        <span class="logo__text">{{- with .Site.Params.Logo.logoText }}{{ . }}{{ else }}hello{{ end }}</span>
+        <span class="logo__text">{{- with .Site.Params.Logo.logoText }}{{ . }}{{ else }}$ cd /home/{{ end }}<span
+                id="nav-terminal"></span></span>
         <span class="logo__cursor" style="{{- with.Site.Params.Logo.logoCursorDisabled }}visibility:hidden;{{ end -}}
                    {{- with.Site.Params.Logo.logoCursorColor    }}background-color:{{ . }};{{ end -}}
                    {{- with.Site.Params.Logo.logoCursorAnimate  }}animation-duration:{{ . }};{{ end -}}">