{"title":"JavaScript Architecture","description":"Understanding the modular JavaScript system that powers interactive features in MyLittleContentEngine","islands":{"content":"\u003Cheader class=\u0022transition-all mb-4 lg:mb-8\u0022\u003E\u003Ch1 class=\u0022font-display text-2xl lg:text-4xl font-bold tracking-tight text-base-900 dark:text-base-50\u0022\u003EJavaScript Architecture\u003C/h1\u003E\u003C/header\u003E\n\n\u003Cmain class=\u0022prose dark:prose-invert dark:text-base-300 max-w-full prose-sm md:prose-base min-w-0 prose-headings:scroll-m-18 prose-headings:font-display prose-headings:text-base-900 dark:prose-headings:text-base-50\u0022\u003E\u003Cp\u003EMyLittleContentEngine includes a modular JavaScript system that provides interactive functionality for documentation sites. The architecture uses a \u003Cstrong\u003Eclass-based design\u003C/strong\u003E with centralized management through the \u003Ccode\u003EPageManager\u003C/code\u003E.\u003C/p\u003E\n\u003Ch2 id=\u0022architecture-overview\u0022\u003EArchitecture Overview\u003C/h2\u003E\n\u003Cp\u003EThe JavaScript system is organized into specialized managers:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-mermaid code\u0022\u003E\u003Cspan class=\u0022line\u0022\u003Egraph TB\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A[PageManager] --\u0026gt; B[ThemeManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; C[OutlineManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; D[TabManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; E[SyntaxHighlighter]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; F[MermaidManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; G[MobileNavManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; H[MainSiteNavManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; I[SidebarToggleManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A --\u0026gt; J[SearchManager]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    B --\u0026gt; K[Theme Switching]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    C --\u0026gt; L[Table of Contents]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    D --\u0026gt; M[Code Tabs]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    E --\u0026gt; N[Code Highlighting]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    F --\u0026gt; O[Mermaid Diagrams]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    G --\u0026gt; P[Mobile Navigation]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    H --\u0026gt; Q[Main Site Menu]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    I --\u0026gt; R[Sidebar Toggle]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    J --\u0026gt; S[FlexSearch]\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003Ch2 id=\u0022component-managers\u0022\u003EComponent Managers\u003C/h2\u003E\n\u003Ch3 id=\u0022pagemanager\u0022\u003EPageManager\u003C/h3\u003E\n\u003Cp\u003EThe \u003Ccode\u003EPageManager\u003C/code\u003E coordinates all interactive functionality. It handles DOM ready state detection, initializes all component managers, and is available globally as \u003Ccode\u003Ewindow.pageManager\u003C/code\u003E for debugging.\u003C/p\u003E\n\u003Ch3 id=\u0022thememanager\u0022\u003EThemeManager\u003C/h3\u003E\n\u003Cp\u003EManages dark/light theme switching with localStorage persistence. Automatically binds to elements with the \u003Ccode\u003Edata-theme-toggle\u003C/code\u003E attribute and notifies other managers (like MermaidManager) when the theme changes.\u003C/p\u003E\n\u003Ch3 id=\u0022outlinemanager\u0022\u003EOutlineManager\u003C/h3\u003E\n\u003Cp\u003EProvides scroll-based table of contents navigation with active section highlighting. Uses efficient scroll detection with \u003Ccode\u003ErequestAnimationFrame\u003C/code\u003E and maintains a visual highlighter that tracks the current section. Can dynamically generate outlines from H2/H3 headings or use pre-rendered markup.\u003C/p\u003E\n\u003Ch3 id=\u0022tabmanager\u0022\u003ETabManager\u003C/h3\u003E\n\u003Cp\u003EHandles tabbed code blocks with full ARIA accessibility support. Manages tab activation, content panel visibility, and supports multiple tab groups per page through pattern matching.\u003C/p\u003E\n\u003Ch3 id=\u0022syntaxhighlighter\u0022\u003ESyntaxHighlighter\u003C/h3\u003E\n\u003Cp\u003EProvides code syntax highlighting using Highlight.js loaded from CDN. Supports 20\u002B languages including JavaScript, TypeScript, Python, C#, and more. Only loads when code blocks are present and gracefully handles unsupported languages.\u003C/p\u003E\n\u003Ch3 id=\u0022mermaidmanager\u0022\u003EMermaidManager\u003C/h3\u003E\n\u003Cp\u003ERenders Mermaid diagrams with theme-aware styling. Integrates with MonorailCSS color variables and converts OKLCH colors to hex format for Mermaid compatibility. Automatically re-renders diagrams when the theme changes.\u003C/p\u003E\n\u003Ch3 id=\u0022mobilenavmanager\u0022\u003EMobileNavManager\u003C/h3\u003E\n\u003Cp\u003EControls mobile navigation sidebar with hamburger menu toggle. Includes overlay backdrop, auto-close on link click (mobile only), escape key support, and prevents body scrolling when open.\u003C/p\u003E\n\u003Ch3 id=\u0022mainsitenavmanager\u0022\u003EMainSiteNavManager\u003C/h3\u003E\n\u003Cp\u003EManages the main site navigation menu for mobile devices. Auto-closes when window is resized to desktop breakpoint (768px) and includes click-outside and escape key handlers.\u003C/p\u003E\n\u003Ch3 id=\u0022sidebartogglemanager\u0022\u003ESidebarToggleManager\u003C/h3\u003E\n\u003Cp\u003EHandles table of contents sidebar toggle for Spectre.Console-style layouts. Provides overlay-based sidebar with close button and prevents event propagation when clicking inside the panel.\u003C/p\u003E\n\u003Ch3 id=\u0022searchmanager\u0022\u003ESearchManager\u003C/h3\u003E\n\u003Cp\u003EImplements client-side search using FlexSearch with a modal interface. Features include:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EKeyboard shortcut support (Cmd/Ctrl\u002BK)\u003C/li\u003E\n\u003Cli\u003ELazy loading of search index and FlexSearch library\u003C/li\u003E\n\u003Cli\u003EWeighted field scoring (title \u0026gt; description \u0026gt; headings \u0026gt; content)\u003C/li\u003E\n\u003Cli\u003EQuery highlighting in results\u003C/li\u003E\n\u003Cli\u003ESnippet generation around matched terms\u003C/li\u003E\n\u003Cli\u003EComprehensive error handling\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022key-patterns\u0022\u003EKey Patterns\u003C/h2\u003E\n\u003Ch3 id=\u0022lazy-loading\u0022\u003ELazy Loading\u003C/h3\u003E\n\u003Cp\u003EExternal libraries (Mermaid, Highlight.js, FlexSearch) are loaded dynamically from CDN only when needed. This reduces initial page load time and bandwidth usage.\u003C/p\u003E\n\u003Ch3 id=\u0022theme-coordination\u0022\u003ETheme Coordination\u003C/h3\u003E\n\u003Cp\u003EThe ThemeManager updates localStorage and the document\u0027s \u003Ccode\u003Edark\u003C/code\u003E class, then notifies other managers to update their theme-dependent rendering (e.g., Mermaid diagrams).\u003C/p\u003E\n\u003Ch3 id=\u0022css-variable-integration\u0022\u003ECSS Variable Integration\u003C/h3\u003E\n\u003Cp\u003EMonorailCSS color variables are read using \u003Ccode\u003EgetComputedStyle()\u003C/code\u003E and converted from OKLCH to hex format when needed for external libraries.\u003C/p\u003E\n\u003Ch3 id=\u0022conditional-initialization\u0022\u003EConditional Initialization\u003C/h3\u003E\n\u003Cp\u003EEach manager checks for required DOM elements before initializing, ensuring graceful handling of missing features.\u003C/p\u003E\n\u003Ch3 id=\u0022configuration-via-data-attributes\u0022\u003EConfiguration via Data Attributes\u003C/h3\u003E\n\u003Cp\u003EManagers use data attributes for configuration:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ccode\u003Edata-theme-toggle\u003C/code\u003E - Theme toggle buttons\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003Edata-role=\u0022page-outline\u0022\u003C/code\u003E - Outline navigation container\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003Edata-content-selector\u003C/code\u003E - Content element for outline generation\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022accessibility\u0022\u003EAccessibility\u003C/h2\u003E\n\u003Cp\u003EAll interactive components follow accessibility best practices:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EARIA attributes\u003C/strong\u003E for tabs, navigation, and modals\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EKeyboard navigation\u003C/strong\u003E with Escape key support\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EFocus management\u003C/strong\u003E in modals and overlays\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EScreen reader support\u003C/strong\u003E through semantic HTML and ARIA labels\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022performance\u0022\u003EPerformance\u003C/h2\u003E\n\u003Cp\u003EThe architecture optimizes performance through:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003ELazy loading of external dependencies\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003ErequestAnimationFrame\u003C/code\u003E for scroll-based updates\u003C/li\u003E\n\u003Cli\u003EConditional initialization based on DOM content\u003C/li\u003E\n\u003Cli\u003EEvent delegation where appropriate\u003C/li\u003E\n\u003Cli\u003EPassive event listeners for scroll events\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/main\u003E\u003Cdiv class=\u0022flex my-12 border-t border-base-200 dark:border-base-700 pt-4 lg:pt-8\u0022\u003E\u003Cdiv class=\u0022flex flex-col items-start  gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Previous: Syntax Highlighting System Architecture\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/syntax-highlighting-system/\u0022\u003E\u003Cspan class=\u0022-ml-1 rotate-180\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E Previous\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/syntax-highlighting-system/\u0022\u003ESyntax Highlighting System Architecture\u003C/a\u003E\u003C/div\u003E\u003Cdiv class=\u0022flex flex-col items-end ml-auto gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Next: Razor Island Architecture\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/spa-island-architecture/\u0022\u003ENext \u003Cspan class=\u0022-mr-1\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/spa-island-architecture/\u0022\u003ERazor Island Architecture\u003C/a\u003E\u003C/div\u003E\u003C/div\u003E"}}