@jet-w/astro-blog 0.1.0

package/templates/default/public/js/mermaid-render.js

@@ -0,0 +1,98 @@
+// Mermaid 渲染脚本
+console.log('🎯 Mermaid render script loaded');
+
+// 动态加载mermaid库并渲染图表
+function loadMermaidAndRender() {
+  console.log('🚀 开始检查 mermaid 代码块');
+  
+  // 检查是否有mermaid代码块
+  const mermaidBlocks = document.querySelectorAll('pre code[data-language="mermaid"], pre code.language-mermaid');
+  
+  console.log(`🔍 找到 ${mermaidBlocks.length} 个mermaid代码块`);
+  
+  if (mermaidBlocks.length === 0) {
+    console.log('❌ 没有找到mermaid代码块');
+    return;
+  }
+
+  // 动态加载mermaid脚本
+  console.log('📥 开始加载 Mermaid 库');
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+  script.onload = function() {
+    console.log('✅ Mermaid库加载完成');
+
+    // 初始化mermaid
+    window.mermaid.initialize({
+      startOnLoad: false,
+      theme: 'default',
+      securityLevel: 'loose'
+    });
+
+    console.log('⚙️ Mermaid初始化完成');
+
+    // 处理每个mermaid代码块
+    mermaidBlocks.forEach(async function(block, index) {
+      try {
+        const code = block.textContent.trim();
+        const id = 'mermaid-diagram-' + index + '-' + Date.now();
+
+        console.log(`🎨 处理第${index+1}个图表: ${code.substring(0, 30)}...`);
+
+        // 使用mermaid渲染
+        const result = await window.mermaid.render(id, code);
+
+        console.log(`🎉 第${index+1}个图表SVG生成成功`);
+
+        // 创建容器
+        const container = document.createElement('div');
+        container.className = 'mermaid-container';
+        container.style.cssText = `
+          margin: 1.5rem 0;
+          padding: 1rem;
+          border: 1px solid #e2e8f0;
+          border-radius: 0.5rem;
+          background: white;
+          overflow-x: auto;
+          text-align: center;
+        `;
+        container.innerHTML = result.svg;
+
+        // 替换原始代码块
+        const preElement = block.closest('pre');
+        if (preElement && preElement.parentNode) {
+          preElement.parentNode.insertBefore(container, preElement);
+          preElement.remove();
+          console.log(`✨ 第${index+1}个图表渲染成功并替换完成`);
+        }
+      } catch (error) {
+        console.error(`❌ 渲染第${index+1}个图表失败:`, error);
+        
+        // 显示错误信息
+        const errorDiv = document.createElement('div');
+        errorDiv.style.cssText = 'color: red; padding: 1rem; border: 1px solid red; margin: 1rem 0; background: #fee;';
+        errorDiv.innerHTML = `<strong>Mermaid渲染错误:</strong> ${error.message}`;
+        
+        const preElement = block.closest('pre');
+        if (preElement && preElement.parentNode) {
+          preElement.parentNode.insertBefore(errorDiv, preElement);
+        }
+      }
+    });
+  };
+
+  script.onerror = function() {
+    console.error('❌ Mermaid库加载失败');
+  };
+
+  document.head.appendChild(script);
+}
+
+// 等待DOM加载完成后执行
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', loadMermaidAndRender);
+  console.log('⏳ 等待DOM加载完成...');
+} else {
+  console.log('📄 DOM已就绪，立即执行');
+  loadMermaidAndRender();
+}

package/templates/default/public/js/mermaid-simple.js

@@ -0,0 +1,95 @@
+// 简单的mermaid渲染脚本，不使用ES模块
+(function() {
+    console.log('🎯 Simple Mermaid: 初始化开始');
+
+    // 检查mermaid是否已经加载
+    function waitForMermaid() {
+        if (window.mermaid) {
+            console.log('✅ Mermaid库已加载');
+            initializeMermaid();
+        } else {
+            console.log('⏳ 等待Mermaid库加载...');
+            setTimeout(waitForMermaid, 100);
+        }
+    }
+
+    function initializeMermaid() {
+        window.mermaid.initialize({
+            startOnLoad: false,
+            theme: 'default',
+            securityLevel: 'loose'
+        });
+
+        processMermaidBlocks();
+    }
+
+    function processMermaidBlocks() {
+        console.log('🎯 开始处理mermaid代码块');
+
+        // 查找所有mermaid代码块
+        const codeBlocks = document.querySelectorAll('pre code[data-language="mermaid"], pre code.language-mermaid');
+        console.log(`🎯 找到 ${codeBlocks.length} 个mermaid代码块`);
+
+        codeBlocks.forEach(async (codeBlock, index) => {
+            try {
+                let mermaidCode = codeBlock.textContent.trim();
+                console.log(`🎯 处理第${index+1}个代码块:`, mermaidCode.substring(0, 50));
+
+                // 移除%%mermaid标记（如果存在）
+                if (mermaidCode.startsWith('%%mermaid')) {
+                    mermaidCode = mermaidCode.substring('%%mermaid'.length).trim();
+                    console.log('🎯 移除%%mermaid标记后:', mermaidCode.substring(0, 50));
+                }
+
+                const id = `mermaid-simple-${index}-${Date.now()}`;
+
+                // 使用mermaid.render方法
+                const { svg } = await window.mermaid.render(id, mermaidCode);
+
+                // 创建容器
+                const container = document.createElement('div');
+                container.className = 'mermaid-container';
+                container.style.cssText = 'margin: 1.5rem 0; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: white;';
+                container.innerHTML = svg;
+
+                // 替换原始代码块
+                const preElement = codeBlock.closest('pre');
+                if (preElement && preElement.parentNode) {
+                    preElement.parentNode.insertBefore(container, preElement);
+                    preElement.style.display = 'none';
+                    console.log(`✅ 第${index+1}个图表渲染成功`);
+                }
+            } catch (error) {
+                console.error(`❌ 渲染第${index+1}个图表时出错:`, error);
+            }
+        });
+
+        console.log('🎯 Mermaid处理完成');
+    }
+
+    // 加载mermaid库
+    function loadMermaid() {
+        console.log('📥 开始加载Mermaid库');
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+        script.onload = function() {
+            console.log('✅ Mermaid库加载完成');
+            waitForMermaid();
+        };
+        script.onerror = function() {
+            console.error('❌ Mermaid库加载失败');
+        };
+        document.head.appendChild(script);
+    }
+
+    // 启动函数
+    function start() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadMermaid);
+        } else {
+            loadMermaid();
+        }
+    }
+
+    start();
+})();

package/templates/default/public/js/tabs-init.js

@@ -0,0 +1,86 @@
+/**
+ * Tabs component initialization script
+ * Handles tab switching functionality
+ */
+
+// Global function for tab switching (called from onclick handlers)
+window.switchTab = function(tabsId, tabIndex) {
+  const tabsContainer = document.querySelector(`[data-tabs-id="${tabsId}"]`);
+  if (!tabsContainer) return;
+
+  // Update buttons
+  const buttons = tabsContainer.querySelectorAll('.tab-button');
+  buttons.forEach((btn, idx) => {
+    if (idx === tabIndex) {
+      btn.classList.add('active');
+    } else {
+      btn.classList.remove('active');
+    }
+  });
+
+  // Update panels
+  const panels = tabsContainer.querySelectorAll('.tab-panel');
+  panels.forEach((panel, idx) => {
+    if (idx === tabIndex) {
+      panel.classList.add('active');
+    } else {
+      panel.classList.remove('active');
+    }
+  });
+};
+
+// Initialize all tabs on page load
+document.addEventListener('DOMContentLoaded', function() {
+  initializeTabs();
+});
+
+// Re-initialize on Astro page navigation (for view transitions)
+document.addEventListener('astro:page-load', function() {
+  initializeTabs();
+});
+
+function initializeTabs() {
+  const tabContainers = document.querySelectorAll('.custom-tabs');
+
+  tabContainers.forEach((container) => {
+    // Ensure first tab is active by default
+    const firstButton = container.querySelector('.tab-button');
+    const firstPanel = container.querySelector('.tab-panel');
+
+    if (firstButton && !container.querySelector('.tab-button.active')) {
+      firstButton.classList.add('active');
+    }
+
+    if (firstPanel && !container.querySelector('.tab-panel.active')) {
+      firstPanel.classList.add('active');
+    }
+
+    // Add keyboard navigation
+    const buttons = container.querySelectorAll('.tab-button');
+    buttons.forEach((button, index) => {
+      button.addEventListener('keydown', (e) => {
+        let newIndex = index;
+
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          newIndex = (index + 1) % buttons.length;
+        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          newIndex = (index - 1 + buttons.length) % buttons.length;
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          newIndex = 0;
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          newIndex = buttons.length - 1;
+        }
+
+        if (newIndex !== index) {
+          const tabsId = container.getAttribute('data-tabs-id');
+          window.switchTab(tabsId, newIndex);
+          buttons[newIndex].focus();
+        }
+      });
+    });
+  });
+}