diff --git a/TaikoWebUI/Pages/Dashboard.razor b/TaikoWebUI/Pages/Dashboard.razor index 57d7437..1b22a22 100644 --- a/TaikoWebUI/Pages/Dashboard.razor +++ b/TaikoWebUI/Pages/Dashboard.razor @@ -1,7 +1,40 @@ @page "/" +@inject HttpClient Http +@using Markdig @Localizer["Dashboard"] + + + +
+ @if (isLoading) + { + + } + else + { +
+ @((MarkupString)markdownContent) +
+ } +
+
+
+
- - @Localizer["Welcome to TaikoWebUI!"] - \ No newline at end of file +@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; + } +} \ No newline at end of file diff --git a/TaikoWebUI/TaikoWebUI.csproj b/TaikoWebUI/TaikoWebUI.csproj index 5315a3c..9120770 100644 --- a/TaikoWebUI/TaikoWebUI.csproj +++ b/TaikoWebUI/TaikoWebUI.csproj @@ -15,6 +15,7 @@ + @@ -35,6 +36,9 @@ PreserveNewest + + PreserveNewest + PreserveNewest diff --git a/TaikoWebUI/wwwroot/Dashboard.md b/TaikoWebUI/wwwroot/Dashboard.md new file mode 100644 index 0000000..02845e3 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/TaikoWebUI/wwwroot/css/app.css b/TaikoWebUI/wwwroot/css/app.css index e226d66..bb0ae98 100644 --- a/TaikoWebUI/wwwroot/css/app.css +++ b/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; } \ No newline at end of file