Add terminal like cd functionality

alternate-navbar
Maik de Kruif 3 years ago
parent 5b63b29d5d
commit c45061440e
Signed by: maik
GPG Key ID: 44A55AD1F0673FA6
  1. 33
      themes/maik-blog/assets/js/nav.js
  2. 5
      themes/maik-blog/assets/scss/_logo.scss
  3. 3
      themes/maik-blog/layouts/partials/javascript.html
  4. 3
      themes/maik-blog/layouts/partials/logo.html

@ -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)
})

@ -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;
}
}
}

@ -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 }}

@ -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 -}}">

Loading…
Cancel
Save