Using UI Elements

MyLittleContentEngine includes a set of pre-built UI components that make it easy to create professional, responsive layouts for your content sites. These components handle common patterns like navigation, page outlines, and headers.

In this tutorial, you'll learn how to integrate and use the UI components to create a documentation or blog site with sidebar navigation, page outlines, and responsive design.

What You'll Learn

By the end of this tutorial, you'll be able to:

  • Set up and configure MyLittleContentEngine.UI components
  • Create a sidebar navigation with TableOfContentsNavigation
  • Add page outline navigation with OutlineNavigation

Prerequisites

Before starting, ensure you have:

  • Completed the Creating Your First Site tutorial
  • A working MyLittleContentEngine site with multiple content pages
  • Basic familiarity with Blazor components and CSS
  1. 1

    Add the UI Package

    First, add a reference to the MyLittleContentEngine.UI package:

    dotnet add package MyLittleContentEngine.UI
  2. 2

    Import Components and Scripts

    Add the UI components to your Components/_Imports.razor file:

    @using MyLittleContentEngine.UI.Components

    Add the required scripts to your Components/App.razor file in head the closing <head> tag:

    <script src="_content/MyLittleContentEngine.UI/scripts.js" defer></script>

    These scripts aren't necessary for the components to function, but they provide additional features like highlighting the current page in the navigation.

  3. 3

    Set Up TableOfContentsNavigation

    The TableOfContentsNavigation component automatically generates navigation based on your content structure and front matter.

    Create or update your Components/Layout/MainLayout.razor with a sidebar navigation:

    @using MyLittleContentEngine.Services.Content.TableOfContents
@using System.Collections.Immutable
@inherits LayoutComponentBase
@inject ITableOfContentService TableOfContentService
@inject NavigationManager NavigationManager

<div class="min-h-screen flex">
    <!-- Left Column: Table of Contents -->
    <div class="w-80 bg-neutral-50 border-r border-neutral-200 flex-shrink-0">
        <div class="sticky top-0 h-screen overflow-y-auto p-6">
            <TableOfContentsNavigation TableOfContents="@_tableOfContents" />
        </div>
    </div>
    
    <!-- Right Column: Content Area -->
    <div class="flex-1 min-w-0">
        <main class="w-full">
            @Body
        </main>
    </div>
</div>

@code{
    private ImmutableList<TableOfContentEntry>? _tableOfContents;

    protected override async Task OnInitializedAsync()
    {   
        _tableOfContents = await TableOfContentService.GetNavigationTocAsync(NavigationManager.ToAbsoluteUri(NavigationManager.Uri).AbsolutePath);
        await base.OnInitializedAsync();
    }
}

    This creates a responsive sidebar layout with sticky navigation that scrolls independently from the main content.

  4. 4

    Add OutlineNavigation for Page Structure

    The OutlineNavigation component shows the outline of the current page based on its headings (h2, h3, etc.).

    Update your Components/Layout/Pages.razor to include page outline navigation:

    @page "/{*fileName:nonfile}"

@using MyLittleContentEngine.Models
@using MyLittleContentEngine.Services.Content
@using MyLittleContentEngine
@inject ContentEngineOptions ContentEngineOptions
@inject IMarkdownContentService<DocsFrontMatter> DocsMarkdownContentService

@if (_post == null || _postContent == null)
{
    <PageTitle>@ContentEngineOptions.SiteTitle</PageTitle>
    <div class="flex justify-center items-center h-64">
        <p class="text-neutral-500">Not found</p>
    </div>
    return;
}

<PageTitle>@ContentEngineOptions.SiteTitle - @_post.FrontMatter.Title</PageTitle>

<div class="flex">
    <!-- Content Column -->
    <div class="flex-1 min-w-0">
        <article class="p-8 max-w-4xl">
            <header>
                <h1 class="text-2xl"> @_post.FrontMatter.Title</h1>
            </header>

            <div class="prose prose-neutral max-w-none">
                @((MarkupString)_postContent)
            </div>
        </article>
    </div>
    
    <!-- Outline Column -->
    <div class="w-64 flex-shrink-0">
        <aside class="sticky top-0 h-screen overflow-y-auto p-6">
            @if (_outline != null && _post != null)
            {
                <OutlineNavigation 
                    Outline="@_outline" 
                    BaseUrl="@_post.NavigateUrl" />
            }
        </aside>
    </div>
</div>

@code {
    private MarkdownContentPage<DocsFrontMatter>? _post;
    private string? _postContent;
    private OutlineEntry[]? _outline;

    [Parameter] public required string FileName { get; init; } = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        var fileName = FileName;
        if (string.IsNullOrWhiteSpace(fileName))
        {
            fileName = "index";
        }

        var page = await DocsMarkdownContentService.GetRenderedContentPageByUrlOrDefault(fileName);
        if (page == null)
        {
            return;
        }

        _outline = page.Value.Page.Outline;
        _post = page.Value.Page;
        _postContent = page.Value.HtmlContent;
    }
}

    This creates a three-column layout: sidebar navigation, main content, and page outline.

  5. 6

    Test Your UI Components

    Run your site in development mode:

    dotnet watch

    Navigate to your site and you should see:

    1. Sidebar Navigation - Auto-generated from your content structure
    2. Page Outline - Shows headings from the current page with anchor links

    Test the functionality by:

    • Clicking navigation links to move between pages
    • Using the page outline to jump to different sections

Next Steps

Now that you have a complete UI setup, you can:

The UI components provide a solid foundation for creating professional documentation sites, blogs, or any content-focused web application with MyLittleContentEngine.

Previous
Next