Improve BrainOrdure editorial UI

app/views/Home/index.asp

@@ -1,153 +1,131 @@
 <%
-Dim featuredPost, homePostIter, homePostItem, homeRecentCount
-homeRecentCount = 0
+Dim featuredPost, homePostIter, homePostItem, homeHeroBackground, homePublishedText, homeReadTime, homeCardImage
+homeHeroBackground = ""
 Set homePostIter = posts.Iterator()
 If posts.Count > 0 Then
   Set featuredPost = homePostIter.GetNext()
+  homeHeroBackground = ExtractFirstImageSrc(featuredPost.Body)
 End If
 %>
 
-<div class="hero mb-5">
-  <div class="d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-lg-end">
-    <div class="home-hero-copy">
-      <div class="eyebrow mb-3">The magazine</div>
-      <h1 class="display-5 fw-bold mb-3">BrainOrdure</h1>
-      <p class="lede mb-4">A tidy, opinionated front page for notes, essays, and reader discussion.</p>
-      <div class="d-flex flex-wrap gap-2">
-        <a href="<%= PostsUrl() %>" class="btn btn-primary px-4">Read the issue</a>
-        <a href="<%= CategoriesUrl() %>" class="btn btn-outline-secondary px-4">Browse sections</a>
-      </div>
-    </div>
-
-    <div class="home-sidebar card shadow-sm">
-      <div class="card-body">
-        <div class="eyebrow mb-2">Inside this issue</div>
-        <h2 class="h5 mb-3">Latest coverage</h2>
-        <% If posts.Count = 0 Then %>
-          <p class="text-muted mb-0">No published stories yet.</p>
-        <% Else %>
-          <ul class="list-unstyled editorial-list mb-0">
-            <%
-            Set homePostIter = posts.Iterator()
-            Do While homePostIter.HasNext And homeRecentCount < 3
-              Set homePostItem = homePostIter.GetNext()
-              homeRecentCount = homeRecentCount + 1
-            %>
-              <li class="mb-3">
-                <a class="text-decoration-none d-block" href="<%= PostUrl(homePostItem.Slug) %>">
-                  <span class="small text-uppercase text-muted d-block mb-1">Story <%= homeRecentCount %></span>
-                  <strong><%= H(homePostItem.Title) %></strong>
-                </a>
-              </li>
-            <%
-            Loop
-            %>
-          </ul>
-        <% End If %>
+<header class="masthead masthead-home<% If Len(homeHeroBackground) > 0 Then %> masthead-has-image<% End If %>"<% If Len(homeHeroBackground) > 0 Then %> style="background-image: url('<%= H(homeHeroBackground) %>')"<% End If %>>
+  <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>BrainOrdure</h1>
+          <span class="subheading">A cleaner front page for essays, notes, and reader discussion.</span>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</header>
 
-<div class="row g-4">
+<div class="row gy-4">
   <div class="col-lg-8">
-    <div class="d-flex align-items-center justify-content-between mb-3">
-      <div>
-        <div class="eyebrow mb-2">Featured story</div>
-        <h2 class="page-title h3 mb-0">From the editor's desk</h2>
-      </div>
-    </div>
-
     <% If posts.Count = 0 Then %>
       <div class="alert alert-secondary">No published posts are available yet.</div>
     <% Else %>
-      <article class="card shadow-sm mb-4 feature-article">
-        <div class="card-body p-4 p-lg-5">
-          <div class="magazine-label mb-3">Cover story</div>
-          <h3 class="display-6 mb-3"><a class="text-decoration-none" href="<%= PostUrl(featuredPost.Slug) %>"><%= H(featuredPost.Title) %></a></h3>
+      <div class="card shadow-sm post-card post-card-featured mb-4">
+        <% If Len(homeHeroBackground) > 0 Then %>
+          <a class="post-card-image" href="<%= PostUrl(featuredPost.Slug) %>" style="background-image: url('<%= H(homeHeroBackground) %>')"></a>
+        <% End If %>
+        <div class="card-body">
+          <div class="magazine-label mb-3">Featured story</div>
+          <h2 class="post-title"><a href="<%= PostUrl(featuredPost.Slug) %>"><%= H(featuredPost.Title) %></a></h2>
+          <p class="post-subtitle"><%= H(featuredPost.Summary) %></p>
           <%
-          Dim featuredPublishedText
-          featuredPublishedText = ""
+          homePublishedText = ""
           If IsDate(featuredPost.PublishedDate) Then
             If CDate(featuredPost.PublishedDate) > #1/1/1970# Then
-              featuredPublishedText = FormatDateTime(featuredPost.PublishedDate, vbLongDate)
+              homePublishedText = FormatDateTime(featuredPost.PublishedDate, vbLongDate)
             End If
           End If
-          If Len(featuredPublishedText) > 0 Then
+          homeReadTime = EstimateReadTime(featuredPost.Body)
           %>
-            <p class="article-meta mb-3"><%= H(featuredPublishedText) %></p>
-          <%
-          End If
-          %>
-          <p class="lede mb-4"><%= H(featuredPost.Summary) %></p>
-          <a class="btn btn-primary" href="<%= PostUrl(featuredPost.Slug) %>">Read the feature</a>
+          <div class="post-meta-inline">
+            <span>By BrainOrdure</span>
+            <% If Len(homePublishedText) > 0 Then %><span class="meta-sep">•</span><span><%= H(homePublishedText) %></span><% End If %>
+            <% If Len(homeReadTime) > 0 Then %><span class="meta-sep">•</span><span><%= H(homeReadTime) %></span><% End If %>
+          </div>
         </div>
-      </article>
+      </div>
 
-      <div class="row g-4 magazine-list">
-        <%
-        Dim latestPostIter, latestPostItem, latestIndex
-        latestIndex = 0
-        Set latestPostIter = posts.Iterator()
-        If latestPostIter.HasNext Then Set latestPostItem = latestPostIter.GetNext()
-        Do While latestPostIter.HasNext And latestIndex < 4
-          Set latestPostItem = latestPostIter.GetNext()
-          latestIndex = latestIndex + 1
-        %>
-          <div class="col-md-6">
-            <article class="card shadow-sm h-100">
-              <div class="card-body">
-                <div class="magazine-label mb-3">Issue note</div>
-                <h3 class="h4 mb-2">
-                  <a href="<%= PostUrl(latestPostItem.Slug) %>" class="text-decoration-none"><%= H(latestPostItem.Title) %></a>
-                </h3>
-                <p class="text-muted mb-3 prose"><%= H(latestPostItem.Summary) %></p>
-                <a class="btn btn-sm btn-outline-primary" href="<%= PostUrl(latestPostItem.Slug) %>">Continue reading</a>
-              </div>
-            </article>
+      <h2 class="h4 mb-3">Latest stories</h2>
+      <%
+      Dim homePreviewCount
+      homePreviewCount = 0
+      Do While homePostIter.HasNext And homePreviewCount < 4
+        Set homePostItem = homePostIter.GetNext()
+        homePreviewCount = homePreviewCount + 1
+        homePublishedText = ""
+        If IsDate(homePostItem.PublishedDate) Then
+          If CDate(homePostItem.PublishedDate) > #1/1/1970# Then
+            homePublishedText = FormatDateTime(homePostItem.PublishedDate, vbLongDate)
+          End If
+        End If
+        homeReadTime = EstimateReadTime(homePostItem.Body)
+        homeCardImage = ExtractFirstImageSrc(homePostItem.Body)
+      %>
+        <article class="card shadow-sm post-card mb-4">
+          <% If Len(homeCardImage) > 0 Then %>
+            <a class="post-card-image" href="<%= PostUrl(homePostItem.Slug) %>" style="background-image: url('<%= H(homeCardImage) %>')"></a>
+          <% End If %>
+          <div class="card-body">
+            <div class="eyebrow mb-2">Issue <%= homePreviewCount + 1 %></div>
+            <h3 class="post-title h4"><a href="<%= PostUrl(homePostItem.Slug) %>"><%= H(homePostItem.Title) %></a></h3>
+            <p class="post-subtitle mb-2"><%= H(homePostItem.Summary) %></p>
+            <div class="post-meta-inline">
+              <span>By BrainOrdure</span>
+              <% If Len(homePublishedText) > 0 Then %><span class="meta-sep">•</span><span><%= H(homePublishedText) %></span><% End If %>
+              <% If Len(homeReadTime) > 0 Then %><span class="meta-sep">•</span><span><%= H(homeReadTime) %></span><% End If %>
+            </div>
           </div>
-        <%
-        Loop
-        %>
+        </article>
+      <%
+      Loop
+      %>
+
+      <div class="clearfix mb-5">
+        <a class="btn btn-primary float-end" href="<%= PostsUrl() %>">View All Posts &rarr;</a>
       </div>
     <% End If %>
   </div>
 
   <div class="col-lg-4">
-    <div class="card shadow-sm mb-4">
-      <div class="card-body">
-        <div class="eyebrow mb-2">Sections</div>
-        <h2 class="h5 mb-3">Browse the paper</h2>
-        <% If categories.Count = 0 Then %>
-          <p class="text-muted mb-0">No categories are available yet.</p>
-        <% Else %>
-          <ul class="list-unstyled editorial-list mb-0">
-            <%
+    <aside class="story-aside">
+      <div class="card shadow-sm">
+        <div class="card-body">
+          <div class="magazine-label mb-3">Inside this issue</div>
+          <h2 class="h4">Browse by section</h2>
+          <div class="topic-chip-grid mt-3">
+            <% 
             Dim homeCategoryIter, homeCategoryItem
             Set homeCategoryIter = categories.Iterator()
-            Do While homeCategoryIter.HasNext
-              Set homeCategoryItem = homeCategoryIter.GetNext()
+            If categories.Count = 0 Then
             %>
-              <li class="mb-2">
-                <a href="<%= CategoryUrl(homeCategoryItem.CategoryID) %>" class="text-decoration-none d-flex justify-content-between align-items-center">
-                  <span><%= H(homeCategoryItem.Name) %></span>
-                  <i class="bi bi-arrow-right-short"></i>
-                </a>
-              </li>
+              <span class="text-muted small">No categories yet.</span>
             <%
-            Loop
+            Else
+              Do While homeCategoryIter.HasNext
+                Set homeCategoryItem = homeCategoryIter.GetNext()
             %>
-          </ul>
-        <% End If %>
+              <a class="topic-chip" href="<%= CategoryUrl(homeCategoryItem.CategoryID) %>"><%= H(homeCategoryItem.Name) %></a>
+            <%
+              Loop
+            End If
+            %>
+          </div>
+        </div>
       </div>
-    </div>
 
-    <div class="card shadow-sm">
-      <div class="card-body">
-        <div class="eyebrow mb-2">Reader note</div>
-        <h2 class="h5 mb-3">Why it feels different</h2>
-        <p class="text-muted mb-0">The layout now leans into a front-page magazine structure with a feature story, supporting briefs, and a quieter sidebar for section navigation.</p>
+      <div class="card shadow-sm">
+        <div class="card-body">
+          <div class="magazine-label mb-3">About</div>
+          <p class="mb-0 text-muted">BrainOrdure is now styled like a modern editorial blog with cleaner reading flow, stronger story hierarchy, and better navigation.</p>
+        </div>
       </div>
-    </div>
+    </aside>
   </div>
 </div>