feat: post refactor + fix title
This commit is contained in:
parent
20ca76756e
commit
83e5c6c61a
11 changed files with 136 additions and 51 deletions
|
|
@ -15,13 +15,13 @@
|
|||
<div class="content">
|
||||
<ul class="topics">
|
||||
<li class="topic algorithms">
|
||||
<a href="/algorithms" onclick="typechars(event)">Algorithms</a>
|
||||
<a href="/algorithms" onclick="typechars(event)">algorithms</a>
|
||||
</li>
|
||||
<li class="topic economics">
|
||||
<a href="/economics" onclick="typechars(event)">Economics</a>
|
||||
<li class="topic operating-systems">
|
||||
<a href="/operating-systems" onclick="typechars(event)">operating systems</a>
|
||||
</li>
|
||||
<li class="topic software">
|
||||
<a href="/software" onclick="typechars(event)">Software</a>
|
||||
<a href="/software" onclick="typechars(event)">software</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="posts" id="posts"></div>
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
||||
async
|
||||
></script>
|
||||
<title>Barrett Ruth</title>
|
||||
<title>competitive programming log</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">Competitive Programming Log</h1>
|
||||
<h1 class="post-title">competitive programming log</h1>
|
||||
</header>
|
||||
<article class="post-article">
|
||||
<h2>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
||||
async
|
||||
></script>
|
||||
<title>Barrett Ruth</title>
|
||||
<title>extreme circular buffer</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
||||
async
|
||||
></script>
|
||||
<title>Barrett Ruth</title>
|
||||
<title>leetcode daily</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">Leetcode Daily</h1>
|
||||
<h1 class="post-title">leetcode daily</h1>
|
||||
</header>
|
||||
<article class="post-article">
|
||||
<h2>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
async
|
||||
></script>
|
||||
<script src="/public/d3.js"></script>
|
||||
<title>Barrett Ruth</title>
|
||||
<title>models of production</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">Models of Production</h1>
|
||||
<h1 class="post-title">models of production</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2024-06-22">22/06/2024</time>
|
||||
</p>
|
||||
|
|
@ -14,14 +14,14 @@
|
|||
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
||||
async
|
||||
></script>
|
||||
<title>Barrett Ruth</title>
|
||||
<title>practice makes perfect</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">Practice Makes Perfect</h1>
|
||||
<h1 class="post-title">practice makes perfect</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2024-06-22">05/07/2024</time>
|
||||
</p>
|
||||
|
|
|
|||
74
posts/operating-systems/building-an-os.html
Normal file
74
posts/operating-systems/building-an-os.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/styles/common.css" />
|
||||
<link rel="stylesheet" href="/styles/post.css" />
|
||||
<link rel="icon" type="image/webp" href="/public/logo.webp" />
|
||||
<link href="/public/prism/prism.css" rel="stylesheet" />
|
||||
<link href="/public/prism/prism-theme.css" rel="stylesheet" />
|
||||
<script defer src="/public/prism/prism.js"></script>
|
||||
<title>building an os</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">building an os</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2025-04-15">15/04/2025</time>
|
||||
</p>
|
||||
</header>
|
||||
<article class="post-article">
|
||||
<p></p>
|
||||
<h2>introduction</h2>
|
||||
<div>
|
||||
<p>
|
||||
Building an operating system requires understanding of both hardware and software fundamentals.
|
||||
This post will cover the basics of boot process, memory management, and process scheduling.
|
||||
</p>
|
||||
</div>
|
||||
<h2>boot process</h2>
|
||||
<div>
|
||||
<h3>bootloader</h3>
|
||||
<div>
|
||||
<p>
|
||||
The bootloader is the first piece of code executed when a computer starts up.
|
||||
It's responsible for loading the operating system kernel into memory.
|
||||
</p>
|
||||
</div>
|
||||
<h3>kernel initialization</h3>
|
||||
<div>
|
||||
<p>
|
||||
After the bootloader loads the kernel, the kernel initializes various hardware components
|
||||
and sets up memory management, interrupt handling, and other core services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>memory management</h2>
|
||||
<div>
|
||||
<p>
|
||||
Memory management is a critical component of any operating system.
|
||||
It involves tracking and allocating memory to processes, handling virtual memory,
|
||||
and implementing paging or segmentation.
|
||||
</p>
|
||||
</div>
|
||||
<h2>process scheduling</h2>
|
||||
<div>
|
||||
<p>
|
||||
Process scheduling determines how CPU time is allocated to different processes.
|
||||
Various scheduling algorithms like round-robin, priority-based, and shortest job first
|
||||
can be implemented depending on the use case.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<site-footer></site-footer>
|
||||
<script src="/scripts/common.js"></script>
|
||||
<script src="/scripts/post.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,14 +7,14 @@
|
|||
<link rel="stylesheet" href="/styles/common.css" />
|
||||
<link rel="stylesheet" href="/styles/post.css" />
|
||||
<link rel="icon" type="image/webp" href="/public/logo.webp" />
|
||||
<title>Barrett Ruth</title>
|
||||
<title>designing this website</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">Designing This Website</h1>
|
||||
<h1 class="post-title">designing this website</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2024-06-18"> 18/06/2024 </time>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
<link rel="stylesheet" href="/styles/common.css" />
|
||||
<link rel="stylesheet" href="/styles/post.css" />
|
||||
<link rel="icon" type="image/webp" href="/public/logo.webp" />
|
||||
<title>Barrett Ruth</title>
|
||||
<title>from github pages to AWS</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">From GitHub Pages to AWS</h1>
|
||||
<h1 class="post-title">from github pages to AWS</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2024-06-15">15/06/2024</time>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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">Δ</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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue