From d3811df2ce310cdbe2372825a982461a4cf56944 Mon Sep 17 00:00:00 2001
From: Barrett Ruth <br.barrettruth@gmail.com>
Date: Sat, 22 Jun 2024 13:53:26 -0500
Subject: [PATCH] feat: dynamically style each post

---
 scripts/common.js | 13 +++++++++++++
 scripts/index.js  | 15 +--------------
 scripts/post.js   | 13 +++++++++++--
 styles/post.css   |  4 ++--
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/scripts/common.js b/scripts/common.js
index 73774d6..74c1b59 100644
--- a/scripts/common.js
+++ b/scripts/common.js
@@ -28,3 +28,16 @@ function goHome(e) {
 
   clearPrompt(500, () => (window.location.href = "/"));
 }
+
+function getTopicColor(topicName) {
+  switch (topicName) {
+    case "software":
+      return "#0073e6";
+    case "economics":
+      return "#009975";
+    case "trading":
+      return "#d50032";
+    case "algorithms":
+      return "#6a0dad";
+  }
+}
diff --git a/scripts/index.js b/scripts/index.js
index 0f1aa8e..bb4eb38 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -10,7 +10,7 @@ const postMapping = new Map([
   [
     "Economics",
     [
-      { name: "romer-solow model" },
+      { name: "romer-solow model", link: "romer-solow-model" },
       { name: "the short run" },
       { name: "to invest or not to invest" },
     ],
@@ -93,19 +93,6 @@ window.addEventListener("beforeunload", () => {
   document.querySelector(".terminal-prompt").innerHTML = TERMINAL_PROMPT;
 });
 
-function getTopicColor(topicName) {
-  switch (topicName) {
-    case "software":
-      return "#0073e6";
-    case "economics":
-      return "#009975";
-    case "trading":
-      return "#d50032";
-    case "algorithms":
-      return "#6a0dad";
-  }
-}
-
 document.addEventListener("DOMContentLoaded", function () {
   const topics = document.querySelectorAll(".topic a");
 
diff --git a/scripts/post.js b/scripts/post.js
index 2ea8a02..d828aeb 100644
--- a/scripts/post.js
+++ b/scripts/post.js
@@ -1,8 +1,17 @@
+const urlToTopic = () => {
+  return new URL(window.location.href).pathname.split("/")[2];
+};
+
+document.documentElement.style.setProperty(
+  "--topic-color",
+  getTopicColor(urlToTopic()),
+);
+
 document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll("article h2").forEach((h2) => {
     const mdHeading = document.createElement("span");
     mdHeading.textContent = "# ";
-    mdHeading.style.color = "#0073e6";
+    mdHeading.style.color = getTopicColor(urlToTopic());
     h2.prepend(mdHeading);
   });
 
@@ -20,7 +29,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const mdHeading = document.createElement("span");
     mdHeading.textContent = "## ";
-    mdHeading.style.color = "#0073e6";
+    mdHeading.style.color = getTopicColor(urlToTopic());
 
     h3.prepend(mdHeading);
     h3.prepend(toggle);
diff --git a/styles/post.css b/styles/post.css
index d40ca7f..9b1237f 100644
--- a/styles/post.css
+++ b/styles/post.css
@@ -45,7 +45,7 @@ header {
 .post-title::before {
   content: "";
   position: absolute;
-  background-color: #0073e6;
+  background-color: var(--topic-color);
   height: 30px;
   width: 2px;
   bottom: -10px;
@@ -55,7 +55,7 @@ header {
 .post-title::after {
   content: "";
   position: absolute;
-  background-color: #0073e6;
+  background-color: var(--topic-color);
   width: 200px;
   height: 2px;
   bottom: -10px;