{"title":"Using the DocSite Package","description":"Learn how to create a documentation site using the DocSite package with customizable branding and styling","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\u003EUsing the DocSite Package\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 \u003Ccode\u003EMyLittleContentEngine.DocSite\u003C/code\u003E package provides a complete documentation site solution with minimal setup. It includes all the components, layouts, and styling needed to create a professional documentation site with customizable branding.\u003C/p\u003E\n\u003Cdiv class=\u0022markdown-alert markdown-alert-important\u0022\u003E\n\u003Cp class=\u0022markdown-alert-title\u0022\u003E\u003Csvg viewBox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\u0022\u003E\u003C/path\u003E\u003C/svg\u003EImportant\u003C/p\u003E\n\u003Cp\u003EWhile functional, the \u003Ccode\u003EDocSite\u003C/code\u003E package drives the documentation for MyLittleContentEngine. It can and will\nchange as this site changes. It is better suited as inspiration or proof-of-concepts than production documentation.\u003C/p\u003E\n\u003C/div\u003E\n\u003Ch2 id=\u0022what-youll-build\u0022\u003EWhat You\u0027ll Build\u003C/h2\u003E\n\u003Cp\u003EYou\u0027ll create a documentation site with:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EProfessional documentation layout with navigation\u003C/li\u003E\n\u003Cli\u003EAPI documentation generation\u003C/li\u003E\n\u003Cli\u003ESearch functionality\u003C/li\u003E\n\u003Cli\u003EResponsive design with dark/light mode\u003C/li\u003E\n\u003Cli\u003ECustom branding and styling\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022prerequisites\u0022\u003EPrerequisites\u003C/h2\u003E\n\u003Cp\u003EBefore starting, ensure you have:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E.NET 9 SDK or later installed\u003C/li\u003E\n\u003Cli\u003EA code editor (Visual Studio, VS Code, or JetBrains Rider)\u003C/li\u003E\n\u003Cli\u003EFamiliarity with command-line tools\u003C/li\u003E\n\u003C/ul\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=\u0022create-a-new-blazor-project\u0022\u003ECreate a New Blazor Project\u003C/h2\u003E\n\u003Cp\u003EStart by creating a new minimal web project:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E new web \u003Cspan class=\u0022hljs-params\u0022\u003E-n\u003C/span\u003E MyDocSite\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Ecd\u003C/span\u003E MyDocSite\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\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=\u0022add-the-docsite-package\u0022\u003EAdd the DocSite Package\u003C/h2\u003E\n\u003Cp\u003EAdd the DocSite package reference to your project:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E add package MyLittleContentEngine.DocSite\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis package includes all the dependencies you need:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine\u003C/code\u003E - Core content management functionality\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine.UI\u003C/code\u003E - UI components for documentation\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine.MonorailCss\u003C/code\u003E - CSS framework for styling\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMdazor\u003C/code\u003E - Markdown rendering for Blazor\u003C/li\u003E\n\u003C/ul\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=\u0022configure-file-watching-for-development\u0022\u003EConfigure File Watching for Development\u003C/h2\u003E\n\u003Cp\u003EAdd the following to your \u003Ccode\u003E.csproj\u003C/code\u003E file so content changes trigger live reload during development:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003EItemGroup\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003EWatch\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003EInclude\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E=\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EContent/**/*.*\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E/\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;/\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003EItemGroup\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\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=\u0022configure-the-docsite\u0022\u003EConfigure the DocSite\u003C/h2\u003E\n\u003Cp\u003EReplace the content of \u003Ccode\u003EProgram.cs\u003C/code\u003E with the following minimal configuration:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eusing\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EMyLittleContentEngine\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDocSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Evar\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EWebApplication\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ECreateBuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eargs\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddDocSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDocSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Documentation Site\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Documentation for my project\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Evar\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBuild\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUseDocSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword---control\u0022\u003Eawait\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ERunDocSiteAsync\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eargs\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis minimal setup provides a complete documentation site with default styling and layout.\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=\u0022create-the-content-structure\u0022\u003ECreate the Content Structure\u003C/h2\u003E\n\u003Cp\u003ECreate the content directory structure:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Emkdir\u003C/span\u003E \u003Cspan class=\u0022hljs-params\u0022\u003E-p\u003C/span\u003E Content\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThe DocSite package expects your content to be in the \u003Ccode\u003EContent\u003C/code\u003E directory by default.\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\u003E6\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022write-your-first-documentation-page\u0022\u003EWrite Your First Documentation Page\u003C/h2\u003E\n\u003Cp\u003ECreate your first documentation page at \u003Ccode\u003EContent/index.md\u003C/code\u003E:\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\u003E---\n\u003Cspan class=\u0022hljs-tag\u0022\u003Et\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EWelcome to My Documentation\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ed\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EGetting started with our documentation site\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n---\n\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E#\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003EWelcome\u003C/span\u003E\n\nThis is the home page of our documentation site. You can write content using Markdown and it will be automatically rendered with a professional layout.\n\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E##\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003EFeatures\u003C/span\u003E\n\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003EResponsive Design\u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003E: Looks great on all devices\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003ESearch\u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003E: Built-in search functionality\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003EAPI Documentation\u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003E: Automatic API reference generation\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003EDark Mode\u003Cspan class=\u0022hljs-punctuation\u0022\u003E**\u003C/span\u003E: Toggle between light and dark themes\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\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\u003E7\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022customize-your-site\u0022\u003ECustomize Your Site\u003C/h2\u003E\n\u003Cp\u003EYou can customize various aspects of your documentation site by modifying the options in \u003Ccode\u003EProgram.cs\u003C/code\u003E:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddDocSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDocSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Basic site information\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Documentation Site\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Comprehensive documentation for my project\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ECanonicalBaseUrl\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://mydocs.example.com\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Styling and branding\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EPrimaryHue\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-number roslyn-number\u0022\u003E235\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Blue theme (0-360)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBaseColorName\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Zinc\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Base color palette\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EGitHubUrl\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://github.com/myuser/myproject\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// API Documentation (optional)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESolutionPath\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022../../MySolution.slnx\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EIncludeNamespaces\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E[\u003C/span\u003E\u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022MyProject\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022MyProject.Core\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EExcludeNamespaces\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E[\u003C/span\u003E\u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022MyProject.Tests\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Advanced customization\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EExtraStyles\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022\u0022\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        .custom-header {\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        }\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0022\u0022\u0022\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\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\u003E8\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022add-custom-branding-optional\u0022\u003EAdd Custom Branding (Optional)\u003C/h2\u003E\n\u003Cp\u003EFor advanced customization, you can add custom header content or logos:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddDocSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDocSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Documentation Site\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Custom header with logo\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EHeaderContent\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022\u0022\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;div class=\u0022flex items-center gap-2\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u0026lt;img src=\u0022/logo.png\u0022 alt=\u0022Logo\u0022 class=\u0022h-8 w-8\u0022 /\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u0026lt;span class=\u0022text-xl font-bold\u0022\u0026gt;My Docs\u0026lt;/span\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;/div\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0022\u0022\u0022\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Custom footer\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EFooterContent\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022\u0022\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;div class=\u0022text-center text-sm text-base-600 dark:text-base-400\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u00A9 2024 My Company. All rights reserved.\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;/div\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0022\u0022\u0022\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Additional HTML for the head section\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAdditionalHtmlHeadContent\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022\u0022\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;link rel=\u0022preconnect\u0022 href=\u0022https://fonts.googleapis.com\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;link rel=\u0022preconnect\u0022 href=\u0022https://fonts.gstatic.com\u0022 crossorigin\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;link href=\u0022https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700\u0026amp;display=swap\u0022 rel=\u0022stylesheet\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0022\u0022\u0022\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\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\u003E9\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022test-your-documentation-site\u0022\u003ETest Your Documentation Site\u003C/h2\u003E\n\u003Cp\u003ERun your site in development mode:\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\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E watch\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003ENavigate to \u003Ccode\u003Ehttps://localhost:5001\u003C/code\u003E to see your documentation site in action!\u003C/p\u003E\n\u003Cp\u003EWhile the page is open, try editing the \u003Ccode\u003EContent/index.md\u003C/code\u003E file. You should see the changes reflected immediately without needing to restart the server.\u003C/p\u003E\n\u003C/li\u003E\u003C/ol\u003E\u003C/div\u003E\u003Ch2 id=\u0022what-success-looks-like\u0022\u003EWhat Success Looks Like\u003C/h2\u003E\n\u003Cp\u003EAfter running \u003Ccode\u003Edotnet watch\u003C/code\u003E, navigate to the URL shown in your terminal (typically \u003Ccode\u003Ehttp://localhost:5131\u003C/code\u003E).\nYou\u0027ll see:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EYour documentation home page rendered from \u003Ccode\u003EContent/index.md\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EA sidebar navigation panel (starts empty but builds automatically as you add pages)\u003C/li\u003E\n\u003Cli\u003EA clean documentation layout with a dark/light mode toggle\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EAdd a second page at \u003Ccode\u003EContent/getting-started.md\u003C/code\u003E with a \u003Ccode\u003Etitle\u003C/code\u003E in the front matter, save it, and watch the\nsidebar navigation update automatically \u2014 no configuration required.\u003C/p\u003E\n\u003Cdiv class=\u0022markdown-alert markdown-alert-note\u0022\u003E\n\u003Cp class=\u0022markdown-alert-title\u0022\u003E\u003Csvg viewBox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\u0022\u003E\u003C/path\u003E\u003C/svg\u003ENote\u003C/p\u003E\n\u003Cp\u003EYou\u0027re reading documentation built with DocSite right now. The site you see here is generated from the same\npackage, giving you an immediate reference for what\u0027s possible.\u003C/p\u003E\n\u003C/div\u003E\n\u003Ch2 id=\u0022available-configuration-options\u0022\u003EAvailable Configuration Options\u003C/h2\u003E\n\u003Cp\u003EThe \u003Ccode\u003EDocSiteOptions\u003C/code\u003E class provides many customization options:\u003C/p\u003E\n\u003Ctable\u003E\n\u003Cthead\u003E\n\u003Ctr\u003E\n\u003Cth\u003EOption\u003C/th\u003E\n\u003Cth\u003EType\u003C/th\u003E\n\u003Cth\u003EDefault\u003C/th\u003E\n\u003Cth\u003EDescription\u003C/th\u003E\n\u003C/tr\u003E\n\u003C/thead\u003E\n\u003Ctbody\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ESiteTitle\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022Documentation Site\u0022\u003C/td\u003E\n\u003Ctd\u003EThe title displayed in the header\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EDescription\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022A documentation site...\u0022\u003C/td\u003E\n\u003Ctd\u003ESite description for SEO\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EPrimaryHue\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Eint\u003C/td\u003E\n\u003Ctd\u003E235\u003C/td\u003E\n\u003Ctd\u003EPrimary color hue (0-360)\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EBaseColorName\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022Zinc\u0022\u003C/td\u003E\n\u003Ctd\u003EBase color palette name\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EGitHubUrl\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EGitHub repository URL\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ECanonicalBaseUrl\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECanonical URL for SEO\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ESolutionPath\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EPath to solution file for API docs\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EIncludeNamespaces\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring[]?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ENamespaces to include in API docs\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EExcludeNamespaces\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring[]?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ENamespaces to exclude from API docs\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EContentRootPath\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022Content\u0022\u003C/td\u003E\n\u003Ctd\u003EPath to content directory\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EExtraStyles\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EAdditional CSS styles\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EHeaderIcon\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom header icon HTML\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EHeaderContent\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom header content HTML\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EFooterContent\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom footer content HTML\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EAdditionalHtmlHeadContent\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom HTML for head section\u003C/td\u003E\n\u003C/tr\u003E\n\u003C/tbody\u003E\n\u003C/table\u003E\n\u003Ch2 id=\u0022next-steps\u0022\u003ENext Steps\u003C/h2\u003E\n\u003Cp\u003EThe DocSite package allows you to get up and running quickly, but there are no promises made\nthat the design or functionality of the site will remain consistent. It\u0027s what drives the documentation\nfor my personal projects, so as my whims change so will the package. Use it for quick proof-of-concepts, demos, or inspiration\nfor your own documentation site using the \u003Ccode\u003EMyLittleContentEngine\u003C/code\u003E services directly.\u003C/p\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: Using the BlogSite Package\u0022 href=\u0022/MyLittleContentEngine/guides/using-blogsite/\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/guides/using-blogsite/\u0022\u003EUsing the BlogSite Package\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: Adding SPA Navigation\u0022 href=\u0022/MyLittleContentEngine/guides/adding-spa-navigation/\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/guides/adding-spa-navigation/\u0022\u003EAdding SPA Navigation\u003C/a\u003E\u003C/div\u003E\u003C/div\u003E"}}