From 3367b927a466b94db3a4ef6d29860c252dad0d83 Mon Sep 17 00:00:00 2001
From: Blake <jwsung91@gmail.com>
Date: Sat, 4 Jul 2026 08:06:00 +0900
Subject: [PATCH] fix: Mermaid tab UI never rendered due to wrong sibling
 lookup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

enhanceMermaidTabs looked for the code block via
diagram.previousElementSibling, expecting a pre[data-language="mermaid"]
right before the .mermaid div. But the actual markup (from the
remarkMermaid plugin in astro.config.mjs) wraps the diagram in its own
<figure class="mermaid-figure">, with the source code living in a
separate <details class="mermaid-source"> that follows the figure —
so previousElementSibling was always null and the tabs never built.
This was already broken on main before any of the recent work; unrelated
to it.

Look up the diagram/code pair from the figure and its next sibling
details block instead, and remove the now-empty figure/details shells
once their contents are moved into the tab panels.

Verified with Playwright against a production preview build: all 4
diagrams on a test post get Mermaid/Code tab pairs, switching tabs
shows the correct content, tab state survives a theme toggle
(re-render from the earlier Mermaid dark/light fix keeps working
underneath), and no leftover empty figure/details elements remain.
---
 src/pages/blog/[...slug].astro | 158 +++++++++++++++++----------------
 1 file changed, 82 insertions(+), 76 deletions(-)

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index cea92e0..e6a7b0a 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -270,85 +270,91 @@ const blogPostingStructuredData = {
 
   <script>
     const enhanceMermaidTabs = () => {
-      document.querySelectorAll('.mermaid').forEach((diagram, index) => {
-        if (diagram.closest('.mermaid-tabs')) {
-          return;
-        }
+      document
+        .querySelectorAll('figure.mermaid-figure')
+        .forEach((figure, index) => {
+          if (figure.closest('.mermaid-tabs')) {
+            return;
+          }
 
-        const previousElement = diagram.previousElementSibling;
-        const codeBlock = previousElement?.matches(
-          'pre[data-language="mermaid"]',
-        )
-          ? previousElement
-          : previousElement?.classList.contains('code-copy-wrapper') &&
-              previousElement.querySelector('pre[data-language="mermaid"]')
-            ? previousElement
-            : null;
+          const diagram = figure.querySelector('.mermaid');
+          const detailsBlock = figure.nextElementSibling;
 
-        if (!codeBlock) {
-          return;
-        }
+          if (!diagram || !detailsBlock?.matches('details.mermaid-source')) {
+            return;
+          }
 
-        const tabId = `mermaid-tab-${index}`;
-        const wrapper = document.createElement('div');
-        wrapper.className = 'mermaid-tabs not-prose';
-
-        const tabList = document.createElement('div');
-        tabList.className = 'mermaid-tab-list';
-        tabList.setAttribute('role', 'tablist');
-        tabList.setAttribute('aria-label', 'Mermaid display mode');
-
-        const diagramButton = document.createElement('button');
-        diagramButton.type = 'button';
-        diagramButton.className = 'mermaid-tab-button is-active';
-        diagramButton.id = `${tabId}-diagram-tab`;
-        diagramButton.textContent = 'Mermaid';
-        diagramButton.setAttribute('role', 'tab');
-        diagramButton.setAttribute('aria-controls', `${tabId}-diagram-panel`);
-        diagramButton.setAttribute('aria-selected', 'true');
-
-        const codeButton = document.createElement('button');
-        codeButton.type = 'button';
-        codeButton.className = 'mermaid-tab-button';
-        codeButton.id = `${tabId}-code-tab`;
-        codeButton.textContent = 'Code';
-        codeButton.setAttribute('role', 'tab');
-        codeButton.setAttribute('aria-controls', `${tabId}-code-panel`);
-        codeButton.setAttribute('aria-selected', 'false');
-
-        const diagramPanel = document.createElement('div');
-        diagramPanel.className = 'mermaid-tab-panel';
-        diagramPanel.id = `${tabId}-diagram-panel`;
-        diagramPanel.setAttribute('role', 'tabpanel');
-        diagramPanel.setAttribute('aria-labelledby', diagramButton.id);
-
-        const codePanel = document.createElement('div');
-        codePanel.className = 'mermaid-tab-panel';
-        codePanel.id = `${tabId}-code-panel`;
-        codePanel.setAttribute('role', 'tabpanel');
-        codePanel.setAttribute('aria-labelledby', codeButton.id);
-        codePanel.hidden = true;
-
-        codeBlock.parentNode?.insertBefore(wrapper, codeBlock);
-        tabList.append(diagramButton, codeButton);
-        diagramPanel.append(diagram);
-        codePanel.append(codeBlock);
-        wrapper.append(tabList, diagramPanel, codePanel);
-
-        const activateTab = (mode: 'diagram' | 'code') => {
-          const showDiagram = mode === 'diagram';
-
-          diagramPanel.hidden = !showDiagram;
-          codePanel.hidden = showDiagram;
-          diagramButton.classList.toggle('is-active', showDiagram);
-          codeButton.classList.toggle('is-active', !showDiagram);
-          diagramButton.setAttribute('aria-selected', String(showDiagram));
-          codeButton.setAttribute('aria-selected', String(!showDiagram));
-        };
-
-        diagramButton.addEventListener('click', () => activateTab('diagram'));
-        codeButton.addEventListener('click', () => activateTab('code'));
-      });
+          const codeBlock =
+            detailsBlock.querySelector('.code-copy-wrapper') ??
+            detailsBlock.querySelector('pre');
+
+          if (!codeBlock) {
+            return;
+          }
+
+          const tabId = `mermaid-tab-${index}`;
+          const wrapper = document.createElement('div');
+          wrapper.className = 'mermaid-tabs not-prose';
+
+          const tabList = document.createElement('div');
+          tabList.className = 'mermaid-tab-list';
+          tabList.setAttribute('role', 'tablist');
+          tabList.setAttribute('aria-label', 'Mermaid display mode');
+
+          const diagramButton = document.createElement('button');
+          diagramButton.type = 'button';
+          diagramButton.className = 'mermaid-tab-button is-active';
+          diagramButton.id = `${tabId}-diagram-tab`;
+          diagramButton.textContent = 'Mermaid';
+          diagramButton.setAttribute('role', 'tab');
+          diagramButton.setAttribute('aria-controls', `${tabId}-diagram-panel`);
+          diagramButton.setAttribute('aria-selected', 'true');
+
+          const codeButton = document.createElement('button');
+          codeButton.type = 'button';
+          codeButton.className = 'mermaid-tab-button';
+          codeButton.id = `${tabId}-code-tab`;
+          codeButton.textContent = 'Code';
+          codeButton.setAttribute('role', 'tab');
+          codeButton.setAttribute('aria-controls', `${tabId}-code-panel`);
+          codeButton.setAttribute('aria-selected', 'false');
+
+          const diagramPanel = document.createElement('div');
+          diagramPanel.className = 'mermaid-tab-panel';
+          diagramPanel.id = `${tabId}-diagram-panel`;
+          diagramPanel.setAttribute('role', 'tabpanel');
+          diagramPanel.setAttribute('aria-labelledby', diagramButton.id);
+
+          const codePanel = document.createElement('div');
+          codePanel.className = 'mermaid-tab-panel';
+          codePanel.id = `${tabId}-code-panel`;
+          codePanel.setAttribute('role', 'tabpanel');
+          codePanel.setAttribute('aria-labelledby', codeButton.id);
+          codePanel.hidden = true;
+
+          figure.parentNode?.insertBefore(wrapper, figure);
+          tabList.append(diagramButton, codeButton);
+          diagramPanel.append(diagram);
+          codePanel.append(codeBlock);
+          wrapper.append(tabList, diagramPanel, codePanel);
+
+          figure.remove();
+          detailsBlock.remove();
+
+          const activateTab = (mode: 'diagram' | 'code') => {
+            const showDiagram = mode === 'diagram';
+
+            diagramPanel.hidden = !showDiagram;
+            codePanel.hidden = showDiagram;
+            diagramButton.classList.toggle('is-active', showDiagram);
+            codeButton.classList.toggle('is-active', !showDiagram);
+            diagramButton.setAttribute('aria-selected', String(showDiagram));
+            codeButton.setAttribute('aria-selected', String(!showDiagram));
+          };
+
+          diagramButton.addEventListener('click', () => activateTab('diagram'));
+          codeButton.addEventListener('click', () => activateTab('code'));
+        });
     };
 
     if (document.querySelectorAll('.mermaid').length) {