Added initial work for Fallback image

Author: linkdotnet

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

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

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor

@@ -31,6 +31,11 @@
                 <label for="preview">Preview-Url</label>
                 <InputText class="form-control" id="preview" @bind-Value="model.PreviewImageUrl"/>
             </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="allback-preview" class="form-text text-muted">Optional: Used as a fallback if the preview image can't be used by the browser.</small>
+            </div>
             <div class="form-check">
                 <InputCheckbox class="form-check-input" id="published" @bind-Value="model.IsPublished" />
                 <label class="form-check-label" for="published">Publish</label><br/>

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

src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor

@@ -0,0 +1,24 @@
+@if (string.IsNullOrEmpty(PreviewImageUrlFallback))
+{
+    <img src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag"/>
+}
+else
+{
+    <picture>
+        <source srcset="@PreviewImageUrl" />
+        <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";
+}

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor

@@ -5,7 +5,12 @@
 <article>
   <div class="blog-card @AltCssClass">
     <div class="meta">
-      <div class="photo" style="background-image: url(@BlogPost.PreviewImageUrl)"></div>
+      <div>
+        <PreviewImage PreviewImageUrl="@BlogPost.PreviewImageUrl" 
+                      PreviewImageUrlFallback="@BlogPost.PreviewImageUrlFallback"
+                      LazyLoadImage="@LazyLoadPreviewImage"></PreviewImage>
+      </div>
+      @* <div class="photo" style="background-image: url(@BlogPost.PreviewImageUrl)"></div> *@
       <ul class="details">
         <li class="date">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</li>
         @if (BlogPost.Tags != null)
@@ -39,6 +44,9 @@
 
     [Parameter]
     public bool UseAlternativeStyle { get; set; }
+  
+    [Parameter]
+    public bool LazyLoadPreviewImage { get; set; }
 
     private string AltCssClass => UseAlternativeStyle ? "alt" : string.Empty;
 

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/[email protected]/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>

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

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

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