Adding post graph to terminal

assets/js/post-graph.js

@@ -0,0 +1,139 @@
+(function () {
+  // Parse the blog posts data
+  const postsData = JSON.parse(
+    document.getElementById("blog-posts-data").textContent,
+  );
+  const weeksContainer = document.getElementById("weeks-container");
+  const infoDiv = document.getElementById("post-graph-info");
+
+  // Calculate date range (365 days back from today)
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const startDate = new Date(today);
+  startDate.setDate(startDate.getDate() - 364);
+
+  // Find the first Monday
+  let firstMonday = new Date(startDate);
+  const dayOfWeek = firstMonday.getDay();
+  if (dayOfWeek === 0) {
+    firstMonday.setDate(firstMonday.getDate() + 1);
+  } else if (dayOfWeek > 1) {
+    firstMonday.setDate(firstMonday.getDate() + (8 - dayOfWeek));
+  }
+
+  // Generate all day blocks
+  let currentDate = new Date(firstMonday);
+  let currentWeek = [];
+  const weeks = [];
+
+  while (currentDate <= today) {
+    const dateKey = currentDate.toISOString().split("T")[0];
+    const posts = postsData[dateKey] || [];
+    const postCount = posts.length;
+
+    let block = "░";
+    let cssClass = "";
+    if (postCount === 1) {
+      block = "▒";
+      cssClass = "has-posts";
+    } else if (postCount > 1) {
+      block = "▓";
+      cssClass = "has-posts multiple-posts";
+    }
+
+    const postTitles = posts.map((p) => p.title).join(" | ");
+    const postUrl = posts.length > 0 ? posts[0].url : "";
+
+    currentWeek.push({
+      block: block,
+      class: cssClass,
+      date: dateKey,
+      postCount: postCount,
+      postTitles: postTitles,
+      postUrl: postUrl,
+      posts: posts,
+    });
+
+    // Check if it's Sunday or the last day
+    const dow = currentDate.getDay();
+    if (dow === 0) {
+      weeks.push([...currentWeek]);
+      currentWeek = [];
+    }
+
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+
+  // Add remaining days if any
+  if (currentWeek.length > 0) {
+    weeks.push(currentWeek);
+  }
+
+  // Function to handle day hover
+  window.handleDayHover = function (element, isEnter) {
+    const date = element.dataset.date;
+    const postCount = parseInt(element.dataset.postCount || "0");
+    const postTitles = element.dataset.postTitles;
+    const infoDiv = document.getElementById("post-graph-info");
+
+    if (isEnter) {
+      document
+        .querySelectorAll(".day-block")
+        .forEach((b) => b.classList.remove("active"));
+
+      const d = new Date(date + "T00:00:00");
+      const formattedDate = d.toLocaleDateString("en-GB", {
+        weekday: "short",
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+
+      if (postCount > 0) {
+        element.classList.add("active");
+        infoDiv.classList.add("active");
+        infoDiv.textContent = `${formattedDate}: ${postTitles}`;
+      } else {
+        infoDiv.classList.remove("active");
+        infoDiv.textContent = `${formattedDate}: No posts`;
+      }
+    } else {
+      element.classList.remove("active");
+      infoDiv.classList.remove("active");
+      infoDiv.textContent = "Hover over a day to see posts";
+    }
+  };
+
+  // Function to handle day click
+  window.handleDayClick = function (element) {
+    const postUrl = element.dataset.postUrl;
+    if (postUrl) {
+      window.location.href = postUrl;
+    }
+  };
+
+  // Render the weeks
+  weeks.forEach((week) => {
+    const weekColumn = document.createElement("div");
+    weekColumn.className = "week-column";
+
+    week.forEach((day) => {
+      const dayBlock = document.createElement("div");
+      dayBlock.className = `day-block ${day.class}`;
+      dayBlock.dataset.date = day.date;
+      dayBlock.dataset.postCount = day.postCount;
+      dayBlock.dataset.postTitles = day.postTitles;
+      dayBlock.dataset.postUrl = day.postUrl;
+      dayBlock.setAttribute("onmouseenter", "handleDayHover(this, true)");
+      dayBlock.setAttribute("onmouseleave", "handleDayHover(this, false)");
+      if (day.postUrl) {
+        dayBlock.setAttribute("onclick", "handleDayClick(this)");
+      }
+      dayBlock.textContent = day.block;
+
+      weekColumn.appendChild(dayBlock);
+    });
+
+    weeksContainer.appendChild(weekColumn);
+  });
+})();

assets/js/terminal.js

@@ -35,19 +35,14 @@ class TerminalShell {
       "",
       "NERV OS v2.015 - MAGI System Interface",
       "Initializing A.T. Field protocols...",
-      "CASPER... ONLINE",
-      "BALTHASAR... ONLINE",
-      "MELCHIOR... ONLINE",
+      "CASPER: ONLINE / BALTHASAR: ONLINE / MELCHIOR: ONLINE",
       "Synchronization ratio: 41.3%... 67.8%... 89.2%... OK",
       "Loading Evangelion Unit-01 core drivers... OK",
-      "Mounting LCL interface... OK",
       "Neural connection established... OK",
-      "",
       "Running pattern analysis... PATTERN BLUE",
       "",
       "All systems optimal.",
       "",
-      "",
     ];
 
     for (let i = 0; i < bootMessages.length; i++) {
@@ -67,6 +62,12 @@ class TerminalShell {
 
     this.printHTML("&nbsp;");
 
+    let postGraph = document.getElementsByClassName("posting-graph")[0];
+    this.printHTML("Retrieving post activity...");
+    this.printHTML("&nbsp;");
+    this.printHTML(postGraph.innerHTML);
+    this.printHTML("&nbsp;");
+
     // Get latest post info
     let latestPostTitle = document.getElementById("latest-post-title");
     let latestPostDate = document.getElementById("latest-post-date");

assets/sass/pages/homepage.scss

@@ -160,6 +160,49 @@
       animation: text-glitch-cycle 3s ease infinite;
     }
   }
+
+  .post-graph-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .post-graph-info {
+    min-height: 2em;
+    color: #888;
+    font-size: 12px;
+  }
+  .post-graph-info.active {
+    color: #4caf50;
+  }
+  .weeks-container {
+    display: flex;
+    gap: 3px;
+    margin-left: 1em;
+  }
+  .week-column {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .day-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    position: relative;
+    color: #555;
+    user-select: none;
+  }
+  .day-block.has-posts {
+    color: #4caf50;
+    cursor: pointer;
+  }
+  .day-block.multiple-posts {
+    color: #2196f3;
+  }
+  .day-block.active {
+    background: rgba(76, 175, 80, 0.2);
+  }
 }
 
 .navigation {