DOCSEARCHbyAlgolia
Submit Docs

MyLittleContentEngine

website·Indexed 29 days ago

https://phil-scott-78.github.io/MyLittleContentEngine

A static site generation framework featuring a Razor Island Architecture that bridges static-first rendering with instant client-side SPA navigation. It includes support for Markdown extensions, custom IContentService implementations, and specialized packages like DocSite and BlogSite. The engine features a multi-layered syntax highlighting system integrating Roslyn and TextMateSharp, MonorailCSS styling, and a content processing pipeline for transforming Razor pages and API documentation into static HTML.

Tokens
50.8K
Snippets
264
Records
389
Agent score
72%

What's inside MyLittleContentEngine

  1. Overview of MyLittleContentEngine Hot Reload Architecture

    MyLittleContentEngine implements hot reload to reflect content changes immediately without restarting the application. The system follows two primary principles: processing site-wide updates on reload and processing page-wide updates on demand.

    For example, when a markdown file is edited, the engine rereads all markdown files to parse front matter (providing full site context for cross-references and link rewriting) but defers the expensive rendering of Markdown to HTML until the specific page is requested. This optimizes performance while maintaining site-wide consistency.

  2. Overview of the DocSite package

    The MyLittleContentEngine.DocSite package is a complete documentation site solution that provides components, layouts, and styling for professional sites. It includes built-in support for API documentation generation, search functionality, responsive design with dark/light mode, and customizable branding.

    Caveat: This package is primarily used to drive the documentation for MyLittleContentEngine and may change frequently; it is recommended for inspiration or proof-of-concepts rather than stable production environments.

  3. Overview of Razor Islands for SPA navigation

    Razor Islands add SPA navigation to static content sites. The system works by defining named regions of a page (islands) that update independently during navigation while the surrounding layout remains static. The initial page load is delivered as full static HTML; subsequent navigations fetch a JSON envelope and swap the content of the islands.

  4. Overview of the BlogSite package

    The MyLittleContentEngine.BlogSite package is a complete blog site solution for Blazor. It provides components, layouts, and styling for professional blogs, including features such as tag-based organization, RSS feed generation, responsive design with dark/light mode, and social media integration.

    Note: This package is primarily used for the author's personal blog and may change over time; it is recommended as a proof-of-concept or inspiration rather than a rigid framework for total control.

  5. Overview of MyLittleContentEngine JavaScript Architecture

    MyLittleContentEngine uses a modular, class-based JavaScript architecture coordinated by a central PageManager. This manager handles DOM ready state detection and initializes various specialized component managers to provide interactive functionality for documentation sites. For debugging purposes, the PageManager is available globally via window.pageManager.

  6. Overview of MyLittleContentEngine Search Architecture

    MyLittleContentEngine provides a high-performance client-side search system powered by FlexSearch. The system follows a specific data flow:

    1. Server-side Index Generation: Content services (e.g., Markdown, API Reference) provide pages via GetPagesToGenerateAsync(). The SearchIndexService fetches the HTML, removes code blocks, extracts headings with priority levels, and generates a JSON index at /search-index.json.
    2. Client-side Search Engine: FlexSearch loads the /search-index.json file to provide fast, fuzzy searching with smart ranking and highlighting.
    3. Search UI: A modal interface that supports keyboard shortcuts and result highlighting.

  11. Understand the Syntax Highlighting Architecture

    MyLittleContentEngine uses a priority-based cascading system for server-side syntax highlighting to maximize accuracy and performance. The system evaluates code blocks in the following order of priority:

    1. Roslyn Highlighter: Highest priority; used for C# and VB.NET if Roslyn is available.
    2. Custom Highlighter: Used for specialized languages like GBNF, Shell, and Text.
    3. TextMateSharp: Used if a TextMate grammar is available for the language.
    4. Highlight.js: Client-side fallback if no server-side highlighter is applicable.

    Server-side highlighters (Roslyn, Custom, TextMateSharp) produce HTML with CSS classes, while the fallback performs highlighting in the browser.

  12. Understand the production deployment flow

    In production, MyLittleContentEngine operates as a static site. There is no ASP.NET Core server, no active content services, and no dynamic rendering occurring at request time. The browser receives pure HTML, which is then enhanced by client-side JavaScript for interactive features. To update content, developers must edit the markdown files and trigger a rebuild to generate new static HTML.