{"title":"Static Site Generation Pipeline","description":"Deep dive into how static site generation works 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\u003EStatic Site Generation Pipeline\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\u003EThe static site generation pipeline in MyLittleContentEngine transforms your Blazor application into a collection of\npre-rendered HTML files. This process is orchestrated by the \u003Ccode\u003EOutputGenerationService.GenerateStaticPages\u003C/code\u003E method, which\ncoordinates multiple subsystems to produce a complete static website.\u003C/p\u003E\n\u003Ch2 id=\u0022overview-of-the-generation-process\u0022\u003EOverview of the Generation Process\u003C/h2\u003E\n\u003Cp\u003EThe static generation pipeline follows a carefully orchestrated sequence of operations:\u003C/p\u003E\n\u003Cdiv class=\u0022mx-4\u0022\u003E\u003Col class=\u0022relative text-gray-500 border-l-2 border-base-200 dark:border-base-800 dark:text-base-400 list-none \u0022\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E1\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022page-collection-and-discovery\u0022\u003EPage Collection and Discovery\u003C/h2\u003E\n\u003Cp\u003EThe pipeline begins by collecting all pages that need to be generated from multiple sources:\u003C/p\u003E\n\u003Ch3 id=\u0022content-service-pages\u0022\u003EContent Service Pages\u003C/h3\u003E\n\u003Cp\u003EContent services are the heart of the page collection system. Each registered \u003Ccode\u003EIContentService\u003C/code\u003E (such as \u003Ccode\u003EMarkdownContentService\u003C/code\u003E or \u003Ccode\u003EApiReferenceContentService\u003C/code\u003E) acts as a catalog of pages that need to be generated.\u003C/p\u003E\n\u003Ch4 id=\u0022what-is-a-content-service\u0022\u003EWhat is a Content Service?\u003C/h4\u003E\n\u003Cp\u003EAn \u003Ccode\u003EIContentService\u003C/code\u003E is the core abstraction for contributing pages to the static generation process. Each service implements the \u003Ccode\u003EGetPagesToGenerateAsync\u003C/code\u003E method, which returns a list of pages to generate. Each page includes:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EA \u003Cstrong\u003EURL\u003C/strong\u003E to request from the running Blazor application\u003C/li\u003E\n\u003Cli\u003EAn \u003Cstrong\u003Eoutput file path\u003C/strong\u003E where the rendered HTML will be saved\u003C/li\u003E\n\u003Cli\u003EOptional metadata (title, description, last modified date, etc.)\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EMultiple content services work together to build your complete site. For example, one service handles markdown files, another generates API documentation, and another discovers Razor pages.\u003C/p\u003E\n\u003Ch4 id=\u0022how-content-services-contribute-pages\u0022\u003EHow Content Services Contribute Pages\u003C/h4\u003E\n\u003Cp\u003ELet\u0027s look at how different content services contribute pages to the generation process:\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003EMarkdownContentService\u003C/strong\u003E scans your Content directory for markdown files:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EFor a file at \u003Ccode\u003EContent/guides/getting-started.md\u003C/code\u003E:\n\u003Cul\u003E\n\u003Cli\u003EURL to request: \u003Ccode\u003E/guides/getting-started/\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Eguides/getting-started/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003Cli\u003EFor a file at \u003Ccode\u003EContent/blog/hello-world.md\u003C/code\u003E:\n\u003Cul\u003E\n\u003Cli\u003EURL to request: \u003Ccode\u003E/blog/hello-world/\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Eblog/hello-world/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003E\u003Cstrong\u003EApiReferenceContentService\u003C/strong\u003E analyzes your .NET assemblies using Roslyn:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EFor a namespace like \u003Ccode\u003ESystem.Collections\u003C/code\u003E:\n\u003Cul\u003E\n\u003Cli\u003EURL to request: \u003Ccode\u003E/api/system.collections/\u003C/code\u003E (based on configured template)\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Eapi/system.collections/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003Cli\u003EFor a type like \u003Ccode\u003EList\u0026lt;T\u0026gt;\u003C/code\u003E:\n\u003Cul\u003E\n\u003Cli\u003EURL to request: \u003Ccode\u003E/api/system.collections.generic.list-1/\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Eapi/system.collections.generic.list-1/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003E\u003Cstrong\u003ERazorPageContentService\u003C/strong\u003E discovers Razor components with \u003Ccode\u003E@page\u003C/code\u003E directives:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EFor a component with \u003Ccode\u003E@page \u0022/about\u0022\u003C/code\u003E:\n\u003Cul\u003E\n\u003Cli\u003EURL to request: \u003Ccode\u003E/about/\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Eabout/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003Cli\u003EFor a component with \u003Ccode\u003E@page \u0022/contact\u0022\u003C/code\u003E:\n\u003Cul\u003E\n\u003Cli\u003EURL to request: \u003Ccode\u003E/contact/\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Econtact/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch4 id=\u0022the-url-to-file-mapping\u0022\u003EThe URL-to-File Mapping\u003C/h4\u003E\n\u003Cp\u003EEach page has both a URL and an output file path. This separation is important:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EThe \u003Cstrong\u003EURL\u003C/strong\u003E is what gets requested from the running Blazor application during generation\u003C/li\u003E\n\u003Cli\u003EThe \u003Cstrong\u003Eoutput file\u003C/strong\u003E is where the rendered HTML gets saved in your output directory\u003C/li\u003E\n\u003Cli\u003EThis allows flexible URL schemes (like clean URLs with trailing slashes) while maintaining proper file structure\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EFor example, requesting \u003Ccode\u003E/guides/getting-started/\u003C/code\u003E returns fully rendered HTML that gets saved to \u003Ccode\u003Eguides/getting-started/index.html\u003C/code\u003E. When deployed, web servers automatically serve \u003Ccode\u003Eindex.html\u003C/code\u003E when users visit \u003Ccode\u003E/guides/getting-started/\u003C/code\u003E.\u003C/p\u003E\n\u003Cp\u003E\u003Ccode\u003EGetPagesToGenerateAsync\u003C/code\u003E only tells the output generation service the URLs to access, you\u0027ll still need to wire that up with ASP.NET to produce the actual content.\u003C/p\u003E\n\u003Ch3 id=\u0022route-discovery\u0022\u003ERoute Discovery\u003C/h3\u003E\n\u003Cp\u003EThe system automatically discovers routes from two sources:\u003C/p\u003E\n\u003Ch4 id=\u0022blazor-component-routes\u0022\u003EBlazor Component Routes\u003C/h4\u003E\n\u003Cp\u003EWhen \u003Ccode\u003EAddPagesWithoutParameters\u003C/code\u003E is enabled, the \u003Ccode\u003ERoutesHelperService\u003C/code\u003E scans assemblies for Blazor components with\n\u003Ccode\u003E@page\u003C/code\u003E directives. This discovers routes like:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ccode\u003E@page \u0022/about\u0022\u003C/code\u003E becomes \u003Ccode\u003E/about/index.html\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003E@page \u0022/contact\u0022\u003C/code\u003E becomes \u003Ccode\u003E/contact/index.html\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EOnly non-parameterized routes are included (routes without \u003Ccode\u003E{parameter}\u003C/code\u003E segments).\u003C/p\u003E\n\u003Ch4 id=\u0022mapget-endpoints\u0022\u003EMapGet Endpoints\u003C/h4\u003E\n\u003Cp\u003EThe system also discovers HTTP GET endpoints registered via \u003Ccode\u003Eapp.MapGet()\u003C/code\u003E. These are assigned \u003Ccode\u003EPriority.MustBeLast\u003C/code\u003E\nbecause they often include dynamically generated content like CSS files that depend on other pages being processed first. This includes generating the MonorailCSS stylesheet if it\u0027s been registered.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E2\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022output-directory-preparation\u0022\u003EOutput Directory Preparation\u003C/h2\u003E\n\u003Cp\u003EBefore generation begins, the output directory is completely cleared and recreated. This ensures a clean slate for each generation run, preventing stale files from previous builds.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E3\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022static-asset-collection-and-copying\u0022\u003EStatic Asset Collection and Copying\u003C/h2\u003E\n\u003Cp\u003EThe pipeline collects and copies all static assets from multiple sources:\u003C/p\u003E\n\u003Ch3 id=\u0022web-root-assets\u0022\u003EWeb Root Assets\u003C/h3\u003E\n\u003Cp\u003EStandard \u003Ccode\u003Ewwwroot\u003C/code\u003E files from the main application are automatically included.\u003C/p\u003E\n\u003Ch3 id=\u0022razor-class-library-assets\u0022\u003ERazor Class Library Assets\u003C/h3\u003E\n\u003Cp\u003EStatic assets from referenced Razor Class Libraries are automatically included. This includes \u003Ccode\u003Escripts.js\u003C/code\u003E from the \u003Ccode\u003EMyLittleContentEngine.UI\u003C/code\u003E library, which is essential for the UI functionality.\u003C/p\u003E\n\u003Ch3 id=\u0022content-engine-assets\u0022\u003EContent Engine Assets\u003C/h3\u003E\n\u003Cp\u003ECustom content directories registered via \u003Ccode\u003EMapContentEngineStaticAssets\u003C/code\u003E are included with their assets mapped to specific request paths.\u003C/p\u003E\n\u003Ch3 id=\u0022content-service-assets\u0022\u003EContent Service Assets\u003C/h3\u003E\n\u003Cp\u003EIndividual content services can contribute their own static assets through the \u003Ccode\u003EGetContentToCopyAsync\u003C/code\u003E method.\u003C/p\u003E\n\u003Cp\u003EAll collected assets are then copied to the output directory, respecting the \u003Ccode\u003EIgnoredPathsOnContentCopy\u003C/code\u003E configuration.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E4\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022page-generation-with-priority-ordering\u0022\u003EPage Generation with Priority Ordering\u003C/h2\u003E\n\u003Cp\u003EPages are generated in priority order to handle dependencies correctly. The system uses three priority levels:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003E\u003Ccode\u003EMustBeFirst\u003C/code\u003E (0)\u003C/strong\u003E: Pages that other pages might depend on\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003E\u003Ccode\u003ENormal\u003C/code\u003E (50)\u003C/strong\u003E: Standard content pages\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003E\u003Ccode\u003EMustBeLast\u003C/code\u003E (100)\u003C/strong\u003E: Pages that depend on other pages (like CSS files that need to scan generated HTML)\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EWithin each priority level, pages are generated in parallel for optimal performance.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E5\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022page-rendering-with-http-requests\u0022\u003EPage Rendering with HTTP Requests\u003C/h2\u003E\n\u003Cp\u003EOnce all pages are collected and assets are copied, the generation process renders each page by making HTTP requests to your running Blazor application.\u003C/p\u003E\n\u003Ch3 id=\u0022how-page-rendering-works\u0022\u003EHow Page Rendering Works\u003C/h3\u003E\n\u003Cp\u003EThe rendering process follows these steps for each page:\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003E\u003Cstrong\u003EStart an HTTP client\u003C/strong\u003E pointed at your running Blazor application (e.g., \u003Ccode\u003Ehttp://localhost:5000\u003C/code\u003E)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EMake an HTTP GET request\u003C/strong\u003E for each page URL (e.g., \u003Ccode\u003E/guides/getting-started/\u003C/code\u003E)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe Blazor application processes the request\u003C/strong\u003E:\n\u003Cul\u003E\n\u003Cli\u003ERoutes to the appropriate component or page\u003C/li\u003E\n\u003Cli\u003EExecutes any server-side logic\u003C/li\u003E\n\u003Cli\u003ERenders the page with layouts and components\u003C/li\u003E\n\u003Cli\u003EReturns fully rendered HTML\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESave the HTML\u003C/strong\u003E to the corresponding output file path\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ECreate directories\u003C/strong\u003E as needed in the output folder\u003C/li\u003E\n\u003C/ol\u003E\n\u003Cp\u003EThis approach means your pages are rendered exactly as they would be when served dynamically, ensuring consistency between development and production.\u003C/p\u003E\n\u003Ch3 id=\u0022priority-based-generation\u0022\u003EPriority-Based Generation\u003C/h3\u003E\n\u003Cp\u003EPages aren\u0027t generated in random order - they follow a priority system to handle dependencies:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EMustBeFirst (0)\u003C/strong\u003E: Pages that other pages might depend on (rarely used)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ENormal (50)\u003C/strong\u003E: Standard content pages from content services (most pages)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EMustBeLast (100)\u003C/strong\u003E: Pages that depend on other pages being generated first\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EThe \u003Ccode\u003EMustBeLast\u003C/code\u003E priority is crucial for pages that need to analyze generated content:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EMonorailCSS stylesheet\u003C/strong\u003E (\u003Ccode\u003Estyles.css\u003C/code\u003E) scans all generated HTML to discover which CSS classes are used, then generates only the CSS needed\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESitemaps\u003C/strong\u003E need the complete list of generated pages before they can be created\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESearch indexes\u003C/strong\u003E may need to scan all content before generating search data\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EWithin each priority level, pages are generated \u003Cstrong\u003Ein parallel\u003C/strong\u003E to maximize performance and reduce build time.\u003C/p\u003E\n\u003Ch3 id=\u0022example-generation-flow\u0022\u003EExample Generation Flow\u003C/h3\u003E\n\u003Cp\u003EHere\u0027s a complete example showing how a markdown file becomes a static HTML page:\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003EStarting Point:\u003C/strong\u003E A markdown file at \u003Ccode\u003EContent/blog/hello-world.md\u003C/code\u003E\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003ECollection Phase\u003C/strong\u003E: MarkdownContentService discovers the file and returns:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EURL: \u003Ccode\u003E/blog/hello-world/\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EOutput file: \u003Ccode\u003Eblog/hello-world/index.html\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EMetadata: title, description, last modified date\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EHTTP Request\u003C/strong\u003E: Generator makes request to \u003Ccode\u003Ehttp://localhost:5000/blog/hello-world/\u003C/code\u003E\u003C/p\u003E\n\u003C/li\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EBlazor Renders\u003C/strong\u003E:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003ERoutes to markdown rendering component\u003C/li\u003E\n\u003Cli\u003EProcesses markdown content\u003C/li\u003E\n\u003Cli\u003EApplies layout with navigation, footer, etc.\u003C/li\u003E\n\u003Cli\u003EInjects metadata into HTML \u003Ccode\u003E\u0026lt;head\u0026gt;\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EReturns complete HTML document\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003ESave to Disk\u003C/strong\u003E: HTML saved to \u003Ccode\u003E_output/blog/hello-world/index.html\u003C/code\u003E\u003C/p\u003E\n\u003C/li\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EReady for Deployment\u003C/strong\u003E: The static HTML file can now be deployed to any web server or hosting platform\u003C/p\u003E\n\u003C/li\u003E\n\u003C/ol\u003E\n\u003Cp\u003EThis same process applies to all pages - API documentation, Razor pages, and any custom content from your IContentService implementations.\u003C/p\u003E\n\u003C/li\u003E\u003C/ol\u003E\u003C/div\u003E\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: Hot Reload Architecture\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/hot-reload-architecture/\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/hot-reload-architecture/\u0022\u003EHot Reload 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: Syntax Highlighting System Architecture\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/syntax-highlighting-system/\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/syntax-highlighting-system/\u0022\u003ESyntax Highlighting System Architecture\u003C/a\u003E\u003C/div\u003E\u003C/div\u003E"}}