CmsKit - Render markdown at public site

5 years ago · 783e31b308
10 changed files with 123 additions and 22 deletions
--- 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)
--- 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>
--- 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; }
--- 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()
                        })
                    }
                }
--- 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());
+        }
    }
 }
--- 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>
--- 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
@ -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);
+    });
+
+})
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs
+++ 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);
+    }
+}
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs
+++ 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));
+        }
+    }
+}
--- 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>