create base.js + css stuff

tcommon/static/css/base.css

@@ -45,12 +45,16 @@ i {
   color: rgb(var(--subtext0));
 }
 
+p {
+  margin: 18px 0;
+}
+
 small {
   color: rgb(var(--subtext0));
   font-size: 12px;
 }
 
-small a {
+small a:not(.fake-link) {
   opacity: 80%;
 }
 
@@ -64,12 +68,21 @@ h1 {
   color: rgb(var(--accent));
 }
 
-a:link,
+a:not(.fake-link):link,
-a:visited {
+a:not(.fake-link):visited {
   color: rgb(var(--accent));
   font-weight: 700;
 }
 
+a.fake-link {
+  color: rgb(var(--text));
+  text-decoration: none;
+}
+
+small a.fake-link {
+  color: rgb(var(--subtext0));
+}
+
 input:not(
   [type="submit"],
   [type="checkbox"]

tcommon/static/js/base.js

@@ -0,0 +1,33 @@
+function timeSince(date) {
+  let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  let dateObject = new Date(date * 1000);
+  let dateString = `${months[dateObject.getMonth()]} ${dateObject.getDate()}, ${dateObject.getFullYear()}, ${String(dateObject.getHours()).padStart(2, "0")}:${String(dateObject.getMinutes()).padStart(2, "0")}:${String(dateObject.getSeconds()).padStart(2, "0")}`;
+  let seconds = Math.floor((+(new Date()) / 1000 - date + 1));
+  let unit = "second";
+  let amount = seconds > 0 ? seconds : 0;
+  const timeAmounts = [
+      { name: "minute", amount: 60 },
+      { name: "hour", amount: 3600 },
+      { name: "day", amount: 86400 },
+      { name: "month", amount: 2592000 },
+      { name: "year", amount: 31536000 }
+  ];
+
+  for (const info of timeAmounts) {
+      let interval = seconds / info.amount;
+      if (interval >= 1) {
+          unit = info.name;
+          amount = Math.floor(interval);
+      }
+  }
+  return `<span data-timestamp="${date}" title="${dateString}">${Math.floor(amount)} ${unit}${Math.floor(amount) == 1 ? "" : "s"} ago</span>`;
+}
+
+function refreshTimestamps() {
+  for (const timestamp of document.querySelectorAll("[data-timestamp]")) {
+    timestamp.innerHTML = timeSince(Number(timestamp.dataset.timestamp));
+  }
+}
+
+setInterval(refreshTimestamps, 5000);
+refreshTimestamps();

tcommon/views/static.py

@@ -23,6 +23,7 @@ file_associations = {
 
 urlpatterns = [path(i, cache_control(**{"max-age": 60 * 60 * 24 * 30})(get_static_serve(i, file_associations[i.split(".")[-1]]))) for i in [
     "css/base.css",
+    "js/base.js",
     "js/theme.js",
     "font/DejaVuSans-Bold.ttf",
     "font/DejaVuSans-BoldItalic.ttf",