barrettruth.com/src/components/Header.astro

138 lines
3.5 KiB
Text

---
const path = Astro.url.pathname;
const isHome = path === "/" || path === "/index.html";
function getTopic() {
if (path.startsWith("/about")) {
return "/about";
}
const pathname = path.split("/");
if (pathname.length === 2 && pathname[1].endsWith(".html")) {
return "/" + pathname[1].replace(".html", "");
} else if (pathname.length >= 3) {
return "/" + pathname.slice(2, -1).join("/").replace(".html", "");
}
return "";
}
const topic = getTopic();
const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
---
<header>
<a href="/" style="text-decoration: none; color: inherit">
<div class="terminal-container">
<span class="terminal-prompt">{promptText}</span>
<span class="terminal-cursor"></span>
</div>
</a>
<div class="header-links">
<a target="_blank" href="/resume.pdf">resume</a>
<a target="_blank" href="/transcript.pdf">transcript</a>
<a href="/about/">about</a>
</div>
</header>
<script>
const TERMINAL_PROMPT = "barrett@ruth:~$ ";
let clearing = false;
function clearPrompt(delay, callback) {
if (clearing) return;
clearing = true;
const terminalPrompt = document.querySelector(".terminal-prompt");
if (!terminalPrompt) {
clearing = false;
return;
}
const topicLength =
terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
let i = 0;
function removeChar() {
if (i++ < topicLength) {
terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
setTimeout(removeChar, delay / topicLength);
} else {
i = 0;
clearing = false;
callback && callback();
}
}
removeChar();
}
function goHome(e) {
e.preventDefault();
clearPrompt(500, () => (window.location.href = "/"));
}
function goToAbout(e) {
e.preventDefault();
const terminalPrompt = document.querySelector(".terminal-prompt");
const terminalText = " /about";
const delay = 500;
clearPrompt(delay, () => {
let i = 0;
function typechar() {
if (i < terminalText.length) {
terminalPrompt.innerHTML += terminalText.charAt(i++);
setTimeout(typechar, delay / terminalText.length);
} else {
window.location.href = "/about/";
}
}
typechar();
});
}
document.addEventListener("DOMContentLoaded", () => {
window.TERMINAL_PROMPT = TERMINAL_PROMPT;
window.clearPrompt = clearPrompt;
window.goHome = goHome;
const homeLink = document.querySelector('header a[href="/"]');
if (homeLink) {
const path = window.location.pathname;
const isHome = path === "/" || path === "/index.html";
if (isHome) {
homeLink.addEventListener("click", (e) => {
e.preventDefault();
const topics = document.querySelectorAll(".topic a");
topics.forEach((topic) => {
topic.classList.remove("active");
topic.style.color = "";
});
document.getElementById("posts").innerHTML = "";
clearPrompt(500);
});
} else {
homeLink.addEventListener("click", goHome);
}
}
const aboutLink = document.querySelector('header a[href="/about/"]');
if (aboutLink) {
const path = window.location.pathname;
const isHome = path === "/" || path === "/index.html";
if (isHome) {
aboutLink.addEventListener("click", goToAbout);
}
}
});
</script>
<style>
.header-links a {
margin-left: 25px;
text-decoration: none;
}
</style>