feat: dynamically style each post

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";
+  }
+}

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");
 

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);

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;