Render mode control

.github/workflows/publish.yml

@@ -1,6 +1,6 @@
 name: publish
 env:
-  VERSION: '0.6.6-preview'
+  VERSION: '0.7.0-preview'
   PRERELEASE: true
 on:
   push:

README.md

@@ -36,9 +36,11 @@ In order to use Tavenem.Wiki.Blazor, the following steps should be taken:
    The second parameter is either an instance of `WikiBlazorClientOptions` or a function which provides one.
    This interface allows you to configure the wiki's Blazor implementation features, and includes the following properties:
    - `AppBar`: The type of an optional component (typically containing an [AppBar](https://tavenem.com/Blazor.Framework/components/appbar) from the [Tavenem Blazor Framework](https://tavenem.com/Blazor.Framework/)) which will appear at the top of wiki pages.
+   - `AppBarRenderMode`: The [render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes) to use for the `AppBar` component, or `null` to use static rendering.
 
      The type must implement `IComponent`.
    - `ArticleFrontMatter` and `ArticleEndMatter`: these can be set to functions which accept an `Article` parameter and should return type of a component which should be displayed before or after the content of the given wiki article (before the category list), or null if no additional component should be displayed.
+   - `ArticleFrontMatterRenderMode` and `ArticleEndMatterRenderMode`: The [render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes) to use for the `ArticleFrontMatter` and `ArticleEndMatter` components, or `null` to use static rendering.
    - `CanEditOffline`: Can be set to a function which determines whether content may be edited locally.
 
      If this function is not defined, no content may be edited locally (i.e. local content may only be viewed).

docs/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.7.0-preview
+### Added
+- Render mode control for injected components
+- Web app example project
+
 ## 0.6.6-preview
 ### Fixed
 - Link preview

sample/Shared/TopAppBar.razor

@@ -1,5 +1,5 @@
 <div class="appbar">
-    <DrawerToggle Side="Side.Left" />
+    <DrawerToggle ShowAtBreakpoint="Breakpoint.Lg" Side="Side.Left" />
     <span class="title-font" style="color:#a03dff;font-size:2em;font-weight:900">Tavenem Blazor Wiki Sample</span>
     <a href="https://github.com/Tavenem/Wiki.Blazor" title="GitHub" class="text-reset ms-auto d-print-none">
         <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" class="svg-icon">

sample/Tavenem.Wiki.Blazor.Sample.csproj

@@ -8,9 +8,9 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.1" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

sample/wwwroot/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tavenem Wiki Blazor Sample</title>
     <base href="/" />
+    <link href="_content/Tavenem.Blazor.Framework/framework.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <link href="Tavenem.Wiki.Blazor.Sample.styles.css" rel="stylesheet" />
 </head>

src/Client/Pages/ArticleView.razor

@@ -1,11 +1,18 @@
 <div class="wiki-site-subtitle">From @WikiOptions.SiteName</div>
 @if (!IsDiff && FrontMatterType is not null)
 {
-    <DynamicComponent Type="FrontMatterType" Parameters="FrontEndMatterParameters" />
+    <DynamicRenderModeComponent CanEdit="CanEdit"
+                                ComponentType="FrontMatterType"
+                                Page="Page"
+                                RenderMode="FrontMatterRenderMode"
+                                User="User" />
 }
 <tf-syntax-highlight class="wiki-parser-output">@Content</tf-syntax-highlight>
 @if (!IsDiff && EndMatterType is not null)
 {
-    <DynamicComponent Type="EndMatterType" Parameters="FrontEndMatterParameters" />
+    <DynamicRenderModeComponent CanEdit="CanEdit"
+                                ComponentType="EndMatterType"
+                                Page="Page"
+                                RenderMode="EndMatterRenderMode"
+                                User="User" />
 }
-

src/Client/Pages/ArticleView.razor.cs

@@ -1,6 +1,5 @@
 using Microsoft.AspNetCore.Components;
 using System.Diagnostics.CodeAnalysis;
-using Tavenem.Blazor.Framework;
 
 namespace Tavenem.Wiki.Blazor.Client.Pages;
 
@@ -34,13 +33,13 @@ public partial class ArticleView
     /// </summary>
     [Parameter] public IWikiUser? User { get; set; }
 
-    private Type? EndMatterType { get; set; }
+    private IComponentRenderMode? EndMatterRenderMode { get; set; }
 
-    private Type? FrontMatterType { get; set; }
+    private Type? EndMatterType { get; set; }
 
-    private Dictionary<string, object> FrontEndMatterParameters { get; set; } = [];
+    private IComponentRenderMode? FrontMatterRenderMode { get; set; }
 
-    [CascadingParameter] private FrameworkLayout? FrameworkLayout { get; set; }
+    private Type? FrontMatterType { get; set; }
 
     [Inject, NotNull] private WikiBlazorClientOptions? WikiBlazorClientOptions { get; set; }
 
@@ -49,23 +48,26 @@ public partial class ArticleView
     /// <inheritdoc/>
     protected override void OnParametersSet()
     {
-        FrontEndMatterParameters.Clear();
+        EndMatterRenderMode = null;
         EndMatterType = null;
+        FrontMatterRenderMode = null;
         FrontMatterType = null;
 
         if (Page is null)
         {
             return;
         }
 
-        FrontEndMatterParameters.Add("Article", Page);
-        FrontEndMatterParameters.Add("CanEdit", CanEdit);
-        if (User is not null)
+        EndMatterType = WikiBlazorClientOptions.GetArticleEndMatter(Page);
+        if (EndMatterType is not null)
         {
-            FrontEndMatterParameters.Add("User", User);
+            EndMatterRenderMode = WikiBlazorClientOptions.GetArticleEndMatterRenderMode(Page);
         }
 
-        EndMatterType = WikiBlazorClientOptions.GetArticleEndMatter(Page);
         FrontMatterType = WikiBlazorClientOptions.GetArticleFrontMatter(Page);
+        if (FrontMatterType is not null)
+        {
+            FrontMatterRenderMode = WikiBlazorClientOptions.GetArticleFrontMatterRenderMode(Page);
+        }
     }
 }

src/Client/Shared/DynamicRenderModeComponent.cs

@@ -0,0 +1,54 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using System.Diagnostics.CodeAnalysis;
+
+namespace Tavenem.Wiki.Blazor.Client.Shared;
+
+/// <summary>
+/// Dynamically renders a component with a render mode.
+/// </summary>
+public class DynamicRenderModeComponent : ComponentBase
+{
+    /// <summary>
+    /// Whether the current user has permission to edit this article.
+    /// </summary>
+    [Parameter] public bool CanEdit { get; set; }
+
+    /// <summary>
+    /// The article to display.
+    /// </summary>
+    [Parameter] public Page? Page { get; set; }
+
+    /// <summary>
+    /// The current user (may be null if the current user is browsing anonymously).
+    /// </summary>
+    [Parameter] public IWikiUser? User { get; set; }
+
+    /// <summary>
+    /// The type of component to render.
+    /// </summary>
+    [Parameter]
+    [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
+    public Type? ComponentType { get; set; }
+
+    /// <summary>
+    /// The render mode to use, or <see langword="null"/> if static rendering should be used.
+    /// </summary>
+    [Parameter] public IComponentRenderMode? RenderMode { get; set; }
+
+    /// <inheritdoc/>
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        if (ComponentType is null)
+        {
+            return;
+        }
+
+        builder.OpenComponent(0, ComponentType);
+        builder.AddAttribute(1, "Article", Page);
+        builder.AddAttribute(2, "CanEdit", CanEdit);
+        builder.AddAttribute(3, "User", User);
+        builder.AddComponentRenderMode(RenderMode);
+        builder.CloseComponent();
+    }
+}

src/Client/Shared/MainLayout.razor

@@ -11,7 +11,7 @@
         else
         {
             <div class="appbar d-print-none">
-                <DrawerToggle Side="Side.Left" />
+                <DrawerToggle ShowAtBreakpoint="Breakpoint.Lg" Side="Side.Left" />
                 <tf-darkmode-toggle class="ms-auto" />
             </div>
         }

src/Client/Shared/MainLayout.razor.cs

@@ -27,6 +27,7 @@ public partial class MainLayout
         if (WikiBlazorClientOptions.AppBar is not null)
         {
             builder.OpenComponent(0, WikiBlazorClientOptions.AppBar);
+            builder.AddComponentRenderMode(WikiBlazorClientOptions.AppBarRenderMode);
             builder.CloseComponent();
         }
     };

src/Client/Shared/WikiLeftDrawer.razor

@@ -2,7 +2,8 @@
 
 <Drawer Side="Side.Left"
         Class="bg-alt d-print-none"
-        Style="background-image:linear-gradient(to bottom, var(--tavenem-color-bg) 0, transparent 2.5em)">
+        Style="background-image:linear-gradient(to bottom, var(--tavenem-color-bg) 0, transparent 2.5em)"
+        ShowAtBreakpoint="Breakpoint.Lg">
     <div class="wiki-sidebar-logo" role="banner">
         <a class="wiki-sidebar-logo-link" href="/" title="Visit the site home page"></a>
     </div>

src/Client/Tavenem.Wiki.Blazor.Client.csproj

@@ -46,11 +46,11 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="8.0.0" />
-    <PackageReference Include="Tavenem.Blazor.Framework" Version="2.4.5" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="8.0.1" />
+    <PackageReference Include="Tavenem.Blazor.Framework" Version="2.12.5" />
   </ItemGroup>
 
   <ItemGroup>

src/Client/WikiBlazorClientOptions.cs

@@ -12,6 +12,15 @@ namespace Tavenem.Wiki.Blazor.Client;
 [return: DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
 public delegate Type? GetArticleComponent(Page page);
 
+/// <summary>
+/// Gets the render mode of a component for a given wiki page.
+/// </summary>
+/// <param name="page">The page for which to get a component's render mode.</param>
+/// <returns>
+/// The render mode of a component, or <see langword="null"/> for static rendering.
+/// </returns>
+public delegate IComponentRenderMode? GetArticleRenderMode(Page page);
+
 /// <summary>
 /// Determines whether the given content may be edited locally.
 /// </summary>
@@ -60,6 +69,12 @@ public class WikiBlazorClientOptions
     [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
     public Type? AppBar { get; set; }
 
+    /// <summary>
+    /// The render mode to use for the <see cref="AppBar"/> component, or <see langword="null"/> to
+    /// use static rendering.
+    /// </summary>
+    public IComponentRenderMode? AppBarRenderMode { get; set; }
+
     /// <summary>
     /// The link template to be used for the Blazor wiki system.
     /// </summary>
@@ -71,12 +86,22 @@ public class WikiBlazorClientOptions
     /// </summary>
     public GetArticleComponent? ArticleEndMatter { get; set; }
 
+    /// <summary>
+    /// A function which gets the render mode of the component indicated by <see cref="ArticleEndMatter"/>.
+    /// </summary>
+    public GetArticleRenderMode? ArticleEndMatterRenderMode { get; set; }
+
     /// <summary>
     /// A function which gets the type of a component which should be displayed before the content
     /// of the given wiki article (after the subtitle).
     /// </summary>
     public GetArticleComponent? ArticleFrontMatter { get; set; }
 
+    /// <summary>
+    /// A function which gets the render mode of the component indicated by <see cref="ArticleFrontMatter"/>.
+    /// </summary>
+    public GetArticleRenderMode? ArticleFrontMatterRenderMode { get; set; }
+
     /// <summary>
     /// Can be set to a function which determines whether content may be edited locally.
     /// </summary>
@@ -276,6 +301,15 @@ public class WikiBlazorClientOptions
     [return: DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
     public Type? GetArticleEndMatter(Page article) => ArticleEndMatter?.Invoke(article);
 
+    /// <summary>
+    /// Gets the render mode of the component indicated by <see cref="ArticleEndMatter"/>.
+    /// </summary>
+    /// <param name="article">A wiki article.</param>
+    /// <returns>
+    /// The render mode of a component, or <see langword="null"/> for static rendering.
+    /// </returns>
+    public IComponentRenderMode? GetArticleEndMatterRenderMode(Page article) => ArticleEndMatterRenderMode?.Invoke(article);
+
     /// <summary>
     /// Gets the type of a component which should be displayed before the content of the given wiki
     /// article (after the subtitle).
@@ -315,4 +349,13 @@ public class WikiBlazorClientOptions
     /// </remarks>
     [return: DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
     public Type? GetArticleFrontMatter(Page article) => ArticleFrontMatter?.Invoke(article);
+
+    /// <summary>
+    /// Gets the render mode of the component indicated by <see cref="ArticleFrontMatter"/>.
+    /// </summary>
+    /// <param name="article">A wiki article.</param>
+    /// <returns>
+    /// The render mode of a component, or <see langword="null"/> for static rendering.
+    /// </returns>
+    public IComponentRenderMode? GetArticleFrontMatterRenderMode(Page article) => ArticleFrontMatterRenderMode?.Invoke(article);
 }

src/Client/assets/sass/wiki.scss

@@ -88,10 +88,10 @@ a {
     }
 }
 
-.wiki-layout #main-container {
+.wiki-layout > .container {
     padding-bottom: 0;
 }
-.wiki-layout-compact #main-container {
+.wiki-layout-compact > .container {
     margin-top: 0!important;
     padding: 0;
 }

src/Tavenem.Wiki.Blazor.Example/Tavenem.Wiki.Blazor.Example.Client/ExampleWikiOptions.cs

@@ -0,0 +1,16 @@
+using Tavenem.Wiki.Blazor.Client;
+
+namespace Tavenem.Wiki.Blazor.Example;
+
+public static class ExampleWikiOptions
+{
+    public static readonly WikiOptions Instance = new()
+    {
+        ContactPageTitle = null,
+        ContentsPageTitle = null,
+        CopyrightPageTitle = null,
+        LinkTemplate = WikiBlazorClientOptions.DefaultLinkTemplate,
+        MaxFileSize = 0,
+        PolicyPageTitle = null,
+    };
+}

src/Tavenem.Wiki.Blazor.Example/Tavenem.Wiki.Blazor.Example.Client/MainFrontMatter.razor

@@ -0,0 +1,8 @@
+<button class="btn primary my-3" @onclick=@(_ => _value++)>Counter: <span>@_value.ToString("N0")</span></button>
+
+@code {
+    [Parameter] public Page? Article { get; set; }
+    [Parameter] public bool CanEdit { get; set; }
+    [Parameter] public IWikiUser? User { get; set; }
+    private int _value;
+}

src/Tavenem.Wiki.Blazor.Example/Tavenem.Wiki.Blazor.Example.Client/Program.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Tavenem.Wiki.Blazor.Example.Services;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+
+var httpClient = new HttpClient() { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) };
+builder.Services.AddScoped(_ => httpClient);
+
+builder.Services.AddAuthorizationCore();
+await builder.Services.AddWikiClientAsync(false);
+
+await builder.Build().RunAsync();

src/Tavenem.Wiki.Blazor.Example/Tavenem.Wiki.Blazor.Example.Client/README.md

@@ -0,0 +1,19 @@
+Tavenem.Wiki.Blazor.Example
+==
+
+This project is a bare-bones example with the minimum required code for a `NeverFoundry.Wiki.Blazor`
+wiki.
+
+The sample uses a project reference to Tavenem.Wiki.Blazor.Client (i.e. not a package references to
+the NuGet release). The easiest way to get it up and running is to clone the entire repo to your own
+system, then run the example server project.
+
+## WARNING
+This sample is **not** suitable for use in a production environment. It's using an
+in-memory database and mocked user identity system. ***DO NOT*** copy this code as-is and put it
+into production. It is intended only for you to quickly and easily experience the capabilities and
+the look-and-feel of the main package's defaults in a live sandbox.
+
+A production implementation should override the various properties as described in the README of
+this project and [Tavenem.Wiki](https://github.com/Tavenem/Wiki) with production-ready values and
+services.