diff --git a/my-blog/static/css/style.css b/my-blog/static/css/style.css index e5731b8..1db6e3a 100644 --- a/my-blog/static/css/style.css +++ b/my-blog/static/css/style.css @@ -79,7 +79,7 @@ a.view-markdown:any-link { } .header-content { - max-width: 1000px; + max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; @@ -197,7 +197,6 @@ a.view-markdown:any-link { margin-bottom: 16px; } -/* Main Content */ .main-content { grid-area: main; max-width: 800px; @@ -327,12 +326,9 @@ a.view-markdown:any-link { /* Article */ .article-container { - display: grid; - grid-template-columns: 1fr 240px; - /* gap: 40px; */ - max-width: 1000px; + max-width: 800px; margin: 0 auto; - padding: 100px 0; + padding: 100px 0; } /* article.article-content { padding: 10px; } */ @@ -396,18 +392,12 @@ a.view-markdown:any-link { border-color: var(--white); } -/* Sidebar styles */ -.article-sidebar { - position: sticky; - top: 100px; - height: fit-content; -} - .toc { background: #f6f8fa; border: 1px solid #d1d9e0; border-radius: 8px; padding: 16px; + margin: 20px 0; } .toc h3 { @@ -814,10 +804,8 @@ article.article-content { /* Responsive */ @media (max-width: 1000px) { .article-container { - grid-template-columns: 1fr; - gap: 24px; max-width: 100%; - padding: 50px 0; + padding: 50px 20px; margin: 0; } } @@ -1141,7 +1129,17 @@ article.article-content { .article-meta { padding: 10px; } + .article-actions { padding: 10px; } + + article.article-content { + max-width: 100%; + } + + .ask-ai-content { + max-width: 100%; + } + } diff --git a/my-blog/static/js/ask-ai.js b/my-blog/static/js/ask-ai.js index 22ecefa..f57f66e 100644 --- a/my-blog/static/js/ask-ai.js +++ b/my-blog/static/js/ask-ai.js @@ -12,16 +12,66 @@ function toggleAskAI() { panel.style.display = isVisible ? 'none' : 'block'; if (!isVisible) { - checkAuthenticationStatus(); + console.log('Ask AI panel opened'); + + // For production fallback - if OAuth app fails to load, show profiles + const isProd = window.location.hostname !== 'localhost' && !window.location.hostname.includes('preview'); + if (isProd) { + console.log('Production environment detected - using fallback profile display'); + // Shorter timeout for production + setTimeout(() => { + const userSections = document.querySelectorAll('.user-section'); + console.log('Production check - user sections:', userSections.length); + + if (userSections.length === 0) { + console.log('No user sections found in production - showing profiles directly'); + handleAuthenticationStatus(false); + } else { + console.log('User sections found in production - showing authenticated UI'); + handleAuthenticationStatus(true); + } + }, 300); + } else { + checkAuthenticationStatus(); + } } } function checkAuthenticationStatus() { - const userSections = document.querySelectorAll('.user-section'); - const isAuthenticated = userSections.length > 0; + // Check multiple times for OAuth app to load + let checkCount = 0; + const maxChecks = 10; + + const checkForAuth = () => { + console.log(`Auth check attempt ${checkCount + 1}/${maxChecks}`); + const userSections = document.querySelectorAll('.user-section'); + const authButtons = document.querySelectorAll('[data-auth-status]'); + const oauthContainers = document.querySelectorAll('#oauth-container'); + + console.log('User sections found:', userSections.length); + console.log('Auth buttons found:', authButtons.length); + console.log('OAuth containers found:', oauthContainers.length); + + const isAuthenticated = userSections.length > 0; + + if (isAuthenticated || checkCount >= maxChecks - 1) { + console.log('Final auth status:', isAuthenticated); + handleAuthenticationStatus(isAuthenticated); + } else { + checkCount++; + setTimeout(checkForAuth, 200); + } + }; + + checkForAuth(); +} + +function handleAuthenticationStatus(isAuthenticated) { + console.log('Handling auth status:', isAuthenticated); if (isAuthenticated) { // User is authenticated - show Ask AI UI + console.log('User authenticated - showing AI chat interface'); document.getElementById('authCheck').style.display = 'none'; document.getElementById('chatForm').style.display = 'block'; document.getElementById('chatHistory').style.display = 'block'; @@ -38,6 +88,7 @@ function checkAuthenticationStatus() { }, 50); } else { // User not authenticated - show profiles instead of auth message + console.log('User not authenticated - showing profiles'); document.getElementById('authCheck').style.display = 'none'; document.getElementById('chatForm').style.display = 'none'; document.getElementById('chatHistory').style.display = 'block'; @@ -377,6 +428,37 @@ function setupAskAIEventListeners() { document.addEventListener('DOMContentLoaded', function() { setupAskAIEventListeners(); console.log('Ask AI initialized successfully'); + + // Also listen for OAuth app load completion + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.type === 'childList') { + // Check if user-section was added/removed + const userSectionAdded = Array.from(mutation.addedNodes).some(node => + node.nodeType === Node.ELEMENT_NODE && + (node.classList?.contains('user-section') || node.querySelector?.('.user-section')) + ); + const userSectionRemoved = Array.from(mutation.removedNodes).some(node => + node.nodeType === Node.ELEMENT_NODE && + (node.classList?.contains('user-section') || node.querySelector?.('.user-section')) + ); + + if (userSectionAdded || userSectionRemoved) { + console.log('User section status changed'); + // Update Ask AI panel if it's visible + const panel = document.getElementById('askAiPanel'); + if (panel && panel.style.display !== 'none') { + checkAuthenticationStatus(); + } + } + } + }); + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); }); // Global functions for onclick handlers diff --git a/my-blog/templates/base.html b/my-blog/templates/base.html index fa2d07e..99fb6d6 100644 --- a/my-blog/templates/base.html +++ b/my-blog/templates/base.html @@ -61,7 +61,7 @@