ASPBlogBrainOrdure/app/views/Posts/index.asp

<%
Dim postIter, postItem, featuredPost, featuredImage, featuredPublishedText, featuredReadTime
Set postIter = posts.Iterator()
featuredImage = ""
If posts.Count > 0 Then
    Set featuredPost = postIter.GetNext()
    featuredImage = ExtractFirstImageSrc(featuredPost.Body)
End If
%>

<header class="masthead masthead-page">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="page-heading text-center">
          <h1>Posts</h1>
          <span class="subheading">Published articles from BrainOrdure.</span>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="row">
  <div class="col-lg-8 mx-auto">
    <div class="d-flex justify-content-end mb-4">
      <a class="btn btn-primary" href="<%= PostNewUrl() %>">New Post</a>
    </div>

    <% If posts.Count = 0 Then %>
      <div class="alert alert-secondary">No published posts are available yet.</div>
    <% Else %>
      <article class="card shadow-sm post-card post-card-featured mb-4">
        <% If Len(featuredImage) > 0 Then %>
          <a class="post-card-image" href="<%= PostUrl(featuredPost.Slug) %>" style="background-image: url('<%= H(featuredImage) %>')"></a>
        <% End If %>
        <div class="card-body">
          <div class="magazine-label mb-3">Top story</div>
          <h2 class="post-title"><a href="<%= PostUrl(featuredPost.Slug) %>"><%= H(featuredPost.Title) %></a></h2>
          <p class="post-subtitle"><%= H(featuredPost.Summary) %></p>
          <%
          featuredPublishedText = ""
          If IsDate(featuredPost.PublishedDate) Then
              If CDate(featuredPost.PublishedDate) > #1/1/1970# Then
                  featuredPublishedText = FormatDateTime(featuredPost.PublishedDate, vbLongDate)
              End If
          End If
          featuredReadTime = EstimateReadTime(featuredPost.Body)
          %>
          <div class="post-meta-inline">
            <span>By BrainOrdure</span>
            <% If Len(featuredPublishedText) > 0 Then %><span class="meta-sep">•</span><span><%= H(featuredPublishedText) %></span><% End If %>
            <% If Len(featuredReadTime) > 0 Then %><span class="meta-sep">•</span><span><%= H(featuredReadTime) %></span><% End If %>
          </div>
        </div>
      </article>

      <h2 class="h4 mb-3">More stories</h2>
      <%
      Dim shownCount, publishedText, readTimeText, cardImage, articleLabel
      shownCount = 0
      Do While postIter.HasNext And shownCount < 19
          Set postItem = postIter.GetNext()
          shownCount = shownCount + 1
          publishedText = ""
          If IsDate(postItem.PublishedDate) Then
              If CDate(postItem.PublishedDate) > #1/1/1970# Then
                  publishedText = FormatDateTime(postItem.PublishedDate, vbLongDate)
              End If
          End If
          readTimeText = EstimateReadTime(postItem.Body)
          cardImage = ExtractFirstImageSrc(postItem.Body)
          articleLabel = "Issue " & CStr(shownCount + 1)
      %>
        <article class="card shadow-sm post-card mb-4">
          <% If Len(cardImage) > 0 Then %>
            <a class="post-card-image" href="<%= PostUrl(postItem.Slug) %>" style="background-image: url('<%= H(cardImage) %>')"></a>
          <% End If %>
          <div class="card-body">
            <div class="eyebrow mb-2"><%= H(articleLabel) %></div>
            <h3 class="post-title h4"><a href="<%= PostUrl(postItem.Slug) %>"><%= H(postItem.Title) %></a></h3>
            <p class="post-subtitle mb-2"><%= H(postItem.Summary) %></p>
            <div class="post-meta-inline">
              <span>By BrainOrdure</span>
              <% If Len(publishedText) > 0 Then %><span class="meta-sep">•</span><span><%= H(publishedText) %></span><% End If %>
              <% If Len(readTimeText) > 0 Then %><span class="meta-sep">•</span><span><%= H(readTimeText) %></span><% End If %>
            </div>
          </div>
        </article>
      <%
      Loop
      %>
    <% End If %>
  </div>
</div>