update

Author: ken-okabe

_site/0-book/unit-2/section-6/0-functor-monad.md

@@ -26,4 +26,5 @@ This unified view reveals an elegant symmetry in how we can obtain our desired m
 - The **Monad** approach (lower path) obtains `g` by using `bind` to transform a Kleisli arrow `f` into a container mapper function `g` / `bind f`
 
 Both paths provide us with what we ultimately want - a function `g` that can map between containers. The difference lies in our starting point: we can begin with either a regular function or a Kleisli arrow, and both paths will lead us to the container mapper function we seek.
+
 :::

_site/0-book/unit-5/section-3/1-map.md

@@ -22,7 +22,7 @@ const numbers = Timeline(5);
 // Pass a function: (x: number) => string
 const labels = numbers.map(x => `Score: ${x}`);
 
-console.log(labels.at(Now)); // "Score: 5"
+console.log(labels.at(Now)); // "Score: 5"share
 
 // When the source is updated, labels is automatically updated as well
 numbers.define(Now, 100);
@@ -35,19 +35,7 @@ When you call `map`, a **Dependency** is registered internally between the two `
 
 The dependency created by `map` is **Static**. Once you define the relationship `labels = numbers.map(...)`, the rule itself—the transformation of the value—does not change later.
 
-```d2
-Documentation -> Website: Starlight
-```
-
-```txt
-        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
-        | numbers         | --------------------------------> | labels          |
-        | (Timeline<number>) |                                | (Timeline<string>) |
-        +-----------------+                                   +-----------------+
-              ^                                                     |
-              | .define(Now, 100)                                   V
-              +-------------                                 Value propagates to "Score: 100"
-```
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
 
 This simple concept of a "static dependency" is the foundation for understanding the "dynamic" dependencies constructed by `bind` and `using`, which will be introduced later.
 
@@ -88,16 +76,16 @@ console.log(labels.at(Now)); // "Score: 5"
 // ソースを更新すると、labelsも自動的に更新される
 numbers.define(Now, 100);
 console.log(labels.at(Now)); // "Score: 100"
+```txt```txt
+        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
+        | numbers         | --------------------------------> | labels          |
+        | (Timeline<number>) |                                  | (Timeline<string>) |
+        +-----------------+                                 +-----------------+
+              ^                                                     |
+              | .define(Now, 100)                                   V
+              +-------------                                 値が"Score: 100"へ伝播
 
 ```
-
-## 依存グラフ (Dependency Graph)
-
-`map`を呼び出すと、内部では2つの`Timeline`の間に**依存関係 (Dependency)** が登録されます。この関係性のネットワーク全体を**依存グラフ**と呼びます。
-
-`map`が作る依存関係は**静的 (Static)** です。一度`labels = numbers.map(...)`という関係を定義したら、`numbers`と`labels`の間の「値を変換する」というルールそのものが後から変わることはありません。
-
-```txt
         +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
         | numbers         | --------------------------------> | labels          |
         | (Timeline<number>) |                                  | (Timeline<string>) |
@@ -107,6 +95,16 @@ console.log(labels.at(Now)); // "Score: 100"
               +-------------                                 値が"Score: 100"へ伝播
 
 ```
+```
+
+## 依存グラフ (Dependency Graph)
+
+`map`を呼び出すと、内部では2つの`Timeline`の間に**依存関係 (Dependency)** が登録されます。この関係性のネットワーク全体を**依存グラフ**と呼びます。
+
+`map`が作る依存関係は**静的 (Static)** です。一度`labels = numbers.map(...)`という関係を定義したら、`numbers`と`labels`の間の「値を変換する」というルールそのものが後から変わることはありません。
+
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
+
 
 このシンプルな「静的な依存関係」の概念が、後に出てくる`bind`や`using`が構築する「動的な」依存関係を理解するための基礎となります。
 

_site/0-book/unit-5/section-3/3-bind.md

@@ -121,19 +121,25 @@ The benefits of this `bind` approach are numerous.
 
 As a common approach, trying to define `B` and `C` separately with `.map` and then combining them to create `D` gives rise to the "problematic structure" of a diamond. However, by using `bind`, the dependency graph changes fundamentally.
 
-Plaintext
 
-```
-+-----------+     .bind(a => { return Timeline(d); })    +-----------+
-| Timeline A| ------------------------------------------> | Timeline D|
-+-----------+                                             +-----------+
-```
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752493931653.png)
 
 There are no longer intermediate `timelineB` or `timelineC`, and the diamond structure itself is never formed. Therefore, problems like glitches and multiple updates **cannot structurally occur**. This is a solution on a different level: not fixing a problem after it occurs, but **choosing a superior design where the problem does not arise**.
 
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745716642404.png)
+
+
+#### 2. Execution Efficiency
+
+In this structure, every time `A` is updated, the function passed to `bind` is executed only once, and `D` is calculated only once. This is highly efficient.
+
+#### 3. Complete Elimination of Transactional Processing
+
+Even more importantly, the **complex
+
 #### 2. Execution Efficiency
 
-In this structure, every time `A` is updated, the function passed to `bind` is executed only once, and `D` is calculated only once. This is highly efficient.
+In this structure, every time `A` is updated, the function passed to `bind` is executed only once, and `D` is calculated only once. This is highly efficient.
 
 #### 3. Complete Elimination of Transactional Processing
 
@@ -317,7 +323,17 @@ let B = A + 1;    // 期待値: 11
 let C = A * 2;    // 期待値: 20
 let D = B + C;    // 期待値: 31
 ```
-
+[main e684c6b] update
+ 2 files changed, 8 insertions(+)
+Enumerating objects: 7, done.
+Counting objects: 100% (7/7), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (4/4), done.
+Writing objects: 100% (4/4), 575 bytes | 575.00 KiB/s, done.
+Total 4 (delta 3), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   6660b97..e684c6b  main -> main
 しかし、更新の伝播順序によっては、グリッチが発生します。
 
 1.  `B` が先に更新されると、`D` は `B` の新しい値(`11`)と`C`の古い値(`10`)を使って計算されてしまいます。
@@ -346,7 +362,17 @@ let D = B + C;    // 期待値: 31
 
 **Atomic update** を実現している、とも表現されます。
 
------
+-----[main e684c6b] update
+ 2 files changed, 8 insertions(+)
+Enumerating objects: 7, done.
+Counting objects: 100% (7/7), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (4/4), done.
+Writing objects: 100% (4/4), 575 bytes | 575.00 KiB/s, done.
+Total 4 (delta 3), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   6660b97..e684c6b  main -> main
 
 ### 3\. Timelineライブラリのアプローチ：「そもそもDiamond問題なんて起こるほうがおかしい」という思想
 
@@ -380,16 +406,12 @@ const D = A.bind(a => {
 
 一般的なアプローチとして、`.map`で`B`と`C`を個別に定義し、それらを合成して`D`を生成しようとすると、ダイアモンドという「問題のある構造」が生まれてしまいます。しかし、`bind`を使うことで、依存グラフは根本的に変わります。
 
-Plaintext
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752493931653.png)
 
-```
-+-----------+     .bind(a => { return Timeline(d); })    +-----------+
-| Timeline A| ------------------------------------------> | Timeline D|
-+-----------+                                             +-----------+
+もはやそこには中間的な`timelineB`も`timelineC`も存在せず、菱形（ダイアモンド）構造自体が生まれません。したがって、グリッチや複数回更新という問題は**構造的に発生し得ない**のです。これは、発生した問題を後から解決するのではなく、**問題が発生しない優れた設計を選ぶ**という、次元の違う解決策です。
 
-```
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745716642404.png)
 
-もはやそこには中間的な`timelineB`も`timelineC`も存在せず、菱形（ダイアモンド）構造自体が生まれません。したがって、グリッチや複数回更新という問題は**構造的に発生し得ない**のです。これは、発生した問題を後から解決するのではなく、**問題が発生しない優れた設計を選ぶ**という、次元の違う解決策です。
 
 #### 2\. 実行効率
 

astro.config.mjs

@@ -9,8 +9,7 @@ import starlightSidebarTopics from 'starlight-sidebar-topics';
 // Import MathJax plugins
 import remarkMath from 'remark-math';
 import rehypeMathjax from 'rehype-mathjax';
-
-import d2 from 'astro-d2';
+ 
 
 export default defineConfig({
   // GitHub Pages configuration
@@ -37,7 +36,7 @@ export default defineConfig({
         }
       ),
     ],
-  }), d2()],
+  })],
   // Global Markdown configuration for Astro
   markdown: {
     remarkPlugins: [remarkMath],

package-lock.json

@@ -14,7 +14,6 @@
     "@astrojs/starlight": "^0.34.3",
     "@terrastruct/d2": "^0.1.23",
     "astro": "^5.6.1",
-    "astro-d2": "^0.8.0",
     "fs-extra": "^11.3.0",
     "gray-matter": "^4.0.3",
     "mdast-util-to-string": "^4.0.0",

package.json

@@ -25,7 +25,7 @@ const numbers = Timeline(5);
 // Pass a function: (x: number) => string
 const labels = numbers.map(x => `Score: ${x}`);
 
-console.log(labels.at(Now)); // "Score: 5"
+console.log(labels.at(Now)); // "Score: 5"share
 
 // When the source is updated, labels is automatically updated as well
 numbers.define(Now, 100);
@@ -38,19 +38,7 @@ When you call `map`, a **Dependency** is registered internally between the two `
 
 The dependency created by `map` is **Static**. Once you define the relationship `labels = numbers.map(...)`, the rule itself—the transformation of the value—does not change later.
 
-```d2
-Documentation -> Website: Starlight
-```
-
-```txt
-        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
-        | numbers         | --------------------------------> | labels          |
-        | (Timeline<number>) |                                | (Timeline<string>) |
-        +-----------------+                                   +-----------------+
-              ^                                                     |
-              | .define(Now, 100)                                   V
-              +-------------                                 Value propagates to "Score: 100"
-```
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
 
 This simple concept of a "static dependency" is the foundation for understanding the "dynamic" dependencies constructed by `bind` and `using`, which will be introduced later.
 

src/content/docs/en/book/unit-5/section-3/1-map.md

@@ -123,19 +123,25 @@ The benefits of this `bind` approach are numerous.
 
 As a common approach, trying to define `B` and `C` separately with `.map` and then combining them to create `D` gives rise to the "problematic structure" of a diamond. However, by using `bind`, the dependency graph changes fundamentally.
 
-Plaintext
 
-```
-+-----------+     .bind(a => { return Timeline(d); })    +-----------+
-| Timeline A| ------------------------------------------> | Timeline D|
-+-----------+                                             +-----------+
-```
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752493931653.png)
 
 There are no longer intermediate `timelineB` or `timelineC`, and the diamond structure itself is never formed. Therefore, problems like glitches and multiple updates **cannot structurally occur**. This is a solution on a different level: not fixing a problem after it occurs, but **choosing a superior design where the problem does not arise**.
 
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745716642404.png)
+
+
+#### 2. Execution Efficiency
+
+In this structure, every time `A` is updated, the function passed to `bind` is executed only once, and `D` is calculated only once. This is highly efficient.
+
+#### 3. Complete Elimination of Transactional Processing
+
+Even more importantly, the **complex
+
 #### 2. Execution Efficiency
 
-In this structure, every time `A` is updated, the function passed to `bind` is executed only once, and `D` is calculated only once. This is highly efficient.
+In this structure, every time `A` is updated, the function passed to `bind` is executed only once, and `D` is calculated only once. This is highly efficient.
 
 #### 3. Complete Elimination of Transactional Processing
 

src/content/docs/en/book/unit-5/section-3/3-bind.md

@@ -28,16 +28,16 @@ console.log(labels.at(Now)); // "Score: 5"
 // ソースを更新すると、labelsも自動的に更新される
 numbers.define(Now, 100);
 console.log(labels.at(Now)); // "Score: 100"
+```txt```txt
+        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
+        | numbers         | --------------------------------> | labels          |
+        | (Timeline<number>) |                                  | (Timeline<string>) |
+        +-----------------+                                 +-----------------+
+              ^                                                     |
+              | .define(Now, 100)                                   V
+              +-------------                                 値が"Score: 100"へ伝播
 
 ```
-
-## 依存グラフ (Dependency Graph)
-
-`map`を呼び出すと、内部では2つの`Timeline`の間に**依存関係 (Dependency)** が登録されます。この関係性のネットワーク全体を**依存グラフ**と呼びます。
-
-`map`が作る依存関係は**静的 (Static)** です。一度`labels = numbers.map(...)`という関係を定義したら、`numbers`と`labels`の間の「値を変換する」というルールそのものが後から変わることはありません。
-
-```txt
         +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
         | numbers         | --------------------------------> | labels          |
         | (Timeline<number>) |                                  | (Timeline<string>) |
@@ -47,6 +47,16 @@ console.log(labels.at(Now)); // "Score: 100"
               +-------------                                 値が"Score: 100"へ伝播
 
 ```
+```
+
+## 依存グラフ (Dependency Graph)
+
+`map`を呼び出すと、内部では2つの`Timeline`の間に**依存関係 (Dependency)** が登録されます。この関係性のネットワーク全体を**依存グラフ**と呼びます。
+
+`map`が作る依存関係は**静的 (Static)** です。一度`labels = numbers.map(...)`という関係を定義したら、`numbers`と`labels`の間の「値を変換する」というルールそのものが後から変わることはありません。
+
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
+
 
 このシンプルな「静的な依存関係」の概念が、後に出てくる`bind`や`using`が構築する「動的な」依存関係を理解するための基礎となります。