';
}
listEl.innerHTML = html;
updateFilterBar();
// Re-highlight current document if loaded
if (currentDocument) {
document.querySelectorAll('.doc-link').forEach(el => {
if (el.dataset.slug === currentDocument.slug) {
el.classList.add('bg-blue-100', 'text-blue-900');
}
});
}
}
// Load document list
async function loadDocuments() {
try {
// Fetch public documents
const response = await fetch('/api/documents');
const data = await response.json();
documents = data.documents || [];
// Populate filter dropdowns with values from loaded documents
populateFilters();
// Read filters from URL on initial load
const urlFilters = new URLSearchParams(window.location.search);
if (urlFilters.get('type') && !activeFilters.document_type) {
activeFilters.document_type = urlFilters.get('type');
const typeSelect = document.getElementById('filter-doc-type');
if (typeSelect) typeSelect.value = activeFilters.document_type;
}
if (urlFilters.get('audience') && !activeFilters.audience) {
activeFilters.audience = urlFilters.get('audience');
const audSelect = document.getElementById('filter-doc-audience');
if (audSelect) audSelect.value = activeFilters.audience;
}
// Apply filters
const filteredDocs = getFilteredDocuments();
const listEl = document.getElementById('document-list');
if (filteredDocs.length === 0 && documents.length === 0) {
listEl.innerHTML = '
No documents available
';
return;
}
// Group documents by category (filtered)
const grouped = groupDocuments(filteredDocs);
let html = '';
// Render categories in order
const sortedCategories = Object.entries(CATEGORIES)
.sort((a, b) => a[1].order - b[1].order);
const t = getUITranslations(currentLanguage);
// On mobile with no ?doc= param, expand all categories for browsing
const isMobileView = window.innerWidth < 1024;
const noDocParam = !new URLSearchParams(window.location.search).get('doc');
sortedCategories.forEach(([categoryId, category]) => {
const docs = grouped[categoryId] || [];
if (docs.length === 0) return;
const isCollapsed = (isMobileView && noDocParam) ? false : (category.collapsed || false);
const categoryLabel = t.categories[categoryId] || categoryId;
// Category header
html += `
`;
// Render documents in category
docs.forEach(doc => {
// Highlight the first document in Getting Started category
const isHighlighted = categoryId === 'getting-started' && doc.order === 1;
html += renderDocLink(doc, isHighlighted);
});
html += `
`;
});
listEl.innerHTML = html;
updateFilterBar();
// Apply collapsed state to categories (CSP-compliant - no inline styles)
listEl.querySelectorAll('.category-docs[data-collapsed="true"]').forEach(docsEl => {
docsEl.style.display = 'none';
});
listEl.querySelectorAll('.category-toggle[data-collapsed="true"] .category-arrow').forEach(arrowEl => {
arrowEl.style.transform = 'rotate(-90deg)';
});
// 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)';
}
}
});
// Check for URL parameter to auto-load document or category
const urlParams = new URLSearchParams(window.location.search);
const docParam = urlParams.get('doc');
const categoryParam = urlParams.get('category');
// Priority 1: Load specific document by slug if provided
if (docParam) {
const doc = documents.find(d => d.slug === docParam);
if (doc) {
// Find and expand the category containing this document
const docCategory = categorizeDocument(doc);
if (docCategory) {
const categoryDocsEl = listEl.querySelector(`.category-docs[data-category="${docCategory}"]`);
const categoryArrowEl = listEl.querySelector(`.category-toggle[data-category="${docCategory}"] .category-arrow`);
if (categoryDocsEl) {
categoryDocsEl.style.display = 'block';
if (categoryArrowEl) {
categoryArrowEl.style.transform = 'rotate(0deg)';
}
}
}
// Load the requested document
loadDocument(docParam);
} else {
console.warn(`Document with slug "${docParam}" not found`);
}
}
// Priority 2: Load category if provided but no specific document
else if (categoryParam && grouped[categoryParam] && grouped[categoryParam].length > 0) {
// Expand the specified category
const categoryDocsEl = listEl.querySelector(`.category-docs[data-category="${categoryParam}"]`);
const categoryArrowEl = listEl.querySelector(`.category-toggle[data-category="${categoryParam}"] .category-arrow`);
if (categoryDocsEl) {
categoryDocsEl.style.display = 'block';
if (categoryArrowEl) {
categoryArrowEl.style.transform = 'rotate(0deg)';
}
}
// Load first document in the category
const firstDoc = grouped[categoryParam][0];
if (firstDoc) {
loadDocument(firstDoc.slug);
}
}
// Priority 3: Default behavior
else {
// On mobile, show sidebar (don't auto-load) so user can browse categories
const isMobile = window.innerWidth < 1024;
if (!isMobile) {
// Desktop: auto-load first Getting Started doc as before
const gettingStartedDocs = grouped['getting-started'] || [];
if (gettingStartedDocs.length > 0) {
const firstDoc = gettingStartedDocs.find(d => d.order === 1);
if (firstDoc) {
loadDocument(firstDoc.slug);
} else {
loadDocument(gettingStartedDocs[0].slug);
}
} else if (documents.length > 0) {
const firstCategory = sortedCategories.find(([catId]) => grouped[catId] && grouped[catId].length > 0);
if (firstCategory) {
loadDocument(grouped[firstCategory[0]][0].slug);
}
}
}
// Mobile: sidebar remains visible, user taps to choose a document
}
} catch (error) {
console.error('Error loading documents:', error);
document.getElementById('document-list').innerHTML =
'
Error loading documents
';
}
}
// Load specific document
let isLoading = false;
async function loadDocument(slug, lang = null) {
// Prevent multiple simultaneous loads
if (isLoading) return;
// Use provided lang or detect from i18n system
const language = lang || detectLanguage();
try {
isLoading = true;
const t = getUITranslations(language);
// Show loading state
const contentEl = document.getElementById('document-content');
contentEl.innerHTML = `
${t.loadingDocument}
`;
// Build API URL with language parameter
const apiUrl = language && language !== 'en'
? `/api/documents/${slug}?lang=${language}`
: `/api/documents/${slug}`;
const response = await fetch(apiUrl);
const data = await response.json();
if (!data.success) {
// If translation not available, fall back to English
if (response.status === 404 && language !== 'en') {
console.warn(`Translation not available for ${language}, falling back to English`);
const enResponse = await fetch(`/api/documents/${slug}`);
const enData = await enResponse.json();
if (enData.success) {
// Translation not available - falling back to English
// (console warning already logged above)
const fallbackData = enData;
fallbackData.document.language = 'en';
fallbackData.document.fallback = true;
// Use English version
currentDocument = fallbackData.document;
currentLanguage = 'en';
updateURL(slug, 'en');
// Continue with rendering
data.success = true;
data.document = fallbackData.document;
} else {
throw new Error(data.error || 'Failed to load document');
}
} else {
throw new Error(data.error || 'Failed to load document');
}
} else {
currentDocument = data.document;
currentLanguage = language;
updateURL(slug, language);
}
// Update active state
document.querySelectorAll('.doc-link').forEach(el => {
if (el.dataset.slug === slug) {
el.classList.add('bg-blue-100', 'text-blue-900');
} else {
el.classList.remove('bg-blue-100', 'text-blue-900');
}
});
// Render with card-based viewer if available and document has sections
if (documentCards && currentDocument.sections && currentDocument.sections.length > 0) {
documentCards.render(currentDocument);
} else {
// Fallback to traditional view with header
const hasToC = currentDocument.toc && currentDocument.toc.length > 0;
// Check if PDF is available and get PDF path
let pdfPath = null;
let hasPDF = false;
if (currentDocument.download_formats && currentDocument.download_formats.pdf) {
pdfPath = currentDocument.download_formats.pdf;
hasPDF = true;
}
let headerHTML = `
${currentDocument.title}
${hasToC ? `
` : ''}
${hasPDF ? `
` : ''}
`;
// 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 + `
${contentHtml}
`;
}
// 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);
// Mobile navigation: Add document-active class to show document view
document.body.classList.add('document-active');
// Update mobile sticky bar with current document title
const mobileDocTitle = document.getElementById('mobile-doc-title');
if (mobileDocTitle && currentDocument) {
mobileDocTitle.textContent = currentDocument.title;
}
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
} catch (error) {
console.error('Error loading document:', error);
const t = getUITranslations(currentLanguage);
document.getElementById('document-content').innerHTML = `
${t.errorLoadingDoc}
${error.message}
`;
} finally {
isLoading = false;
}
}
// Open ToC modal
function openToCModal() {
if (!currentDocument || !currentDocument.toc || currentDocument.toc.length === 0) {
return;
}
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 => {
return `
${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();
}
});
}
// Mobile navigation: Back to documents button
const backButton = document.getElementById('back-to-docs-btn');
if (backButton) {
backButton.addEventListener('click', function() {
// Remove document-active class to show sidebar
document.body.classList.remove('document-active');
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
// Sidebar filter event listeners
const filterTypeSelect = document.getElementById('filter-doc-type');
const filterAudienceSelect = document.getElementById('filter-doc-audience');
const clearSidebarFilters = document.getElementById('clear-sidebar-filters');
function onFilterChange() {
if (filterTypeSelect) activeFilters.document_type = filterTypeSelect.value;
if (filterAudienceSelect) activeFilters.audience = filterAudienceSelect.value;
// Update URL with filter params
const url = new URL(window.location);
if (activeFilters.document_type) {
url.searchParams.set('type', activeFilters.document_type);
} else {
url.searchParams.delete('type');
}
if (activeFilters.audience) {
url.searchParams.set('audience', activeFilters.audience);
} else {
url.searchParams.delete('audience');
}
window.history.replaceState({}, '', url);
renderFilteredDocuments();
}
if (filterTypeSelect) filterTypeSelect.addEventListener('change', onFilterChange);
if (filterAudienceSelect) filterAudienceSelect.addEventListener('change', onFilterChange);
if (clearSidebarFilters) {
clearSidebarFilters.addEventListener('click', function() {
activeFilters.document_type = '';
activeFilters.audience = '';
if (filterTypeSelect) filterTypeSelect.value = '';
if (filterAudienceSelect) filterAudienceSelect.value = '';
// Clear URL filter params
const url = new URL(window.location);
url.searchParams.delete('type');
url.searchParams.delete('audience');
window.history.replaceState({}, '', url);
renderFilteredDocuments();
});
}