fix css

my-blog/static/css/style.css

@@ -199,8 +199,8 @@ a.view-markdown:any-link {
 
 @media (max-width: 1000px) {
     .main-content {
-        padding: 20px !important;
+        padding: 20px;
-        max-width: 100% !important;
+        max-width: 100%;
     }
 }
 
@@ -737,7 +737,6 @@ a.view-markdown:any-link {
     margin: 0 auto;
     margin-top: 48px;
     padding-top: 32px;
-    border-top: 1px solid #d1d9e0;
 }
 
 .comment-container {
@@ -771,23 +770,24 @@ a.view-markdown:any-link {
 /* Responsive */
 @media (max-width: 1000px) {
     .article-container {
-        grid-template-columns: 1fr !important;
+        grid-template-columns: 1fr;
-        gap: 24px !important;
+        gap: 24px;
-        max-width: 100% !important;
+        max-width: 100%;
-        padding: 0px !important;
+        padding: 0;
-        margin: 0 !important;
+        margin: 0;
     }
 }
 
 @media (max-width: 1000px) {
     .main-header {
-        padding: 12px 0 !important;
+        padding: 12px 0;
     }
     
     .header-content {
-        max-width: 100% !important;
+        max-width: 100%;
-        padding: 0 20px !important;
+        padding: 0 20px;
-        grid-template-columns: 0 1fr auto !important;
+        grid-template-columns: auto 1fr auto;
+        gap: 0;
     }
     
     /* Hide site title text on mobile */
@@ -795,17 +795,20 @@ a.view-markdown:any-link {
         display: none;
     }
     
-    /* Center logo on mobile */
+    /* Left align logo on mobile */
     .logo {
-        grid-column: 1 / 3;
+        grid-column: 1;
-        justify-self: center;
+        justify-self: left;
         padding: 5px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
     }
     
     /* Reduce logo size on mobile */
     .logo .likeButton {
-        width: 40pt !important;
+        width: 40pt;
-        height: 40pt !important;
+        height: 40pt;
     }
     
     /* Position AI button on the right */
@@ -814,24 +817,17 @@ a.view-markdown:any-link {
         justify-self: end;
     }
     
-    /* Show only icon for Ask AI button on mobile */
+    /* Ask AI button mobile style */
     .ask-ai-btn {
         padding: 8px;
         min-width: 40px;
         justify-content: center;
+        font-size: 0;
+        gap: 0;
     }
     
     .ask-ai-btn .ai-icon {
         margin: 0;
-    }
-    
-    /* Hide AI button text on mobile, show only icon */
-    .ask-ai-btn {
-        font-size: 0;
-        gap: 0px !important;
-    }
-    
-    .ask-ai-btn .ai-icon {
         font-size: 16px;
     }
     
@@ -845,14 +841,14 @@ a.view-markdown:any-link {
     }
     
     .article-body pre {
-        margin: 16px 0 !important;
+        margin: 16px 0;
-        border-radius: 4px !important;
+        border-radius: 4px;
-        max-width: 100% !important;
+        max-width: 100%;
-        overflow-x: auto !important;
+        overflow-x: auto;
     }
     
     .article-body pre code {
-        padding: 20px 12px !important;
+        padding: 20px 12px;
         word-wrap: break-word;
         white-space: pre-wrap;
     }

my-blog/static/js/ask-ai.js

@@ -0,0 +1,360 @@
+/**
+ * Ask AI functionality - Pure JavaScript, no jQuery dependency
+ */
+class AskAI {
+    constructor() {
+        this.isReady = false;
+        this.aiProfile = null;
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.checkAuthOnLoad();
+    }
+
+    setupEventListeners() {
+        // Listen for AI ready signal
+        window.addEventListener('aiChatReady', () => {
+            this.isReady = true;
+            console.log('AI Chat is ready');
+        });
+
+        // Listen for AI profile updates
+        window.addEventListener('aiProfileLoaded', (event) => {
+            this.aiProfile = event.detail;
+            console.log('AI profile loaded:', this.aiProfile);
+            this.updateButton();
+        });
+
+        // Listen for AI responses
+        window.addEventListener('aiResponseReceived', (event) => {
+            this.handleAIResponse(event.detail);
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.hide();
+            }
+            if (e.key === 'Enter' && e.target.id === 'aiQuestion' && !e.shiftKey) {
+                e.preventDefault();
+                this.ask();
+            }
+        });
+
+        // Monitor authentication changes
+        this.observeAuth();
+    }
+
+    toggle() {
+        const panel = document.getElementById('askAiPanel');
+        const isVisible = panel.style.display !== 'none';
+        
+        if (isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    show() {
+        const panel = document.getElementById('askAiPanel');
+        panel.style.display = 'block';
+        this.checkAuth();
+    }
+
+    hide() {
+        const panel = document.getElementById('askAiPanel');
+        panel.style.display = 'none';
+    }
+
+    checkAuth() {
+        const userSections = document.querySelectorAll('.user-section');
+        const isAuthenticated = userSections.length > 0;
+        
+        const authCheck = document.getElementById('authCheck');
+        const chatForm = document.getElementById('chatForm');
+        const chatHistory = document.getElementById('chatHistory');
+        
+        if (isAuthenticated) {
+            authCheck.style.display = 'none';
+            chatForm.style.display = 'block';
+            chatHistory.style.display = 'block';
+            
+            if (chatHistory.children.length === 0) {
+                this.showGreeting();
+            }
+            
+            setTimeout(() => {
+                document.getElementById('aiQuestion').focus();
+            }, 50);
+        } else {
+            authCheck.style.display = 'block';
+            chatForm.style.display = 'none';
+            chatHistory.style.display = 'none';
+        }
+    }
+
+    checkAuthOnLoad() {
+        setTimeout(() => {
+            this.checkAuth();
+        }, 500);
+    }
+
+    observeAuth() {
+        const observer = new MutationObserver(() => {
+            const userSections = document.querySelectorAll('.user-section');
+            if (userSections.length > 0) {
+                this.checkAuth();
+                observer.disconnect();
+            }
+        });
+        
+        observer.observe(document.body, { 
+            childList: true, 
+            subtree: true 
+        });
+    }
+
+    updateButton() {
+        const button = document.getElementById('askAiButton');
+        if (this.aiProfile && this.aiProfile.displayName) {
+            const textNode = button.childNodes[2];
+            if (textNode) {
+                textNode.textContent = this.aiProfile.displayName;
+            }
+        }
+    }
+
+    showGreeting() {
+        if (!this.aiProfile) return;
+
+        const chatHistory = document.getElementById('chatHistory');
+        const greetingDiv = document.createElement('div');
+        greetingDiv.className = 'chat-message ai-message comment-style initial-greeting';
+        
+        const avatarElement = this.aiProfile.avatar 
+            ? `<img src="${this.aiProfile.avatar}" alt="${this.aiProfile.displayName}" class="profile-avatar">`
+            : '🤖';
+        
+        greetingDiv.innerHTML = `
+            <div class="message-header">
+                <div class="avatar">${avatarElement}</div>
+                <div class="user-info">
+                    <div class="display-name">${this.aiProfile.displayName}</div>
+                    <div class="handle">@${this.aiProfile.handle}</div>
+                    <div class="timestamp">${new Date().toLocaleString()}</div>
+                </div>
+            </div>
+            <div class="message-content">
+                Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
+            </div>
+        `;
+        chatHistory.appendChild(greetingDiv);
+    }
+
+    async ask() {
+        const question = document.getElementById('aiQuestion').value;
+        const chatHistory = document.getElementById('chatHistory');
+        const askButton = document.getElementById('askButton');
+        
+        if (!question.trim()) return;
+        
+        // Wait for AI to be ready
+        if (!this.isReady) {
+            await this.waitForReady();
+        }
+        
+        // Disable button
+        askButton.disabled = true;
+        askButton.textContent = 'Posting...';
+        
+        try {
+            // Add user message
+            this.addUserMessage(question);
+            
+            // Clear input
+            document.getElementById('aiQuestion').value = '';
+            
+            // Show loading
+            this.showLoading();
+            
+            // Post question
+            const event = new CustomEvent('postAIQuestion', {
+                detail: { question: question }
+            });
+            window.dispatchEvent(event);
+            
+        } catch (error) {
+            this.showError('Sorry, I encountered an error. Please try again.');
+        } finally {
+            askButton.disabled = false;
+            askButton.textContent = 'Ask';
+        }
+    }
+
+    waitForReady() {
+        return new Promise(resolve => {
+            const checkReady = setInterval(() => {
+                if (this.isReady) {
+                    clearInterval(checkReady);
+                    resolve();
+                }
+            }, 100);
+        });
+    }
+
+    addUserMessage(question) {
+        const chatHistory = document.getElementById('chatHistory');
+        const userSection = document.querySelector('.user-section');
+        
+        let userAvatar = '👤';
+        let userDisplay = 'You';
+        let userHandle = 'user';
+        
+        if (userSection) {
+            const avatarImg = userSection.querySelector('.user-avatar');
+            const displayName = userSection.querySelector('.user-display-name');
+            const handle = userSection.querySelector('.user-handle');
+            
+            if (avatarImg && avatarImg.src) {
+                userAvatar = `<img src="${avatarImg.src}" alt="${displayName?.textContent || 'User'}" class="profile-avatar">`;
+            }
+            if (displayName?.textContent) {
+                userDisplay = displayName.textContent;
+            }
+            if (handle?.textContent) {
+                userHandle = handle.textContent.replace('@', '');
+            }
+        }
+        
+        const questionDiv = document.createElement('div');
+        questionDiv.className = 'chat-message user-message comment-style';
+        questionDiv.innerHTML = `
+            <div class="message-header">
+                <div class="avatar">${userAvatar}</div>
+                <div class="user-info">
+                    <div class="display-name">${userDisplay}</div>
+                    <div class="handle">@${userHandle}</div>
+                    <div class="timestamp">${new Date().toLocaleString()}</div>
+                </div>
+            </div>
+            <div class="message-content">${question}</div>
+        `;
+        chatHistory.appendChild(questionDiv);
+    }
+
+    showLoading() {
+        const chatHistory = document.getElementById('chatHistory');
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'ai-loading-simple';
+        loadingDiv.innerHTML = `
+            <i class="fas fa-robot"></i>
+            <span>考えています</span>
+            <i class="fas fa-spinner fa-spin"></i>
+        `;
+        chatHistory.appendChild(loadingDiv);
+    }
+
+    showError(message) {
+        const chatHistory = document.getElementById('chatHistory');
+        this.removeLoading();
+        
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'chat-message error-message comment-style';
+        errorDiv.innerHTML = `
+            <div class="message-header">
+                <div class="avatar">⚠️</div>
+                <div class="user-info">
+                    <div class="display-name">System</div>
+                    <div class="handle">@system</div>
+                    <div class="timestamp">${new Date().toLocaleString()}</div>
+                </div>
+            </div>
+            <div class="message-content">${message}</div>
+        `;
+        chatHistory.appendChild(errorDiv);
+    }
+
+    removeLoading() {
+        const loadingMsg = document.querySelector('.ai-loading-simple');
+        if (loadingMsg) {
+            loadingMsg.remove();
+        }
+    }
+
+    handleAIResponse(responseData) {
+        const chatHistory = document.getElementById('chatHistory');
+        this.removeLoading();
+        
+        const aiProfile = responseData.aiProfile;
+        if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
+            console.error('AI profile data is missing');
+            return;
+        }
+        
+        const timestamp = new Date(responseData.timestamp || Date.now());
+        const avatarElement = aiProfile.avatar 
+            ? `<img src="${aiProfile.avatar}" alt="${aiProfile.displayName}" class="profile-avatar">`
+            : '🤖';
+        
+        const answerDiv = document.createElement('div');
+        answerDiv.className = 'chat-message ai-message comment-style';
+        answerDiv.innerHTML = `
+            <div class="message-header">
+                <div class="avatar">${avatarElement}</div>
+                <div class="user-info">
+                    <div class="display-name">${aiProfile.displayName}</div>
+                    <div class="handle">@${aiProfile.handle}</div>
+                    <div class="timestamp">${timestamp.toLocaleString()}</div>
+                </div>
+            </div>
+            <div class="message-content">${responseData.answer}</div>
+        `;
+        chatHistory.appendChild(answerDiv);
+        
+        // Limit chat history
+        this.limitChatHistory();
+    }
+
+    limitChatHistory() {
+        const chatHistory = document.getElementById('chatHistory');
+        if (chatHistory.children.length > 10) {
+            chatHistory.removeChild(chatHistory.children[0]);
+            if (chatHistory.children.length > 0) {
+                chatHistory.removeChild(chatHistory.children[0]);
+            }
+        }
+    }
+}
+
+// Initialize Ask AI when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    try {
+        window.askAIInstance = new AskAI();
+        console.log('Ask AI initialized successfully');
+    } catch (error) {
+        console.error('Failed to initialize Ask AI:', error);
+    }
+});
+
+// Global function for onclick
+window.AskAI = {
+    toggle: function() {
+        console.log('AskAI.toggle called');
+        if (window.askAIInstance) {
+            window.askAIInstance.toggle();
+        } else {
+            console.error('Ask AI instance not available');
+        }
+    },
+    ask: function() {
+        console.log('AskAI.ask called');
+        if (window.askAIInstance) {
+            window.askAIInstance.ask();
+        } else {
+            console.error('Ask AI instance not available');
+        }
+    }
+};

my-blog/static/js/theme.js

@@ -0,0 +1,94 @@
+/**
+ * Theme and visual effects - Pure CSS animations, no jQuery
+ */
+class Theme {
+    constructor() {
+        this.init();
+    }
+
+    init() {
+        this.setupParticleColors();
+        this.setupLogoAnimations();
+    }
+
+    setupParticleColors() {
+        // Dynamic particle colors based on theme
+        const style = document.createElement('style');
+        style.textContent = `
+            /* Dynamic particle colors based on theme */
+            .likeButton .particleLayer circle:nth-child(1),
+            .likeButton .particleLayer circle:nth-child(2) {
+                fill: var(--particle-color-1) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(3),
+            .likeButton .particleLayer circle:nth-child(4) {
+                fill: var(--particle-color-2) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(5),
+            .likeButton .particleLayer circle:nth-child(6),
+            .likeButton .particleLayer circle:nth-child(7) {
+                fill: var(--particle-color-3) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(8),
+            .likeButton .particleLayer circle:nth-child(9),
+            .likeButton .particleLayer circle:nth-child(10) {
+                fill: var(--particle-color-4) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(11),
+            .likeButton .particleLayer circle:nth-child(12),
+            .likeButton .particleLayer circle:nth-child(13),
+            .likeButton .particleLayer circle:nth-child(14) {
+                fill: var(--particle-color-5) !important;
+            }
+            
+            /* Reset initial animations but allow hover */
+            .likeButton .syui {
+                animation: none;
+            }
+            
+            .likeButton .particleLayer {
+                animation: none; 
+            }
+            
+            .likeButton .explosion {
+                animation: none;
+            }
+            
+            /* Enable hover animations from package */
+            .likeButton:hover .syui,
+            .likeButton:hover path.syui {
+                animation: syuiDeluxeAnime 400ms forwards !important;
+            }
+            
+            .likeButton:hover .particleLayer {
+                animation: particleLayerAnime 800ms forwards !important;
+            }
+            
+            .likeButton:hover .explosion {
+                animation: explosionAnime 800ms forwards !important;
+            }
+            
+            /* Logo positioning */
+            .logo .likeButton {
+                background: transparent !important;
+                display: block;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    setupLogoAnimations() {
+        // Pure CSS animations are handled by the svg-animation-package.css
+        // This method is reserved for any future JavaScript-based enhancements
+        console.log('Logo animations initialized (CSS-based)');
+    }
+}
+
+// Initialize theme when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new Theme();
+});

my-blog/templates/base.html

@@ -7,7 +7,6 @@
     
     <!-- Favicon -->
     <link rel="icon" href="/favicon.ico" />
-    <link rel="shortcut icon" href="/favicon.ico">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     
     <!-- Stylesheets -->
@@ -16,9 +15,6 @@
     <link rel="stylesheet" href="/pkg/icomoon/style.css">
     <link rel="stylesheet" href="/pkg/font-awesome/css/all.min.css">
     
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    
     {% include "oauth-assets.html" %}
     {% block head %}{% endblock %}
 </head>
@@ -28,7 +24,8 @@
             <div class="header-content">
                 <h1><a href="/" class="site-title">{{ config.title }}</a></h1>
                 <div class="logo">
-                    <a href="/"><svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton">
+                    <a href="/">
+                        <svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton">
                             <circle class="explosion" r="150" cx="250" cy="250"></circle>
                             <g class="particleLayer">
                                 <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"></circle>
@@ -46,16 +43,14 @@
                                 <circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"></circle>
                                 <circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"></circle>
                             </g>
-<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
+                            <g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
-
+                                <path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"></path>
-<path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"></path>
+                            </g>
-</g>
+                        </svg>
-
+                    </a>
-</svg></a>
                 </div>
                 <div class="header-actions">
-                    <!-- Ask AI button on all pages -->
+                    <button class="ask-ai-btn" onclick="AskAI.toggle()" id="askAiButton">
-                    <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
                         <span class="ai-icon icon-ai"></span>
                         ai
                     </button>
@@ -63,21 +58,18 @@
             </div>
         </header>
 
-        <!-- Ask AI panel on all pages -->
+        <!-- Ask AI Panel -->
         <div class="ask-ai-panel" id="askAiPanel" style="display: none;">
             <div class="ask-ai-content">
-                <!-- Authentication check -->
                 <div id="authCheck" class="auth-check">
                     <p>🔒 Please login with ATProto to use Ask AI feature</p>
                 </div>
                 
-                <!-- Chat form (hidden until authenticated) -->
                 <div id="chatForm" class="ask-ai-form" style="display: none;">
                     <input type="text" id="aiQuestion" placeholder="What would you like to know?" />
-                    <button onclick="askQuestion()" id="askButton">Ask</button>
+                    <button onclick="AskAI.ask()" id="askButton">Ask</button>
                 </div>
                 
-                <!-- Chat history -->
                 <div id="chatHistory" class="chat-history" style="display: none;"></div>
             </div>
         </div>
@@ -98,367 +90,7 @@
         <p>© {{ config.author }}</p>
     </footer>
 
-    <script>
+    <script src="/js/ask-ai.js"></script>
-        function toggleAskAI() {
+    <script src="/js/theme.js"></script>
-            const panel = document.getElementById('askAiPanel');
-            const isVisible = panel.style.display !== 'none';
-            panel.style.display = isVisible ? 'none' : 'block';
-            
-            if (!isVisible) {
-                checkAuthenticationStatus();
-            }
-        }
-
-        function checkAuthenticationStatus() {
-            const userSections = document.querySelectorAll('.user-section');
-            const isAuthenticated = userSections.length > 0;
-            
-            if (isAuthenticated) {
-                // User is authenticated - show Ask AI UI
-                document.getElementById('authCheck').style.display = 'none';
-                document.getElementById('chatForm').style.display = 'block';
-                document.getElementById('chatHistory').style.display = 'block';
-                
-                // Show initial greeting if chat history is empty
-                const chatHistory = document.getElementById('chatHistory');
-                if (chatHistory.children.length === 0) {
-                    showInitialGreeting();
-                }
-                
-                // Focus after a small delay to ensure element is visible
-                setTimeout(() => {
-                    document.getElementById('aiQuestion').focus();
-                }, 50);
-            } else {
-                // User is not authenticated - show login message only
-                document.getElementById('authCheck').style.display = 'block';
-                document.getElementById('chatForm').style.display = 'none';
-                document.getElementById('chatHistory').style.display = 'none';
-            }
-        }
-
-        let isAIChatReady = false;
-        let aiProfileData = null;
-        
-        // Listen for AI ready signal
-        window.addEventListener('aiChatReady', function() {
-            isAIChatReady = true;
-            console.log('AI Chat is ready');
-        });
-        
-        
-        // Listen for AI profile updates from OAuth app
-        window.addEventListener('aiProfileLoaded', function(event) {
-            aiProfileData = event.detail;
-            console.log('AI profile loaded:', aiProfileData);
-            updateAskAIButton();
-        });
-        
-        function updateAskAIButton() {
-            const button = document.getElementById('askAiButton');
-            
-            if (aiProfileData && aiProfileData.displayName) {
-                button.childNodes[2].textContent = aiProfileData.displayName;
-            }
-        }
-        
-        function showInitialGreeting() {
-            const chatHistory = document.getElementById('chatHistory');
-            const greetingDiv = document.createElement('div');
-            greetingDiv.className = 'chat-message ai-message comment-style initial-greeting';
-            
-            if (!aiProfileData) {
-                return; // Don't show greeting if no AI profile data
-            }
-            
-            let avatarElement = '🤖';
-            if (aiProfileData.avatar) {
-                avatarElement = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName}" class="profile-avatar">`;
-            }
-            
-            const displayName = aiProfileData.displayName;
-            const handle = aiProfileData.handle;
-            
-            greetingDiv.innerHTML = `
-                <div class="message-header">
-                    <div class="avatar">${avatarElement}</div>
-                    <div class="user-info">
-                        <div class="display-name">${displayName}</div>
-                        <div class="handle">@${handle}</div>
-                        <div class="timestamp">${new Date().toLocaleString()}</div>
-                    </div>
-                </div>
-                <div class="message-content">
-                    Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
-                </div>
-            `;
-            chatHistory.appendChild(greetingDiv);
-        }
-        
-        async function askQuestion() {
-            const question = document.getElementById('aiQuestion').value;
-            const chatHistory = document.getElementById('chatHistory');
-            const askButton = document.getElementById('askButton');
-            
-            if (!question.trim()) return;
-            
-            // Wait for AI to be ready
-            if (!isAIChatReady) {
-                console.log('Waiting for AI Chat to be ready...');
-                await new Promise(resolve => {
-                    const checkReady = setInterval(() => {
-                        if (isAIChatReady) {
-                            clearInterval(checkReady);
-                            resolve();
-                        }
-                    }, 100);
-                });
-            }
-            
-            // Disable button and show loading
-            askButton.disabled = true;
-            askButton.textContent = 'Posting...';
-            
-            // Get user info from OAuth component
-            const userSection = document.querySelector('.user-section');
-            let userAvatar = '👤';
-            let userDisplay = 'You';
-            let userHandle = 'user';
-            
-            if (userSection) {
-                const avatarImg = userSection.querySelector('.user-avatar');
-                const displayName = userSection.querySelector('.user-display-name');
-                const handle = userSection.querySelector('.user-handle');
-                
-                if (avatarImg && avatarImg.src) {
-                    userAvatar = `<img src="${avatarImg.src}" alt="${displayName?.textContent || 'User'}" class="profile-avatar">`;
-                }
-                if (displayName?.textContent) {
-                    userDisplay = displayName.textContent;
-                }
-                if (handle?.textContent) {
-                    userHandle = handle.textContent.replace('@', '');
-                }
-            }
-            
-            // Add question to chat history in comment style
-            const questionDiv = document.createElement('div');
-            questionDiv.className = 'chat-message user-message comment-style';
-            questionDiv.innerHTML = `
-                <div class="message-header">
-                    <div class="avatar">${userAvatar}</div>
-                    <div class="user-info">
-                        <div class="display-name">${userDisplay}</div>
-                        <div class="handle">@${userHandle}</div>
-                        <div class="timestamp">${new Date().toLocaleString()}</div>
-                    </div>
-                </div>
-                <div class="message-content">${question}</div>
-            `;
-            chatHistory.appendChild(questionDiv);
-            
-            // Clear input
-            document.getElementById('aiQuestion').value = '';
-            
-            try {
-                // Show loading immediately
-                const loadingDiv = document.createElement('div');
-                loadingDiv.className = 'ai-loading-simple';
-                loadingDiv.innerHTML = `
-                    <i class="fas fa-robot"></i>
-                    <span>考えています</span>
-                    <i class="fas fa-spinner fa-spin"></i>
-                `;
-                chatHistory.appendChild(loadingDiv);
-                
-                // Post question to ATProto via OAuth app
-                const event = new CustomEvent('postAIQuestion', {
-                    detail: { question: question }
-                });
-                window.dispatchEvent(event);
-                
-            } catch (error) {
-                // Remove loading indicator and show error
-                const loadingMsg = chatHistory.querySelector('.ai-loading-simple');
-                if (loadingMsg) {
-                    loadingMsg.remove();
-                }
-                
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'chat-message error-message comment-style';
-                errorDiv.innerHTML = `
-                    <div class="message-header">
-                        <div class="avatar">⚠️</div>
-                        <div class="user-info">
-                            <div class="display-name">System</div>
-                            <div class="handle">@system</div>
-                            <div class="timestamp">${new Date().toLocaleString()}</div>
-                        </div>
-                    </div>
-                    <div class="message-content">Sorry, I encountered an error. Please try again.</div>
-                `;
-                chatHistory.appendChild(errorDiv);
-            } finally {
-                askButton.disabled = false;
-                askButton.textContent = 'Ask';
-            }
-        }
-
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape') {
-                document.getElementById('askAiPanel').style.display = 'none';
-            }
-            
-            // Enter key to send message
-            if (e.key === 'Enter' && e.target.id === 'aiQuestion' && !e.shiftKey) {
-                e.preventDefault();
-                askQuestion();
-            }
-        });
-        
-        // Monitor authentication state changes
-        const authObserver = new MutationObserver(function(mutations) {
-            const userSections = document.querySelectorAll('.user-section');
-            if (userSections.length > 0) {
-                checkAuthenticationStatus();
-                // Stop observing once authenticated
-                authObserver.disconnect();
-            }
-        });
-        
-        // Start observing for authentication changes
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initial authentication check with slight delay for OAuth component
-            setTimeout(() => {
-                checkAuthenticationStatus();
-            }, 500);
-            
-            authObserver.observe(document.body, { 
-                childList: true, 
-                subtree: true 
-            });
-        });
-        
-        // Listen for AI responses from OAuth app
-        window.addEventListener('aiResponseReceived', function(event) {
-            const chatHistory = document.getElementById('chatHistory');
-            const loadingMsg = chatHistory.querySelector('.ai-loading-simple');
-            
-            if (loadingMsg) {
-                loadingMsg.remove();
-            }
-            
-            const aiProfile = event.detail.aiProfile;
-            if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
-                console.error('AI profile data is missing, cannot display response');
-                return;
-            }
-            
-            const timestamp = new Date(event.detail.timestamp || Date.now());
-            
-            // Create comment-style AI response
-            const answerDiv = document.createElement('div');
-            answerDiv.className = 'chat-message ai-message comment-style';
-            
-            // Prepare avatar
-            let avatarElement = '🤖';
-            if (aiProfile.avatar) {
-                avatarElement = `<img src="${aiProfile.avatar}" alt="${aiProfile.displayName}" class="profile-avatar">`;
-            }
-            
-            answerDiv.innerHTML = `
-                <div class="message-header">
-                    <div class="avatar">${avatarElement}</div>
-                    <div class="user-info">
-                        <div class="display-name">${aiProfile.displayName}</div>
-                        <div class="handle">@${aiProfile.handle}</div>
-                        <div class="timestamp">${timestamp.toLocaleString()}</div>
-                    </div>
-                </div>
-                <div class="message-content">${event.detail.answer}</div>
-            `;
-            chatHistory.appendChild(answerDiv);
-            
-            // Auto-expand content instead of scrolling
-            if (chatHistory.children.length > 5) {
-                const oldestMessage = chatHistory.children[0];
-                if (oldestMessage && oldestMessage.classList.contains('user-message')) {
-                    // Keep the latest 5 exchanges (10 messages)
-                    if (chatHistory.children.length > 10) {
-                        chatHistory.removeChild(oldestMessage);
-                        if (chatHistory.children.length > 0) {
-                            chatHistory.removeChild(chatHistory.children[0]);
-                        }
-                    }
-                }
-            }
-        });
-    </script>
-    
-    <!-- Reset conflicting CSS but allow hover animations -->
-    <style>
-        /* Dynamic particle colors based on theme */
-        .likeButton .particleLayer circle:nth-child(1),
-        .likeButton .particleLayer circle:nth-child(2) {
-            fill: var(--particle-color-1) !important;
-        }
-        
-        .likeButton .particleLayer circle:nth-child(3),
-        .likeButton .particleLayer circle:nth-child(4) {
-            fill: var(--particle-color-2) !important;
-        }
-        
-        .likeButton .particleLayer circle:nth-child(5),
-        .likeButton .particleLayer circle:nth-child(6),
-        .likeButton .particleLayer circle:nth-child(7) {
-            fill: var(--particle-color-3) !important;
-        }
-        
-        .likeButton .particleLayer circle:nth-child(8),
-        .likeButton .particleLayer circle:nth-child(9),
-        .likeButton .particleLayer circle:nth-child(10) {
-            fill: var(--particle-color-4) !important;
-        }
-        
-        .likeButton .particleLayer circle:nth-child(11),
-        .likeButton .particleLayer circle:nth-child(12),
-        .likeButton .particleLayer circle:nth-child(13),
-        .likeButton .particleLayer circle:nth-child(14) {
-            fill: var(--particle-color-5) !important;
-        }
-        
-        /* Reset initial animations but allow hover */
-        .likeButton .syui {
-            animation: none;
-        }
-        
-        .likeButton .particleLayer {
-            animation: none; 
-        }
-        
-        .likeButton .explosion {
-            animation: none;
-        }
-        
-        /* Enable hover animations from package */
-        .likeButton:hover .syui,
-        .likeButton:hover path.syui {
-            animation: syuiDeluxeAnime 400ms forwards !important;
-        }
-        
-        .likeButton:hover .particleLayer {
-            animation: particleLayerAnime 800ms forwards !important;
-        }
-        
-        .likeButton:hover .explosion {
-            animation: explosionAnime 800ms forwards !important;
-        }
-        
-        /* Logo positioning */
-        .logo .likeButton {
-            background: transparent !important;
-            display: block;
-        }
-    </style>
 </body>
 </html>

my-blog/templates/index.html

@@ -27,7 +27,7 @@
                 <div class="post-actions">
                     <a href="{{ post.url }}" class="read-more">Read more</a>
                     {% if post.markdown_url %}
-                    <a href="{{ post.markdown_url }}" class="view-markdown" title="View Markdown">Markdown</a>
+                    <a href="{{ post.markdown_url }}" class="view-markdown" title="View Markdown">.md</a>
                     {% endif %}
                     {% if post.translation_url %}
                     <a href="{{ post.translation_url }}" class="view-translation" title="View Translation">🌐</a>

my-blog/templates/post-complex.html

@@ -16,7 +16,7 @@
             <div class="article-actions">
                 {% if post.markdown_url %}
                 <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
-                    📝 Markdown
+                    .md
                 </a>
                 {% endif %}
                 {% if post.translation_url %}

my-blog/templates/post-simple.html

@@ -16,7 +16,7 @@
             <div class="article-actions">
                 {% if post.markdown_url %}
                 <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
-                    📝 Markdown
+                    .md
                 </a>
                 {% endif %}
                 {% if post.translation_url %}

my-blog/templates/post.html

@@ -16,7 +16,7 @@
             <div class="article-actions">
                 {% if post.markdown_url %}
                 <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
-                    Markdown
+                    .md
                 </a>
                 {% endif %}
                 {% if post.translation_url %}