Skip to content

[dev-v5] Demo site - Implement static rendering #4969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Denis Voituron (dvoituron) wants to merge 6 commits into
base: dev-v5
Choose a base branch
from
Draft

[dev-v5] Demo site - Implement static rendering #4969

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0b9481e
Implement dynamic rendering for MarkdownViewer
dvoituron Jun 26, 2026
c93b8dc
Update DocViewer to use InteractiveServerRenderMode with parameter an…
dvoituron Jun 26, 2026
70ee60c
Update FluentProviders to use DemoRenderMode for improved rendering
dvoituron Jun 26, 2026
a70d609
Refactor DocViewer to use readonly for DemoRenderMode and update erro…
dvoituron Jun 26, 2026
5c76a72
Merge branch 'dev-v5' into users/dvoituron/dev-v5/docviewer-static-ssr
dvoituron Jul 3, 2026
373675b
Merge branch 'dev-v5' into users/dvoituron/dev-v5/docviewer-static-ssr
dvoituron Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion examples/Demo/FluentUI.Demo.Client/DocViewer.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
@page "/{*Path:nonfile}"
@using FluentUI.Demo.DocViewer.Components

<MarkdownViewer Route="@Path" @key="@Path" />
<MarkdownViewer Route="@Path" @key="@Path" SampleRenderMode="@DemoRenderMode" />

@code
{
public static IComponentRenderMode DemoRenderMode = new InteractiveServerRenderMode(false);

[Parameter]
public string Path { get; set; } = string.Empty;
}
Expand Down
3 changes: 2 additions & 1 deletion ...les/Demo/FluentUI.Demo.Client/Documentation/General/Theme/Designer/ThemeDesigner.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,14 @@ public partial class ThemeDesigner

protected override async Task OnInitializedAsync()
{
_isDark = await ThemeService.IsSystemDarkAsync();

}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_isDark = await ThemeService.IsSystemDarkAsync();
await PreviewThemeAsync();
}
}
Expand Down
48 changes: 48 additions & 0 deletions examples/Demo/FluentUI.Demo.Client/Layout/DemoHeader.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<FluentStack VerticalAlignment="@VerticalAlignment.Center" HorizontalGap="4px" Height="100%">
@* Hamburger on Mobile *@
<FluentLayoutHamburger Style="margin: 2px 12px;" PanelHeader="Fluent UI Blazor" Display="HamburgerDisplay.DesktopMobile" />

@* Microsoft Logo *@
<MicrosoftLogo />

<FluentSpacer />

@* GitHub Logo *@
<FluentButton IconStart="@(new GitHubIcon().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@(() => OpenUrlInNewTabAsync("https://github.com/microsoft/fluentui-blazor/tree/dev-v5"))"
Appearance="ButtonAppearance.Transparent"
Title="See the Fluent UI Blazor GitHub repository" />

@* DarkTheme *@
<FluentButton IconStart="@(new Icons.Regular.Size20.DarkTheme().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@SwitchThemeAsync"
Appearance="ButtonAppearance.Transparent"
Title="Switch to Light/Dark theme" />

@* Direction *@
<FluentButton IconOnly="true"
Title="Switch to LTR/RTL direction"
OnClick="@SwitchDirAsync"
Appearance="ButtonAppearance.Transparent">
<FluentIcon Class="hidden-if-ltr"
Value="@(new Icons.Regular.Size20.TextDirectionHorizontalRtl().WithColor(SystemColors.Neutral.ForegroundOnBrand))" />
<FluentIcon Class="hidden-if-rtl"
Value="@(new Icons.Regular.Size20.TextDirectionHorizontalLtr().WithColor(SystemColors.Neutral.ForegroundOnBrand))" />
</FluentButton>

@* Reboot *@
<FluentButton IconStart="@(new Icons.Regular.Size20.DrawText().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@ReloadReboot"
Appearance="ButtonAppearance.Subtle"
BackgroundColor="@(_useReboot ? "var(--colorBrandBackground)" : "var(--colorBrandBackgroundHover)")"
Style="display: none;"
Title="Use the Reboot.css styles" />

@* Open Console *@
@* <FluentButton IconStart="@(new Icons.Regular.Size20.WindowConsole().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@(() => _consoleLogOpened = !_consoleLogOpened)"
Appearance="ButtonAppearance.Subtle"
BackgroundColor="@(_consoleLogOpened ? "var(--colorBrandBackground)" : "var(--colorBrandBackgroundHover)")"
Title="Open or hide the console" /> *@

</FluentStack>
73 changes: 73 additions & 0 deletions examples/Demo/FluentUI.Demo.Client/Layout/DemoHeader.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// ------------------------------------------------------------------------
// This file is licensed to you under the MIT License.
// ------------------------------------------------------------------------

using Microsoft.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.JSInterop;

namespace FluentUI.Demo.Client.Layout;

public partial class DemoHeader
{
private bool _useReboot;

[Inject]
public required IJSRuntime JSRuntime { get; set; }

[Inject]
public required NavigationManager Navigation { get; set; }

protected override void OnInitialized()
{
_useReboot = new Uri(Navigation.Uri).Query.Contains("reboot", StringComparison.InvariantCultureIgnoreCase);
}

private async Task SwitchThemeAsync()
{
await JSRuntime.InvokeVoidAsync("Blazor.theme.switchTheme");
}

private async Task SwitchDirAsync()
{
await JSRuntime.InvokeVoidAsync("Blazor.theme.switchDirection");
}

private void ReloadReboot()
{
var uri = new Uri(Navigation.Uri);
var baseUri = uri.GetLeftPart(UriPartial.Path);

_useReboot = uri.Query.Contains("reboot", StringComparison.InvariantCultureIgnoreCase);

// Toggle the reboot flag
_useReboot = !_useReboot;

if (_useReboot)
{
Navigation.NavigateTo($"{baseUri}?reboot", true);
}
else
{
Navigation.NavigateTo(baseUri, true);
}
}

/// <summary>
/// Opens a URL in a new browser tab.
/// </summary>
private async Task OpenUrlInNewTabAsync(string url)
{
await JSRuntime.InvokeVoidAsync("open", url, "_blank");
}

internal class GitHubIcon : Icon
{
public GitHubIcon() : base(
"GitHub",
IconVariant.Regular,
IconSize.Size20,
"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.178 0C4.55 0 0 4.583 0 10.254c0 4.533 2.915 8.369 6.959 9.727 0.506 0.102 0.691 -0.221 0.691 -0.492 0 -0.238 -0.017 -1.053 -0.017 -1.901 -2.831 0.611 -3.421 -1.222 -3.421 -1.222 -0.455 -1.188 -1.129 -1.494 -1.129 -1.494 -0.927 -0.628 0.068 -0.628 0.068 -0.628 1.028 0.068 1.567 1.053 1.567 1.053 0.91 1.562 2.376 1.12 2.966 0.849 0.084 -0.662 0.354 -1.12 0.64 -1.375 -2.258 -0.238 -4.634 -1.12 -4.634 -5.059 0 -1.12 0.404 -2.037 1.045 -2.75 -0.101 -0.255 -0.455 -1.307 0.101 -2.716 0 0 0.859 -0.272 2.797 1.053a9.786 9.786 0 0 1 2.545 -0.34c0.859 0 1.735 0.119 2.544 0.34 1.938 -1.324 2.797 -1.053 2.797 -1.053 0.556 1.409 0.202 2.462 0.101 2.716 0.657 0.713 1.045 1.63 1.045 2.75 0 3.939 -2.376 4.804 -4.651 5.059 0.371 0.323 0.691 0.934 0.691 1.901 0 1.375 -0.017 2.479 -0.017 2.818 0 0.272 0.185 0.594 0.691 0.493 4.044 -1.358 6.959 -5.195 6.959 -9.727C20.356 4.583 15.789 0 10.178 0z\"></path>")
{ }
}
}
59 changes: 7 additions & 52 deletions examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,54 +8,7 @@
@* Header *@
@* ------------------- *@
<FluentLayoutItem Area="@LayoutArea.Header" Height="44px">
<FluentStack VerticalAlignment="@VerticalAlignment.Center" HorizontalGap="4px" Height="100%">
@* Hamburger on Mobile *@
<FluentLayoutHamburger Style="margin: 2px 12px;" PanelHeader="Fluent UI Blazor" Display="HamburgerDisplay.DesktopMobile" />

@* Microsoft Logo *@
<MicrosoftLogo />

<FluentSpacer />

@* GitHub Logo *@
<FluentButton IconStart="@(new GitHubIcon().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@(() => OpenUrlInNewTabAsync("https://github.com/microsoft/fluentui-blazor/tree/dev-v5"))"
Appearance="ButtonAppearance.Transparent"
Title="See the Fluent UI Blazor GitHub repository" />

@* DarkTheme *@
<FluentButton IconStart="@(new Icons.Regular.Size20.DarkTheme().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@SwitchThemeAsync"
Appearance="ButtonAppearance.Transparent"
Title="Switch to Light/Dark theme" />

@* Direction *@
<FluentButton IconOnly="true"
Title="Switch to LTR/RTL direction"
OnClick="@SwitchDirAsync"
Appearance="ButtonAppearance.Transparent">
<FluentIcon Class="hidden-if-ltr"
Value="@(new Icons.Regular.Size20.TextDirectionHorizontalRtl().WithColor(SystemColors.Neutral.ForegroundOnBrand))" />
<FluentIcon Class="hidden-if-rtl"
Value="@(new Icons.Regular.Size20.TextDirectionHorizontalLtr().WithColor(SystemColors.Neutral.ForegroundOnBrand))" />
</FluentButton>

@* Reboot *@
<FluentButton IconStart="@(new Icons.Regular.Size20.DrawText().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@ReloadReboot"
Appearance="ButtonAppearance.Subtle"
BackgroundColor="@(_useReboot ? "var(--colorBrandBackground)" : "var(--colorBrandBackgroundHover)")"
Style="display: none;"
Title="Use the Reboot.css styles" />

@* Open Console *@
<FluentButton IconStart="@(new Icons.Regular.Size20.WindowConsole().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@(() => _consoleLogOpened = !_consoleLogOpened)"
Appearance="ButtonAppearance.Subtle"
BackgroundColor="@(_consoleLogOpened ? "var(--colorBrandBackground)" : "var(--colorBrandBackgroundHover)")"
Title="Open or hide the console" />

</FluentStack>
<DemoHeader @rendermode="@DocViewer.DemoRenderMode" />
</FluentLayoutItem>

@* ------------------- *@
Expand All @@ -64,7 +17,7 @@

<FluentLayoutItem Area="@LayoutArea.Navigation" Width="262px" Sticky="true" Height="var(--layout-body-height)"
Style="overflow-y: auto; padding: 0px; border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke1);">
<DemoNav />
<DemoNav @rendermode="@DocViewer.DemoRenderMode" />
</FluentLayoutItem>

@* ------------------- *@
Expand All @@ -76,7 +29,8 @@
<FluentLayoutItem Area="@LayoutArea.Content" Class="demo-home">
<div class="demo-home">
<div>@Body</div>
<div><DemoAsidePanel Page="@Navigation.ToBaseRelativePath(Navigation.Uri)" /></div>
<div><DemoAsidePanel Page="@Navigation.ToBaseRelativePath(Navigation.Uri)"
@rendermode="@DocViewer.DemoRenderMode" /></div>
</div>
</FluentLayoutItem>
}
Expand All @@ -89,7 +43,8 @@
</FluentLayoutItem>

<FluentLayoutItem Area="@LayoutArea.Aside" Width="240px" Sticky="true" hidden-when="sm">
<DemoAsidePanel Page="@Navigation.ToBaseRelativePath(Navigation.Uri)" />
<DemoAsidePanel Page="@Navigation.ToBaseRelativePath(Navigation.Uri)"
@rendermode="@DocViewer.DemoRenderMode" />
</FluentLayoutItem>
}

Expand Down Expand Up @@ -130,4 +85,4 @@
</FluentLayout>

<!-- FluentUI Service Providers -->
<FluentProviders />
<FluentProviders @rendermode="@DocViewer.DemoRenderMode" />
60 changes: 1 addition & 59 deletions examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,87 +3,29 @@
// ------------------------------------------------------------------------

using Microsoft.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;

namespace FluentUI.Demo.Client.Layout;

public partial class DemoMainLayout
{
private bool _consoleLogOpened;
private bool _useReboot;

[Inject]
public required IJSRuntime JSRuntime { get; set; }

[Inject]
public required NavigationManager Navigation { get; set; }

[Parameter]
public RenderFragment? Body { get; set; }

protected override void OnInitialized()
{
_useReboot = new Uri(Navigation.Uri).Query.Contains("reboot", StringComparison.InvariantCultureIgnoreCase);
}

private string? LayoutStyleHeight => new StyleBuilder()
.AddStyle("--layout-footer-height", "calc(150px + 36px)", when: _consoleLogOpened == true)
.AddStyle("--layout-footer-height", "36px", when: _consoleLogOpened == false)
.Build();

private async Task SwitchThemeAsync()
{
await JSRuntime.InvokeVoidAsync("Blazor.theme.switchTheme");
}

private async Task SwitchDirAsync()
{
await JSRuntime.InvokeVoidAsync("Blazor.theme.switchDirection");
}

private void ReloadReboot()
{
var uri = new Uri(Navigation.Uri);
var baseUri = uri.GetLeftPart(UriPartial.Path);

_useReboot = uri.Query.Contains("reboot", StringComparison.InvariantCultureIgnoreCase);

// Toggle the reboot flag
_useReboot = !_useReboot;

if (_useReboot)
{
Navigation.NavigateTo($"{baseUri}?reboot", true);
}
else
{
Navigation.NavigateTo(baseUri, true);
}
}


/// <summary />
private bool IsHomePage() => Navigation.Uri == Navigation.BaseUri;

/// <summary />
private string GetLayoutKey() => IsHomePage() ? "Home" : string.Empty;

/// <summary>
/// Opens a URL in a new browser tab.
/// </summary>
private async Task OpenUrlInNewTabAsync(string url)
{
await JSRuntime.InvokeVoidAsync("open", url, "_blank");
}

internal class GitHubIcon : Icon
{
public GitHubIcon() : base(
"GitHub",
IconVariant.Regular,
IconSize.Size20,
"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.178 0C4.55 0 0 4.583 0 10.254c0 4.533 2.915 8.369 6.959 9.727 0.506 0.102 0.691 -0.221 0.691 -0.492 0 -0.238 -0.017 -1.053 -0.017 -1.901 -2.831 0.611 -3.421 -1.222 -3.421 -1.222 -0.455 -1.188 -1.129 -1.494 -1.129 -1.494 -0.927 -0.628 0.068 -0.628 0.068 -0.628 1.028 0.068 1.567 1.053 1.567 1.053 0.91 1.562 2.376 1.12 2.966 0.849 0.084 -0.662 0.354 -1.12 0.64 -1.375 -2.258 -0.238 -4.634 -1.12 -4.634 -5.059 0 -1.12 0.404 -2.037 1.045 -2.75 -0.101 -0.255 -0.455 -1.307 0.101 -2.716 0 0 0.859 -0.272 2.797 1.053a9.786 9.786 0 0 1 2.545 -0.34c0.859 0 1.735 0.119 2.544 0.34 1.938 -1.324 2.797 -1.053 2.797 -1.053 0.556 1.409 0.202 2.462 0.101 2.716 0.657 0.713 1.045 1.63 1.045 2.75 0 3.939 -2.376 4.804 -4.651 5.059 0.371 0.323 0.691 0.934 0.691 1.901 0 1.375 -0.017 2.479 -0.017 2.818 0 0.272 0.185 0.594 0.691 0.493 4.044 -1.358 6.959 -5.195 6.959 -9.727C20.356 4.583 15.789 0 10.178 0z\"></path>")
{ }
}
}
7 changes: 3 additions & 4 deletions examples/Demo/FluentUI.Demo/Components/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
<!DOCTYPE html>
<html lang="en">
@{
//var DemoRenderMode = new InteractiveWebAssemblyRenderMode(false);
var DemoRenderMode = new InteractiveServerRenderMode(false);
// See the DocViewer.DemoRenderMode property in DocViewer.razor for the current render mode.
}
<head>
<meta charset="utf-8" />
Expand All @@ -17,7 +16,7 @@
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="@Assets["FluentUI.Demo.styles.css"]" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<HeadOutlet @rendermode="@DemoRenderMode" />
<HeadOutlet @rendermode="@DocViewer.DemoRenderMode" />

<style>
/* Set the default dark mode styles,
Expand All @@ -35,7 +34,7 @@
</head>

<body use-reboot="@reboot">
<Routes @rendermode="@DemoRenderMode" />
<Routes />
<script src="_framework/blazor.web.js"></script>

<!-- Include highlight.js -->
Expand Down
6 changes: 3 additions & 3 deletions examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}
else if (section.NoCode)
{
<DynamicComponent Type="@component" />
<SampleContainer ComponentName="@section.Value" @rendermode="@SampleRenderMode" />
}
else if (section.ExtraFiles.Count > 0)
{
Expand All @@ -54,7 +54,7 @@
</fluent-tablist>

<div id="@($"{id}-example-panel")" role="tabpanel" class="demo-section-example">
<DynamicComponent Type="@component" />
<SampleContainer ComponentName="@section.Value" @rendermode="@SampleRenderMode" />
</div>
@foreach (var item in section.ExtraFiles)
{
Expand All @@ -78,7 +78,7 @@
</fluent-tablist>

<div id="@($"{id}-example-panel")" role="tabpanel" class="demo-section-example">
<DynamicComponent Type="@component" />
<SampleContainer ComponentName="@section.Value" @rendermode="@SampleRenderMode" />
</div>
<div id="@($"{id}-code-panel")" role="tabpanel">
<pre><code id="@($"{section.Id}")" class="@GetLanguageClassName()" source>Loading...</code></pre>
Expand Down
Loading
Loading