Merge pull request 'markdown tables support' (#1) from markdown-tables into master

Reviewed-on: #1

TASK_LOG.md

@@ -3,7 +3,7 @@
 ## Session Overview
 **Date:** August 10, 2025  
 **Duration:** ~1 hour  
-**Total Tasks Completed:** 8
+**Total Tasks Completed:** 18
 
 ---
 
@@ -97,8 +97,143 @@
 **Request:** "can you create a log with a summary of each task i have asked you to perform with a timestamp"  
 **Actions:**
 - Created this comprehensive task log
-- Documented all changes, reasoning, and outcomes
+
-- **Result:** Complete audit trail of development session
+---
+
+### 9. Fix Missing /wiki Prefix on Links
+**Time:** ~1:00 AM  
+**Request:** "/wiki is not prepended on some of the links"  
+**Actions:**
+- Identified issue in markdown link processing (`src/markdown/mod.rs:72-96`)
+- Fixed relative links missing `/wiki/` prefix in page content
+- Modified link processing logic to add `/wiki/` prefix to relative links that don't start with `http`, `/`, or `#`
+- Added test case to verify fix works correctly
+- **Result:** Relative markdown links like `[Page](page-name)` now correctly become `/wiki/page-name`
+
+---
+
+### 10. Add Toggleable Filetree Title
+**Time:** ~1:05 AM  
+**Request:** "make the filetree title 'Filetree' and make it clickable and toggle the showing the contents"  
+**Actions:**
+- Updated both folder and wiki page templates in `src/server/mod.rs`
+- Changed "Files in this folder" heading to clickable "📁 Filetree" with cursor pointer styling
+- Added JavaScript toggle functionality to show/hide file tree contents
+- Icon changes between 📁 (open) and 📂 (closed) states
+- Applied to both `render_folder_page()` and `render_wiki_page()` functions
+- **Result:** File tree now has a collapsible interface with visual feedback
+
+---
+
+### 11. Move Filetree Above Article Content
+**Time:** ~1:10 AM  
+**Request:** "move the filetree above the article"  
+**Actions:**
+- Updated folder page template in `src/server/mod.rs` to move filetree outside and above the `<article>` tag
+- Updated wiki page template to move filetree above article content
+- Restructured HTML layout: `<main>` now contains separate `<div>` for filetree followed by `<article>` 
+- Maintained all existing toggle functionality and styling
+- **Result:** Filetree now appears above the main article content on both page types
+
+---
+
+### 12. Style Header Navigation in One Row
+**Time:** ~1:15 AM  
+**Request:** "put Home, search and logout all in one row"  
+**Actions:**
+- Added CSS styling to both folder and wiki page templates in `src/server/mod.rs`
+- Implemented flexbox layout for navigation bar with `display: flex`
+- Used `justify-content: space-between` to spread elements across the full width
+- Added padding, borders, and proper spacing for visual organization
+- Escaped CSS braces properly for Rust format strings (using `{{` and `}}`)
+- Applied consistent styling to both `render_folder_page()` and `render_wiki_page()` functions
+- **Result:** Header now displays Home link, search input, and auth section in a clean horizontal row
+
+---
+
+### 13. Redesign Navigation as Right-Side Column
+**Time:** ~1:20 AM  
+**Request:** "changed my mind. put home, search and login in a column on the right, with a border around the box"  
+**Actions:**
+- Completely redesigned navigation layout from horizontal to vertical column
+- Changed nav from header bar to fixed-position box on the right side
+- Added border styling: 2px solid border, rounded corners, light background
+- Implemented box-shadow for depth and visual separation
+- Set navigation to `position: fixed` at top-right (20px from edges)
+- Adjusted main content with right margin to avoid nav overlap
+- Removed unnecessary div wrappers for cleaner HTML structure
+- Applied changes to both folder and wiki page templates
+- **Result:** Navigation now appears as an elegant bordered box in the top-right corner with vertical layout
+
+---
+
+### 14. Change Font to Serif & Default Filetree Closed
+**Time:** ~1:25 AM  
+**Request:** "change back to serif font and default filetree to be closed"  
+**Actions:**
+- Changed `font-family` from `Arial, sans-serif` to `serif` in both templates
+- Updated filetree to start in closed state by default:
+  - Changed initial icon from 📁 to 📂 (closed folder icon)
+  - Added `style="display: none;"` to filetree content div
+  - Modified JavaScript to not load filetree content immediately
+  - Updated toggle functionality to lazy-load content on first open
+- Applied lazy loading: filetree content now only loads when user first clicks to open it
+- Maintained all existing toggle functionality while improving performance
+- **Result:** Site now uses serif font and filetree starts collapsed, loading content only when needed
+
+---
+
+### 15. Remove Navigation Box Shadow & Background
+**Time:** ~1:30 AM  
+**Request:** "take out the drop shadow on the box, and the background color"  
+**Actions:**
+- Removed `box-shadow: 0 2px 5px rgba(0,0,0,0.1);` from navigation styling
+- Removed `background-color: #f9f9f9;` from navigation styling  
+- Applied changes to both folder and wiki page templates
+- Maintained all other styling: border, border-radius, positioning, and layout
+- **Result:** Navigation box now has a cleaner, more minimal appearance with just the border outline
+
+---
+
+### 16. Remove Sans-Serif Fonts & Rounded Corners
+**Time:** ~1:35 AM  
+**Request:** "remove all sans-serif, even from the search box. remove the rounded corners from tha page as well"  
+**Actions:**
+- Explicitly set `font-family: serif` for navigation links and search input
+- Removed `border-radius: 8px` from navigation box styling
+- Removed `border-radius: 4px` from search input styling
+- Ensured all UI elements consistently use serif fonts
+- Applied changes to both folder and wiki page templates
+- **Result:** Complete serif typography throughout the interface with sharp, angular styling
+
+---
+
+### 17. Open Filetree by Default on Folder Pages
+**Time:** ~1:40 AM  
+**Request:** "if the page is a folder, then we should open the filetree by default"  
+**Actions:**
+- Modified folder page template to show filetree open by default:
+  - Changed filetree icon from 📂 (closed) to 📁 (open)
+  - Removed `style="display: none;"` from filetree content div
+  - Updated JavaScript to load filetree content immediately on page load
+- Simplified toggle functionality for folder pages (removed lazy loading logic)
+- Wiki pages remain unchanged - still start with closed filetree
+- **Result:** Folder pages now display file tree immediately for better navigation, while wiki pages maintain minimalist closed state
+
+---
+
+### 18. Add Markdown Table Support
+**Time:** ~1:45 AM  
+**Request:** "create a new branch for this next feature: let's try and render markdown tables"  
+**Actions:**
+- Created new branch `markdown-tables` for the feature
+- Modified `src/markdown/mod.rs` to enable table support:
+  - Added `Options` import from pulldown-cmark
+  - Updated parser to use `Parser::new_ext()` with `Options::ENABLE_TABLES`
+  - Added comprehensive test case for table rendering verification
+- Verified compilation with `cargo check` - all changes compile successfully
+- Tables now support standard markdown table syntax with headers and data rows
+- **Result:** Markdown tables now render properly with full HTML table structure (`<table>`, `<thead>`, `<tbody>`, etc.)
 
 ---
 

src/markdown/mod.rs

@@ -1,5 +1,5 @@
 use anyhow::Result;
-use pulldown_cmark::{html, Event, Parser, Tag, TagEnd};
+use pulldown_cmark::{html, Event, Options, Parser, Tag, TagEnd};
 use regex::Regex;
 use std::collections::HashMap;
 
@@ -66,7 +66,9 @@ impl MarkdownRenderer {
         });
 
         // Parse markdown to HTML, processing links to .md files
-        let parser = Parser::new(&processed_content);
+        let mut options = Options::empty();
+        options.insert(Options::ENABLE_TABLES);
+        let parser = Parser::new_ext(&processed_content, options);
         let processed_events = parser.map(|event| {
             match event {
                 Event::Start(Tag::Link { link_type, dest_url, title, id }) => {
@@ -81,6 +83,15 @@ impl MarkdownRenderer {
                             title, 
                             id 
                         })
+                    } else if !dest_url.starts_with("http") && !dest_url.starts_with("/") && !dest_url.starts_with("#") {
+                        // This looks like a relative wiki link, prepend /wiki/
+                        let wiki_url = format!("/wiki/{}", dest_url);
+                        Event::Start(Tag::Link { 
+                            link_type, 
+                            dest_url: wiki_url.into(), 
+                            title, 
+                            id 
+                        })
                     } else {
                         Event::Start(Tag::Link { link_type, dest_url, title, id })
                     }
@@ -210,4 +221,35 @@ This is the page content."#;
         assert_eq!(frontmatter.get("author"), Some(&"John Doe".to_string()));
         assert!(remaining.contains("# Main Content"));
     }
+
+    #[test]
+    fn test_relative_links_get_wiki_prefix() {
+        let renderer = MarkdownRenderer::new();
+        let content = "This is a [relative link](page-name) and an [external link](https://example.com) and a [root link](/root).";
+        let result = renderer.render(content).unwrap();
+        
+        // Relative links should get /wiki/ prefix
+        assert!(result.html.contains(r#"<a href="/wiki/page-name">"#));
+        // External links should remain unchanged
+        assert!(result.html.contains(r#"<a href="https://example.com">"#));
+        // Root links should remain unchanged
+        assert!(result.html.contains(r#"<a href="/root">"#));
+    }
+
+    #[test]
+    fn test_markdown_tables() {
+        let renderer = MarkdownRenderer::new();
+        let content = r#"| Name | Age | City |
+|------|-----|------|
+| John | 25  | NYC  |
+| Jane | 30  | LA   |"#;
+        let result = renderer.render(content).unwrap();
+        
+        // Check that table elements are present
+        assert!(result.html.contains("<table>"));
+        assert!(result.html.contains("<thead>"));
+        assert!(result.html.contains("<tbody>"));
+        assert!(result.html.contains("<th>Name</th>"));
+        assert!(result.html.contains("<td>John</td>"));
+    }
 }

src/server/mod.rs

@@ -333,28 +333,64 @@ async fn render_folder_page(folder_path: &str, state: &AppState) -> String {
 <head>
     <meta charset="utf-8">
     <title>{}</title>
+    <style>
+        body {{
+            margin: 0;
+            font-family: serif;
+        }}
+        nav {{
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 15px;
+            border: 2px solid #ddd;
+            z-index: 1000;
+        }}
+        nav a {{
+            text-decoration: none;
+            color: #333;
+            padding: 5px 0;
+            font-family: serif;
+        }}
+        nav input {{
+            padding: 8px;
+            border: 1px solid #ccc;
+            width: 150px;
+            font-family: serif;
+        }}
+        #auth-section {{
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }}
+        main {{
+            margin-right: 220px;
+            padding: 20px;
+        }}
+    </style>
 </head>
 <body>
     <header>
         <nav>
             <a href="/">Home</a>
-            <div>
+            <input type="text" id="search" placeholder="Search wiki...">
-                <input type="text" id="search" placeholder="Search wiki...">
-            </div>
             <div id="auth-section">
                 <a href="/auth/login" id="auth-link">Login</a>
             </div>
         </nav>
     </header>
     <main>
+        <div>
+            <h3 id="filetree-toggle" style="cursor: pointer; user-select: none;">📁 Filetree</h3>
+            <div id="filetree">
+                Loading...
+            </div>
+        </div>
         <article>
             <h1>{}</h1>
-            <div>
-                <h3>Files in this folder</h3>
-                <div id="filetree">
-                    Loading...
-                </div>
-            </div>
         </article>
     </main>
     <script src="/static/js/script.js"></script>
@@ -376,7 +412,7 @@ async fn render_folder_page(folder_path: &str, state: &AppState) -> String {
                     window.location.reload();
                 }};
             }}
-            // Load filetree for current folder
+            // Load filetree immediately for folder pages
             loadFolderFiles('{}');
         }});
 
@@ -420,6 +456,20 @@ async fn render_folder_page(folder_path: &str, state: &AppState) -> String {
 
             container.innerHTML = list;
         }}
+
+        // Add filetree toggle functionality
+        const filetreeToggle = document.getElementById('filetree-toggle');
+        const filetreeContent = document.getElementById('filetree');
+        
+        filetreeToggle.addEventListener('click', function() {{
+            if (filetreeContent.style.display === 'none') {{
+                filetreeContent.style.display = 'block';
+                filetreeToggle.textContent = '📁 Filetree';
+            }} else {{
+                filetreeContent.style.display = 'none';
+                filetreeToggle.textContent = '📂 Filetree';
+            }}
+        }});
     </script>
 </body>
 </html>"#,
@@ -440,31 +490,67 @@ async fn render_wiki_page(page: &WikiPage, state: &AppState) -> String {
 <head>
     <meta charset="utf-8">
     <title>{}</title>
+    <style>
+        body {{
+            margin: 0;
+            font-family: serif;
+        }}
+        nav {{
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 15px;
+            border: 2px solid #ddd;
+            z-index: 1000;
+        }}
+        nav a {{
+            text-decoration: none;
+            color: #333;
+            padding: 5px 0;
+            font-family: serif;
+        }}
+        nav input {{
+            padding: 8px;
+            border: 1px solid #ccc;
+            width: 150px;
+            font-family: serif;
+        }}
+        #auth-section {{
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }}
+        main {{
+            margin-right: 220px;
+            padding: 20px;
+        }}
+    </style>
 </head>
 <body>
     <header>
         <nav>
             <a href="/">Home</a>
-            <div>
+            <input type="text" id="search" placeholder="Search wiki...">
-                <input type="text" id="search" placeholder="Search wiki...">
-            </div>
             <div id="auth-section">
                 <a href="/auth/login" id="auth-link">Login</a>
             </div>
         </nav>
     </header>
     <main>
+        <div>
+            <h3 id="filetree-toggle" style="cursor: pointer; user-select: none;">📂 Filetree</h3>
+            <div id="filetree" style="display: none;">
+                Loading...
+            </div>
+        </div>
         <article>
             <h1>{}</h1>
             <div>
                 {}
             </div>
-            <div>
-                <h3>Files in this folder</h3>
-                <div id="filetree">
-                    Loading...
-                </div>
-            </div>
             <div>
                 <h3>Backlinks</h3>
                 <div>
@@ -492,8 +578,7 @@ async fn render_wiki_page(page: &WikiPage, state: &AppState) -> String {
                     window.location.reload();
                 }};
             }}
-            // Load filetree for current folder
+            // Don't load filetree initially - load on first toggle
-            loadCurrentFolderFiles();
         }});
 
         function getCookie(name) {{
@@ -539,6 +624,26 @@ async fn render_wiki_page(page: &WikiPage, state: &AppState) -> String {
 
             container.innerHTML = list;
         }}
+
+        // Add filetree toggle functionality
+        const filetreeToggle = document.getElementById('filetree-toggle');
+        const filetreeContent = document.getElementById('filetree');
+        let filetreeLoaded = false;
+        
+        filetreeToggle.addEventListener('click', function() {{
+            if (filetreeContent.style.display === 'none') {{
+                filetreeContent.style.display = 'block';
+                filetreeToggle.textContent = '📁 Filetree';
+                // Load filetree content on first open
+                if (!filetreeLoaded) {{
+                    loadCurrentFolderFiles();
+                    filetreeLoaded = true;
+                }}
+            }} else {{
+                filetreeContent.style.display = 'none';
+                filetreeToggle.textContent = '📂 Filetree';
+            }}
+        }});
     </script>
 </body>
 </html>"#,
@@ -846,9 +951,7 @@ fn render_login_required_page() -> String {
     <header>
         <nav>
             <a href="/">Home</a>
-            <div>
+            <input type="text" id="search" placeholder="Search wiki...">
-                <input type="text" id="search" placeholder="Search wiki...">
-            </div>
             <div id="auth-section">
                 <a href="/auth/login" id="auth-link">Login</a>
             </div>