Update app.py

app.py

@@ -287,41 +287,90 @@ def display_articles():
     # Sort files by name for consistent ordering
     html_files.sort()
     
-    # Create a selectbox to choose which article to display
-    if len(html_files) > 1:
-        # Extract just the filename without path and extension for display
-        file_options = [os.path.splitext(os.path.basename(f))[0].replace('_', ' ').title() for f in html_files]
+    st.markdown("Click on any article below to open it in a new tab:")
+    st.markdown("---")
+    
+    # Display each article as a clickable link
+    for html_file in 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()
         
-        selected_article = st.selectbox(
-            "Choose an article to read:",
-            options=range(len(html_files)),
-            format_func=lambda x: file_options[x]
-        )
+        # Create columns for better layout
+        col1, col2, col3 = st.columns([3, 1, 1])
         
-        selected_file = html_files[selected_article]
-    else:
-        selected_file = html_files[0]
-    
-    # Display the selected article
-    try:
-        with open(selected_file, 'r', encoding='utf-8') as file:
-            html_content = file.read()
+        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)
         
-        # Display the HTML content
-        st.markdown("---")
-        st.components.v1.html(html_content, height=600, scrolling=True)
+        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")
         
-        # Add download button
-        st.download_button(
-            label="Download Article",
-            data=html_content,
-            file_name=os.path.basename(selected_file),
-            mime="text/html"
-        )
+        with col3:
+            # Add download button for each file
+            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}"
+                )
+            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]
         
-    except Exception as e:
-        st.error(f"Error loading article: {str(e)}")
-        st.info("Make sure your HTML files are properly formatted and encoded in UTF-8.")
+        # 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
+            st.markdown(f"""
+            <script>
+                var newWindow = window.open();
+                newWindow.document.write(`{html_content.replace('`', '\\`')}`);
+                newWindow.document.close();
+            </script>
+            """, unsafe_allow_html=True)
+            
+        except Exception as e:
+            st.error(f"Error opening article: {str(e)}")
 
 def display_apps():
     st.markdown('## Apps')