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 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)

@ -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>

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

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

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

@ -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>

@ -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="..\..\..\..\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>

Loading…
Cancel
Save