diff --git a/public/docs.html b/public/docs.html index 7d95ef7c..a17bc7ad 100644 --- a/public/docs.html +++ b/public/docs.html @@ -587,7 +587,7 @@ Back to Documents -
+
diff --git a/public/js/components/document-cards.js b/public/js/components/document-cards.js index 4a5bdf8a..30ae6659 100644 --- a/public/js/components/document-cards.js +++ b/public/js/components/document-cards.js @@ -8,6 +8,43 @@ class DocumentCards { this.container = document.getElementById(containerId); this.currentDocument = null; this.modalViewer = new ModalViewer(); + this.legendVisible = false; + } + + /** + * Get translations for color legend + */ + getLegendTranslations() { + const lang = (window.I18n && window.I18n.currentLang) || 'en'; + + const translations = { + en: { + title: 'Colour Guide', + critical: 'Critical sections', + conceptual: 'Conceptual explanations', + practical: 'Practical guides', + technical: 'Technical details', + reference: 'Reference documentation' + }, + de: { + title: 'Farbcode', + critical: 'Kritische Abschnitte', + conceptual: 'Konzeptionelle Erklärungen', + practical: 'Praktische Anleitungen', + technical: 'Technische Details', + reference: 'Referenzdokumentation' + }, + fr: { + title: 'Guide des couleurs', + critical: 'Sections critiques', + conceptual: 'Explications conceptuelles', + practical: 'Guides pratiques', + technical: 'Détails techniques', + reference: 'Documentation de référence' + } + }; + + return translations[lang] || translations.en; } /** @@ -24,11 +61,8 @@ class DocumentCards { // Create document header const headerHtml = this.renderHeader(document); - // Group sections by category - const sectionsByCategory = this.groupByCategory(document.sections); - - // Render card grid - const cardsHtml = this.renderCardGrid(sectionsByCategory); + // Render cards in original markdown order (no grouping) + const cardsHtml = this.renderCardGrid(document.sections); this.container.innerHTML = ` ${headerHtml} @@ -59,6 +93,7 @@ class DocumentCards { .join(' | '); const hasToC = document.toc && document.toc.length > 0; + const t = this.getLegendTranslations(); return `
@@ -67,7 +102,42 @@ class DocumentCards { ${metaText ? `

${metaText}

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

${document.sections.length} sections

` : ''}
-
+
+ ${document.sections && document.sections.length > 0 ? ` + + + ` : ''} ${hasToC ? `