Update static/index.html

static/index.html

@@ -4,218 +4,110 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Aditya | DevLog</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/ia-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.1/marked.min.js"></script>
     <style>
-        :root {
-            --bg-color: #1A1A1D;
-            --text-color: #f3f2ec;
-            --accent-color: #e0e0e0;
-            --shadow-color: #f3f2ec;
-            --border-weight: 1px;
-        }
-
-        .light-mode {
-            --bg-color: #f3f2ec;
-            --text-color: #1c1c1c;
-            --accent-color: #333;
-            --shadow-color: #1c1c1c;
-        }
-
+        :root { --bg-color: #1A1A1D; --text-color: #f3f2ec; --shadow-color: #f3f2ec; }
+        .light-mode { --bg-color: #f3f2ec; --text-color: #1c1c1c; --shadow-color: #1c1c1c; }
         * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: "Roboto Mono", monospace;
-            background-color: var(--bg-color);
-            color: var(--text-color);
+        body { 
+            font-family: "Roboto Mono", monospace; 
+            background-color: var(--bg-color); 
+            color: var(--text-color); 
+            transition: 0.4s; 
             line-height: 1.6;
-            transition: background-color 0.4s ease, color 0.4s ease;
         }
-
         .container { max-width: 800px; margin: 0 auto; padding: 60px 24px; }
-
-        header {
-            border-bottom: var(--border-weight) solid var(--text-color);
-            padding-bottom: 40px;
-            margin-bottom: 60px;
-        }
-
-        h1 { font-size: 2.5rem; text-transform: uppercase; font-weight: 700; letter-spacing: -2px; margin-bottom: 8px; }
-        .subtitle { font-size: 1rem; opacity: 0.8; margin-bottom: 32px; }
-
-        nav { display: flex; justify-content: space-between; align-items: center; }
-        .nav-links { display: flex; gap: 24px; }
-        nav a { color: var(--text-color); text-decoration: none; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; padding: 4px 0; border-bottom: 2px solid transparent; }
-        nav a.active { border-bottom: 2px solid var(--text-color); }
-
-        .theme-toggle {
-            background: none; border: var(--border-weight) solid var(--text-color);
-            color: var(--text-color); padding: 4px 12px; cursor: pointer;
-            font-family: inherit; font-size: 0.8rem; text-transform: uppercase;
+        header { border-bottom: 1px solid var(--text-color); padding-bottom: 30px; margin-bottom: 50px; }
+        h1 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: -2px; }
+        nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
+        .theme-toggle { 
+            background: none; border: 1px solid var(--text-color); 
+            color: var(--text-color); padding: 4px 12px; cursor: pointer; 
+            text-transform: uppercase; font-size: 0.7rem; 
         }
-
-        .article-card {
-            border: var(--border-weight) solid var(--text-color);
-            padding: 32px; margin-bottom: 32px; background: transparent;
-            cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
+        .article-card { 
+            border: 1px solid var(--text-color); padding: 30px; margin-bottom: 30px; 
+            cursor: pointer; transition: 0.2s; 
         }
-
-        .article-card:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0px var(--shadow-color); }
-        .article-meta { font-size: 0.8rem; margin-bottom: 12px; text-transform: uppercase; opacity: 0.7; }
-        .article-card h2 { font-size: 1.5rem; margin-bottom: 12px; line-height: 1.2; text-transform: uppercase; }
-
-        .back-btn {
-            display: inline-block; color: var(--text-color); text-decoration: none;
-            margin-bottom: 40px; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; cursor: pointer;
-        }
-
-        .article-content { font-size: 1.05rem; }
-        .article-content h1, .article-content h2 { margin: 40px 0 20px; text-transform: uppercase; }
-        .article-content p { margin-bottom: 20px; }
-
-        pre {
-            background: #000 !important; color: #fff !important;
-            padding: 24px; border: var(--border-weight) solid var(--text-color);
-            overflow-x: auto; margin: 24px 0;
-        }
-
-        .loading { text-align: center; padding: 40px; text-transform: uppercase; opacity: 0.6; }
-
-        @media (max-width: 600px) {
-            .container { padding: 40px 16px; }
-            nav { flex-direction: column; gap: 24px; align-items: flex-start; }
+        .article-card:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--shadow-color); }
+        .meta { font-size: 0.8rem; opacity: 0.6; text-transform: uppercase; margin-bottom: 8px; }
+        .back-btn { 
+            cursor: pointer; text-transform: uppercase; font-weight: 700; 
+            font-size: 0.8rem; margin-bottom: 40px; display: inline-block; 
         }
+        pre { background: #000 !important; padding: 20px; border: 1px solid var(--text-color); overflow-x: auto; margin: 24px 0; }
+        .loading { text-align: center; padding: 50px; opacity: 0.6; text-transform: uppercase; }
+        .markdown-body { font-size: 1.1rem; }
+        .markdown-body h1, .markdown-body h2 { margin: 40px 0 20px; text-transform: uppercase; }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
             <h1>Aditya</h1>
-            <p class="subtitle">// AI Research & Backend Engineer</p>
+            <p>// AI Research & Backend Engineer</p>
             <nav>
-                <div class="nav-links">
-                    <a href="/" class="active">/Articles</a>
-                </div>
+                <a href="/" style="color: var(--text-color); text-decoration: none; font-weight: 700;">/Articles</a>
                 <button class="theme-toggle" id="themeToggle">Switch_Mode</button>
             </nav>
         </header>
-
         <main>
-            <div id="articlesPage">
-                <div id="articleList">
-                    <div class="loading">Initializing_Data_Stream...</div>
-                </div>
-                
-                <div id="articleFull" style="display:none">
-                    <span class="back-btn" id="backBtn">← Return_to_List</span>
-                    <div id="articleContent"></div>
-                </div>
+            <div id="listView">
+                <div id="articleContainer" class="loading">Initializing_Buffer...</div>
+            </div>
+            <div id="singleView" style="display: none;">
+                <span class="back-btn" onclick="location.reload()">← Return_to_List</span>
+                <div id="articleContent"></div>
             </div>
         </main>
     </div>
-
     <script>
-        const API_URL = '/api';
+        const API = '/api';
 
-        // Theme Toggle Logic
-        const themeToggle = document.getElementById('themeToggle');
-        const body = document.body;
-
-        const toggleTheme = () => {
-            const isLight = body.classList.toggle('light-mode');
+        // Theme Toggle
+        document.getElementById('themeToggle').onclick = () => {
+            const isLight = document.body.classList.toggle('light-mode');
             localStorage.setItem('theme', isLight ? 'light' : 'dark');
-            themeToggle.textContent = isLight ? 'Mode:Dark' : 'Mode:Light';
         };
+        if(localStorage.getItem('theme') === 'light') document.body.classList.add('light-mode');
 
-        themeToggle.addEventListener('click', toggleTheme);
-        if (localStorage.getItem('theme') === 'light') {
-            body.classList.add('light-mode');
-            themeToggle.textContent = 'Mode:Dark';
-        }
-
-        // Fetch and Render Articles
         async function loadArticles() {
-            const listElement = document.getElementById('articleList');
+            const container = document.getElementById('articleContainer');
             try {
-                const response = await fetch(`${API_URL}/articles?published_only=true`);
-                const articles = await response.json();
-
-                if (articles.length === 0) {
-                    listElement.innerHTML = '<div class="loading">// NO_PUBLISHED_POSTS_FOUND</div>';
-                    return;
-                }
-
-                listElement.innerHTML = articles.map(article => `
-                    <div class="article-card" onclick="loadSingleArticle('${article.slug}')">
-                        <div class="article-meta">
-                            ${new Date(article.created_at).toLocaleDateString()} // ${article.tags.join(', ')}
-                        </div>
-                        <h2>${article.title}</h2>
-                        <p class="article-excerpt">${article.excerpt || 'Read the full entry...'}</p>
+                const res = await fetch(`${API}/articles`);
+                const data = await res.json();
+                if(data.length === 0) { container.innerHTML = "// NO_ENTRIES_FOUND"; return; }
+                container.innerHTML = data.map(a => `
+                    <div class="article-card" onclick="loadSingle('${a.slug}')">
+                        <div class="meta">${new Date(a.created_at).toLocaleDateString()} // ${a.tags.join(' ')}</div>
+                        <h2 style="text-transform: uppercase;">${a.title}</h2>
+                        <p style="opacity: 0.7; margin-top: 10px;">${a.excerpt || 'READ_MORE...'}</p>
                     </div>
                 `).join('');
-            } catch (error) {
-                listElement.innerHTML = '<div class="loading">✗ Error_Connection_Failed</div>';
-            }
+            } catch { container.innerHTML = "✗ ERROR_LOADING_STREAM"; }
         }
 
-        // Fetch and Render Single Article
-        async function loadSingleArticle(slug) {
-            const listPage = document.getElementById('articleList');
-            const fullPage = document.getElementById('articleFull');
-            const contentDiv = document.getElementById('articleContent');
-
-            listPage.style.display = 'none';
-            fullPage.style.display = 'block';
-            contentDiv.innerHTML = '<div class="loading">Decoding_Buffer...</div>';
-
+        async function loadSingle(slug) {
+            document.getElementById('listView').style.display = 'none';
+            document.getElementById('singleView').style.display = 'block';
+            const content = document.getElementById('articleContent');
+            content.innerHTML = '<div class="loading">Decoding...</div>';
             try {
-                // We use encodeURIComponent to handle special characters in the slug
-                const response = await fetch(`${API_URL}/articles/${encodeURIComponent(slug)}`);
-                
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    console.error("Backend Error:", errorData);
-                    throw new Error(`Server responded with ${response.status}`);
-                }
-
-                const article = await response.json();
-
-                contentDiv.innerHTML = `
-                    <div class="article-meta">${new Date(article.created_at).toLocaleDateString()}</div>
-                    <h1 style="margin-bottom: 30px; text-transform: uppercase;">${article.title}</h1>
-                    <div class="article-content">${marked.parse(article.content)}</div>
+                const res = await fetch(`${API}/articles/${encodeURIComponent(slug)}`);
+                const a = await res.json();
+                content.innerHTML = `
+                    <div class="meta">${new Date(a.created_at).toLocaleDateString()}</div>
+                    <h1 style="text-transform: uppercase; margin-bottom: 20px;">${a.title}</h1>
+                    <div class="markdown-body">${marked.parse(a.content)}</div>
                 `;
-
-                // Syntax highlighting
-                contentDiv.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightElement(block);
-                });
-                
-                // Scroll to top
+                content.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el));
                 window.scrollTo(0, 0);
-
-            } catch (error) {
-                console.error("Frontend Fetch Error:", error);
-                contentDiv.innerHTML = `
-                    <div class="loading">
-                        ✗ ERROR_DECODING_FAILED<br>
-                        <span style="font-size: 0.7rem; opacity: 0.5;">[ ${error.message} ]</span>
-                    </div>`;
-            }
+            } catch { content.innerHTML = '<div class="loading">✗ ERROR_DECODING_FAILED</div>'; }
         }
 
-        // Back Button Logic
-        document.getElementById('backBtn').addEventListener('click', () => {
-            document.getElementById('articleList').style.display = 'block';
-            document.getElementById('articleFull').style.display = 'none';
-        });
-
-        // Initialize on load
         loadArticles();
     </script>
 </body>