prime8dev

about.js (5333B)

---

 import { getWakaTimeData, subscribeWakaTimeRefresh } from "./wakatime.js";
 
 let unsubscribeAboutRefresh = null;
 
 export function initAbout() {
   initSSHTipCopy();
 
   const statsContainer = document.getElementById("activity-stats");
   const section = document.getElementById("activity-section");
   if (!statsContainer || !section) return;
 
   function hideActivity() {
     section.style.display = "none";
   }
 
   async function loadActivityData(data = null) {
     if (!section.isConnected) {
       if (unsubscribeAboutRefresh) {
         unsubscribeAboutRefresh();
         unsubscribeAboutRefresh = null;
       }
       return;
     }
 
     try {
       const stats = data || (await getWakaTimeData());
 
       if (!stats || !stats.Weekly || !Array.isArray(stats.Weekly.Days)) {
         hideActivity();
         return;
       }
 
       const totalText = stats.Weekly.TotalText;
       const dayBars = stats.Weekly.Days;
       if (!totalText || dayBars.length === 0) {
         hideActivity();
         return;
       }
 
       const days = dayBars.map((bar) => ({
         dayText: (bar.DayText || "").toLowerCase(),
         timeText: bar.TimeText || "",
         barWidthPercent:
           bar.BarWidthPercent && typeof bar.BarWidthPercent === "string"
             ? bar.BarWidthPercent.trim()
             : "0%",
       }));
 
       renderWeeklyStats(statsContainer, totalText, days);
     } catch {
       hideActivity();
     }
   }
 
   loadActivityData();
 
   if (unsubscribeAboutRefresh) {
     unsubscribeAboutRefresh();
   }
   unsubscribeAboutRefresh = subscribeWakaTimeRefresh((data) => {
     void loadActivityData(data);
   });
 }
 
 function initSSHTipCopy() {
   const copyButton = document.querySelector("[data-ssh-copy]");
   const commandElement = document.querySelector("[data-ssh-command]");
   if (!copyButton || !commandElement || copyButton.dataset.bound === "true") return;
 
   copyButton.dataset.bound = "true";
   copyButton.addEventListener("click", async () => {
     const command = (commandElement.textContent || "").trim();
     if (!command) return;
 
     const copied = await copyToClipboard(command);
     const originalLabel = copyButton.textContent || "copy";
     copyButton.textContent = copied ? "copied" : "failed";
     copyButton.classList.toggle("copied", copied);
 
     window.setTimeout(() => {
       if (!copyButton.isConnected) return;
       copyButton.textContent = originalLabel;
       copyButton.classList.remove("copied");
     }, 1200);
   });
 }
 
 async function copyToClipboard(text) {
   if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
     try {
       await navigator.clipboard.writeText(text);
       return true;
     } catch {
       return false;
     }
   }
 
   const input = document.createElement("textarea");
   input.value = text;
   input.setAttribute("readonly", "");
   input.style.position = "absolute";
   input.style.left = "-9999px";
   document.body.appendChild(input);
   input.select();
   const copied = document.execCommand("copy");
   document.body.removeChild(input);
   return copied;
 }
 
 function renderWeeklyStats(statsContainer, totalText, days) {
   statsContainer.innerHTML = "";
 
   const width = 24;
   const pre = document.createElement("pre");
   pre.className = "weekly-ascii";
 
   const totalLabel = document.createElement("span");
   totalLabel.className = "weekly-total-label";
   totalLabel.textContent = "total: ";
 
   const totalValue = document.createElement("span");
   totalValue.className = "weekly-total-value";
   totalValue.textContent = totalText;
 
   pre.appendChild(totalLabel);
   pre.appendChild(totalValue);
   pre.appendChild(document.createTextNode("\n\n"));
 
   days.forEach((day, index) => {
     const label = (day.dayText || "").slice(0, 3).padEnd(3, " ");
     const percent = clampPercent(day.barWidthPercent);
     const { filled, empty } = asciiBarSegments(percent, width);
 
     const dayLabel = document.createElement("span");
     dayLabel.className = "weekly-day-label";
     dayLabel.textContent = `${label} `;
 
     const barFrame = document.createElement("span");
     barFrame.className = "weekly-day-bar-frame";
     barFrame.appendChild(document.createTextNode("|"));
 
     const barFilled = document.createElement("span");
     barFilled.className = "weekly-day-bar-filled";
     barFilled.textContent = filled;
 
     const barEmpty = document.createElement("span");
     barEmpty.className = "weekly-day-bar-empty";
     barEmpty.textContent = empty;
 
     const dayTime = document.createElement("span");
     dayTime.className = "weekly-day-time";
     dayTime.textContent = ` ${day.timeText}`;
 
     barFrame.appendChild(barFilled);
     barFrame.appendChild(barEmpty);
     barFrame.appendChild(document.createTextNode("|"));
 
     pre.appendChild(dayLabel);
     pre.appendChild(barFrame);
     pre.appendChild(dayTime);
 
     if (index < days.length - 1) {
       pre.appendChild(document.createTextNode("\n"));
     }
   });
 
   statsContainer.appendChild(pre);
 }
 
 function clampPercent(value) {
   const parsed = Number.parseFloat((value || "0").replace("%", ""));
   if (!Number.isFinite(parsed)) return 0;
   if (parsed < 0) return 0;
   if (parsed > 100) return 100;
   return parsed;
 }
 
 function asciiBarSegments(percent, width) {
   const filled = Math.round((percent / 100) * width);
   return {
     filled: "#".repeat(filled),
     empty: "-".repeat(width - filled),
   };
 }