From 783e31b308e85e484195565f3f24aa90dd5bc22f Mon Sep 17 00:00:00 2001
From: enisn <iletisim@enisnecipoglu.com>
Date: Wed, 24 Mar 2021 18:32:14 +0300
Subject: [PATCH] CmsKit - Render markdown at public site

---
 .../CmsKitPublicWebModule.cs                  | 11 ++++++-
 .../Shared/Components/Pages/Default.cshtml    |  7 +++-
 .../Pages/DefaultPageViewComponent.cs         | 23 ++++++++++---
 .../Pages/Public/CmsKit/Blogs/BlogPost.cshtml | 33 ++++++++++++++-----
 .../Public/CmsKit/Blogs/BlogPost.cshtml.cs    | 20 ++++++++++-
 .../Pages/Public/CmsKit/Pages/Index.cshtml    |  4 +++
 .../Pages/Public/CmsKit/highlightOnLoad.js    |  8 +++++
 .../Renderers/IMarkdownToHtmlRenderer.cs      |  9 +++++
 .../Renderers/MarkdownToHtmlRenderer.cs       | 22 +++++++++++++
 .../Volo.CmsKit.Public.Web.csproj             |  8 ++---
 10 files changed, 123 insertions(+), 22 deletions(-)
 create mode 100644 modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/highlightOnLoad.js
 create mode 100644 modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs
 create mode 100644 modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs

diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/CmsKitPublicWebModule.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/CmsKitPublicWebModule.cs
index c8519b33f0..970dd15db5 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/CmsKitPublicWebModule.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/CmsKitPublicWebModule.cs
@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc.RazorPages;
+using Markdig;
+using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp.AspNetCore.Mvc.Localization;
 using Volo.Abp.AutoMapper;
@@ -55,6 +56,14 @@ namespace Volo.CmsKit.Public.Web
             {
                 options.AddMaps<CmsKitPublicWebModule>(validate: true);
             });
+
+            context.Services
+                .AddSingleton(_ => new MarkdownPipelineBuilder()
+                    .UseAutoLinks()
+                    .UseBootstrap()
+                    .UseGridTables()
+                    .UsePipeTables()
+                    .Build());
         }
 
         public override void PostConfigureServices(ServiceConfigurationContext context)
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/Default.cshtml
index e2be15233f..d78fb5035c 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/Default.cshtml
@@ -1,9 +1,14 @@
 @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
 
+@using Volo.CmsKit.Public.Web.Renderers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
+
+@inject IMarkdownToHtmlRenderer MarkdownRenderer
+
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages.PageViewModel
 
 <abp-card>
     <abp-card-body>
-        @Html.Raw(Model.Content)
+        @Html.Raw(await MarkdownRenderer.RenderAsync(Model.Content))
     </abp-card-body>
 </abp-card>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/DefaultPageViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/DefaultPageViewComponent.cs
index 3c8be1c2c3..4545a366c1 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/DefaultPageViewComponent.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/DefaultPageViewComponent.cs
@@ -3,10 +3,25 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
 using Volo.CmsKit.Public.Pages;
+using Volo.CmsKit.Public.Web.Renderers;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
 namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
 {
-    [ViewComponent(Name = "CmsDefaultPage")]
+    [Widget(
+        StyleTypes = new[]
+        {
+            typeof(HighlightJsStyleContributor)
+        },
+        ScriptTypes = new[]
+        {
+            typeof(HighlightJsScriptContributor)
+        },
+        ScriptFiles = new[]
+        {
+            "/Pages/Public/CmsKit/highlightOnLoad.js"
+        })]
     public class DefaultPageViewComponent : AbpViewComponent
     {
         protected IPagePublicAppService PagePublicAppService { get; }
@@ -15,7 +30,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
         {
             PagePublicAppService = pagePublicAppService;
         }
-        
+
         public virtual async Task<IViewComponentResult> InvokeAsync(Guid pageId, string title, string content)
         {
             var model = new PageViewModel
@@ -24,7 +39,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
                 Title = title,
                 Content = content
             };
-            
+
             return View("~/Pages/CmsKit/Shared/Components/Pages/Default.cshtml", model);
         }
     }
@@ -32,7 +47,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
     public class PageViewModel
     {
         public Guid Id { get; set; }
-        
+
         public string Title { get; set; }
 
         public string Content { get; set; }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
index 491ae75e8d..d876744a31 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
@@ -7,14 +7,27 @@
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
+@using Volo.CmsKit.Public.Web.Renderers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
 
 @inherits CmsKitPublicPageBase
 
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
 
+@inject IMarkdownToHtmlRenderer MarkdownRenderer
 
 @section styles{
+<abp-abp-style-bundle>
     <abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" />
+    <abp-style type="typeof(HighlightJsStyleContributor)" />
+</abp-abp-style-bundle>
+}
+
+@section scripts{
+<abp-script-bundle>
+    <abp-script type="typeof(HighlightJsScriptContributor)" />
+    <abp-script src="/Pages/Public/CmsKit/highlightOnLoad.js" />
+</abp-script-bundle>
 }
 
 @{
@@ -31,7 +44,9 @@
                     <span class="font-weight-bold">@@@Model.BlogPost.Author?.UserName</span>
                     <small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
                 </p>
-                @Html.Raw(Model.BlogPost.Content)
+
+                @Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content))
+
                 <p class="mb-3">
                     @if (Model.BlogPost.LastModificationTime != null)
                     {
@@ -45,10 +60,10 @@
                     if (Model.TagsFeature?.IsEnabled == true)
                     {
                         @await Component.InvokeAsync(typeof(TagViewComponent), new
-                        {
-                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                            entityId = Model.BlogPost.Id.ToString()
-                        })
+                {
+                entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                entityId = Model.BlogPost.Id.ToString()
+                })
                     }
                 }
             </div>
@@ -62,8 +77,8 @@
                     {
                         @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
                         {
-                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                            entityId = Model.BlogPost.Id.ToString()
+                        entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                        entityId = Model.BlogPost.Id.ToString()
                         })
                     }
                 }
@@ -76,8 +91,8 @@
                     {
                         @await Component.InvokeAsync(typeof(RatingViewComponent), new
                         {
-                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                            entityId = Model.BlogPost.Id.ToString()
+                        entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                        entityId = Model.BlogPost.Id.ToString()
                         })
                     }
                 }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml.cs
index 6683f02cc8..bc3e1c85dc 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml.cs
@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc;
+using Markdig;
+using Microsoft.AspNetCore.Mvc;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -66,5 +67,22 @@ namespace Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs
                 TagsFeature = await BlogFeatureAppService.GetOrDefaultAsync(BlogPost.BlogId, GlobalFeatures.TagsFeature.Name);
             }
         }
+
+
+        public string RenderMarkdownToHtmlAsString(string content)
+        {
+            if (content.IsNullOrWhiteSpace())
+            {
+                return "";
+            }
+
+            return Markdig.Markdown.ToHtml(Encoding.UTF8.GetString(Encoding.Default.GetBytes(content)),
+                new MarkdownPipelineBuilder()
+                    .UseAutoLinks()
+                    .UseBootstrap()
+                    .UseGridTables()
+                    .UsePipeTables()
+                    .Build());
+        }
     }
 }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
index 5fc0511dc5..a3f1d0c95e 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
@@ -2,11 +2,15 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.CmsKit.Localization
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
+
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
+
 @inject IHtmlLocalizer<CmsKitResource> L
 
 @section styles{
+    
     <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
+
     <style>
         @Html.Raw(Model.Page.Style)
     </style>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/highlightOnLoad.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/highlightOnLoad.js
new file mode 100644
index 0000000000..4c7df9ede9
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/highlightOnLoad.js
@@ -0,0 +1,8 @@
+$(function () {
+
+    document.querySelectorAll('code').forEach(block => {
+        $(block).addClass('hljs'); // Put in gray box even language is not supported
+        hljs.highlightBlock(block);
+    });
+
+})
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs
new file mode 100644
index 0000000000..61d2139ccf
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs
@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace Volo.CmsKit.Public.Web.Renderers
+{
+    public interface IMarkdownToHtmlRenderer
+    {
+        Task<string> RenderAsync(string rawMarkdown);
+    }
+}
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs
new file mode 100644
index 0000000000..8224cfb7dc
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs
@@ -0,0 +1,22 @@
+using Markdig;
+using System.Threading.Tasks;
+using Volo.Abp.DependencyInjection;
+
+namespace Volo.CmsKit.Public.Web.Renderers
+{
+    public class MarkdownToHtmlRenderer : IMarkdownToHtmlRenderer, ITransientDependency
+    {
+        protected MarkdownPipeline MarkdownPipeline { get; }
+
+        public MarkdownToHtmlRenderer(MarkdownPipeline markdownPipeline)
+        {
+            MarkdownPipeline = markdownPipeline;
+        }
+
+        public Task<string> RenderAsync(string rawMarkdown)
+        {
+            return Task.FromResult(
+                Markdown.ToHtml(rawMarkdown, MarkdownPipeline));
+        }
+    }
+}
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
index 2003412559..29e1bab213 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <Import Project="..\..\..\..\common.props" />
   <Import Project="..\..\..\..\configureawait.props" />
@@ -16,6 +16,7 @@
     <ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" />
     <ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" />
     <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="$(MicrosoftPackageVersion)" />
+    <PackageReference Include="Markdig.Signed" Version="0.24.0" />
   </ItemGroup>
 
   <ItemGroup>
@@ -29,9 +30,4 @@
     <Content Remove="Components\**\*.css" />
   </ItemGroup>
 
-  <ItemGroup>
-    <None Remove="Pages\Public\CmsKit\Blogs\index.css" />
-    <None Remove="Pages\Public\CmsKit\Pages\index.css" />
-  </ItemGroup>
-
 </Project>