CmsKit - Render markdown at public site

pull/8191/head
enisn 5 years ago
parent c220c24959
commit 783e31b308

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Mvc.RazorPages; using Markdig;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.DependencyInjection;
using Volo.Abp.AspNetCore.Mvc.Localization; using Volo.Abp.AspNetCore.Mvc.Localization;
using Volo.Abp.AutoMapper; using Volo.Abp.AutoMapper;
@ -55,6 +56,14 @@ namespace Volo.CmsKit.Public.Web
{ {
options.AddMaps<CmsKitPublicWebModule>(validate: true); options.AddMaps<CmsKitPublicWebModule>(validate: true);
}); });
context.Services
.AddSingleton(_ => new MarkdownPipelineBuilder()
.UseAutoLinks()
.UseBootstrap()
.UseGridTables()
.UsePipeTables()
.Build());
} }
public override void PostConfigureServices(ServiceConfigurationContext context) public override void PostConfigureServices(ServiceConfigurationContext context)

@ -1,9 +1,14 @@
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap @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 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages.PageViewModel
<abp-card> <abp-card>
<abp-card-body> <abp-card-body>
@Html.Raw(Model.Content) @Html.Raw(await MarkdownRenderer.RenderAsync(Model.Content))
</abp-card-body> </abp-card-body>
</abp-card> </abp-card>

@ -3,10 +3,25 @@ using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc; using Volo.Abp.AspNetCore.Mvc;
using Volo.CmsKit.Public.Pages; 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 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 public class DefaultPageViewComponent : AbpViewComponent
{ {
protected IPagePublicAppService PagePublicAppService { get; } protected IPagePublicAppService PagePublicAppService { get; }
@ -15,7 +30,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
{ {
PagePublicAppService = pagePublicAppService; PagePublicAppService = pagePublicAppService;
} }
public virtual async Task<IViewComponentResult> InvokeAsync(Guid pageId, string title, string content) public virtual async Task<IViewComponentResult> InvokeAsync(Guid pageId, string title, string content)
{ {
var model = new PageViewModel var model = new PageViewModel
@ -24,7 +39,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
Title = title, Title = title,
Content = content Content = content
}; };
return View("~/Pages/CmsKit/Shared/Components/Pages/Default.cshtml", model); 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 class PageViewModel
{ {
public Guid Id { get; set; } public Guid Id { get; set; }
public string Title { get; set; } public string Title { get; set; }
public string Content { get; set; } public string Content { get; set; }

@ -7,14 +7,27 @@
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection @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.Rating
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags @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 @inherits CmsKitPublicPageBase
@model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
@inject IMarkdownToHtmlRenderer MarkdownRenderer
@section styles{ @section styles{
<abp-abp-style-bundle>
<abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" /> <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> <span class="font-weight-bold">@@@Model.BlogPost.Author?.UserName</span>
<small style="opacity:.65;">@Model.BlogPost.CreationTime</small> <small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
</p> </p>
@Html.Raw(Model.BlogPost.Content)
@Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content))
<p class="mb-3"> <p class="mb-3">
@if (Model.BlogPost.LastModificationTime != null) @if (Model.BlogPost.LastModificationTime != null)
{ {
@ -45,10 +60,10 @@
if (Model.TagsFeature?.IsEnabled == true) if (Model.TagsFeature?.IsEnabled == true)
{ {
@await Component.InvokeAsync(typeof(TagViewComponent), new @await Component.InvokeAsync(typeof(TagViewComponent), new
{ {
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString() entityId = Model.BlogPost.Id.ToString()
}) })
} }
} }
</div> </div>
@ -62,8 +77,8 @@
{ {
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
{ {
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString() entityId = Model.BlogPost.Id.ToString()
}) })
} }
} }
@ -76,8 +91,8 @@
{ {
@await Component.InvokeAsync(typeof(RatingViewComponent), new @await Component.InvokeAsync(typeof(RatingViewComponent), new
{ {
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType, entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString() entityId = Model.BlogPost.Id.ToString()
}) })
} }
} }

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Mvc; using Markdig;
using Microsoft.AspNetCore.Mvc;
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Linq; 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); 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());
}
} }
} }

@ -2,11 +2,15 @@
@using Microsoft.AspNetCore.Mvc.Localization @using Microsoft.AspNetCore.Mvc.Localization
@using Volo.CmsKit.Localization @using Volo.CmsKit.Localization
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
@model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
@inject IHtmlLocalizer<CmsKitResource> L @inject IHtmlLocalizer<CmsKitResource> L
@section styles{ @section styles{
<abp-style src="/Pages/Public/CmsKit/Pages/index.css" /> <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
<style> <style>
@Html.Raw(Model.Page.Style) @Html.Raw(Model.Page.Style)
</style> </style>

@ -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);
});
})

@ -0,0 +1,9 @@
using System.Threading.Tasks;
namespace Volo.CmsKit.Public.Web.Renderers
{
public interface IMarkdownToHtmlRenderer
{
Task<string> RenderAsync(string rawMarkdown);
}
}

@ -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));
}
}
}

@ -1,4 +1,4 @@
<Project Sdk="Microsoft.NET.Sdk.Web"> <Project Sdk="Microsoft.NET.Sdk.Web">
<Import Project="..\..\..\..\common.props" /> <Import Project="..\..\..\..\common.props" />
<Import Project="..\..\..\..\configureawait.props" /> <Import Project="..\..\..\..\configureawait.props" />
@ -16,6 +16,7 @@
<ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" /> <ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" />
<ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" /> <ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" />
<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="$(MicrosoftPackageVersion)" /> <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="$(MicrosoftPackageVersion)" />
<PackageReference Include="Markdig.Signed" Version="0.24.0" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
@ -29,9 +30,4 @@
<Content Remove="Components\**\*.css" /> <Content Remove="Components\**\*.css" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<None Remove="Pages\Public\CmsKit\Blogs\index.css" />
<None Remove="Pages\Public\CmsKit\Pages\index.css" />
</ItemGroup>
</Project> </Project>

Loading…
Cancel
Save