I think we should improve the site somewhat.

views/about/index.html

@@ -5,6 +5,7 @@
     <title>MeowcaTheoRange</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/normal.css" />
+    <link rel="stylesheet" href="/styles/windows.css" />
     <link rel="stylesheet" href="/styles/style.css" />
     <style>
       @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@@ -12,10 +13,10 @@
       :root {
         --base-scale: 16px;
 
-        --background-color: hsl(195, 100%, 15%);
-        --color: hsl(195, 100%, 85%);
-        --accent-color: hsl(195, 100%, 50%);
-        --accent-color-fg: hsl(195, 100%, 95%);
+        --background-color: hsl(15, 100%, 15%);
+        --color: hsl(15, 100%, 85%);
+        --accent-color: hsl(15, 100%, 50%);
+        --accent-color-fg: hsl(15, 100%, 95%);
         --font-family: "Lexend Deca";
         --document-width: 40em;
       }
@@ -25,17 +26,24 @@
     <header>
       <section>
         <h1>About</h1>
-        <p>More about me.</p>
+        <p>More about this domain.</p>
       </section>
       <$ nav.html $>
     </header>
     <main>
-      <section>
-        <h2>WIP</h2>
+      <section id="data_get">
+        <h1>Getting domain indexes...</h1>
       </section>
     </main>
+    <div id="WindowHolder"></div>
     <section id="accessibility" hidden></section>
     <script src="/scripts/windows.js"></script>
     <script src="/scripts/accessibility.js"></script>
+    <script src="./scripts/data_get_domain.js"></script>
+    <script>
+      window.manager = new WindowManager(
+        document.getElementById("WindowHolder")
+      );
+    </script>
   </body>
 </html>

views/about/scripts/data_get_domain.js

@@ -0,0 +1,23 @@
+const data_get = document.getElementById("data_get");
+fetch("https://blog.abtmtr.link/api/collections/paste/posts/domain")
+  .then((x) => x.json())
+  .then((paste) => {
+    const data = JSON.parse(paste.data.body);
+    data_get.innerHTML = data.reduce(
+      (html, subdomain) =>
+        html +
+        `<h1>${subdomain.name}</h1>
+    ${subdomain.description.reduce(
+      (html, descfragment) => html + `<p>${descfragment}</p>`,
+      ""
+    )}
+    <p>
+      <button 
+        onclick="window.open('${subdomain.url}')"
+      >
+        Open
+      </button>
+    </p>`,
+      ""
+    );
+  });

views/index.html

@@ -5,6 +5,7 @@
     <title>MeowcaTheoRange</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/normal.css" />
+    <link rel="stylesheet" href="/styles/windows.css" />
     <link rel="stylesheet" href="/styles/style.css" />
     <style>
       @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@@ -31,11 +32,36 @@
     <main>
       <section>
         <h2>Welcome! 👋</h2>
-        <p>I'm MeowcaTheoRange.</p>
+        <section id="data_whoami">
+          <p>
+            I'm...
+            <small
+              ><a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
+                >not loading</a
+              >.</small
+            >
+          </p>
+        </section>
         <p>
           I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
         </p>
         <p>I run this domain and all of the services on it!</p>
+        <p id="no-fetchy" style="display: none">
+          For me, it is <b id="time">12:00 PM</b> on a
+          <b id="weekday">Sunday</b>. <b id="timezone">(UTC-0)</b><br />
+          <small
+            >data locally fetched from
+            <a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
+              >pronouns.cc</a
+            ></small
+          >
+        </p>
+        <button
+          onclick="initDocument(['ff76a4','ffffff','c011d7','000000','2f3cbe'], 300, 200, 'vert', 'Genderfluid');
+          initDocument(['FF218C','FFD800','21B1FF'], 300, 200, 'vert', 'Pansexual')"
+        >
+          Cool Flags
+        </button>
       </section>
       <section>
         <h2>What I like doing</h2>
@@ -73,8 +99,16 @@
         </ul>
       </section>
     </main>
+    <div id="WindowHolder"></div>
     <section id="accessibility" hidden></section>
     <script src="/scripts/windows.js"></script>
     <script src="/scripts/accessibility.js"></script>
+    <script src="./scripts/data_get_whoami.js"></script>
+    <script src="/projects/hex/scripts/index.js"></script>
+    <script>
+      window.manager = new WindowManager(
+        document.getElementById("WindowHolder")
+      );
+    </script>
   </body>
 </html>

views/projects/hex/scripts/index.js

@@ -48,11 +48,11 @@ function averageColors(hex) {
   );
 }
 
-function initDocument(hx, w, h, t) {
+function initDocument(hx, w, h, t, apiName) {
   const newWindow = window.top.manager.createWindow(
     `<html>
       <head>
-        <title>Result</title>
+        <title>${apiName || "Result"}</title>
       </head>
       <body style="display:flex;margin:0;height:100vh;align-items:safe center;justify-content:safe center;">
         <canvas id="canvas" width="300" height="200"></canvas>
@@ -71,7 +71,8 @@ function initDocument(hx, w, h, t) {
       t,
       newWindow.windowContent.contentDocument.querySelector("#canvas")
     );
-    propagateStyles(getComputedStyle(root), newWindow.windowObject);
+    if (!apiName)
+      propagateStyles(getComputedStyle(root), newWindow.windowObject);
   });
 }
 

views/projects/scripts/data_get_projects.js

@@ -19,9 +19,9 @@ fetch("./public/projects.json")
       </button>
       or
       <button
-        onclick="window.manager.createWindow('${project.url}', false, ${
-          project.size?.[0] ?? "null"
-        }, ${project.size?.[1] ?? "null"})"
+        onclick="window.manager.createWindow('${project.url}', false${
+          project.size?.[0] ? ", " + project.size[0] : ""
+        }${project.size?.[1] ? ", " + project.size[1] : ""})"
       >
         Open Window
       </button>

views/scripts/data_get_whoami.js

@@ -0,0 +1,34 @@
+const data_whoami = document.getElementById("data_whoami");
+const time = document.getElementById("time");
+const weekday = document.getElementById("weekday");
+const timezone = document.getElementById("timezone");
+const nofetchy = document.getElementById("no-fetchy");
+fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
+  .then((x) => x.json())
+  .then((user) => {
+    data_whoami.innerHTML = `
+<p>I'm <a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"><b>${
+      user.names[0].value
+    }</b></a>, also better known online as <b>${
+      user.name
+    }</b>. <small>(${user.pronouns
+      .map((pronoun) => pronoun.pronouns.split("/")[0])
+      .join("/")})</small></p>`;
+    const curTime = new Date();
+    timezone.innerHTML = `(UTC${user.utc_offset > 0 ? "+" : "-"}${Math.abs(
+      user.utc_offset / (60 * 60)
+    )})`;
+    function updateTime() {
+      curTime.setTime(
+        Date.now() -
+          curTime.getTimezoneOffset() * 60 * 1000 -
+          user.utc_offset * 1000
+      );
+      time.innerHTML = curTime.toLocaleTimeString();
+      weekday.innerHTML = curTime.toLocaleString("en-us", { weekday: "long" });
+
+      window.requestAnimationFrame(updateTime);
+    }
+    window.requestAnimationFrame(updateTime);
+    nofetchy.style.display = null;
+  });

views/scripts/windows.js

@@ -174,15 +174,9 @@ class WindowObject {
     );
 
     this.windowContent.addEventListener("load", () => {
-      this.title = this.windowContent.contentWindow.document.title;
-      if (!srcdoc) {
-        const nb = this.windowManager.querySelector(".window-new-button");
-        nb.addEventListener("click", () => {
-          window.open(this.contentUrl);
-        });
-        nb.addEventListener("touchstart", (e) => e.stopPropagation());
-        nb.addEventListener("touchend", (e) => e.stopPropagation());
-      }
+      try {
+        this.title = this.windowContent.contentWindow.document.title;
+      } catch (err) {}
     });
   }
 
@@ -395,10 +389,12 @@ class WindowObject {
   }
 
   destroy() {
-    if (this.windowContent.contentWindow != null) {
-      const unloadEvent = new Event("beforeunload");
-      this.windowContent.contentWindow.dispatchEvent(unloadEvent);
-    }
+    try {
+      if (this.windowContent.contentWindow != null) {
+        const unloadEvent = new Event("beforeunload");
+        this.windowContent.contentWindow.dispatchEvent(unloadEvent);
+      }
+    } catch (err) {}
 
     this.windowObject.remove();
 
@@ -516,7 +512,7 @@ class WindowObject {
     }
   }
 
-  static createWindow(windowRef, content, srcdoc, w, h) {
+  static createWindow(windowRef, content, srcdoc, w = 600, h = 500) {
     const windowObject = document.createElement("div");
     windowObject.classList.add("window-object");
     windowObject.style.width = `calc(${w}px + 2.75em)`;
@@ -535,7 +531,7 @@ class WindowObject {
 
         {
           const windowManagerLabel = document.createElement("span");
-          windowManagerLabel.textContent = "";
+          windowManagerLabel.textContent = "Window";
           windowManagerLabel.classList.add("window-manager-label");
 
           windowManagerStart.appendChild(windowManagerLabel);
@@ -552,6 +548,13 @@ class WindowObject {
           const windowNewButton = document.createElement("button");
           windowNewButton.innerHTML = "open_in_new";
           windowNewButton.classList.add("window-new-button");
+          windowNewButton.addEventListener("click", () => window.open(content));
+          windowNewButton.addEventListener("touchstart", (e) =>
+            e.stopPropagation()
+          );
+          windowNewButton.addEventListener("touchend", (e) =>
+            e.stopPropagation()
+          );
 
           windowManagerEnd.appendChild(windowNewButton);
         }

views/site/index.html

@@ -12,10 +12,10 @@
       :root {
         --base-scale: 16px;
 
-        --background-color: hsl(195, 100%, 15%);
-        --color: hsl(195, 100%, 85%);
-        --accent-color: hsl(195, 100%, 50%);
-        --accent-color-fg: hsl(195, 100%, 95%);
+        --background-color: hsl(125, 100%, 15%);
+        --color: hsl(125, 100%, 85%);
+        --accent-color: hsl(125, 100%, 50%);
+        --accent-color-fg: hsl(125, 100%, 95%);
         --font-family: "Lexend Deca";
         --document-width: 40em;
       }