feat: move mermaid DOM transformation to build time

Optimizes performance by moving the transformation of Mermaid code blocks
from client-side JavaScript to a build-time Jekyll plugin.

- Adds `nokogiri` dependency for HTML parsing
- Adds `_plugins/mermaid_processor.rb` to transform `<pre><code>` to `div.mermaid`
- Removes client-side transformation loop from `_includes/mermaid.html`

Author: google-labs-jules[bot]

Gemfile

@@ -32,3 +32,4 @@ gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin]
 # Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
 # do not have a Java counterpart.
 gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+gem "nokogiri"

Gemfile.lock

@@ -92,13 +92,34 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.10)
     logger (1.7.0)
     mercenary (0.4.0)
+    mini_portile2 (2.8.9)
     minima (2.5.2)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
+    nokogiri (1.19.0)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
+    nokogiri (1.19.0-aarch64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.19.0-aarch64-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.19.0-arm-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.19.0-arm-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.19.0-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.19.0-x86_64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.19.0-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.19.0-x86_64-linux-musl)
+      racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (7.0.0)
+    racc (1.8.1)
     rake (13.3.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
@@ -169,6 +190,7 @@ DEPENDENCIES
   jekyll-feed (~> 0.12)
   logger
   minima (~> 2.5)
+  nokogiri
   tzinfo (>= 1, < 3)
   tzinfo-data
   wdm (~> 0.1)
@@ -217,9 +239,20 @@ CHECKSUMS
   listen (3.9.0) sha256=db9e4424e0e5834480385197c139cb6b0ae0ef28cc13310cfd1ca78377d59c67
   logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
   mercenary (0.4.0) sha256=b25a1e4a59adca88665e08e24acf0af30da5b5d859f7d8f38fba52c28f405138
+  mini_portile2 (2.8.9) sha256=0cd7c7f824e010c072e33f68bc02d85a00aeb6fce05bb4819c03dfd3c140c289
   minima (2.5.2) sha256=9c434e3b7bc4a0f0ab488910438ed3757a0502ff1060d172f361907fc38aa45a
+  nokogiri (1.19.0) sha256=e304d21865f62518e04f2bf59f93bd3a97ca7b07e7f03952946d8e1c05f45695
+  nokogiri (1.19.0-aarch64-linux-gnu) sha256=11a97ecc3c0e7e5edcf395720b10860ef493b768f6aa80c539573530bc933767
+  nokogiri (1.19.0-aarch64-linux-musl) sha256=eb70507f5e01bc23dad9b8dbec2b36ad0e61d227b42d292835020ff754fb7ba9
+  nokogiri (1.19.0-arm-linux-gnu) sha256=572a259026b2c8b7c161fdb6469fa2d0edd2b61cd599db4bbda93289abefbfe5
+  nokogiri (1.19.0-arm-linux-musl) sha256=23ed90922f1a38aed555d3de4d058e90850c731c5b756d191b3dc8055948e73c
+  nokogiri (1.19.0-arm64-darwin) sha256=0811dfd936d5f6dd3f6d32ef790568bf29b2b7bead9ba68866847b33c9cf5810
+  nokogiri (1.19.0-x86_64-darwin) sha256=1dad56220b603a8edb9750cd95798bffa2b8dd9dd9aa47f664009ee5b43e3067
+  nokogiri (1.19.0-x86_64-linux-gnu) sha256=f482b95c713d60031d48c44ce14562f8d2ce31e3a9e8dd0ccb131e9e5a68b58c
+  nokogiri (1.19.0-x86_64-linux-musl) sha256=1c4ca6b381622420073ce6043443af1d321e8ed93cc18b08e2666e5bd02ffae4
   pathutil (0.16.2) sha256=e43b74365631cab4f6d5e4228f812927efc9cb2c71e62976edcb252ee948d589
   public_suffix (7.0.0) sha256=f7090b5beb0e56f9f10d79eed4d5fbe551b3b425da65877e075dad47a6a1b095
+  racc (1.8.1) sha256=4a7f6929691dbec8b5209a0b373bc2614882b55fc5d2e447a21aaa691303d62f
   rake (13.3.1) sha256=8c9e89d09f66a26a01264e7e3480ec0607f0c497a861ef16063604b1b08eb19c
   rb-fsevent (0.11.2) sha256=43900b972e7301d6570f64b850a5aa67833ee7d87b458ee92805d56b7318aefe
   rb-inotify (0.11.1) sha256=a0a700441239b0ff18eb65e3866236cd78613d6b9f78fea1f9ac47a85e47be6e

_includes/mermaid.html

@@ -1,15 +1,6 @@
 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
 <script>
     document.addEventListener("DOMContentLoaded", function () {
-        // 将 Jekyll 生成的 <pre><code class="language-mermaid"> 转换为 <div class="mermaid">
-        document.querySelectorAll('code.language-mermaid').forEach(function (codeElement) {
-            var preElement = codeElement.parentElement;
-            var mermaidDiv = document.createElement('div');
-            mermaidDiv.className = 'mermaid';
-            mermaidDiv.textContent = codeElement.textContent;
-            preElement.replaceWith(mermaidDiv);
-        });
-
         // 初始化 Mermaid
         mermaid.initialize({
             startOnLoad: true,

_plugins/mermaid_processor.rb

@@ -0,0 +1,30 @@
+require 'nokogiri'
+
+Jekyll::Hooks.register [:posts, :pages], :post_render do |doc|
+  # Only process HTML documents
+  if doc.output_ext == '.html'
+    content = doc.output
+    # Using Nokogiri to parse the HTML
+    fragment = Nokogiri::HTML::DocumentFragment.parse(content)
+
+    # Find all <pre><code class="language-mermaid"> elements
+    mermaid_blocks = fragment.css('pre > code.language-mermaid')
+
+    if mermaid_blocks.any?
+      mermaid_blocks.each do |code_element|
+        pre_element = code_element.parent
+
+        # Create the new div
+        mermaid_div = Nokogiri::XML::Node.new('div', fragment)
+        mermaid_div['class'] = 'mermaid'
+        mermaid_div.content = code_element.content
+
+        # Replace the pre element with the new div
+        pre_element.replace(mermaid_div)
+      end
+
+      # Update the document output
+      doc.output = fragment.to_html
+    end
+  end
+end