Update app.py

app.py

@@ -287,95 +287,61 @@ def display_articles():
     # Sort files by name for consistent ordering
     html_files.sort()
     
-    st.markdown("Click on any article below to open it in a new tab:")
-    st.markdown("---")
+    st.markdown("Click on any article below to view:")
+    st.markdown("")  # Add some space
     
-    # Display each article as a clickable link
-    for html_file in html_files:
+    # Display each article as a clean clickable card
+    for i, html_file in enumerate(html_files):
         # Extract filename without path and extension, format it nicely
         file_name = os.path.splitext(os.path.basename(html_file))[0]
         display_name = file_name.replace('_', ' ').replace('-', ' ').title()
         
-        # Create columns for better layout
-        col1, col2, col3 = st.columns([3, 1, 1])
-        
-        with col1:
-            # Create clickable link that opens in new tab
-            file_url = f"file://{os.path.abspath(html_file)}"
-            st.markdown(f"📄 **[{display_name}]({file_url})**", unsafe_allow_html=True)
-            
-            # Add a JavaScript link that opens in new tab (alternative method)
-            st.markdown(f"""
-            <a href="file://{os.path.abspath(html_file)}" target="_blank" style="text-decoration: none;">
-                <div style="padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin: 5px 0; background-color: #f9f9f9; cursor: pointer;">
-                    📄 {display_name}
-                </div>
-            </a>
-            """, unsafe_allow_html=True)
+        # Get file size
+        try:
+            file_size = os.path.getsize(html_file)
+            size_kb = round(file_size / 1024, 1)
+            size_text = f"{size_kb} KB"
+        except:
+            size_text = "- KB"
         
-        with col2:
-            # Add file size info
-            try:
-                file_size = os.path.getsize(html_file)
-                size_kb = round(file_size / 1024, 1)
-                st.text(f"{size_kb} KB")
-            except:
-                st.text("- KB")
+        # Create a clean card-like button
+        article_clicked = st.button(
+            f"📄 {display_name} ({size_text})",
+            key=f"article_{i}",
+            use_container_width=True
+        )
         
-        with col3:
-            # Add download button for each file
+        if article_clicked:
             try:
                 with open(html_file, 'r', encoding='utf-8') as file:
                     html_content = file.read()
                 
-                st.download_button(
-                    label="⬇️",
-                    data=html_content,
-                    file_name=os.path.basename(html_file),
-                    mime="text/html",
-                    key=f"download_{file_name}"
-                )
+                # Display article content inline
+                st.markdown("---")
+                st.markdown(f"### {display_name}")
+                
+                # Add download option
+                col1, col2 = st.columns([1, 4])
+                with col1:
+                    st.download_button(
+                        label="⬇️ Download",
+                        data=html_content,
+                        file_name=os.path.basename(html_file),
+                        mime="text/html",
+                        key=f"download_clicked_{i}"
+                    )
+                with col2:
+                    if st.button("❌ Close Article", key=f"close_{i}"):
+                        st.rerun()
+                
+                # Display the HTML content
+                st.components.v1.html(html_content, height=600, scrolling=True)
+                
             except Exception as e:
-                st.text("Error")
-    
-    # Alternative: Serve files through Streamlit (if file:// doesn't work)
-    st.markdown("---")
-    st.info("💡 **Alternative Method**: If the links above don't work, select an article below to view it inline:")
-    
-    # Fallback option with selectbox
-    file_options = [os.path.splitext(os.path.basename(f))[0].replace('_', ' ').title() for f in html_files]
-    
-    selected_idx = st.selectbox(
-        "Choose an article to view inline:",
-        options=range(len(html_files)),
-        format_func=lambda x: file_options[x],
-        key="inline_article_selector"
-    )
-    
-    if st.button("Open Selected Article in New Tab"):
-        selected_file = html_files[selected_idx]
-        
-        # Create a temporary serving method using Streamlit's built-in server
-        try:
-            with open(selected_file, 'r', encoding='utf-8') as file:
-                html_content = file.read()
-            
-            # Use JavaScript to open content in new window (safer approach)
-            js_code = """
-            <script>
-                function openArticle() {
-                    var newWindow = window.open();
-                    var content = """ + repr(html_content) + """;
-                    newWindow.document.write(content);
-                    newWindow.document.close();
-                }
-                openArticle();
-            </script>
-            """
-            st.markdown(js_code, unsafe_allow_html=True)
-            
-        except Exception as e:
-            st.error(f"Error opening article: {str(e)}")
+                st.error(f"Error loading article: {str(e)}")
+                
+        # Add small spacing between articles
+        st.markdown("")
 
 def display_apps():
     st.markdown('## Apps')