From 0946abd0bc866ca1f0c073eb45e8e2c7822e4e44 Mon Sep 17 00:00:00 2001
From: "netop://ウィビ" <paul@webb.page>
Date: Thu, 23 Jul 2026 14:05:13 -0700
Subject: updates deps and svelte config

---
 src/lib/component/About.svelte   |  4 ++--
 src/lib/component/Blog.svelte    |  8 +++++---
 src/lib/component/CV.svelte      |  2 +-
 src/lib/component/Music.svelte   | 18 +++++++++++++-----
 src/lib/component/MyMusic.svelte | 18 +++++++++++++-----
 src/lib/component/Project.svelte |  6 +++---
 src/lib/component/Remarks.svelte |  7 ++++---
 src/lib/component/Social.svelte  | 12 ++++++------
 src/lib/component/Support.svelte |  3 +--
 src/routes/+layout.svelte        |  3 ++-
 10 files changed, 50 insertions(+), 31 deletions(-)

(limited to 'src')

diff --git a/src/lib/component/About.svelte b/src/lib/component/About.svelte
index 94f1eba..d4c3cc9 100644
--- a/src/lib/component/About.svelte
+++ b/src/lib/component/About.svelte
@@ -21,8 +21,8 @@
     "/images/netopwibby/15.jpg"
   ];
 
-  let about = "";
-  let selfie = "";
+  let about = $state("");
+  let selfie = $state("");
 
   //// function
   function randomPortrait() {
diff --git a/src/lib/component/Blog.svelte b/src/lib/component/Blog.svelte
index 95b7102..ee81c5b 100644
--- a/src/lib/component/Blog.svelte
+++ b/src/lib/component/Blog.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   /*** STATE -------------------------------------------- ***/
   const memos = [
+    "WM-099.txt",
+    "WM-098.txt",
     "WM-097.txt",
     "WM-096.txt",
     "WM-095.txt",
@@ -100,8 +102,8 @@
     "WM-001.txt"
   ];
 
-  let selectedMemo: string;
-  let selectedMemoContent: string;
+  let selectedMemo: string = $state("");
+  let selectedMemoContent: string = $state("");
 
   /*** HELPER ------------------------------------------- ***/
   function processMemo(filename: string): string {
@@ -241,7 +243,7 @@
 <ul>
   {#each memos as memo}
     <li class:active={selectedMemo === memo}>
-      <button on:click={() => showMemo(memo)}>{@html processMemo(memo)}</button>
+      <button onclick={() => showMemo(memo)}>{@html processMemo(memo)}</button>
 
       {#if selectedMemo === memo}
         <div class="content">
diff --git a/src/lib/component/CV.svelte b/src/lib/component/CV.svelte
index b24d2cf..50d31ab 100644
--- a/src/lib/component/CV.svelte
+++ b/src/lib/component/CV.svelte
@@ -3,7 +3,7 @@
   import { onMount } from "svelte";
 
   //// var
-  let cv = "";
+  let cv = $state("");
 
   //// function
   async function showContent() {
diff --git a/src/lib/component/Music.svelte b/src/lib/component/Music.svelte
index 01b731a..d4cdff8 100644
--- a/src/lib/component/Music.svelte
+++ b/src/lib/component/Music.svelte
@@ -244,7 +244,7 @@
     },
   ];
 
-  let activeRelease: string;
+  let activeRelease: string = $state("");
 </script>
 
 <style lang="scss">
@@ -336,16 +336,24 @@
     <li>
       <button
         class:active={activeRelease === release.id}
-        on:click={() => activeRelease === release.id ? activeRelease = "" : activeRelease = release.id}>{release.title} by {release.by}</button>
+        onclick={() => activeRelease === release.id ? activeRelease = "" : activeRelease = release.id}>{release.title} by {release.by}</button>
 
       {#if activeRelease === release.id}
         <div class="player">
           <img alt={release.title + " art"} src={"/images/bandcamp/" + release.id + ".jpg"}/>
-          <!-- svelte-ignore a11y-missing-attribute -->
+          <!-- svelte-ignore a11y_missing_attribute -->
           {#if release.type === "album"}
-            <iframe style="height: 300px;" src="https://bandcamp.com/EmbeddedPlayer/album={release.id}/size=large/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/" seamless></iframe>
+            <iframe
+              seamless
+              src="https://bandcamp.com/EmbeddedPlayer/album={release.id}/size=large/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/"
+              style="height: 300px;"
+              title={release.title}></iframe>
           {:else}
-            <iframe style="height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/track={release.id}/size=small/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/" seamless></iframe>
+            <iframe
+              seamless
+              src="https://bandcamp.com/EmbeddedPlayer/track={release.id}/size=small/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/"
+              style="height: 42px;"
+              title={release.title}></iframe>
           {/if}
         </div>
       {/if}
diff --git a/src/lib/component/MyMusic.svelte b/src/lib/component/MyMusic.svelte
index aed9098..dd3758a 100644
--- a/src/lib/component/MyMusic.svelte
+++ b/src/lib/component/MyMusic.svelte
@@ -63,7 +63,7 @@
     }
   ];
 
-  let activeRelease = "3091487133";
+  let activeRelease = $state("3091487133");
 </script>
 
 <style lang="scss">
@@ -155,16 +155,24 @@
     <li>
       <button
         class:active={activeRelease === release.id}
-        on:click={() => activeRelease === release.id ? activeRelease = "" : activeRelease = release.id}>{release.title} by {release.by}</button>
+        onclick={() => activeRelease === release.id ? activeRelease = "" : activeRelease = release.id}>{release.title} by {release.by}</button>
 
       {#if activeRelease === release.id}
         <div class="player">
           <img alt={release.title + " art"} src={"/images/bandcamp/" + release.id + ".jpg"}/>
-          <!-- svelte-ignore a11y-missing-attribute -->
+          <!-- svelte-ignore a11y_missing_attribute -->
           {#if release.type === "album"}
-            <iframe style="height: 300px;" src="https://bandcamp.com/EmbeddedPlayer/album={release.id}/size=large/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/" seamless></iframe>
+            <iframe
+              seamless
+              src="https://bandcamp.com/EmbeddedPlayer/album={release.id}/size=large/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/"
+              style="height: 300px;"
+              title={release.title}></iframe>
           {:else}
-            <iframe style="height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/track={release.id}/size=small/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/" seamless></iframe>
+            <iframe
+              seamless
+              src="https://bandcamp.com/EmbeddedPlayer/track={release.id}/size=small/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/"
+              style="height: 42px;"
+              title={release.title}></iframe>
           {/if}
         </div>
       {/if}
diff --git a/src/lib/component/Project.svelte b/src/lib/component/Project.svelte
index c27b1d4..0f2e47d 100644
--- a/src/lib/component/Project.svelte
+++ b/src/lib/component/Project.svelte
@@ -105,7 +105,7 @@
     }
   ];
 
-  let activeProject = "011";
+  let activeProject = $state("011");
 </script>
 
 <style lang="scss">
@@ -220,7 +220,7 @@
     <li>
       <button
         class:active={activeProject === project.id}
-        on:click={() => activeProject === project.id ? activeProject = "" : activeProject = project.id}>{project.title} &middot; {project.tagline}</button>
+        onclick={() => activeProject === project.id ? activeProject = "" : activeProject = project.id}>{project.title} &middot; {project.tagline}</button>
 
       {#if activeProject === project.id}
         <div class="player">
@@ -229,7 +229,7 @@
           {#each project.media as mediaItem}
             {#if videoRegex.test(mediaItem)}
               <figure>
-                <!-- svelte-ignore a11y-media-has-caption -->
+                <!-- svelte-ignore a11y_media_has_caption -->
                 <video controls>
                   <source src={mediaItem}/>
                 </video>
diff --git a/src/lib/component/Remarks.svelte b/src/lib/component/Remarks.svelte
index 6f88210..7db972c 100644
--- a/src/lib/component/Remarks.svelte
+++ b/src/lib/component/Remarks.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   /*** STATE -------------------------------------------- ***/
   const remarks = [
+    "WR-026.txt",
     "WR-025.txt",
     "WR-024.txt",
     "WR-023.txt",
@@ -28,8 +29,8 @@
     "WR-001.txt"
   ];
 
-  let selectedRemark: string;
-  let selectedRemarkContent: string;
+  let selectedRemark: string = $state("");
+  let selectedRemarkContent: string = $state("");
 
   /*** HELPER ------------------------------------------- ***/
   function processNote(filename: string): string {
@@ -169,7 +170,7 @@
 <ul>
   {#each remarks as remark}
     <li class:active={selectedRemark === remark}>
-      <button on:click={() => showNote(remark)}>{@html processNote(remark)}</button>
+      <button onclick={() => showNote(remark)}>{@html processNote(remark)}</button>
 
       {#if selectedRemark === remark}
         <div class="content">
diff --git a/src/lib/component/Social.svelte b/src/lib/component/Social.svelte
index 1e469eb..ee15a1a 100644
--- a/src/lib/component/Social.svelte
+++ b/src/lib/component/Social.svelte
@@ -5,11 +5,11 @@
 
   //// var
   const videoRegex = /\.(mp4|mov|avi|wmv|flv|mkv|webm|m4v)$/i;
-  let mastodonLoaded = false;
-  let mastodonPostContent = "";
-  let mastodonPostDate = "";
-  let mastodonPostLink = "";
-  let mastodonPostMedia: string[] = [];
+  let mastodonLoaded = $state(false);
+  let mastodonPostContent = $state("");
+  let mastodonPostDate = $state("");
+  let mastodonPostLink = $state("");
+  let mastodonPostMedia: string[] = $state([]);
 
   //// function
   async function mastodon() {
@@ -85,7 +85,7 @@
       <div class="media">
         {#each mastodonPostMedia as media}
           {#if videoRegex.test(media)}
-            <!-- svelte-ignore a11y-media-has-caption -->
+            <!-- svelte-ignore a11y_media_has_caption -->
             <video controls>
               <source src={media}/>
             </video>
diff --git a/src/lib/component/Support.svelte b/src/lib/component/Support.svelte
index ceff0fd..a5bc48f 100644
--- a/src/lib/component/Support.svelte
+++ b/src/lib/component/Support.svelte
@@ -1,5 +1,4 @@
-<script lang="ts">
-</script>
+<script lang="ts"></script>
 
 <style lang="scss">
   h2 {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index be635e8..5b4df0c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,6 +8,7 @@
 
   //// var
   const scrollControl = createScrollPreventer();
+  let { children } = $props();
 
   //// function
   function horizontalScroll(event: WheelEvent): void {
@@ -125,7 +126,7 @@
 </style>
 
 <div>
-  <slot></slot>
+  {@render children()}
 </div>
 
 <aside>
-- 
cgit v1.2.3