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

---
 .npmrc                           |  1 +
 package.json                     | 34 ++++++++++---------
 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 +-
 svelte.config.js                 | 22 -------------
 vite.config.ts                   | 70 +++++++++++++++++++++++++++-------------
 14 files changed, 117 insertions(+), 91 deletions(-)
 create mode 100644 .npmrc
 delete mode 100644 svelte.config.js

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/package.json b/package.json
index f51427b..9a47a3c 100644
--- a/package.json
+++ b/package.json
@@ -4,32 +4,34 @@
     "url": "https://webb.page"
   },
   "dependencies": {
-    "marked": "^18.0.2",
+    "@inc/uchu": "^3.0.0",
+    "marked": "^18.0.7",
     "plyr": "^3.8.4",
     "timeago.js": "^4.0.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.58.0",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "chronver": "*",
+    "@sveltejs/adapter-node": "^5.5.7",
+    "@sveltejs/kit": "^2.70.1",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "chronver": "^2020.6.18",
     "del-cli": "^7.0.0",
     "husky": "^9.1.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.8.3",
-    "sass": "^1.99.0",
+    "prettier": "^3.9.6",
+    "sass": "^1.101.6",
+    "sass-embedded": "^1.100.0",
     "sass-lint": "^1.13.1",
-    "stylelint": "^17.9.1",
+    "stylelint": "^17.14.1",
     "stylelint-order": "^8.1.1",
-    "svelte": "^5.55.5",
+    "svelte": "^5.56.7",
     "svelte-adapter-bun": "^1.0.1",
-    "svelte-check": "^4.4.6",
-    "svelte-preprocess": "^6.0.3",
-    "typescript": "^6.0.3",
-    "updates": "^17.16.4",
-    "vite": "^8.0.10"
+    "svelte-check": "^4.7.3",
+    "svelte-preprocess": "^6.0.5",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.5"
   },
-  "name": "homepage",
+  "name": "webb.page",
   "private": true,
   "scripts": {
     "build": "bun run clean && bun run render && bunx vite build",
@@ -44,7 +46,7 @@
     "render": "sass sass/uchu:static --style compressed",
     "start": "bun i && bun run build && PORT=6433 SETTINGS=production bun ./build/index.js",
     "test": "run-s test:*",
-    "test:dependencies": "updates --update ./",
+    "test:dependencies": "bun update --latest",
     "test:svelte": "svelte-check",
     "test:typescript": "tsc --noEmit",
     "watch": "bun run render && run-p watch:*",
@@ -52,5 +54,5 @@
     "watch:sass": "sass --watch sass/uchu:static --style compressed"
   },
   "type": "module",
-  "version": "2026.06.22"
+  "version": "2026.07.23"
 }
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>
diff --git a/svelte.config.js b/svelte.config.js
deleted file mode 100644
index 241c987..0000000
--- a/svelte.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-//// import
-
-import adapter from "svelte-adapter-bun";
-import preprocess from "svelte-preprocess";
-
-
-
-//// export
-
-/** @type {import("@sveltejs/kit").Config} */
-export default {
-  kit: {
-    adapter: adapter(),
-    prerender: {
-      handleHttpError: "warn"
-    }
-  },
-  preprocess: [preprocess()]
-};
diff --git a/vite.config.ts b/vite.config.ts
index d2c0d07..581285d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,26 +1,52 @@
 
+/*** IMPORT ------------------------------------------- ***/
 
+import adapter from "@sveltejs/adapter-node";
 
-//// import
-
+import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
-import type { UserConfig } from "vite";
-
-
-
-//// export
-
-export default {
-  json: {
-    namedExports: true
-  },
-  plugins: [sveltekit()],
-  server: {
-    fs: {
-      allow: [
-        "package.json",
-        "sass"
-      ]
-    }
-  }
-} satisfies UserConfig;
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/*** EXPORT ------------------------------------------- ***/
+
+export default defineConfig({
+	plugins: [
+		sveltekit({
+			adapter: adapter(),
+			compilerOptions: {
+				/*** Force runes mode for the project, except for libraries. Can be removed in Svelte 6. ***/
+				runes: ({ filename }) => filename.split(/[/\\]/).includes("node_modules") ? undefined : true
+			},
+			preprocess: [vitePreprocess()]
+		})
+	],
+	server: {
+	  allowedHosts: ["scilab.local"]
+	}
+});
+
+
+
+// //// import
+
+// import { sveltekit } from "@sveltejs/kit/vite";
+// import type { UserConfig } from "vite";
+
+
+
+// //// export
+
+// export default {
+//   json: {
+//     namedExports: true
+//   },
+//   plugins: [sveltekit()],
+//   server: {
+//     fs: {
+//       allow: [
+//         "package.json",
+//         "sass"
+//       ]
+//     }
+//   }
+// } satisfies UserConfig;
-- 
cgit v1.2.3