updates blog panel and modularizes about panel

5 files changed, 101 insertions, 25 deletions

diff --git a/package.json b/package.json
index 9db6a55..75fe127 100644
--- a/package.json
+++ b/package.json
@@ -52,5 +52,5 @@
     "watch:sass": "sass --watch sass/uchu:static --style compressed"
   },
   "type": "module",
-  "version": "2026.04.28"
+  "version": "2026.05.30"
 }
diff --git a/src/lib/component/About.svelte b/src/lib/component/About.svelte
index 7f5be04..94f1eba 100644
--- a/src/lib/component/About.svelte
+++ b/src/lib/component/About.svelte
@@ -21,6 +21,7 @@
     "/images/netopwibby/15.jpg"
   ];
 
+  let about = "";
   let selfie = "";
 
   //// function
@@ -28,7 +29,29 @@
     return portraits[Math.floor(Math.random() * portraits.length)];
   }
 
+  async function showContent() {
+    let aboutContent = "";
+
+    try {
+      const response = await fetch("/api/about.json", {
+        headers: {
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+
+      const { content } = await response.json();
+      aboutContent = content;
+    } catch(error) {
+      console.error(error);
+    }
+
+    return aboutContent;
+  }
+
   onMount(async() => {
+    about = await showContent();
     selfie = randomPortrait();
   });
 </script>
@@ -50,16 +73,8 @@
     z-index: 1;
   }
 
-  p {
-    margin: 0; padding: 0 var(--about-padding) var(--about-padding);
-    white-space: break-spaces;
-  }
-
-  hr {
-    margin: 0 0 calc(var(--line-height) / 2) 0;
-  }
-
   figure {
+    margin-top: var(--about-padding);
     padding: 0 var(--about-padding) var(--about-padding) var(--about-padding);
 
     img {
@@ -71,27 +86,38 @@
       text-align: center;
     }
   }
-</style>
 
-<h2>about.webb.page</h2>
-
-<p><strong>TL;DR bio:</strong> Architech × Excessively Black × East Coast kid on the West Coast × JU$T × Building a better Internet</p>
-
-<p>I go by NetOperator Wibby, NetOpWibby, or netop://ウィビ pretty much everywhere online. "NetOperator" is the term given to <del>chronically online people</del> internet enthusiasts in the Megaman Battle Network series, one of my favorite game series of all time and constant source of inspiration.</p>
-
-<p><strong>TL;DR career bio:</strong> From college dropout to self-taught designer turned developer during the 2008 recession → Stopped working on music to focus on family and career → lots of startup work → Now I work at a major "fruit" company. Not bad, eh? Bless the Internet.</p>
+  .content {
+    line-height: 1.55;
+    overflow-x: hidden;
+    padding-left: var(--about-padding);
+    padding-right: var(--about-padding);
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: break-spaces;
 
-<p><strong>Short life bio:</strong> Voracious reader, absolutely loved mystery books: Encyclopedia Brown, Hardy Boys, Nancy Drew, Archie Comics, &amp;c. Frequently took things apart and collected scraps to build "inventions." Avid sketcher and jotter of ideas.</p>
-<p>Majorly influenced by Pharrell Williams, Chad Hugo, Timbaland, Clipse, N.E.R.D, Nujabes, Shing02, Fat Jon, Five Deez, &amp;c and wanted to make music and beats. Performed exactly once and was recognized on the street afterwards ("your performance was <em>really</em> good"). Developed a perfectionist mindset, which is to blame for my debut album still under wraps (lyrics still hold up though), among other things.</p>
-<p>Married the girl of my dreams in 2017 (maiden name? Page). We met on a web page in 9th grade, a little known social network called "Classface." Webb + Page. You can't make this up. Oh, and I lost my job four days after our wedding (IoT company imploded and we were the last to know). You wanna hear God laugh? Make plans. Now we have a loquat tree in our backyard in sunny California&hellip;LOL (Love Our Loquats)!</p>
-<p>I try to live life according to The Golden Rule, and to stick to my ethics and morals as much as possible. It's bothersome when I find that others do not. But like&hellip;that's life? It's annoying though. You all should think like me!! 😤</p>
+    &.loading {
+      padding-bottom: var(--about-padding);
+    }
+  }
+</style>
 
-<hr/>
+<h2>
+  <a href="https://about.webb.page" target="_blank">about.webb.page</a>
+</h2>
 
-<p>Anyhoo, I love the internet. The internet has empowered me to learn, explore, and get inspired by so many cool people around the world. If you love yourself, you probably love others and aren't bigoted. That makes you cool as fuck. If this isn't you, I hope you find peace.</p>
+{#if about === ""}
+  <div class="content loading">Loading content&hellip;</div>
+{:else}
+  <div class="content">
+    {@html about}
+  </div>
+{/if}
 
 {#if selfie === ""}
-  <p>loading&hellip;</p>
+  <div class="content loading">
+    <p>Loading portrait&hellip;</p>
+  </div>
 {:else}
   <figure>
     <img alt="selfie" src={selfie}/>
diff --git a/src/lib/component/Blog.svelte b/src/lib/component/Blog.svelte
index dfdaacd..658b948 100644
--- a/src/lib/component/Blog.svelte
+++ b/src/lib/component/Blog.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   /*** STATE -------------------------------------------- ***/
   const memos = [
+    "WM-093.txt",
+    "WM-092.txt",
+    "WM-091.txt",
     "WM-090.txt",
     "WM-089.txt",
     "WM-088.txt",
diff --git a/src/lib/utility/markdown.ts b/src/lib/utility/markdown.ts
new file mode 100644
index 0000000..3d086f0
--- /dev/null
+++ b/src/lib/utility/markdown.ts
@@ -0,0 +1,20 @@
+
+
+
+/*** EXPORT ------------------------------------------- ***/
+
+export default (input: string): string => {
+  return input
+    .replace(/(\*\*|__)(.*?)\1/g, `<strong>$2</strong>`) /*** bold ***/
+    .replace(/(\*|_)(.*?)\1/g, "<em>$2</em>") /*** italic ***/
+    .replace(/(\~~)(.*?)\1/g, "<del>$2</del>") /*** strikethrough ***/
+    .replace(/'/g, "’")             /*** fancy apostrophe ***/
+    .replace(/(:nbhyp:)/g, "‑")     /*** non‑breaking hyphen ***/
+    .replace(/(:nbsp:)/g, " ")      /*** non‑breaking space ***/
+    .replace(/(\.\.\.)/g, "…")      /*** ellipsis ***/
+    // .replace(/---/g, "<hr/>")
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, `<a href="$2" target="_blank">$1</a>`); /*** link ***/
+
+  // TODO
+  // : check if link is local and if not, add `target="_blank"`
+}
diff --git a/src/routes/api/about.json/+server.ts b/src/routes/api/about.json/+server.ts
new file mode 100644
index 0000000..cdfd7b7
--- /dev/null
+++ b/src/routes/api/about.json/+server.ts
@@ -0,0 +1,27 @@
+
+
+
+/*** IMPORT ------------------------------------------- ***/
+
+import { error, json } from "@sveltejs/kit";
+
+/*** UTILITY ------------------------------------------ ***/
+
+import { default as markdown } from "$lib/utility/markdown.ts";
+
+/*** EXPORT ------------------------------------------- ***/
+
+export const POST = async({ fetch, request }) => {
+  try {
+    const response = await fetch("https://about.webb.page", {
+      headers: { "Content-Type": "text/plain" },
+      method: "GET"
+    });
+
+    const content = await response.text();
+    return json({ content: markdown(content) });
+  } catch(welp) {
+    console.error(`Error fetching About: ${String(welp)}`);
+    return error(500);
+  }
+};