Added read time to short blog post

Author: linkdotnet

src/LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor

@@ -1,4 +1,5 @@
 @using System.Net
+@using System.Text.RegularExpressions
 @using System.Web
 @using LinkDotNet.Blog.Domain
 @inherits MarkdownComponentBase
@@ -19,6 +20,7 @@
             </ul>
           </li>
         }
+        <li class="read-time">@readTime min</li>
       </ul>
     </div>
     <div class="description">
@@ -40,4 +42,29 @@
     public bool UseAlternativeStyle { get; set; }
 
     private string AltCssClass => UseAlternativeStyle ? "alt" : string.Empty;
+
+    private int readTime;
+
+    protected override void OnInitialized()
+    {
+      var images = GetAllOccurrences(RenderMarkupString(BlogPost.Content).Value, "<img");
+      var words = BlogPost.Content.Split(Array.Empty<char>(), StringSplitOptions.RemoveEmptyEntries).Length;
+
+        var readTimeInPrecision = images * 15 + words / 3.333;
+        readTime = (int)Math.Floor(readTimeInPrecision / 60);
+    }
+
+  private int GetAllOccurrences(string text, string lookup)
+  {
+    var currentPosition = -1;
+    var count = 0;
+
+    while ((currentPosition = text.IndexOf(lookup, currentPosition + 1, StringComparison.Ordinal)) != -1)
+    {
+      count++;
+    }
+
+    return count;
+  }
+
 }

src/LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor.css

@@ -82,9 +82,7 @@
 .blog-card .details .tags li {
     margin-right: 2px;
 }
-.blog-card .details .tags li:first-child {
-    margin-left: -4px;
-}
+
 .blog-card .description {
     padding: 1rem;
     background: #fff;
@@ -117,6 +115,14 @@
     margin-left: 5px;
     opacity: 1;
 }
+
+.blog-card .read-time:before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    margin-right: 10px;
+    content: "\f017";
+}
+
 .blog-card p {
     position: relative;
     margin: 1rem 0 0;