feat: modernize pull behavior page with Graphviz SSR pipeline

.github/workflows/deploy.yml

@@ -41,6 +41,9 @@ jobs:
           HUGO_ENVIRONMENT: production
           HUGO_RELATIVEURLS: false
         run: hugo config && hugo --minify --baseURL '${{ steps.pages.outputs.base_url }}/'
+      - uses: actions/setup-node@v6
+      - name: pre-render the Graphviz diagrams
+        run: npm install && node ./script/graphviz-ssr.js
       - uses: actions/upload-pages-artifact@v3
         with:
           path: ./public

.github/workflows/pr.yml

@@ -17,6 +17,8 @@ jobs:
         sudo dpkg -i /tmp/hugo.deb
     - name: run Hugo to build the pages
       run: hugo
+    - uses: actions/setup-node@v6
+    - run: npm install && node ./script/graphviz-ssr.js
     - name: build tar archive
       run: cd public && tar czvf ../pages.tar.gz *
     - name: Upload build artifact

.gitignore

@@ -1,3 +1,4 @@
 /.hugo_build.lock
 /public/
 /resources/_gen/
+/node_modules/

content/choosing-the-default-behavior-of-git-pull.md

@@ -18,25 +18,81 @@ Behind the scenes, `git pull` is a two-step command. It first runs `git fetch` t
 
 If you haven't made any local changes since your last pull, Git simply moves your branch pointer forward to match the remote. This is known as a fast-forward. **In a fast-forward scenario, all three installer options behave identically.**
 
-```text
-Before pull:
-  A---B---C  (local)
-  A---B---C---D---E   (remote)
+**Before pull:**
+```graphviz
+digraph ff_before_local {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A1 [label="A"]; B1 [label="B"]; C1 [label="C"];
+  A1 -> B1 -> C1;
+
+  node [shape="plaintext", style="", fillcolor="transparent", fontcolor="white", fontname="Courier", fontsize="14", fixedsize="false", width=""];
+  local_lbl [label="(local)"];
+  C1 -> local_lbl [style="invis"];
+}
+```
+
+```graphviz
+digraph ff_before_remote {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A2 [label="A"]; B2 [label="B"]; C2 [label="C"]; D2 [label="D"]; E2 [label="E"];
+  A2 -> B2 -> C2 -> D2 -> E2;
+
+  node [shape="plaintext", style="", fillcolor="transparent", fontcolor="white", fontname="Courier", fontsize="14", fixedsize="false", width=""];
+  remote_lbl [label="(remote)"];
+  E2 -> remote_lbl [style="invis"];
+}
+```
 
-After git pull (fast-forwarded):
-  A---B---C---D---E   (local syncs with remote)
+**After `git pull` (fast-forwarded):**
+```graphviz
+digraph ff_after {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A -> B -> C -> D -> E;
+
+  node [shape="plaintext", style="", fillcolor="transparent", fontcolor="white", fontname="Courier", fontsize="14", fixedsize="false", width=""];
+  sync_lbl [label="(local syncs with remote)"];
+  E -> sync_lbl [style="invis"];
+}
 ```
 
 ### Divergence
 
 If you have made local changes but the remote repository has also been modified, then your histories have diverged. 
 
-```text
-        X---Y---Z   (local)
-       /
-  A---B
-       \
-        C---D---E   (remote)
+```graphviz
+digraph divergence {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A -> B;
+  B -> X -> Y -> Z;
+  B -> C -> D -> E;
+
+  node [shape="plaintext", style="", fillcolor="transparent", fontcolor="white", fontname="Courier", fontsize="14", fixedsize="false", width=""];
+  local_lbl [label="(local)"];
+  remote_lbl [label="(remote)"];
+
+  Z -> local_lbl [style="invis"];
+  E -> remote_lbl [style="invis"];
+}
 ``` 
 
 ## The three installer options
@@ -49,12 +105,27 @@ When histories diverge, a fast-forward is no longer possible. This is where the
 
 Git automatically creates a new **merge commit** to combine branches. This preserves the exact timeline of parallel work.
 
-```text
-        X---Y---Z
-       /         \
-  A---B           M   (merge commit)
-       \         /
-        C---D---E
+```graphviz
+digraph merge {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A -> B;
+  B -> X -> Y -> Z;
+  B -> C -> D -> E;
+
+  M [fillcolor="#d9ead3", color="#38761d"];
+
+  Z -> M;
+  E -> M;
+
+  node [shape="plaintext", style="", fillcolor="transparent", fontcolor="white", fontname="Courier", fontsize="14", fixedsize="false", width=""];
+  merge_lbl [label="(merge commit)"];
+  M -> merge_lbl [style="invis"];
+}
 ```
 
 ### Option 2: Rebase
@@ -63,16 +134,49 @@ Git automatically creates a new **merge commit** to combine branches. This prese
 
 Git temporarily sets your local commits aside, updates your branch to match the remote, and rewrites your commits on top of the remote branch, keeping a single linear timeline.
 
-```text
-Before pull:
-        X---Y---Z   (local)
-       /
-  A---B
-       \ 
-        C---D---E   (remote)
-
-After git pull --rebase:
-        A---B---C---D---E---X'---Y'---Z'
+**Before pull:**
+```graphviz
+digraph divergence {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A -> B;
+  B -> X -> Y -> Z;
+  B -> C -> D -> E;
+
+  node [shape="plaintext", style="", fillcolor="transparent", fontcolor="white", fontname="Courier", fontsize="14", fixedsize="false", width=""];
+  local_lbl [label="(local)"];
+  remote_lbl [label="(remote)"];
+
+  Z -> local_lbl [style="invis"];
+  E -> remote_lbl [style="invis"];
+}
+```
+
+**After `git pull --rebase`:**
+```graphviz
+digraph rebase_after {
+  rankdir="LR";
+  bgcolor="transparent";
+  margin="0"; pad="0.05";
+  node [shape="circle", style="filled", fillcolor="#f0f0f0", color="#666666", fontname="sans-serif", width="0.4", fixedsize="true"];
+  edge [color="#666666", penwidth="2"];
+
+  A -> B -> C -> D -> E;
+
+  X_prime [label="X'"];
+  Y_prime [label="Y'"];
+  Z_prime [label="Z'"];
+
+  E -> X_prime -> Y_prime -> Z_prime;
+
+  node [style="dashed,filled", fillcolor="#f9f9f9", color="#cccccc", fontcolor="#999999"];
+  edge [style="dashed", color="#cccccc", penwidth="1"];
+  B -> X -> Y -> Z;
+}
 ```
 
 *Note: Rebasing changes the IDs (SHAs) of your local commits.*
@@ -99,16 +203,14 @@ For a detailed guide on managing conflicts in Git for Windows, see our dedicated
 
 You can change this behavior at any time without reinstalling Git by running one of the following commands:
 
-```sh
-# Option 1: Merge
-git config --global pull.rebase false
+**- Merge:**
+* `git config --global pull.rebase false`
 
-# Option 2: Rebase
-git config --global pull.rebase true
+**- Rebase:**
+* `git config --global pull.rebase true`
 
-# Option 3: Fast-forward only (Default)
-git config --global pull.ff only
-```
+**- Fast-forward only:**
+* `git config --global pull.ff only`
 
 ## Related resources
 

content/diagram-list.html

@@ -0,0 +1,4 @@
+---
+outputs:
+  - json
+---

hugo.yml

@@ -10,6 +10,9 @@ markup:
     renderer:
       unsafe: true
 mediaTypes:
+  application/json:
+    suffixes:
+    - json
   application/vnd.curl:
     suffixes:
       - url

layouts/_default/_markup/render-codeblock-graphviz.html

@@ -0,0 +1,7 @@
+<pre class="graphviz"
+{{- if (and (isset "engine" .Attributes) (ne "" .Attributes.engine)) }} engine="{{ .Attributes.engine }}"{{ end -}}
+{{- if (and (isset "alt" .Attributes) (ne "" .Attributes.alt)) }} alt="{{ .Attributes.alt }}"{{ end -}}
+>
+  {{- .Inner | htmlEscape | safeHTML -}}
+</pre>
+{{- .Page.Store.Set "hasGraphviz" true }}

layouts/_default/baseof.html

@@ -53,4 +53,37 @@
 			});
 		</script>
 	</body>
+{{- if .Store.Get "hasGraphviz" }}
+  <script src="{{ relURL "js/viz-global.js" }}"> </script>
+  <script type="text/javascript">
+    let vizInstance
+    window.addEventListener("DOMContentLoaded", async () => {
+      [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => {
+        if (!vizInstance) vizInstance = await Viz.instance()
+        if (x.style.display === 'none') return
+        const options = {
+          format: "svg",
+          graphAttributes: {
+            bgcolor: "transparent",
+          },
+          engine: x.getAttribute("engine") || "dot",
+        }
+        const svg = vizInstance.renderString(x.innerText, options)
+        const wrapper = document.createElement('div')
+        wrapper.className = 'graphviz-wrapper'
+        wrapper.style.overflowX = 'auto'
+        const img = document.createElement('img')
+        img.src = 'data:image/svg+xml;utf8,' + encodeURIComponent(svg.substring(svg.indexOf('<svg')))
+        const alt = x.getAttribute('alt')
+        if (alt) { img.setAttribute('alt', alt) }
+        img.style.width = 'auto'
+        img.style.height = 'auto'
+        img.style.maxWidth = 'none'
+        wrapper.appendChild(img)
+        x.parentNode.insertBefore(wrapper, x)
+        x.style.display = 'none'
+      })
+    })
+  </script>
+{{- end }}
 </html>

layouts/_default/single.json.json

@@ -0,0 +1,2 @@
+{{- $diagram_list := where .Site.Pages "RawContent" "like" "```graphviz" -}}
+{{- $diagram_list | jsonify -}}