From 8fbc0440253aa9391a9f4b476d36033c96a67aae Mon Sep 17 00:00:00 2001
From: "netop://ウィビ" <paul@webb.page>
Date: Tue, 22 Sep 2026 20:05:16 -0700
Subject: adds selfie and other minor updates

---
 src/lib/component/About.svelte |   3 +-
 src/lib/component/Blog.svelte  | 259 -----------------------------------------
 src/lib/component/Memos.svelte | 259 +++++++++++++++++++++++++++++++++++++++++
 src/routes/+page.svelte        |   6 +-
 4 files changed, 264 insertions(+), 263 deletions(-)
 delete mode 100644 src/lib/component/Blog.svelte
 create mode 100644 src/lib/component/Memos.svelte

(limited to 'src')

diff --git a/src/lib/component/About.svelte b/src/lib/component/About.svelte
index d4c3cc9..a7b4383 100644
--- a/src/lib/component/About.svelte
+++ b/src/lib/component/About.svelte
@@ -18,7 +18,8 @@
     "/images/netopwibby/12.jpg",
     "/images/netopwibby/13.jpg",
     "/images/netopwibby/14.jpg",
-    "/images/netopwibby/15.jpg"
+    "/images/netopwibby/15.jpg",
+    "/images/netopwibby/16.jpg"
   ];
 
   let about = $state("");
diff --git a/src/lib/component/Blog.svelte b/src/lib/component/Blog.svelte
deleted file mode 100644
index 69b3792..0000000
--- a/src/lib/component/Blog.svelte
+++ /dev/null
@@ -1,259 +0,0 @@
-<script lang="ts">
-  /*** STATE -------------------------------------------- ***/
-  const memos = [
-    "WM-103.txt",
-    "WM-102.txt",
-    "WM-101.txt",
-    "WM-100.txt",
-    "WM-099.txt",
-    "WM-098.txt",
-    "WM-097.txt",
-    "WM-096.txt",
-    "WM-095.txt",
-    "WM-094.txt",
-    "WM-093.txt",
-    "WM-092.txt",
-    "WM-091.txt",
-    "WM-090.txt",
-    "WM-089.txt",
-    "WM-088.txt",
-    "WM-087.txt",
-    "WM-086.txt",
-    "WM-085.txt",
-    "WM-084.txt",
-    "WM-083.txt",
-    "WM-082.txt",
-    "WM-081.txt",
-    "WM-080.txt",
-    "WM-079.txt",
-    "WM-078.txt",
-    "WM-077.txt",
-    "WM-076.txt",
-    "WM-075.txt",
-    "WM-074.txt",
-    "WM-073.txt",
-    "WM-072.txt",
-    "WM-071.txt",
-    "WM-070.txt",
-    "WM-069.txt",
-    "WM-068.txt",
-    "WM-067.txt",
-    "WM-066.txt",
-    "WM-065.txt",
-    "WM-064.txt",
-    "WM-063.txt",
-    "WM-062.txt",
-    "WM-061.txt",
-    "WM-060.txt",
-    "WM-059.txt",
-    "WM-058.txt",
-    "WM-057.txt",
-    "WM-056.txt",
-    "WM-055.txt",
-    "WM-054.txt",
-    "WM-053.txt",
-    "WM-052.txt",
-    "WM-051.txt",
-    "WM-050.txt",
-    "WM-049.txt",
-    "WM-048.txt",
-    "WM-047.txt",
-    "WM-046.txt",
-    "WM-045.txt",
-    "WM-044.txt",
-    "WM-043.txt",
-    "WM-042.txt",
-    "WM-041.txt",
-    "WM-040.txt",
-    "WM-039.txt",
-    "WM-038.txt",
-    "WM-037.txt",
-    "WM-036.txt",
-    "WM-035.txt",
-    "WM-034.txt",
-    "WM-033.txt",
-    "WM-032.txt",
-    "WM-031.txt",
-    "WM-030.txt",
-    "WM-029.txt",
-    "WM-028.txt",
-    "WM-027.txt",
-    "WM-026.txt",
-    "WM-025.txt",
-    "WM-024.txt",
-    "WM-023.txt",
-    "WM-022.txt",
-    "WM-021.txt",
-    "WM-020.txt",
-    "WM-019.txt",
-    "WM-018.txt",
-    "WM-017.txt",
-    "WM-016.txt",
-    "WM-015.txt",
-    "WM-014.txt",
-    "WM-013.txt",
-    "WM-012.txt",
-    "WM-011.txt",
-    "WM-010.txt",
-    "WM-009.txt",
-    "WM-008.txt",
-    "WM-007.txt",
-    "WM-006.txt",
-    "WM-005.txt",
-    "WM-004.txt",
-    "WM-003.txt",
-    "WM-002.txt",
-    "WM-001.txt"
-  ];
-
-  let selectedMemo: string = $state("");
-  let selectedMemoContent: string = $state("");
-
-  /*** HELPER ------------------------------------------- ***/
-  function processMemo(filename: string): string {
-    const extensionRegex = /\.[^.]+$/;         /*** file extension ***/
-    const specialCharsRegex = /[^a-zA-Z0-9]/g; /*** special characters ***/
-    const extensionMatch = filename.match(extensionRegex);
-    let processedFilename = filename;
-    let wrappedExtension = "";
-
-    if (extensionMatch) {
-      processedFilename = filename.slice(0, extensionMatch.index);
-      wrappedExtension = extensionMatch[0].replace(extensionRegex, (match) => `<span class="special-char">${match}</span>`);
-    }
-
-    return processedFilename.replace(specialCharsRegex, (match) => `<span class="special-char">${match}</span>`) + wrappedExtension;
-  }
-
-  async function showMemo(slug: string) {
-    if (slug === selectedMemo) {
-      document.querySelector("li.active")!.classList.remove("active");
-      selectedMemo = ""; /*** toggle ***/
-    } else {
-      selectedMemoContent = "\nloading…\n";
-      selectedMemo = slug;
-
-      try {
-        const response = await fetch("/api/blog.json", {
-          body: JSON.stringify({ filename: slug }),
-          headers: {
-            "Accept": "application/json",
-            "Content-Type": "application/json"
-          },
-          method: "POST"
-        });
-
-        const { content } = await response.json();
-        selectedMemoContent = content;
-      } catch(error) {
-        console.error(error);
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  h2 {
-    margin: 0 0 calc(var(--padding) * 2); padding: var(--padding) calc(var(--padding) * 2);
-
-    background-color: var(--color-border);
-    color: var(--uchu-yin-7);
-    font-size: 1rem;
-    line-height: inherit;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-
-  ul {
-    line-height: 1;
-    margin-left: calc(var(--list-indentation) / 2);
-    padding: 0 var(--list-indentation) calc(var(--list-indentation) * 4) 0;
-
-    li {
-      margin: 0; padding: 0 0 var(--baseline) calc(var(--baseline) * 2);
-      position: relative;
-
-      &::before,
-      &::after {
-        background-color: var(--color-border);
-        content: "";
-        left: 0;
-        position: absolute;
-      }
-
-      &::before {
-        width: calc(var(--list-indentation) / 2); height: 1px;
-        top: calc(var(--list-indentation) / 4);
-      }
-
-      &::after {
-        top: calc(var(--list-indentation) * -0.75);
-        width: 1px;
-      }
-
-      &:not(.active) {
-        &::after {
-          height: var(--list-indentation);
-        }
-      }
-
-      &.active::after {
-        height: 100%;
-      }
-    }
-  }
-
-  button {
-    cursor: pointer;
-
-    &:hover {
-      color: var(--uchu-yin-4);
-      text-decoration: underline var(--uchu-yin-2);
-    }
-  }
-
-  .content {
-    line-height: 1.55;
-    position: relative;
-    white-space: pre-wrap;
-
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-
-    &::before {
-      width: 1px; height: calc(100% + 0.75rem);
-      top: -0.75rem; left: calc(var(--list-indentation) * -0.75);
-
-      background-color: var(--color-border);
-      content: "";
-      position: absolute;
-    }
-  }
-
-  :global(.date) {
-    color: var(--uchu-yin-3);
-  }
-
-  :global(.special-char) {
-    color: var(--uchu-yin-3);
-  }
-</style>
-
-<h2>
-  <a href="https://blog.webb.page" target="_blank">blog.webb.page</a>
-</h2>
-
-<ul>
-  {#each memos as memo}
-    <li class:active={selectedMemo === memo}>
-      <button onclick={() => showMemo(memo)}>{@html processMemo(memo)}</button>
-
-      {#if selectedMemo === memo}
-        <div class="content">
-          {@html selectedMemoContent}
-        </div>
-      {/if}
-    </li>
-  {/each}
-</ul>
diff --git a/src/lib/component/Memos.svelte b/src/lib/component/Memos.svelte
new file mode 100644
index 0000000..69b3792
--- /dev/null
+++ b/src/lib/component/Memos.svelte
@@ -0,0 +1,259 @@
+<script lang="ts">
+  /*** STATE -------------------------------------------- ***/
+  const memos = [
+    "WM-103.txt",
+    "WM-102.txt",
+    "WM-101.txt",
+    "WM-100.txt",
+    "WM-099.txt",
+    "WM-098.txt",
+    "WM-097.txt",
+    "WM-096.txt",
+    "WM-095.txt",
+    "WM-094.txt",
+    "WM-093.txt",
+    "WM-092.txt",
+    "WM-091.txt",
+    "WM-090.txt",
+    "WM-089.txt",
+    "WM-088.txt",
+    "WM-087.txt",
+    "WM-086.txt",
+    "WM-085.txt",
+    "WM-084.txt",
+    "WM-083.txt",
+    "WM-082.txt",
+    "WM-081.txt",
+    "WM-080.txt",
+    "WM-079.txt",
+    "WM-078.txt",
+    "WM-077.txt",
+    "WM-076.txt",
+    "WM-075.txt",
+    "WM-074.txt",
+    "WM-073.txt",
+    "WM-072.txt",
+    "WM-071.txt",
+    "WM-070.txt",
+    "WM-069.txt",
+    "WM-068.txt",
+    "WM-067.txt",
+    "WM-066.txt",
+    "WM-065.txt",
+    "WM-064.txt",
+    "WM-063.txt",
+    "WM-062.txt",
+    "WM-061.txt",
+    "WM-060.txt",
+    "WM-059.txt",
+    "WM-058.txt",
+    "WM-057.txt",
+    "WM-056.txt",
+    "WM-055.txt",
+    "WM-054.txt",
+    "WM-053.txt",
+    "WM-052.txt",
+    "WM-051.txt",
+    "WM-050.txt",
+    "WM-049.txt",
+    "WM-048.txt",
+    "WM-047.txt",
+    "WM-046.txt",
+    "WM-045.txt",
+    "WM-044.txt",
+    "WM-043.txt",
+    "WM-042.txt",
+    "WM-041.txt",
+    "WM-040.txt",
+    "WM-039.txt",
+    "WM-038.txt",
+    "WM-037.txt",
+    "WM-036.txt",
+    "WM-035.txt",
+    "WM-034.txt",
+    "WM-033.txt",
+    "WM-032.txt",
+    "WM-031.txt",
+    "WM-030.txt",
+    "WM-029.txt",
+    "WM-028.txt",
+    "WM-027.txt",
+    "WM-026.txt",
+    "WM-025.txt",
+    "WM-024.txt",
+    "WM-023.txt",
+    "WM-022.txt",
+    "WM-021.txt",
+    "WM-020.txt",
+    "WM-019.txt",
+    "WM-018.txt",
+    "WM-017.txt",
+    "WM-016.txt",
+    "WM-015.txt",
+    "WM-014.txt",
+    "WM-013.txt",
+    "WM-012.txt",
+    "WM-011.txt",
+    "WM-010.txt",
+    "WM-009.txt",
+    "WM-008.txt",
+    "WM-007.txt",
+    "WM-006.txt",
+    "WM-005.txt",
+    "WM-004.txt",
+    "WM-003.txt",
+    "WM-002.txt",
+    "WM-001.txt"
+  ];
+
+  let selectedMemo: string = $state("");
+  let selectedMemoContent: string = $state("");
+
+  /*** HELPER ------------------------------------------- ***/
+  function processMemo(filename: string): string {
+    const extensionRegex = /\.[^.]+$/;         /*** file extension ***/
+    const specialCharsRegex = /[^a-zA-Z0-9]/g; /*** special characters ***/
+    const extensionMatch = filename.match(extensionRegex);
+    let processedFilename = filename;
+    let wrappedExtension = "";
+
+    if (extensionMatch) {
+      processedFilename = filename.slice(0, extensionMatch.index);
+      wrappedExtension = extensionMatch[0].replace(extensionRegex, (match) => `<span class="special-char">${match}</span>`);
+    }
+
+    return processedFilename.replace(specialCharsRegex, (match) => `<span class="special-char">${match}</span>`) + wrappedExtension;
+  }
+
+  async function showMemo(slug: string) {
+    if (slug === selectedMemo) {
+      document.querySelector("li.active")!.classList.remove("active");
+      selectedMemo = ""; /*** toggle ***/
+    } else {
+      selectedMemoContent = "\nloading…\n";
+      selectedMemo = slug;
+
+      try {
+        const response = await fetch("/api/blog.json", {
+          body: JSON.stringify({ filename: slug }),
+          headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json"
+          },
+          method: "POST"
+        });
+
+        const { content } = await response.json();
+        selectedMemoContent = content;
+      } catch(error) {
+        console.error(error);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  h2 {
+    margin: 0 0 calc(var(--padding) * 2); padding: var(--padding) calc(var(--padding) * 2);
+
+    background-color: var(--color-border);
+    color: var(--uchu-yin-7);
+    font-size: 1rem;
+    line-height: inherit;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  ul {
+    line-height: 1;
+    margin-left: calc(var(--list-indentation) / 2);
+    padding: 0 var(--list-indentation) calc(var(--list-indentation) * 4) 0;
+
+    li {
+      margin: 0; padding: 0 0 var(--baseline) calc(var(--baseline) * 2);
+      position: relative;
+
+      &::before,
+      &::after {
+        background-color: var(--color-border);
+        content: "";
+        left: 0;
+        position: absolute;
+      }
+
+      &::before {
+        width: calc(var(--list-indentation) / 2); height: 1px;
+        top: calc(var(--list-indentation) / 4);
+      }
+
+      &::after {
+        top: calc(var(--list-indentation) * -0.75);
+        width: 1px;
+      }
+
+      &:not(.active) {
+        &::after {
+          height: var(--list-indentation);
+        }
+      }
+
+      &.active::after {
+        height: 100%;
+      }
+    }
+  }
+
+  button {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--uchu-yin-4);
+      text-decoration: underline var(--uchu-yin-2);
+    }
+  }
+
+  .content {
+    line-height: 1.55;
+    position: relative;
+    white-space: pre-wrap;
+
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+
+    &::before {
+      width: 1px; height: calc(100% + 0.75rem);
+      top: -0.75rem; left: calc(var(--list-indentation) * -0.75);
+
+      background-color: var(--color-border);
+      content: "";
+      position: absolute;
+    }
+  }
+
+  :global(.date) {
+    color: var(--uchu-yin-3);
+  }
+
+  :global(.special-char) {
+    color: var(--uchu-yin-3);
+  }
+</style>
+
+<h2>
+  <a href="https://blog.webb.page" target="_blank">blog.webb.page</a>
+</h2>
+
+<ul>
+  {#each memos as memo}
+    <li class:active={selectedMemo === memo}>
+      <button onclick={() => showMemo(memo)}>{@html processMemo(memo)}</button>
+
+      {#if selectedMemo === memo}
+        <div class="content">
+          {@html selectedMemoContent}
+        </div>
+      {/if}
+    </li>
+  {/each}
+</ul>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a0f1a90..b256fbe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,8 +4,8 @@
 
   //// component
   import About from "$lib/component/About.svelte";
-  import Blog from "$lib/component/Blog.svelte";
   import CV from "$lib/component/CV.svelte";
+  import Memos from "$lib/component/Memos.svelte";
   import Music from "$lib/component/Music.svelte";
   import MyMusic from "$lib/component/MyMusic.svelte";
   import Remarks from "$lib/component/Remarks.svelte";
@@ -76,11 +76,11 @@
 
 <section>
   <aside class="with-background">
-    <Remarks/>
+    <Memos/>
   </aside>
 
   <aside class="with-background">
-    <Blog/>
+    <Remarks/>
   </aside>
 </section>
 
-- 
cgit v1.2.3