Improve BrainOrdure editorial UI

app/views/Posts/index.asp

@@ -1,63 +1,96 @@
-<div class="d-flex align-items-center justify-content-between mb-4">
-  <div>
-    <div class="eyebrow mb-2">Latest issue</div>
-    <h1 class="page-title h3 mb-1">Posts</h1>
-    <p class="text-muted mb-0">Published articles from ASPBlogBrainOrdure.</p>
+<%
+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>
-  <a class="btn btn-primary" href="<%= PostNewUrl() %>">New Post</a>
-</div>
-
-<%
-Dim postIter, postItem, shownCount
-Set postIter = posts.Iterator()
-shownCount = 0
-
-If posts.Count = 0 Then
-%>
-  <div class="alert alert-secondary">No published posts are available yet.</div>
-<%
-Else
-%>
-  <div class="row gy-3 magazine-list">
-    <%
-    Do While postIter.HasNext And shownCount < 20
-        Set postItem = postIter.GetNext()
-        shownCount = shownCount + 1
-    %>
-      <div class="col-12">
-        <article class="card shadow-sm">
-          <div class="card-body">
-            <div class="d-flex flex-column flex-md-row justify-content-between gap-2 mb-2">
-              <h2 class="h4 mb-1">
-                <a href="<%= PostUrl(postItem.Slug) %>" class="text-decoration-none">
-                  <%= H(postItem.Title) %>
-                </a>
-              </h2>
-              <%
-              Dim publishedText
-              publishedText = ""
-              If IsDate(postItem.PublishedDate) Then
-                  If CDate(postItem.PublishedDate) > #1/1/1970# Then
-                      publishedText = FormatDateTime(postItem.PublishedDate, vbLongDate)
-                  End If
-              End If
-
-              If Len(publishedText) > 0 Then
-              %>
-                <span class="small text-muted"><%= H(publishedText) %></span>
-              <%
+</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>
-            <p class="text-muted mb-3 prose"><%= H(postItem.Summary) %></p>
-            <a class="btn btn-sm btn-outline-primary" href="<%= PostUrl(postItem.Slug) %>">Read</a>
           </div>
         </article>
-      </div>
-    <%
-    Loop
-    %>
-  </div>
-<%
-End If
-%>
+      <%
+      Loop
+      %>
+    <% End If %>
+  </div>
+</div>