Merge pull request #61 from linkdotnet/feature/fallback-image

linkdotnet · web-flow · commit 921dfeea8ab0 · 2022-06-26T21:41:19.000+02:00
Feature/fallback image
diff --git a/Readme.md b/Readme.md
@@ -167,13 +167,13 @@ To get better results when for example shared via LinkedIn some of the `<meta pr
 
 The following tags are set depending on the page:
 
-| Open Graph Tag | Index                                                     | Display Blog Post                            |
-| -------------- | --------------------------------------------------------- | -------------------------------------------- |
-| og:title       | Title of the blog (defined in Introduction)               | Title of the Blog Post                       |
-| og:url         | Url to the index page                                     | Url of the page                              |
-| og:image       | Profile image (defined in Introduction)                   | Yes                                          |
-| og:type        | article                                                   | article                                      |
-| og:description | Short description in plain text (defined in Introduction) | Short Description of Blog Post in plain text |
+| Open Graph Tag | Index                                                     | Display Blog Post                                                           |
+| -------------- | --------------------------------------------------------- |-----------------------------------------------------------------------------|
+| og:title       | Title of the blog (defined in Introduction)               | Title of the Blog Post                                                      |
+| og:url         | Url to the index page                                     | Url of the page                                                             |
+| og:image       | Profile image (defined in Introduction)                   | Uses the preview image. If a fallback is defined this will be used instead. |
+| og:type        | article                                                   | article                                                                     |
+| og:description | Short description in plain text (defined in Introduction) | Short Description of Blog Post in plain text                                |
 
 Furthermore the following tags are set:
 
@@ -183,4 +183,4 @@ Furthermore the following tags are set:
 | &lt;meta name="keyword" content="" /&gt; | not set                              | Tags defined in the Blog Post |
 
 ## RSS Feed
-This blog also offers a RSS feed ([RSS 2.0 specification](https://validator.w3.org/feed/docs/rss2.html)), which can be consumed by your users or programs like feedly. Just append `feed.rss` to your url or click on the RSS feed icon in the navigation bar to get the feed. The RSS feed does not expose the whole content of a given blog post but it's title and short description including some other tags like preview image, publishing date and so on.
+This blog also offers a RSS feed ([RSS 2.0 specification](https://validator.w3.org/feed/docs/rss2.html)), which can be consumed by your users or programs like feedly. Just append `feed.rss` to your url or click on the RSS feed icon in the navigation bar to get the feed. The RSS feed does not expose the whole content of a given blog post but it's title and short description including some other tags like preview image, publishing date and so on.
diff --git a/src/LinkDotNet.Blog.Domain/BlogPost.cs b/src/LinkDotNet.Blog.Domain/BlogPost.cs
@@ -18,6 +18,8 @@ private BlogPost()
 
     public string PreviewImageUrl { get; private set; }
 
+    public string PreviewImageUrlFallback { get; private set; }
+
     public DateTime UpdatedDate { get; private set; }
 
     public virtual ICollection<Tag> Tags { get; private set; }
@@ -33,7 +35,8 @@ public static BlogPost Create(
         string previewImageUrl,
         bool isPublished,
         DateTime? updatedDate = null,
-        IEnumerable<string> tags = null)
+        IEnumerable<string> tags = null,
+        string previewImageUrlFallback = null)
     {
         var blogPost = new BlogPost
         {
@@ -42,6 +45,7 @@ public static BlogPost Create(
             Content = content,
             UpdatedDate = updatedDate ?? DateTime.Now,
             PreviewImageUrl = previewImageUrl,
+            PreviewImageUrlFallback = previewImageUrlFallback,
             IsPublished = isPublished,
             Tags = tags?.Select(Tag.Create).ToList(),
         };
@@ -61,6 +65,7 @@ public void Update(BlogPost from)
         Content = from.Content;
         UpdatedDate = from.UpdatedDate;
         PreviewImageUrl = from.PreviewImageUrl;
+        PreviewImageUrlFallback = from.PreviewImageUrlFallback;
         IsPublished = from.IsPublished;
         ReplaceTags(from.Tags);
     }
diff --git a/src/LinkDotNet.Blog.Infrastructure/Persistence/Sql/Mapping/BlogPostConfiguration.cs b/src/LinkDotNet.Blog.Infrastructure/Persistence/Sql/Mapping/BlogPostConfiguration.cs
@@ -17,6 +17,7 @@ public void Configure(EntityTypeBuilder<BlogPost> builder)
         builder.Navigation(x => x.Tags).AutoInclude();
         builder.Property(x => x.Title).HasMaxLength(256).IsRequired();
         builder.Property(x => x.PreviewImageUrl).HasMaxLength(1024).IsRequired();
+        builder.Property(x => x.PreviewImageUrlFallback).HasMaxLength(1024);
         builder.Property(x => x.Content).IsRequired();
         builder.Property(x => x.ShortDescription).IsRequired();
         builder.Property(x => x.Likes).IsRequired();
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
@@ -30,6 +30,13 @@
             <div class="mb-3">
                 <label for="preview">Preview-Url</label>
                 <InputText class="form-control" id="preview" @bind-Value="model.PreviewImageUrl"/>
+                <small for="preview" class="form-text text-muted">The primary image which will be used.</small>
+            </div>
+            <div class="mb-3">
+                <label for="preview">Fallback Preview-Url</label>
+                <InputText class="form-control" id="fallback-preview" @bind-Value="model.PreviewImageUrlFallback"/>
+                <small for="fallback-preview" class="form-text text-muted">Optional: Used as a fallback if the preview image can't be used by the browser.
+                    <br>For example using a jpg or png as fallback for avif which is not supported in Safari or Edge.</small>
             </div>
             <div class="form-check">
                 <InputCheckbox class="form-check-input" id="published" @bind-Value="model.IsPublished" />
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewModel.cs b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewModel.cs
@@ -31,6 +31,8 @@ public class CreateNewModel
 
     public DateTime OriginalUpdatedDate { get; set; }
 
+    public string PreviewImageUrlFallback { get; set; }
+
     public static CreateNewModel FromBlogPost(BlogPost blogPost)
     {
         return new CreateNewModel
@@ -43,6 +45,7 @@ public static CreateNewModel FromBlogPost(BlogPost blogPost)
             IsPublished = blogPost.IsPublished,
             PreviewImageUrl = blogPost.PreviewImageUrl,
             OriginalUpdatedDate = blogPost.UpdatedDate,
+            PreviewImageUrlFallback = blogPost.PreviewImageUrlFallback,
         };
     }
 
@@ -53,7 +56,7 @@ public BlogPost ToBlogPost()
             ? null
             : OriginalUpdatedDate;
 
-        var blogPost = BlogPost.Create(Title, ShortDescription, Content, PreviewImageUrl, IsPublished, updatedDate, tags);
+        var blogPost = BlogPost.Create(Title, ShortDescription, Content, PreviewImageUrl, IsPublished, updatedDate, tags, PreviewImageUrlFallback);
         blogPost.Id = Id;
         return blogPost;
     }
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor
@@ -0,0 +1,41 @@
+@using Microsoft.AspNetCore.StaticFiles
+@if (string.IsNullOrEmpty(PreviewImageUrlFallback))
+{
+    <img src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag"/>
+}
+else
+{
+    <picture>
+        <source srcset="@PreviewImageUrl" type="@GetMimeType()"/>
+        <img src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag"/>
+    </picture>
+}
+
+@code {
+    [Parameter]
+    public string PreviewImageUrl { get; set; }
+
+    [Parameter]
+    public string PreviewImageUrlFallback { get; set; }
+
+    [Parameter]
+    public bool LazyLoadImage { get; set; }
+
+    private string LazyLoadTag => LazyLoadImage ? "lazy" : "eager";
+
+    private static readonly FileExtensionContentTypeProvider Provider = new();
+
+    static PreviewImage()
+    {
+        if (!Provider.Mappings.Keys.Contains(".avif"))
+        {
+            Provider.Mappings.Add(".avif", "image/avif");
+        }
+    }
+
+    private string GetMimeType()
+    {
+        Provider.TryGetContentType(PreviewImageUrl, out var contentType);
+        return contentType;
+    }
+}
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css
@@ -0,0 +1,8 @@
+img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+}
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor
@@ -5,7 +5,11 @@
 <article>
   <div class="blog-card @AltCssClass">
     <div class="meta">
-      <div class="photo" style="background-image: url(@BlogPost.PreviewImageUrl)"></div>
+      <div class="photo">
+        <PreviewImage PreviewImageUrl="@BlogPost.PreviewImageUrl" 
+                      PreviewImageUrlFallback="@BlogPost.PreviewImageUrlFallback"
+                      LazyLoadImage="@LazyLoadPreviewImage"></PreviewImage>
+      </div>
       <ul class="details">
         <li class="date">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</li>
         @if (BlogPost.Tags != null)
@@ -39,6 +43,9 @@
   
     [Parameter]
     public bool UseAlternativeStyle { get; set; }
+  
+    [Parameter]
+    public bool LazyLoadPreviewImage { get; set; }
 
     private string AltCssClass => UseAlternativeStyle ? "alt" : string.Empty;
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css
@@ -23,24 +23,11 @@
 .blog-card a:hover {
     color: #5ad67d;
 }
-.blog-card:hover .photo {
-    transform: scale(1.3) rotate(3deg);
-}
 .blog-card .meta {
     position: relative;
     z-index: 0;
     height: 200px;
 }
-.blog-card .photo {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-size: cover;
-    background-position: center;
-    transition: transform 0.5s;
-}
 .blog-card .details,
 .blog-card .details ul {
     margin: auto;
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Index.razor b/src/LinkDotNet.Blog.Web/Features/Home/Index.razor
@@ -27,7 +27,7 @@
     <div class="content px-4 my-2">
     @for (var i = 0; i < currentPage.Count; i++)
     {
-        <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
+        <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)" LazyLoadPreviewImage="i > 2"></ShortBlogPost>
     }
     </div>
     <BlogPostNavigation PageList="@currentPage"></BlogPostNavigation>
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor
@@ -16,7 +16,7 @@ else
 {
     <PageTitle>@BlogPost.Title</PageTitle>
     <OgData Title="@BlogPost.Title"
-            AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl"
+            AbsolutePreviewImageUrl="@OgDataImage"
             Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
             Keywords="@Tags"></OgData>
     <div class="blog-outer-box">
@@ -53,6 +53,8 @@ else
     private string Tags => BlogPost?.Tags != null
         ? string.Join(",", BlogPost.Tags.Select(b => b.Content))
         : null;
+
+    private string OgDataImage => BlogPost.PreviewImageUrlFallback ?? BlogPost.PreviewImageUrl;
     
     private BlogPost BlogPost { get; set; }
 
diff --git a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml
@@ -41,11 +41,11 @@
         An unhandled exception has occurred. See browser dev tools for details.
     </environment>
     <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
+    <a class="dismiss">x</a>
 </div>
 <script src="_framework/blazor.server.js"></script>
 <script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js" integrity="sha512-yUUc0qWm2rhM7X0EFe82LNnv2moqArj5nro/w1bi05A09hRVeIZbN6jlMoyu0+4I/Bu4Ck/85JQIU82T82M28w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/csharp.min.js" integrity="sha512-wOhBmvmYJyIcnoY/XHP/c7SyyK05H0NleQgId+c6taC3OWIJNj0DbG0J8dAuxpWNjsk84y4yHQraUtJnWHnpNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></script>
+<script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/csharp.min.js" integrity="sha512-wOhBmvmYJyIcnoY/XHP/c7SyyK05H0NleQgId+c6taC3OWIJNj0DbG0J8dAuxpWNjsk84y4yHQraUtJnWHnpNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script async src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha256-cMPWkL3FzjuaFSfEYESYmjF25hCIL6mfRSPnW8OVvM4=" crossorigin="anonymous"></script>
 <script async src="components/selection.js" ></script>
 <script async src="components/slideshow.js" ></script>
diff --git a/tests/LinkDotNet.Blog.TestUtilities/BlogPostBuilder.cs b/tests/LinkDotNet.Blog.TestUtilities/BlogPostBuilder.cs
@@ -8,7 +8,8 @@ public class BlogPostBuilder
     private string title = "BlogPost";
     private string shortDescription = "Some Text";
     private string content = "Some Content";
-    private string url = "localhost";
+    private string previewImageUrl = "localhost";
+    private string previewImageUrlFallback = null;
     private bool isPublished = true;
     private string[] tags;
     private int likes;
@@ -34,7 +35,13 @@ public BlogPostBuilder WithContent(string content)
 
     public BlogPostBuilder WithPreviewImageUrl(string url)
     {
-        this.url = url;
+        previewImageUrl = url;
+        return this;
+    }
+
+    public BlogPostBuilder WithPreviewImageUrlFallback(string url)
+    {
+        previewImageUrlFallback = url;
         return this;
     }
 
@@ -64,7 +71,7 @@ public BlogPostBuilder WithUpdatedDate(DateTime updateDate)
 
     public BlogPost Build()
     {
-        var blogPost = BlogPost.Create(title, shortDescription, content, url, isPublished, updateDate, tags);
+        var blogPost = BlogPost.Create(title, shortDescription, content, previewImageUrl, isPublished, updateDate, tags, previewImageUrlFallback);
         blogPost.Likes = likes;
         return blogPost;
     }
diff --git a/tests/LinkDotNet.Blog.UnitTests/Domain/BlogPostTests.cs b/tests/LinkDotNet.Blog.UnitTests/Domain/BlogPostTests.cs
@@ -12,7 +12,7 @@ public void ShouldUpdateBlogPost()
     {
         var blogPostToUpdate = new BlogPostBuilder().Build();
         blogPostToUpdate.Id = "random-id";
-        var blogPost = BlogPost.Create("Title", "Desc", "Content", "Url", true);
+        var blogPost = BlogPost.Create("Title", "Desc", "Content", "Url", true, previewImageUrlFallback: "Url2");
         blogPost.Id = "something else";
 
         blogPostToUpdate.Update(blogPost);
@@ -21,6 +21,7 @@ public void ShouldUpdateBlogPost()
         blogPostToUpdate.ShortDescription.Should().Be("Desc");
         blogPostToUpdate.Content.Should().Be("Content");
         blogPostToUpdate.PreviewImageUrl.Should().Be("Url");
+        blogPostToUpdate.PreviewImageUrlFallback.Should().Be("Url2");
         blogPostToUpdate.IsPublished.Should().BeTrue();
         blogPostToUpdate.Tags.Should().BeNullOrEmpty();
     }
diff --git a/tests/LinkDotNet.Blog.UnitTests/Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPostTests.cs b/tests/LinkDotNet.Blog.UnitTests/Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPostTests.cs
@@ -24,6 +24,7 @@ public void ShouldCreateNewBlogPostWhenValidDataGiven()
         cut.Find("#short").Input("My short Description");
         cut.Find("#content").Input("My content");
         cut.Find("#preview").Change("My preview url");
+        cut.Find("#fallback-preview").Change("My fallback preview url");
         cut.Find("#published").Change(false);
         cut.Find("#tags").Change("Tag1,Tag2,Tag3");
 
@@ -35,6 +36,7 @@ public void ShouldCreateNewBlogPostWhenValidDataGiven()
         blogPost.ShortDescription.Should().Be("My short Description");
         blogPost.Content.Should().Be("My content");
         blogPost.PreviewImageUrl.Should().Be("My preview url");
+        blogPost.PreviewImageUrlFallback.Should().Be("My fallback preview url");
         blogPost.IsPublished.Should().BeFalse();
         blogPost.UpdatedDate.Should().NotBe(default);
         blogPost.Tags.Should().HaveCount(3);
diff --git a/tests/LinkDotNet.Blog.UnitTests/Web/Features/Components/PreviewImageTests.cs b/tests/LinkDotNet.Blog.UnitTests/Web/Features/Components/PreviewImageTests.cs
diff --git a/tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/ShowBlogPostPageTests.cs b/tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/ShowBlogPostPageTests.cs

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`<div class="content px-4 my-2">`
`28`	`28`	`@for (var i = 0; i < currentPage.Count; i++)`
`29`	`29`	`{`
`30`		`- <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>`
	`30`	`+ <ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)" LazyLoadPreviewImage="i > 2"></ShortBlogPost>`
`31`	`31`	`}`
`32`	`32`	`</div>`
`33`	`33`	`<BlogPostNavigation PageList="@currentPage"></BlogPostNavigation>`