Update templates/apps-hub/article-writer.html

templates/apps-hub/article-writer.html

@@ -10,75 +10,39 @@
     <script src="https://cdn.jsdelivr.net/npm/appwrite@15.0.0"></script>
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <style>
-        /* Main styles */
-        /* body {
-            margin: 0;
-            padding: 0;
-            text-rendering: optimizeLegibility;
-            -webkit-font-smoothing: antialiased;
-            color: rgba(0,0,0,0.8);
-            position: relative;
-            min-height: 100vh;
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 0 20px;
             font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
             font-size: 20px;
             line-height: 1.58;
             color: rgba(0, 0, 0, 0.8);
             background-color: #fff;
-        } */
-        .container {
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
-            color: rgba(0,0,0,0.8);
-            position: relative;
-            min-height: 100vh;
-            font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
-            font-size: 20px;
-            line-height: 1.58;
-            color: rgba(0, 0, 0, 0.8);
-            background-color: #fff;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 0 20px;
         }
-        /* Typography */
         h1, h2, h3, h4, h5, h6 {
-        font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-weight: 700;
-        color: rgba(0, 0, 0, 0.84);
-        letter-spacing: -0.022em;
-        line-height: 1.2;
-    }
-    h1 {
-        font-size: 40px;
-        margin-bottom: 0.5em;
-    }
-    h2 {
-        font-size: 32px;
-        margin-top: 1.5em;
-        margin-bottom: 0.5em;
-    }
-    h3 {
-        font-size: 26px;
-        margin-top: 1.5em;
-        margin-bottom: 0.5em;
-    }
-        p {
-            margin-bottom: 32px;
+            font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            color: rgba(0, 0, 0, 0.84);
+            letter-spacing: -0.022em;
+            line-height: 1.2;
         }
-        /* Links */
+        h1 { font-size: 40px; margin-bottom: 0.5em; }
+        h2 { font-size: 32px; margin-top: 1.5em; margin-bottom: 0.5em; }
+        h3 { font-size: 26px; margin-top: 1.5em; margin-bottom: 0.5em; }
+        p { margin-bottom: 32px; }
         a {
             color: #1a8917;
             text-decoration: none;
         }
-        a:hover {
-            text-decoration: underline;
-        }
-        /* Input container */
-        #input-container {
-            margin-bottom: 40px;
+        a:hover { text-decoration: underline; }
+        #input-container, #report-container, #sources-container {
             background-color: #f9f9f9;
             padding: 32px;
             border-radius: 5px;
+            margin-bottom: 40px;
         }
         textarea {
             width: 100%;
@@ -101,25 +65,12 @@
             font-size: 18px;
             transition: background-color 0.3s;
         }
-        button:hover {
-            background-color: #0f6b0f;
-        }
-        /* Output container */
+        button:hover { background-color: #0f6b0f; }
         #output-container {
             display: flex;
             flex-direction: column;
             gap: 40px;
         }
-        #report-container, #sources-container {
-            background-color: #fff;
-            padding: 32px;
-            border-radius: 5px;
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-            word-break: break-word;
-        }
-        /* Sources */
         .source-item {
             margin-bottom: 32px;
             padding: 24px;
@@ -130,9 +81,7 @@
             cursor: pointer;
             transition: box-shadow 0.3s;
         }
-        .source-item:hover {
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
+        .source-item:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
         .source-url {
             color: #1a8917;
             text-decoration: none;
@@ -147,13 +96,8 @@
             position: relative;
             overflow: hidden;
         }
-        .source-snippet {
-            max-height: 150px;
-            overflow: hidden;
-        }
-        .source-full {
-            display: none;
-        }
+        .source-snippet { max-height: 150px; overflow: hidden; }
+        .source-full { display: none; }
         .expand-indicator {
             position: absolute;
             bottom: 0;
@@ -170,54 +114,39 @@
             font-size: 14px;
             color: #666;
         }
-        .expanded .expand-indicator::after {
-            content: '▲';
-        }
-        /* Responsive adjustments */
+        .expanded .expand-indicator::after { content: '▲'; }
         @media (max-width: 768px) {
-            .container {
-                padding: 0 16px;
-            }
-            h1 {
-                font-size: 32px;
-            }
-            h2 {
-                font-size: 24px;
-            }
-            #input-container, #report-container, #sources-container {
-                padding: 24px;
-            }
+            .container { padding: 0 16px; }
+            h1 { font-size: 32px; }
+            h2 { font-size: 24px; }
+            #input-container, #report-container, #sources-container { padding: 24px; }
         }
     </style>
-    <link rel="stylesheet" href="/css/ai-sidebar.css">
 </head>
 <body>
     <div id="app" class="ai-sidebar__container">
         <sidebar-component></sidebar-component>
         <main class="ai-sidebar__content">
-    <div class="container">
-        <div id="input-container">
-            <h1>Blog Post Generator</h1>
-            <textarea id="description" rows="4" placeholder="Enter description">write a medium article on nvidia stock performance</textarea>
-            <button onclick="generateReport()">Generate Blog</button>
-        </div>
-        <div id="output-container">
-            <div id="report-container"></div>
-            <div id="sources-container"></div>
-            <div class="button-container">
-                <button id="downloadBtn" onclick="downloadHTML()" style="display: none;" title="Download HTML Blog">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>
-                    </svg>
-                </button>
+            <div class="container">
+                <div id="input-container">
+                    <h1>Blog Post Generator</h1>
+                    <textarea id="description" rows="4" placeholder="Enter description">write a medium article on nvidia stock performance</textarea>
+                    <button onclick="generateReport()">Generate Blog</button>
+                </div>
+                <div id="output-container">
+                    <div id="report-container"></div>
+                    <div id="sources-container"></div>
+                    <div class="button-container">
+                        <button id="downloadBtn" onclick="downloadHTML()" style="display: none;" title="Download HTML Blog">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
             </div>
-        </div>
+        </main>
     </div>
-</main>
-</div>
-<script src="/js/auth.js"></script>
-<script src="/js/sidebar-component.js"></script>
-<script src="/js/main-app.js"></script>
     <script>
         async function generateReport() {
             const description = document.getElementById('description').value;
@@ -272,35 +201,30 @@
                         markdown += chunk;
                         renderMarkdown(markdown);
                     }
-                    
                 }
                 document.getElementById('downloadBtn').style.display = 'block';
             } catch (error) {
                 reportContainer.innerHTML = `Error generating blog: ${error.message}`;
             }
         }
+
         function renderMarkdown(markdown) {
             const reportContainer = document.getElementById('report-container');
             const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
             
-            if (reportContent) {
-                reportContainer.innerHTML = marked.parse(reportContent[1]);
-            } else {
-                reportContainer.innerHTML = marked.parse(markdown);
-            }
+            reportContainer.innerHTML = marked.parse(reportContent ? reportContent[1] : markdown);
             
-            const scripts = reportContainer.getElementsByTagName('script');
-            Array.from(scripts).forEach(script => {
+            Array.from(reportContainer.getElementsByTagName('script')).forEach(script => {
                 const newScript = document.createElement('script');
                 newScript.textContent = script.textContent;
                 script.parentNode.replaceChild(newScript, script);
             });
-            // Make Plotly charts responsive
-            const plots = reportContainer.querySelectorAll('.js-plotly-plot');
-            plots.forEach(plot => {
+
+            reportContainer.querySelectorAll('.js-plotly-plot').forEach(plot => {
                 Plotly.Plots.resize(plot);
             });
         }
+
         function processMetadata(metadata) {
             const sourcesContainer = document.getElementById('sources-container');
             const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
@@ -324,204 +248,102 @@
                         `;
                         sourcesContainer.appendChild(sourceItem);
                         
-                        const sourceUrl = sourceItem.querySelector('.source-url');
                         const sourceContent = sourceItem.querySelector('.source-content');
-                        const snippetDiv = sourceItem.querySelector('.source-snippet');
-                        const fullDiv = sourceItem.querySelector('.source-full');
-                        
                         sourceContent.addEventListener('click', function(e) {
-                            if (!sourceItem.classList.contains('expanded')) {
-                                sourceItem.classList.add('expanded');
-                                snippetDiv.style.display = 'none';
-                                fullDiv.style.display = 'block';
-                            } else if (e.clientY > sourceContent.getBoundingClientRect().bottom - 30) {
-                                sourceItem.classList.remove('expanded');
-                                snippetDiv.style.display = 'block';
-                                fullDiv.style.display = 'none';
+                            const isExpanded = sourceItem.classList.contains('expanded');
+                            const isClickOnBottom = e.clientY > sourceContent.getBoundingClientRect().bottom - 30;
+                            
+                            if (!isExpanded || (isExpanded && isClickOnBottom)) {
+                                sourceItem.classList.toggle('expanded');
+                                sourceItem.querySelector('.source-snippet').style.display = isExpanded ? 'block' : 'none';
+                                sourceItem.querySelector('.source-full').style.display = isExpanded ? 'none' : 'block';
                             }
                         });
                         
-                        sourceUrl.addEventListener('click', function(e) {
-                            e.stopPropagation();
-                        });
+                        sourceItem.querySelector('.source-url').addEventListener('click', e => e.stopPropagation());
                     }
                 });
             } else {
                 sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
             }
         }
-        // Make Plotly charts responsive on window resize
+
         window.addEventListener('resize', function() {
-            const plots = document.querySelectorAll('.js-plotly-plot');
-            plots.forEach(plot => {
+            document.querySelectorAll('.js-plotly-plot').forEach(plot => {
                 Plotly.Plots.resize(plot);
             });
         });
         
         function sanitizeFileName(name) {
-    // Keep only alphanumeric characters and spaces
-    name = name.replace(/[^a-z0-9\s]/gi, '');
-    // Convert to lowercase
-    name = name.toLowerCase();
-    // Replace spaces with underscores
-    name = name.replace(/\s+/g, '_');
-    // Limit the length to 50 characters
-    name = name.substring(0, 50);
-    // If the name is empty after sanitization, use a default name
-    return name || 'generated_report';
-}
-async function downloadHTML() {
-    try {
-        // Get styles from current document
-        let css = '';
-        const styleTags = document.getElementsByTagName('style');
-        for (let styleTag of styleTags) {
-            css += styleTag.innerHTML;
-        }
-
-        // Add additional styles for expanded sources and body max-width
-        css += `
-            body.report-body { 
-            max-width: 804px; 
-            margin: 0 auto; 
-            text-rendering: optimizeLegibility;
-            -webkit-font-smoothing: antialiased;
-            color: rgba(0,0,0,0.8);
-            position: relative;
-            min-height: 100vh;
-            font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
-            font-size: 20px;
-            line-height: 1.58;
-            color: rgba(0, 0, 0, 0.8);
-            background-color: #fff;
-            padding: 0 20px;
-            }
-            .source-item {
-                margin-bottom: 20px;
-            }
-            .source-content {
-                margin-top: 10px;
-            }
-            .source-snippet, .expand-indicator {
-                display: none;
-            }
-            .source-full {
-                display: block;
-            }
-                    h1, h2, h3, h4, h5, h6 {
-        font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-weight: 700;
-        color: rgba(0, 0, 0, 0.84);
-        letter-spacing: -0.022em;
-        line-height: 1.2;
-        }
-        h1 {
-            font-size: 40px;
-            margin-bottom: 0.5em;
-        }
-        h2 {
-            font-size: 32px;
-            margin-top: 1.5em;
-            margin-bottom: 0.5em;
-        }
-        h3 {
-            font-size: 26px;
-            margin-top: 1.5em;
-            margin-bottom: 0.5em;
+            return name.replace(/[^a-z0-9\s]/gi, '').toLowerCase().replace(/\s+/g, '_').substring(0, 50) || 'generated_report';
         }
-            p {
-                margin-bottom: 32px;
-            }
-            /* Links */
-            a {
-                color: #1a8917;
-                text-decoration: none;
-            }
-            a:hover {
-                text-decoration: underline;
-            }
-        `;
-
-        // Clone the document
-        const htmlContent = document.implementation.createHTMLDocument('Report');
-
-        // Set up the basic structure
-        htmlContent.documentElement.lang = 'en';
-        const head = htmlContent.head;
-        const body = htmlContent.body;
-        body.className = 'report-body';
-
-        // Add meta tags
-        const meta = htmlContent.createElement('meta');
-        meta.charset = 'UTF-8';
-        head.appendChild(meta);
 
-        const viewport = htmlContent.createElement('meta');
-        viewport.name = 'viewport';
-        viewport.content = 'width=device-width, initial-scale=1.0';
-        head.appendChild(viewport);
-
-        // Copy the report content
-        const reportContainer = document.getElementById('report-container');
-        body.innerHTML = reportContainer.innerHTML;
-
-        // Generate file name from content
-        let fileName = 'generatedreport';
-        const headings = body.querySelector('h1, h2, h3');
-        if (headings) {
-            fileName = sanitizeFileName(headings.textContent);
-        }
+        async function downloadHTML() {
+            try {
+                let css = Array.from(document.getElementsByTagName('style')).map(style => style.innerHTML).join('\n');
+                css += `
+                    body.report-body { 
+                        max-width: 804px; 
+                        margin: 0 auto; 
+                        padding: 0 20px;
+                    }
+                    .source-item { margin-bottom: 20px; }
+                    .source-content { margin-top: 10px; }
+                    .source-snippet, .expand-indicator { display: none; }
+                    .source-full { display: block; }
+                `;
 
-        // Add title
-        const title = htmlContent.createElement('title');
-        title.textContent = fileName;
-        head.appendChild(title);
+                const htmlContent = document.implementation.createHTMLDocument('Report');
+                htmlContent.documentElement.lang = 'en';
+                const head = htmlContent.head;
+                const body = htmlContent.body;
+                body.className = 'report-body';
 
-        // Add style
-        const style = htmlContent.createElement('style');
-        style.textContent = css;
-        head.appendChild(style);
+                ['charset', 'viewport'].forEach(name => {
+                    const meta = htmlContent.createElement('meta');
+                    if (name === 'charset') {
+                        meta.charset = 'UTF-8';
+                    } else {
+                        meta.name = name;
+                        meta.content = 'width=device-width, initial-scale=1.0';
+                    }
+                    head.appendChild(meta);
+                });
 
-        // Add necessary scripts
-        const markedScript = htmlContent.createElement('script');
-        markedScript.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-        head.appendChild(markedScript);
+                body.innerHTML = document.getElementById('report-container').innerHTML;
 
-        const plotlyScript = htmlContent.createElement('script');
-        plotlyScript.src = 'https://cdn.plot.ly/plotly-latest.min.js';
-        head.appendChild(plotlyScript);
+                const fileName = sanitizeFileName(body.querySelector('h1, h2, h3')?.textContent || 'generatedreport');
 
-        // Copy and modify the sources content
-        const sourcesContainer = document.getElementById('sources-container');
-        const sourcesDiv = htmlContent.createElement('div');
-        sourcesDiv.innerHTML = sourcesContainer.innerHTML;
+                head.appendChild(Object.assign(htmlContent.createElement('title'), { textContent: fileName }));
+                head.appendChild(Object.assign(htmlContent.createElement('style'), { textContent: css }));
 
-        // Expand all sources
-        const sourceItems = sourcesDiv.querySelectorAll('.source-item');
-        sourceItems.forEach(item => {
-            item.classList.add('expanded');
-            const snippetDiv = item.querySelector('.source-snippet');
-            const fullDiv = item.querySelector('.source-full');
-            if (snippetDiv) snippetDiv.style.display = 'none';
-            if (fullDiv) fullDiv.style.display = 'block';
-        });
+                ['https://cdn.jsdelivr.net/npm/marked/marked.min.js', 'https://cdn.plot.ly/plotly-latest.min.js'].forEach(src => {
+                    head.appendChild(Object.assign(htmlContent.createElement('script'), { src }));
+                });
 
-        body.appendChild(sourcesDiv);
+                const sourcesDiv = htmlContent.createElement('div');
+                sourcesDiv.innerHTML = document.getElementById('sources-container').innerHTML;
+                sourcesDiv.querySelectorAll('.source-item').forEach(item => {
+                    item.classList.add('expanded');
+                    item.querySelector('.source-snippet').style.display = 'none';
+                    item.querySelector('.source-full').style.display = 'block';
+                });
+                body.appendChild(sourcesDiv);
 
-        // Create blob and download
-        const blob = new Blob([htmlContent.documentElement.outerHTML], { type: 'text/html' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${fileName}.html`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    } catch (error) {
-        console.error('Error downloading HTML:', error);
-    }
-}
+                const blob = new Blob([htmlContent.documentElement.outerHTML], { type: 'text/html' });
+                const url = URL.createObjectURL(blob);
+                const a = Object.assign(document.createElement('a'), {
+                    href: url,
+                    download: `${fileName}.html`
+                });
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            } catch (error) {
+                console.error('Error downloading HTML:', error);
+            }
+        }
     </script>
 </body>
 </html>