fix: terminal promtp
This commit is contained in:
parent
cefde24774
commit
4076af3592
6 changed files with 212 additions and 246 deletions
|
|
@ -1,14 +1,10 @@
|
|||
<footer>
|
||||
<span>ʕ •ᴥ•ʔ</span>
|
||||
<div class="footer-links">
|
||||
<a id="gist-link" target="_blank">gist</a>
|
||||
<a id="git-link" target="_blank">git</a>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/barrett-ruth/"
|
||||
>linkedin</a
|
||||
>
|
||||
<a target="_blank" href="mailto:br.barrettruth@gmail.com">email</a>
|
||||
<a href="/gist" data-topic="gist">gist</a>
|
||||
<a href="/git" data-topic="git">git</a>
|
||||
<a href="https://www.linkedin.com/in/barrett-ruth/" data-topic="linkedin" target="_blank">linkedin</a>
|
||||
<a href="mailto:br.barrettruth@gmail.com" data-topic="mail">email</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
|
@ -20,23 +16,12 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
margin-left: 25px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const host = window.location.hostname;
|
||||
const gitLink = document.getElementById("git-link");
|
||||
const gistLink = document.getElementById("gist-link");
|
||||
<script type="module" src="/scripts/index.js"></script>
|
||||
|
||||
if (host.includes("localhost") || host.includes("127.0.0.1")) {
|
||||
gistLink.href = "http://localhost:4321/gist.html";
|
||||
gitLink.href = "http://localhost:4321/git.html";
|
||||
} else {
|
||||
gistLink.href = "https://barrettruth.com/gist.html";
|
||||
gitLink.href = "https://barrettruth.com/git.html";
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
const path = Astro.url.pathname;
|
||||
const isHome = path === "/" || path === "/index.html";
|
||||
const is404 = path === "/404.html" || path === "/404";
|
||||
|
||||
function getTopic() {
|
||||
function deriveTopic() {
|
||||
if (is404) return "/not-found";
|
||||
if (path.startsWith("/about")) return "/about";
|
||||
if (path === "/gist" || path.startsWith("/gist/")) return "/gist";
|
||||
if (path === "/git" || path.startsWith("/git/")) return "/git";
|
||||
if (path.startsWith("/posts/")) {
|
||||
const parts = path.replace(/\/+$/, "").split("/");
|
||||
|
|
@ -14,132 +14,35 @@ function getTopic() {
|
|||
return "";
|
||||
}
|
||||
|
||||
const topic = getTopic();
|
||||
const topic = deriveTopic();
|
||||
const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
|
||||
---
|
||||
|
||||
<header>
|
||||
<a href="/" style="text-decoration: none; color: inherit">
|
||||
<a href="/" class="home-link" 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.html">about</a>
|
||||
<a href="/resume.pdf" data-topic="resume" target="_blank">resume</a>
|
||||
<a href="/transcript.pdf" data-topic="transcript" target="_blank">transcript</a>
|
||||
<a href="/about" data-topic="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.html";
|
||||
}
|
||||
}
|
||||
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 = "";
|
||||
});
|
||||
const posts = document.getElementById("posts");
|
||||
if (posts) posts.innerHTML = "";
|
||||
clearPrompt(500);
|
||||
});
|
||||
} else {
|
||||
homeLink.addEventListener("click", goHome);
|
||||
}
|
||||
}
|
||||
|
||||
const aboutLink = document.querySelector('.header-links a[href="/about.html"]');
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-links {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
|
|
@ -147,10 +50,11 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
|
|||
text-align: right;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.header-links a {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module" src="/scripts/index.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ const topicColor = getTopicColor(category);
|
|||
</div>
|
||||
|
||||
<slot name="scripts" slot="scripts">
|
||||
<script src="/scripts/index.js" is:inline></script>
|
||||
<script src="/scripts/centerKatex.js" is:inline></script>
|
||||
{frontmatter.scripts?.map(script => (
|
||||
<script src={script} type="module"></script>
|
||||
|
|
|
|||
|
|
@ -10,15 +10,23 @@ gists.sort((a, b) => a.slug.localeCompare(b.slug));
|
|||
<BaseLayout title={title}>
|
||||
<slot name="head" slot="head">
|
||||
<link rel="stylesheet" href="/styles/index.css" />
|
||||
<script type="module" src="/scripts/index.js"></script>
|
||||
</slot>
|
||||
|
||||
<div class="content">
|
||||
<ul class="topics">
|
||||
{gists.map((gist) => (
|
||||
<li class="topic">
|
||||
<a href={`/gist/${gist.slug}.html`}>{gist.data.title || gist.slug}</a>
|
||||
<a
|
||||
href={`/gist/${gist.slug}.html`}
|
||||
data-topic="gist"
|
||||
data-gist={gist.slug}
|
||||
>
|
||||
{gist.data.title || gist.slug}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,11 @@ const title = "Git Repositories";
|
|||
<BaseLayout title={title}>
|
||||
<slot name="head" slot="head">
|
||||
<link rel="stylesheet" href="/styles/index.css" />
|
||||
<script type="module" src="/scripts/index.js"></script>
|
||||
</slot>
|
||||
|
||||
<div class="content">
|
||||
<ul class="topics" id="repo-list">
|
||||
<li class="topic"></li>
|
||||
</ul>
|
||||
<ul class="topics" id="repo-list"></ul>
|
||||
<div class="posts" id="posts"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -31,16 +30,16 @@ const title = "Git Repositories";
|
|||
repos.sort((a, b) => a.localeCompare(b));
|
||||
|
||||
for (const name of repos) {
|
||||
const label = name.replace(/\.git$/,"");
|
||||
const cls = `repo-${label}`;
|
||||
const label = name.replace(/\.git$/, "");
|
||||
|
||||
const li = document.createElement("li");
|
||||
li.className = `topic ${cls}`;
|
||||
li.className = `topic repo-${label}`;
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = `${window.location.origin}/git/${label}.html`;
|
||||
a.href = `/git/${label}.html`;
|
||||
a.textContent = label;
|
||||
a.setAttribute("data-topic", name);
|
||||
a.dataset.topic = "git";
|
||||
a.dataset.repo = label;
|
||||
|
||||
li.appendChild(a);
|
||||
listEl.appendChild(li);
|
||||
|
|
@ -51,3 +50,4 @@ const title = "Git Repositories";
|
|||
loadRepos();
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue