webp

src/TerribleDev.Blog.Web/Factories/BlogFactory.cs

@@ -8,6 +8,7 @@ using YamlDotNet.Serialization;
 using Microsoft.AspNetCore.Html;
 using Markdig;
 using TerribleDev.Blog.Web.MarkExtension.TerribleDev.Blog.Web.ExternalLinkParser;
+using TerribleDev.Blog.Web.MarkExtension;
 
 namespace TerribleDev.Blog.Web
 {
@@ -44,8 +45,9 @@ namespace TerribleDev.Blog.Web
             var markdownText = string.Join("", splitFile.Skip(1));
             List<string> postImages = new List<string>();
             var pipeline = new MarkdownPipelineBuilder()
+                                .Use<PictureInline>()
                                 .Use<TargetLinkExtension>()
-                                .Use<ImageRecorder>(new ImageRecorder(ref postImages))
+                                // .Use<ImageRecorder>(new ImageRecorder(ref postImages))
                                 .UseMediaLinks()
                                 .UseEmojiAndSmiley()
                                 .Build();

src/TerribleDev.Blog.Web/MarkExtension/ImageRecorder.cs

@@ -50,7 +50,7 @@ namespace TerribleDev.Blog.Web.MarkExtension
                     return false;
                 }
                 this.images.Add(linkInline.Url);
-                return true;
+                return false;
             }
         }
     }

src/TerribleDev.Blog.Web/MarkExtension/PictureInline.cs

@@ -1,18 +1,27 @@
-using Markdig.Renderers.Html;
-using Markdig.Syntax.Inlines;
+using System;
+using Markdig;
+using Markdig.Renderers;
+using Markdig.Renderers.Html.Inlines;
 
 namespace TerribleDev.Blog.Web.MarkExtension
 {
-    public class PictureInlineRenderer : HtmlObjectRenderer<LinkInline>
+    public class PictureInline : IMarkdownExtension
     {
-        protected override void Write(HtmlRenderer renderer, LinkInline link)
+        public PictureInline()
         {
-            if(!link.IsImage)
+        }
+
+        public void Setup(MarkdownPipelineBuilder pipeline)
+        {
+        }
+
+        public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+        {
+            var htmlRenderer = renderer as HtmlRenderer;
+            if (htmlRenderer != null && !htmlRenderer.ObjectRenderers.Contains<PictureInlineRenderer>())
             {
-                base.Write(renderer, link);
+                htmlRenderer.ObjectRenderers.ReplaceOrAdd<LinkInlineRenderer>(new PictureInlineRenderer());
             }
-            
-           
         }
     }
 }

src/TerribleDev.Blog.Web/MarkExtension/PictureInlineRenderer.cs

@@ -0,0 +1,59 @@
+using System;
+using Markdig.Renderers;
+using Markdig.Renderers.Html;
+using Markdig.Renderers.Html.Inlines;
+using Markdig.Syntax.Inlines;
+using System.Linq;
+using System.Collections.Generic;
+
+namespace TerribleDev.Blog.Web.MarkExtension
+{
+    // <summary>
+    /// A HTML renderer for a <see cref="LinkInline"/>.
+    /// </summary>
+    /// <seealso cref="Markdig.Renderers.Html.HtmlObjectRenderer{Markdig.Syntax.Inlines.LinkInline}" />
+    public class PictureInlineRenderer : LinkInlineRenderer
+    {
+        private void WriteImageTag(HtmlRenderer renderer, LinkInline link, string suffix, string type = null)
+        {
+            renderer.Write(string.IsNullOrWhiteSpace(type) ? $"<img src=\"" : $"<source type=\"{type}\" srcset=\"");
+            var escapeUrl = link.GetDynamicUrl != null ? link.GetDynamicUrl() ?? link.Url : link.Url;
+            renderer.WriteEscapeUrl($"{escapeUrl}{suffix}");
+            renderer.Write("\"");
+            renderer.WriteAttributes(link);
+            // if (renderer.EnableHtmlForInline)
+            // {
+            //     renderer.Write(" alt=\"");
+            // }
+            // var wasEnableHtmlForInline = renderer.EnableHtmlForInline;
+            // renderer.EnableHtmlForInline = false;
+            // renderer.WriteChildren(link);
+            // renderer.EnableHtmlForInline = wasEnableHtmlForInline;
+            // if (renderer.EnableHtmlForInline)
+            // {
+            //     renderer.Write("\"");
+            // }
+
+
+            if (renderer.EnableHtmlForInline)
+            {
+                renderer.Write(" />");
+            }
+        }
+        protected override void Write(HtmlRenderer renderer, LinkInline link)
+        {
+            if (!link.IsImage)
+            {
+                base.Write(renderer, link);
+                return;
+            }
+            
+            
+            renderer.Write("<picture>");
+            WriteImageTag(renderer, link, ".webp", "image/webp");
+            WriteImageTag(renderer, link, string.Empty);
+            renderer.Write("</picture>");
+
+        }
+    }
+}