feat: post refactor + fix title

This commit is contained in:
Barrett Ruth 2025-04-15 14:32:26 -04:00
parent 20ca76756e
commit 83e5c6c61a
11 changed files with 136 additions and 51 deletions

View file

@ -7,7 +7,7 @@ class SiteHeader extends HTMLElement {
const isHome = path === "/" || path === "/index.html";
const topic = this.getTopic();
const promptText = isHome ? "barrett@ruth:~$" : `barrett@ruth:~$ ${topic}`;
const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
const clickHandler = isHome ? "refresh(event)" : "goHome(event)";
@ -20,9 +20,9 @@ class SiteHeader extends HTMLElement {
</div>
</a>
<div class="header-links">
<a target="_blank" href="/public/resume.pdf">Resume</a>
<a target="_blank" href="/public/transcript.pdf">Transcript</a>
<a href="/about.html">About</a>
<a target="_blank" href="/public/resume.pdf">resume</a>
<a target="_blank" href="/public/transcript.pdf">transcript</a>
<a href="/about.html">about</a>
</div>
</header>
`;
@ -30,10 +30,11 @@ class SiteHeader extends HTMLElement {
getTopic() {
const pathname = window.location.pathname.split("/");
if (pathname.includes("about.html")) {
return "/about";
if (pathname.length === 2 && pathname[1].endsWith(".html")) {
return "/" + pathname[1].replace(".html", "");
} else if (pathname.length >= 3) {
return `/${pathname[1]}`;
return "/" + pathname.slice(2, -1).join("/").replace(".html", "");
}
return "";
}
@ -45,9 +46,9 @@ class SiteFooter extends HTMLElement {
<footer>
<span class="greek-delta">&Delta;</span>
<div class="footer-links">
<a target="_blank" href="https://github.com/barrett-ruth/">GitHub</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 target="_blank" href="https://github.com/barrett-ruth/">github</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>
</div>
</footer>
`;
@ -69,12 +70,12 @@ document.addEventListener("DOMContentLoaded", function () {
align-items: center;
justify-content: space-between;
}
.greek-delta {
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
}
.header-links a,
.footer-links a {
margin-left: 25px;
@ -117,7 +118,7 @@ const getTopicColor = (topicName) => {
switch (topicName) {
case "software":
return "#0073e6";
case "economics":
case "operating-systems":
return "#009975";
case "algorithms":
return "#6a0dad";

View file

@ -1,26 +1,21 @@
const postMapping = new Map([
[
"Software",
"software",
[
{ name: "from github pages to aws", link: "from-github-pages-to-aws" },
{ name: "designing this website", link: "designing-this-website" },
// { name: "working in the terminal" },
"from github pages to aws",
"designing this website",
// "working in the terminal",
],
],
["operating systems", ["building an os"]],
[
"Economics",
[{ name: "models of production", link: "models-of-production" }],
],
[
"Algorithms",
"algorithms",
[
{
name: "competitive programming log",
link: "competitive-programming-log",
},
{ name: "leetcode daily", link: "leetcode-daily" },
{ name: "practice makes perfect", link: "practice-makes-perfect" },
{ name: "extrema circular buffer", link: "extrema-circular-buffer" },
"competitive programming log",
"leetcode daily",
"practice makes perfect",
"extrema circular buffer",
"models of production",
],
],
]);
@ -44,14 +39,29 @@ function renderPosts(topic) {
const posts = document.getElementById("posts");
posts.innerHTML = "";
postMapping.get(topic).forEach(({ name: postName, link: postLink }) => {
// Normalize topic for lookup (in case it has spaces, like "operating systems")
const normalizedTopic = topic.trim();
// Get posts for this topic
const topicPosts = postMapping.get(normalizedTopic);
if (!topicPosts) {
console.error(`No posts found for topic: ${normalizedTopic}`);
return;
}
topicPosts.forEach((postName) => {
if (typeof postName !== "string") return;
const post = document.createElement("div");
post.classList.add("post");
const link = document.createElement("a");
link.href = postLink
? `/posts/${topic.toLowerCase()}/${postLink}.html`
: `/wip.html`;
const postLink = postName.toLowerCase().replace(/\s+/g, "-");
// Convert topic to URL-friendly format
const topicSlug = normalizedTopic.toLowerCase().replace(/\s+/g, "-");
link.href = `/posts/${topicSlug}/${postLink}.html`;
link.textContent = postName;
link.style.textDecoration = "underline";
@ -71,7 +81,7 @@ function typechars(e) {
typing = true;
const topic = e.target.textContent;
const terminalText = ` ${topic.toLowerCase()}/`;
const terminalText = ` /${topic.toLowerCase()}`;
const terminalPrompt = document.querySelector(".terminal-prompt");
const delay =
terminalPrompt.innerHTML.length > TERMINAL_PROMPT.length ? 250 : 500;