Show current path in navbar

config.toml

@@ -101,10 +101,6 @@ googleAnalytics = "UA-136337666-1"
     msapplication = "#252627"
     theme = "#252627"
 
-  [params.logo]
-    logoText     = "$ cd /home/"
-    logoHomeLink = "/"
-
   # Uncomment this if you want a portrait on your start page
   [params.portrait]
     path     = "/img/home/portrait.png"

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

@@ -1,38 +1,80 @@
 window.addEventListener("load", () => {
-  const terminal = document.getElementById('nav-terminal')
+  const terminalCommand = document.getElementById("terminal-command")
+  const terminalInput = document.getElementById("terminal-input")
 
-  const keyDown = (e) => {
+  const onSubmit = () => {
-    if (e.keyCode === 13) {
+    if (document.activeElement !== document.body) return
-      if (document.activeElement !== document.body) return
+    if (terminalInput.textContent.length === 0) return
-      if (terminal.textContent.length === 0) return
 
-      if (terminal.textContent.includes("~")) terminal.textContent = ""
+    terminalCommand.click()
+  }
 
-      window.location.href = window.location.origin + "/" + terminal.textContent
+  const handleKey = (e) => {
-      return
+    if (e.keyCode === 13) return onSubmit()
-    }
 
     if (e.keyCode === 8) {
-      terminal.textContent = terminal.textContent.slice(0, -1)
+      terminalInput.textContent = terminalInput.textContent.slice(0, -1)
       return
     }
 
     if (e.keyCode === 192) {
-      if (terminal.textContent.length !== 0) return
+      if (terminalInput.textContent.length !== 0) return
 
-      terminal.textContent += "~"
+      terminalInput.textContent += "~"
+      return
+    }
+
+    if (e.keyCode === 189) {
+      terminalInput.textContent += "-"
       return
     }
 
     if (e.keyCode === 191) {
-      terminal.textContent += "/"
+      let lastChar = terminalInput.textContent.slice(-1)
+      if (lastChar === "/") return
+
+      terminalInput.textContent += "/"
+      return
+    }
+
+    if (e.keyCode === 190) {
+      let lastChar = terminalInput.textContent.slice(-1)
+      if (terminalInput.textContent.length > 0 && lastChar !== "/" && lastChar !== ".") return
+
+      if (terminalInput.textContent.length >= 2 && lastChar === "." && terminalInput.textContent.slice(-2)[0] === ".") return
+
+      terminalInput.textContent += "."
       return
     }
 
-    if (e.keyCode < 65 || e.keyCode > 90) return
+    if (e.keyCode >= 65 && e.keyCode <= 90) {
+      let lastChar = terminalInput.textContent.slice(-1)
+      if (lastChar === "." || lastChar === "~") return
+
+      terminalInput.textContent += e.key.toLowerCase()
+    }
+  }
+
+  const updateCommandHref = () => {
+    let href = terminalInput.textContent
 
-    terminal.textContent += e.key.toLowerCase()
+    if (href.includes("~")) href = "/" + href.substring(1)
+
+    if (href.length === 0)
+      href = window.location.origin
+    else if (href[0] === "/")
+      href = window.location.origin + href
+    else
+      href = window.location.href + href
+
+    terminalCommand.href = href
+  }
+
+  const keyDown = (e) => {
+    handleKey(e)
+    updateCommandHref()
   }
 
-  document.addEventListener('keydown', keyDown)
+  // terminalCommand.addEventListener("click", onSubmit)
+  document.addEventListener("keydown", keyDown)
 })

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

@@ -5,6 +5,7 @@
   font-weight: bold;
   font-display: auto;
   font-family: monospace, monospace;
+  white-space: pre;
 
   img {
     height: 44px;
@@ -12,6 +13,7 @@
 
   &__mark {
     margin-right: 5px;
+    white-space: nowrap;
   }
 
   &__text {

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

@@ -1,13 +1,56 @@
-<a
+{{- /*
-    href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL }}{{ end }}">
+<!-- paths --> */}}
-    <div class="logo">
+{{- $paths := slice }}
-        {{- if .Site.Params.Logo.path }}
+{{- $path := "" }}
+{{- if or (eq .Kind "taxonomy") (or (eq .Kind "term") (eq .Kind "404")) }}
+{{- $path = .RelPermalink }}
+{{- else if .File }}
+{{- $path = string .File }}
+{{- else if .IsHome }}
+{{- $path = "" }}
+{{- else }}
+{{- errorf "Could not find page at url: \"%s\"!" .RelPermalink }}
+{{- end }}
+{{- $path = trim $path "/" }}
+{{- $currentPath := "" }}
+{{- $paths = $paths | append (dict "name" "~" "url" $.Site.BaseURL) }}
+{{- range split $path "/" }}
+{{- $currentPath = printf "%s/%s" $currentPath . }}
+{{- $page := $.GetPage $currentPath }}
+{{- if not $.IsHome }}
+{{- if ne . "_index.md" }}
+{{- if eq $.Kind "404" }}
+{{- $paths = $paths | append (dict "name" "not-found" "url" (printf "%s%s" $.Site.BaseURL (strings.TrimLeft
+"/" $currentPath))) }}
+{{- else }}
+{{/* {{- $title := $page.Title }} */}}
+{{- $title := delimit (split $page.Permalink "/" | last 2 | first 1) ""}}
+{{- $paths = $paths | append (dict "name" ($title) "url" $page.Permalink)}}
+{{- end }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{- $zshPaths := slice }}
+
+{{- range $index, $path := $paths }}
+{{- if ne (index $paths (sub (len $paths) 1)) $path}}
+{{- $zshPaths = $zshPaths | append (dict "name" (printf "%s/" ($path.name | first 1)) "url" $path.url) }}
+{{- else }}
+{{- $zshPaths = $zshPaths | append (dict "name" ($path.name) "url" $path.url) }}
+{{- end }}
+{{- end }}
+
+<div class="logo">
+    {{- if .Site.Params.Logo.path }}
+    <a href="{{ .Site.BaseURL }}">
         {{- partial "image.html" (dict "path" .Site.Params.Logo.path "alt" .Site.Params.Logo.alt) }}
-        {{- else }}
+    </a>
-        <span class="logo__mark">></span>
+    {{- else }}
-        <span class="logo__text">{{- with .Site.Params.Logo.logoText }}{{ . }}{{ else }}$ cd /home/{{ end }}<span
+    <span class="logo__mark">
-                id="nav-terminal"></span></span>
+        {{- range $index, $path := $zshPaths }}<a href="{{ $path.url }}">{{ $path.name }}</a>{{- end }}>
-        <span class="logo__cursor"></span>
+    </span>
-        {{- end }}
+    <a class="logo__text" id="terminal-command" href="/">cd <span id="terminal-input"></span></a>
-    </div>
+    <span class="logo__cursor"></span>
-</a>
+    {{- end }}
+</div>