Feature markdown editor (#35)

* added global.json to force a .NET version * Added markdown editor * Added about page to credit packages used in sharpsite * introduced an abstract texteditor component
FritzAndFriends · Oct 24, 2024 · 1e4e8f6 · 1e4e8f6
1 parent 9913ee7
commit 1e4e8f6
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 3 deletions.
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -2,12 +2,13 @@
   <PropertyGroup>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
-		<TreatWarningsAsErrors>true</TreatWarningsAsErrors>
+    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
   </PropertyGroup>
   <ItemGroup>
     <PackageVersion Include="Aspire.Hosting.AppHost" Version="9.0.0-rc.1.24511.1 " />
     <PackageVersion Include="Aspire.Hosting.PostgreSQL" Version="9.0.0-rc.1.24511.1" />
     <PackageVersion Include="Aspire.Npgsql.EntityFrameworkCore.PostgreSQL" Version="8.2.1" />
+    <PackageVersion Include="markdig" Version="0.37.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.QuickGrid" Version="8.0.10" />
     <PackageVersion Include="Microsoft.Extensions.Caching.Memory" Version="8.0.1" />
     <PackageVersion Include="Microsoft.Extensions.Hosting.Abstractions" Version="9.0.0-rc.2.24473.5" />
@@ -18,6 +19,7 @@
     <PackageVersion Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.9.0" />
     <PackageVersion Include="OpenTelemetry.Instrumentation.Http" Version="1.9.0" />
     <PackageVersion Include="OpenTelemetry.Instrumentation.Runtime" Version="1.9.0" />
+    <PackageVersion Include="PSC.Blazor.Components.MarkdownEditor" Version="8.0.5" />
     <PackageVersion Include="System.Text.Json" Version="8.0.5" />
   </ItemGroup>
 </Project>
diff --git a/SharpSite.Web/Components/Admin/EditPost.razor b/SharpSite.Web/Components/Admin/EditPost.razor
@@ -33,7 +33,7 @@
 
 <div class="form-group">
 	<label for="content">Content</label>
-	<textarea class="form-control" id="content" rows="3" @bind="Post.Content"></textarea>
+	<TextEditor @bind-Content="@Post.Content" />
 </div>
 
 }

diff --git a/SharpSite.Web/Components/App.razor b/SharpSite.Web/Components/App.razor
@@ -10,12 +10,17 @@
     <link rel="stylesheet" href="SharpSite.Web.styles.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+		<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
+		<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
+
     <HeadOutlet />
 </head>
 
 <body>
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+		<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
+		<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
 </body>
 
 </html>
diff --git a/SharpSite.Web/Components/Layout/NavMenu.razor b/SharpSite.Web/Components/Layout/NavMenu.razor
@@ -18,5 +18,10 @@
                 <span class="bi bi-house-door-fill" aria-hidden="true"></span>Posts admin
             </NavLink>
         </div>
+				<div class="nav-item px-3">
+						<NavLink class="nav-link" href="/aboutSharpSite" Match="NavLinkMatch.All">
+								<span class="bi bi-house-door-fill" aria-hidden="true"></span>About SharpSite
+						</NavLink>
+				</div>
     </nav>
 </div>
diff --git a/SharpSite.Web/Components/Pages/About.razor b/SharpSite.Web/Components/Pages/About.razor
@@ -0,0 +1,12 @@
+@page "/aboutSharpSite"
+
+<h1>About SharpSite</h1>
+
+<p>SharpSite is a simple blog engine written in C# using Blazor.</p>
+
+<h2>Packages Used</h2>
+
+<ul>
+		<li><a href="https://www.nuget.org/packages/Markdig/">Markdig</a></li>
+		<li><a href="https://www.nuget.org/packages/PSC.Blazor.Components.MarkdownEditor/">PSC.Blazor.Components.MarkdownEditor</a></li>
+</ul>
diff --git a/SharpSite.Web/Components/Pages/PostPage.razor b/SharpSite.Web/Components/Pages/PostPage.razor
@@ -1,11 +1,12 @@
 @page "/{urldate:int}/{slug}"
+@using Markdig
 @inject IPostRepository PostService
 
 @if (Post is not null)
 {
 	<h1>@Post.Title</h1>
 	<h6>@Post.PublishedDate.LocalDateTime</h6>
-	<p>@Post.Content</p>
+	<p>@((MarkupString)Markdown.ToHtml(Post.Content))</p>
 }
 else
 {

diff --git a/SharpSite.Web/Components/TextEditor.razor b/SharpSite.Web/Components/TextEditor.razor
@@ -0,0 +1,26 @@
+@using PSC.Blazor.Components.MarkdownEditor 
+@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
+
+<MarkdownEditor @bind-Value="@MyContent" HideIcons="@(["mde-tb-image"])"  />
+
+@code {
+
+		private string _Content = string.Empty;
+		private string MyContent
+		{
+			get => _Content;
+			set
+			{
+				_Content = value;
+				ContentChanged.InvokeAsync(value);
+			}
+		}
+
+		[Parameter, EditorRequired]
+		public string Content { get => _Content; set => _Content = value; }
+
+
+		[Parameter]
+		public EventCallback<string> ContentChanged { get; set; }
+
+}
diff --git a/SharpSite.Web/SharpSite.Web.csproj b/SharpSite.Web/SharpSite.Web.csproj
@@ -12,12 +12,14 @@
   </ItemGroup>
 
   <ItemGroup>
+    <PackageReference Include="markdig" />
     <PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" VersionOverride="8.0.10">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.Extensions.Caching.Memory" />
+    <PackageReference Include="PSC.Blazor.Components.MarkdownEditor" />
   </ItemGroup>
 
 </Project>