Add markdown support for Dashboard page

TaikoWebUI/Pages/Dashboard.razor

@@ -1,7 +1,40 @@
 @page "/"
+@inject HttpClient Http
+@using Markdig
 
 <MudText Typo="Typo.h4">@Localizer["Dashboard"]</MudText>
+<MudGrid Class="my-8">
+    <MudItem xs="12">
+        <MudPaper Elevation="0" Outlined="true">
+            <div class="markdown-container">
+                @if (isLoading)
+                {
+                    <MudCircularProgress />
+                }
+                else
+                {
+                    <div class="markdown-content">
+                        @((MarkupString)markdownContent)
+                    </div>
+                }
+            </div>
+        </MudPaper>
+    </MudItem>
+</MudGrid>
 
-<MudText Class="mt-8">
-    @Localizer["Welcome to TaikoWebUI!"]
-</MudText>
+@code {
+    private string markdownContent = string.Empty;
+    private bool isLoading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var markdown = await Http.GetStringAsync("Dashboard.md");
+
+        if (!string.IsNullOrWhiteSpace(markdown))
+        {
+            markdownContent = Markdown.ToHtml(markdown);
+        }
+        
+        isLoading = false;
+    }
+}

TaikoWebUI/TaikoWebUI.csproj

@@ -15,6 +15,7 @@
         <PackageReference Include="Autocomplete.Clients" Version="1.1.0" />
         <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
         <PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="6.9.2" />
+        <PackageReference Include="Markdig" Version="0.37.0" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.4" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.4" PrivateAssets="all" />
         <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.4" />
@@ -35,6 +36,9 @@
         <Content Update="wwwroot\appsettings.json">
             <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </Content>
+        <Content Update="wwwroot\Dashboard.md">
+          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </Content>
         <Content Update="wwwroot\data\datatable\musicinfo.bin">
             <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </Content>

TaikoWebUI/wwwroot/Dashboard.md

@@ -0,0 +1,3 @@
+**Welcome to TaikoWebUI!**
+
+To change this content, edit the file `Dashboard.md` in the `wwwroot` directory. All Markdown syntax is supported.

TaikoWebUI/wwwroot/css/app.css

@@ -124,4 +124,59 @@
     height: 100%;
     width: 15%;
     left: 78%
+}
+
+.markdown-container {
+    min-height:75vh;
+}
+
+.markdown-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    gap: 25px;
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 25px;
+}
+
+.markdown-content * {
+    grid-column: 1 / -1;
+}
+
+.markdown-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+.markdown-content hr {
+    border: none;
+    border-top: 1px solid #ccc;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+    list-style-position: inside;
+}
+
+.markdown-content ul p,
+.markdown-content ol p {
+    display: inline;
+}
+
+.markdown-content code {
+    background-color: #f8f8f8;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 0.9em;
+    padding: 0 0.2em;
+}
+   
+.markdown-content pre {
+    background-color: #f8f8f8;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 0.9em;
+    padding: 0.5em;
+    overflow-x: auto;
 }