diff --git a/public/docs.html b/public/docs.html index 73ce1260..6db75e06 100644 --- a/public/docs.html +++ b/public/docs.html @@ -4,7 +4,7 @@ Framework Documentation | Tractatus AI Safety - + @@ -311,13 +400,6 @@
Loading...
- -
-

Table of Contents

-
-
Select a document
-
-
@@ -337,9 +419,30 @@ + +
+
+ +
+

Table of Contents

+ +
- - + +
+
Loading table of contents...
+
+
+
+ + + diff --git a/public/js/components/document-cards.js b/public/js/components/document-cards.js index 9ebc45de..fa08acb0 100644 --- a/public/js/components/document-cards.js +++ b/public/js/components/document-cards.js @@ -58,11 +58,37 @@ class DocumentCards { .filter(Boolean) .join(' | '); + const hasToC = document.toc && document.toc.length > 0; + return ` -
-

${document.title}

- ${metaText ? `

${metaText}

` : ''} - ${document.sections ? `

${document.sections.length} sections

` : ''} +
+
+

${document.title}

+ ${metaText ? `

${metaText}

` : ''} + ${document.sections ? `

${document.sections.length} sections

` : ''} +
+
+ ${hasToC ? ` + + ` : ''} + + + + + +
`; } @@ -198,26 +224,31 @@ class DocumentCards { attachEventListeners() { const cards = this.container.querySelectorAll('.doc-card'); - console.log(`Attaching listeners to ${cards.length} cards`); - cards.forEach(card => { card.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const sectionSlug = card.dataset.sectionSlug; - console.log('Card clicked:', sectionSlug); - const section = this.currentDocument.sections.find(s => s.slug === sectionSlug); if (section) { - console.log('Opening modal for:', section.title); this.modalViewer.show(section, this.currentDocument.sections); - } else { - console.error('Section not found:', sectionSlug); } }); }); + + // Attach ToC button listener + const tocButton = document.getElementById('toc-button'); + if (tocButton) { + tocButton.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + if (typeof openToCModal === 'function') { + openToCModal(); + } + }); + } } } @@ -268,7 +299,6 @@ class ModalViewer { document.body.insertAdjacentHTML('beforeend', modalHtml); this.modal = document.getElementById('section-modal'); - console.log('Modal created:', this.modal ? 'Success' : 'Failed'); this.attachModalListeners(); } @@ -276,30 +306,32 @@ class ModalViewer { * Show modal with section content */ show(section, allSections) { - console.log('ModalViewer.show() called for:', section.title); - this.currentSection = section; this.allSections = allSections; this.currentIndex = allSections.findIndex(s => s.slug === section.slug); - console.log('Modal index:', this.currentIndex, 'of', allSections.length); - // Update content const titleEl = document.getElementById('modal-title'); const contentEl = document.getElementById('modal-content'); if (!titleEl || !contentEl) { - console.error('Modal elements not found!'); return; } titleEl.textContent = section.title; - // Remove duplicate title H2 from content (it's already in modal header) + // Remove duplicate title (H1 or H2) from content (it's already in modal header) let contentHtml = section.content_html; - const firstH2Match = contentHtml.match(/]*>.*?<\/h2>/); - if (firstH2Match) { - contentHtml = contentHtml.replace(firstH2Match[0], ''); + + // Try removing h1 first, then h2 + const firstH1Match = contentHtml.match(/]*>.*?<\/h1>/); + if (firstH1Match) { + contentHtml = contentHtml.replace(firstH1Match[0], ''); + } else { + const firstH2Match = contentHtml.match(/]*>.*?<\/h2>/); + if (firstH2Match) { + contentHtml = contentHtml.replace(firstH2Match[0], ''); + } } contentEl.innerHTML = contentHtml; @@ -311,8 +343,6 @@ class ModalViewer { this.modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; - console.log('Modal display set to flex, body overflow hidden'); - // Scroll to top of content contentEl.scrollTop = 0; } diff --git a/public/js/docs-app.js b/public/js/docs-app.js index a9d117f1..b51ec328 100644 --- a/public/js/docs-app.js +++ b/public/js/docs-app.js @@ -7,6 +7,142 @@ if (typeof DocumentCards !== 'undefined') { documentCards = new DocumentCards('document-content'); } +// Document categorization +const CATEGORIES = { + 'start-here': { + label: '📚 Start Here', + icon: '📚', + keywords: ['glossary', 'introduction'], + order: 1, + color: 'blue', + bgColor: 'bg-blue-50', + borderColor: 'border-l-4 border-blue-500', + textColor: 'text-blue-700' + }, + 'core-framework': { + label: '📖 Core Framework', + icon: '📖', + keywords: ['core-concepts', 'core-values', 'organizational-theory'], + order: 2, + color: 'purple', + bgColor: 'bg-purple-50', + borderColor: 'border-l-4 border-purple-500', + textColor: 'text-purple-700' + }, + 'research': { + label: '🔬 Research & Evidence', + icon: '🔬', + keywords: ['case-studies', 'research-foundations', 'tractatus-based-llm-architecture-for-ai-safety'], + order: 3, + color: 'indigo', + bgColor: 'bg-indigo-50', + borderColor: 'border-l-4 border-indigo-500', + textColor: 'text-indigo-700' + }, + 'implementation': { + label: '🛠️ Implementation', + icon: '🛠️', + keywords: ['implementation-guide', 'implementation-roadmap', 'python-code'], + order: 4, + color: 'green', + bgColor: 'bg-green-50', + borderColor: 'border-l-4 border-green-500', + textColor: 'text-green-700' + }, + 'leadership': { + label: '💼 Leadership', + icon: '💼', + keywords: ['executive-brief'], + order: 5, + color: 'orange', + bgColor: 'bg-orange-50', + borderColor: 'border-l-4 border-orange-500', + textColor: 'text-orange-700' + }, + 'developer': { + label: '🧑‍💻 Developer Tools', + icon: '🧑‍💻', + keywords: ['claude-code', 'framework-enforcement'], + order: 6, + color: 'gray', + bgColor: 'bg-gray-50', + borderColor: 'border-l-4 border-gray-500', + textColor: 'text-gray-700' + } +}; + +// Documents to hide (internal/confidential) +const HIDDEN_DOCS = [ + 'security-audit-report', + 'koha-production-deployment', + 'koha-stripe-payment', + 'appendix-e-contact', + 'cover-letter' +]; + +// Categorize a document +function categorizeDocument(doc) { + const slug = doc.slug.toLowerCase(); + + // Skip hidden documents + if (HIDDEN_DOCS.some(hidden => slug.includes(hidden))) { + return null; + } + + // Find matching category + for (const [categoryId, category] of Object.entries(CATEGORIES)) { + if (category.keywords.some(keyword => slug.includes(keyword))) { + return categoryId; + } + } + + // Default to core-framework if no match + return 'core-framework'; +} + +// Group documents by category +function groupDocuments(docs) { + const grouped = {}; + + // Initialize all categories + Object.keys(CATEGORIES).forEach(key => { + grouped[key] = []; + }); + + // Categorize each document + docs.forEach(doc => { + const category = categorizeDocument(doc); + if (category && grouped[category]) { + grouped[category].push(doc); + } + }); + + return grouped; +} + +// Render document link with download button +function renderDocLink(doc, isHighlighted = false) { + const highlightClass = isHighlighted ? 'text-blue-700 bg-blue-50 border border-blue-200' : ''; + + return ` +
+ + + + + + +
+ `; +} + // Load document list async function loadDocuments() { try { @@ -20,100 +156,91 @@ async function loadDocuments() { return; } - console.log('Loaded documents:', documents.length); - - // Find GLOSSARY and put it at the top - const glossary = documents.find(doc => doc.slug.includes('glossary')); - const otherDocs = documents.filter(doc => !doc.slug.includes('glossary')); - - console.log('GLOSSARY found:', glossary ? glossary.title : 'NOT FOUND'); - console.log('Other docs:', otherDocs.length); + // Group documents by category + const grouped = groupDocuments(documents); let html = ''; - // Add GLOSSARY prominently at top if it exists - if (glossary) { + // Render categories in order + const sortedCategories = Object.entries(CATEGORIES) + .sort((a, b) => a[1].order - b[1].order); + + sortedCategories.forEach(([categoryId, category]) => { + const docs = grouped[categoryId] || []; + if (docs.length === 0) return; + + // Category header + html += ` +
+ +
+ `; + + // Render documents in category + docs.forEach(doc => { + const isHighlighted = categoryId === 'start-here'; + html += renderDocLink(doc, isHighlighted); + }); + html += ` -
-
📚 Start Here
-
- - - - - -
`; - } else { - // If no glossary found, try case-insensitive fallback - const allGlossary = documents.find(doc => doc.slug.toLowerCase().includes('glossary')); - if (allGlossary) { - html += ` -
-
📚 Start Here
- -
- `; - } - } - - // Add other documents - const docsToShow = glossary ? otherDocs : documents.filter(doc => !doc.slug.toLowerCase().includes('glossary')); - if (docsToShow.length > 0) { - html += `
Documentation
`; - html += docsToShow.map(doc => ` -
- - - - - - -
- `).join(''); - } + }); listEl.innerHTML = html; - console.log('Navigation HTML updated'); // Add event delegation for document links listEl.addEventListener('click', function(e) { + // Check for download link first (prevent document load when clicking download) + const downloadLink = e.target.closest('.doc-download-link'); + if (downloadLink) { + e.stopPropagation(); + return; + } + const button = e.target.closest('.doc-link'); if (button && button.dataset.slug) { e.preventDefault(); loadDocument(button.dataset.slug); + return; + } + + // Category toggle + const toggle = e.target.closest('.category-toggle'); + if (toggle) { + const categoryId = toggle.dataset.category; + const docsEl = listEl.querySelector(`.category-docs[data-category="${categoryId}"]`); + const arrowEl = toggle.querySelector('.category-arrow'); + + if (docsEl.style.display === 'none') { + docsEl.style.display = 'block'; + arrowEl.style.transform = 'rotate(0deg)'; + } else { + docsEl.style.display = 'none'; + arrowEl.style.transform = 'rotate(-90deg)'; + } } }); - // Auto-load GLOSSARY if it exists, otherwise first document - if (glossary) { - loadDocument(glossary.slug); - } else { - const allGlossary = documents.find(doc => doc.slug.toLowerCase().includes('glossary')); - if (allGlossary) { - loadDocument(allGlossary.slug); - } else if (documents.length > 0) { - loadDocument(documents[0].slug); + // Auto-load first document in "Start Here" category + const startHereDocs = grouped['start-here'] || []; + if (startHereDocs.length > 0) { + loadDocument(startHereDocs[0].slug); + } else if (documents.length > 0) { + // Fallback to first available document + const firstCategory = sortedCategories.find(([_, cat]) => grouped[cat] && grouped[cat].length > 0); + if (firstCategory) { + loadDocument(grouped[firstCategory[0]][0].slug); } } } catch (error) { @@ -167,16 +294,58 @@ async function loadDocument(slug) { if (documentCards && currentDocument.sections && currentDocument.sections.length > 0) { documentCards.render(currentDocument); } else { - // Fallback to traditional view - contentEl.innerHTML = ` + // Fallback to traditional view with header + const hasToC = currentDocument.toc && currentDocument.toc.length > 0; + + let headerHTML = ` +
+

${currentDocument.title}

+
+ ${hasToC ? ` + + ` : ''} + + + + + +
+
+ `; + + // Remove duplicate title H1 from content (it's already in header) + let contentHtml = currentDocument.content_html; + const firstH1Match = contentHtml.match(/]*>.*?<\/h1>/); + if (firstH1Match) { + contentHtml = contentHtml.replace(firstH1Match[0], ''); + } + + contentEl.innerHTML = headerHTML + `
- ${currentDocument.content_html} + ${contentHtml}
`; } - // Render table of contents - renderTOC(currentDocument.toc || []); + // Add ToC button event listener (works for both card and traditional views) + setTimeout(() => { + const tocButton = document.getElementById('toc-button'); + if (tocButton) { + tocButton.addEventListener('click', () => openToCModal()); + } + }, 100); // Scroll to top window.scrollTo({ top: 0, behavior: 'smooth' }); @@ -197,28 +366,86 @@ async function loadDocument(slug) { } } -// Render table of contents -function renderTOC(toc) { - const tocEl = document.getElementById('toc'); - - if (!toc || toc.length === 0) { - tocEl.innerHTML = '
No table of contents
'; +// Open ToC modal +function openToCModal() { + if (!currentDocument || !currentDocument.toc || currentDocument.toc.length === 0) { return; } - tocEl.innerHTML = toc + const modal = document.getElementById('toc-modal'); + if (!modal) return; + + // Render ToC content + const tocContent = document.getElementById('toc-modal-content'); + + const tocHTML = currentDocument.toc .filter(item => item.level <= 3) // Only show H1, H2, H3 .map(item => { - const indent = (item.level - 1) * 12; return ` + class="block py-2 px-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded transition toc-link toc-indent-${item.level}" + data-slug="${item.slug}"> ${item.title} `; }).join(''); + + tocContent.innerHTML = tocHTML; + + // Show modal + modal.classList.add('show'); + + // Prevent body scroll and reset modal content scroll + document.body.style.overflow = 'hidden'; + tocContent.scrollTop = 0; + + // Add event listeners to ToC links + tocContent.querySelectorAll('.toc-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const targetId = link.getAttribute('href').substring(1); + const targetEl = document.getElementById(targetId); + if (targetEl) { + closeToCModal(); + setTimeout(() => { + targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }, 200); + } + }); + }); +} + +// Close ToC modal +function closeToCModal() { + const modal = document.getElementById('toc-modal'); + if (modal) { + modal.classList.remove('show'); + document.body.style.overflow = ''; + } } // Initialize loadDocuments(); + +// Add ESC key listener for closing modal +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + closeToCModal(); + } +}); + +// Add close button listener for ToC modal (script loads after DOM, so elements exist) +const closeButton = document.getElementById('toc-close-button'); +if (closeButton) { + closeButton.addEventListener('click', closeToCModal); +} + +// Click outside modal to close +const modal = document.getElementById('toc-modal'); +if (modal) { + modal.addEventListener('click', function(e) { + if (e.target === this) { + closeToCModal(); + } + }); +}