Implement markdown navigation system with dynamic link handling and add styles for navigation button

js/readme-loader.js

@@ -1,13 +1,96 @@
-// Fetch and render FAQ.md
-(async function loadReadme(){
+// Markdown navigation system
+(function initMarkdownNav() {
+  let currentFile = 'FAQ.md';
+  const defaultFile = 'FAQ.md';
+  
+  // Available markdown files for navigation
+  const availableFiles = [
+    'FAQ.md',
+    'README.md',
+    'FEATURES.md',
+    'QUICK-REFERENCE.md',
+    'ORDER-PERSISTENCE.md',
+    'IMPLEMENTATION-SUMMARY.md'
+  ];
+
+  async function loadMarkdown(filename) {
+    const container = document.getElementById('readme-content');
+    
     try {
-    const response = await fetch('/FAQ.md', {cache: 'no-cache'});
-    if(!response.ok) throw new Error('FAQ not found');
+      const response = await fetch(`/${filename}`, {cache: 'no-cache'});
+      if (!response.ok) throw new Error(`${filename} not found`);
+      
       const markdown = await response.text();
-    const html = marked.parse(markdown);
-    document.getElementById('readme-content').innerHTML = html;
-  } catch(err) {
-    console.error('Error loading FAQ:', err);
-    document.getElementById('readme-content').innerHTML = '<p>Documentation unavailable.</p>';
+      let html = marked.parse(markdown);
+      
+      // Convert .md links to clickable navigation
+      html = html.replace(/href="([^"]+\.md)"/g, (match, mdFile) => {
+        const basename = mdFile.split('/').pop();
+        if (availableFiles.includes(basename)) {
+          return `href="#" data-md-file="${basename}"`;
         }
+        return match;
+      });
+      
+      container.innerHTML = html;
+      currentFile = filename;
+      
+      // Update home button visibility
+      updateHomeButton();
+      
+      // Add click handlers to markdown links
+      attachMarkdownLinks();
+      
+    } catch (err) {
+      console.error('Error loading markdown:', err);
+      container.innerHTML = `<p>❌ Documentation unavailable: ${filename}</p>`;
+    }
+  }
+
+  function updateHomeButton() {
+    let homeBtn = document.getElementById('md-home-btn');
+    
+    if (currentFile === defaultFile) {
+      // Hide home button on default page
+      if (homeBtn) homeBtn.style.display = 'none';
+    } else {
+      // Show/create home button on other pages
+      if (!homeBtn) {
+        homeBtn = document.createElement('button');
+        homeBtn.id = 'md-home-btn';
+        homeBtn.className = 'md-nav-btn';
+        homeBtn.innerHTML = `
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+            <polyline points="9 22 9 12 15 12 15 22"></polyline>
+          </svg>
+          <span>Back to FAQ</span>
+        `;
+        homeBtn.title = 'Back to FAQ';
+        homeBtn.addEventListener('click', () => loadMarkdown(defaultFile));
+        
+        const readmeSection = document.getElementById('readme-section');
+        readmeSection.insertBefore(homeBtn, readmeSection.firstChild);
+      }
+      homeBtn.style.display = 'flex';
+    }
+  }
+
+  function attachMarkdownLinks() {
+    const links = document.querySelectorAll('#readme-content a[data-md-file]');
+    links.forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const mdFile = link.getAttribute('data-md-file');
+        if (mdFile && availableFiles.includes(mdFile)) {
+          loadMarkdown(mdFile);
+          // Scroll to readme section
+          document.getElementById('readme-section').scrollIntoView({ behavior: 'smooth' });
+        }
+      });
+    });
+  }
+
+  // Initial load
+  loadMarkdown(defaultFile);
 })();

styles.css

@@ -76,6 +76,12 @@ main{max-width:1100px;margin:18px auto;padding:12px}
 #readme-content th{background:rgba(79,70,229,0.2);font-weight:600}
 #readme-content blockquote{border-left:3px solid rgba(79,70,229,0.5);padding-left:12px;margin:12px 0;color:var(--muted)}
 #readme-content img{max-width:100%;height:auto;border-radius:6px;margin:12px 0}
+
+/* Markdown navigation button */
+.md-nav-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;margin:0 0 20px 0;background:rgba(79,70,229,0.2);border:1px solid rgba(79,70,229,0.4);border-radius:8px;color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease}
+.md-nav-btn:hover{background:rgba(79,70,229,0.3);border-color:rgba(79,70,229,0.6);transform:translateX(-2px)}
+.md-nav-btn svg{width:18px;height:18px;stroke-width:2}
+
 footer{padding:12px 20px;text-align:center;color:var(--muted);font-size:12px}
 
 /* Service cards - updated class name */