rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Render images server side. Remove JS hack to get images to render.

Browse source
This commit is contained in:
Robert Marshall 2020-04-05 12:16:51 +01:00
parent 5d67e92245
commit 3eca70a102
9 changed files with 107 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

37
Website.Markdig.Extensions/BlogImageRenderer.cs Normal file
View file

@ -0,0 +1,37 @@
using Markdig.Renderers;
using Markdig.Renderers.Html;
using Markdig.Renderers.Html.Inlines;
using Markdig.Syntax.Inlines;
namespace Website.Markdig.Extensions {
public class BlogImageRenderer : HtmlObjectRenderer<LinkInline> {
private readonly LinkInlineRenderer _baseRenderer;
public BlogImageRenderer(LinkInlineRenderer baseRenderer) {
_baseRenderer = baseRenderer;
}
protected override void Write(HtmlRenderer renderer, LinkInline link) {
if (!link.IsImage) {
_baseRenderer.Write(renderer, link);
return;
}
renderer.Write(@"<div class=""blog-post__image-container--container"">");
renderer.Write(@"<div class=""blog-post__image-container"">");
renderer.Write($@"<img src=""{link.Url}"" alt=""");
var wasEnableHtmlForInline = renderer.EnableHtmlForInline;
renderer.EnableHtmlForInline = false;
renderer.WriteChildren(link);
renderer.EnableHtmlForInline = wasEnableHtmlForInline;
renderer.Write(@""" class=""blog-post__image-container--image"">");
renderer.Write(@"<span class=""blog-post__image-container--tagline"">");
renderer.EnableHtmlForInline = false;
renderer.WriteChildren(link);
renderer.EnableHtmlForInline = wasEnableHtmlForInline;
renderer.Write(@"</span>");
renderer.Write(@"</div>");
renderer.Write(@"</div>");
}
}
}

22
Website.Markdig.Extensions/BlogImageRendererExtension.cs Normal file
View file

@ -0,0 +1,22 @@
using Markdig;
using Markdig.Renderers;
using Markdig.Renderers.Html;
using Markdig.Renderers.Html.Inlines;
using Markdig.Syntax.Inlines;
namespace Website.Markdig.Extensions {
public class BlogImageRendererExtension : IMarkdownExtension {
public void Setup(MarkdownPipelineBuilder pipeline) {
}
public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer) {
var htmlRenderer = renderer as HtmlRenderer;
var originalRenderer = htmlRenderer.ObjectRenderers.FindExact<LinkInlineRenderer>();
if (originalRenderer != null)
htmlRenderer.ObjectRenderers.Remove(originalRenderer);
var blogImageRenderer = new BlogImageRenderer(originalRenderer);
htmlRenderer.ObjectRenderers.AddIfNotAlready(blogImageRenderer);
}
}
}

10
Website.Markdig.Extensions/MarkdownPipelineBuilderExtensions.cs Normal file
View file

@ -0,0 +1,10 @@
using Markdig;
namespace Website.Markdig.Extensions {
public static class MarkdownPipelineBuilderExtensions {
public static MarkdownPipelineBuilder UseBlogImageRenderer(this MarkdownPipelineBuilder pipeline) {
pipeline.Extensions.Add(new BlogImageRendererExtension());
return pipeline;
}
}
}

11
Website.Markdig.Extensions/Website.Markdig.Extensions.csproj Normal file
View file

@ -0,0 +1,11 @@
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="markdig" Version="0.18.3" />
</ItemGroup>
</Project>

14
Website.sln
View file

@ -9,6 +9,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Website.Tests", "Website.Te
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "_build", "build\_build.csproj", "{0752E29F-71E3-4CCD-BEA6-8F171322380F}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Website.Markdig.Extensions", "Website.Markdig.Extensions\Website.Markdig.Extensions.csproj", "{370DEBB3-6309-45AB-82A0-03E663823302}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
@ -53,6 +55,18 @@ Global
{0752E29F-71E3-4CCD-BEA6-8F171322380F}.Release|x64.Build.0 = Release|Any CPU
{0752E29F-71E3-4CCD-BEA6-8F171322380F}.Release|x86.ActiveCfg = Release|Any CPU
{0752E29F-71E3-4CCD-BEA6-8F171322380F}.Release|x86.Build.0 = Release|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Debug|Any CPU.Build.0 = Debug|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Debug|x64.ActiveCfg = Debug|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Debug|x64.Build.0 = Debug|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Debug|x86.ActiveCfg = Debug|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Debug|x86.Build.0 = Debug|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Release|Any CPU.ActiveCfg = Release|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Release|Any CPU.Build.0 = Release|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Release|x64.ActiveCfg = Release|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Release|x64.Build.0 = Release|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Release|x86.ActiveCfg = Release|Any CPU
{370DEBB3-6309-45AB-82A0-03E663823302}.Release|x86.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE

10
Website/ViewModels/BlogPostViewModel.cs
View file

@ -2,6 +2,7 @@ using System;
using Markdig;
using Pek.Markdig.HighlightJs;
using Website.Extensions;
using Website.Markdig.Extensions;
using Website.Models;
namespace Website.ViewModels
@ -19,10 +20,11 @@ namespace Website.ViewModels
private static string FormatTimestamp(DateTime timestamp) => timestamp.ToString($@"dddd \t\h\e d{timestamp.GetDaySuffix()} \o\f MMMM yyyy");
private static MarkdownPipeline GetPipeline() => new MarkdownPipelineBuilder()
//.UseAdvancedExtensions()
.UseAutoLinks()
.UseSoftlineBreakAsHardlineBreak()
.UseHighlightJs()
//.UseAdvancedExtensions()
.UseAutoLinks()
.UseSoftlineBreakAsHardlineBreak()
.UseHighlightJs()
.UseBlogImageRenderer()
.Build();
public int Id { get; }

7
Website/Website.csproj
View file

@ -10,13 +10,18 @@
<PackageReference Include="BuildBundlerMinifier" Version="3.2.435" />
<PackageReference Include="dapper" Version="2.0.30" />
<PackageReference Include="dapper.contrib" Version="2.0.30" />
<PackageReference Include="markdig" Version="0.18.0" />
<PackageReference Include="markdig" Version="0.18.3" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.0" />
<PackageReference Include="mysqlconnector" Version="0.61.0" />
<PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
<PackageReference Include="Pek.Markdig.HighlightJs" Version="0.5.1" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Website.Markdig.Extensions\Website.Markdig.Extensions.csproj" />
</ItemGroup>
<Target Name="BuildCss" BeforeTargets="Build">
<Exec WorkingDirectory="$(ProjectDir)" Command="npm install" />
<Exec WorkingDirectory="$(ProjectDir)" Command="npx gulp compile_scss" />

3
Website/bundleconfig.json
View file

@ -2,8 +2,7 @@
{
"outputFileName": "wwwroot/js/javascript.min.js",
"inputFiles": [
"wwwroot/js/javascript.js",
"wwwroot/js/blog.js"
"wwwroot/js/javascript.js"
],
"minify": {
"enabled": true,

28
Website/wwwroot/js/blog.js
View file

@ -1,28 +0,0 @@
documentReady(() => {
function adornImage(image, append) {
var parent = image.parentNode;
parent.removeChild(image);
image.className = "blog-post__image-container--image";
var tagLine = document.createElement("span");
tagLine.className = "blog-post__image-container--tagline";
tagLine.innerText = image.getAttribute("alt");
var container = document.createElement("div");
container.className = "blog-post__image-container";
container.appendChild(image);
container.appendChild(tagLine);
var containerContainer = document.createElement("div");
containerContainer.className = "blog-post__image-container--container";
containerContainer.appendChild(container);
if (append)
parent.appendChild(containerContainer);
else
parent.prepend(containerContainer);
}
document.querySelectorAll("p>img:only-child,p>img:first-child").forEach(image => adornImage(image, false));
document.querySelectorAll("p>img:last-child").forEach(image => adornImage(image, true));
});