Make the site more editorial

app/views/Home/index.asp

@@ -1,9 +1,153 @@
+<%
+Dim featuredPost, homePostIter, homePostItem, homeRecentCount
+homeRecentCount = 0
+Set homePostIter = posts.Iterator()
+If posts.Count > 0 Then
+  Set featuredPost = homePostIter.GetNext()
+End If
+%>
+
 <div class="hero mb-5">
-  <div class="eyebrow mb-3">The magazine</div>
-  <h1 class="display-5 fw-bold mb-3">BrainOrdure</h1>
-  <p class="lede mb-4">Thoughtful posts, clean categories, and a comment section that feels like the front page of a well-kept publication.</p>
-  <div class="d-flex flex-wrap gap-2">
-    <a href="<%= PostsUrl() %>" class="btn btn-primary px-4">Read Posts</a>
-    <a href="<%= CategoriesUrl() %>" class="btn btn-outline-secondary px-4">Browse Categories</a>
+  <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 %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row g-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>
+          <%
+          Dim featuredPublishedText
+          featuredPublishedText = ""
+          If IsDate(featuredPost.PublishedDate) Then
+            If CDate(featuredPost.PublishedDate) > #1/1/1970# Then
+              featuredPublishedText = FormatDateTime(featuredPost.PublishedDate, vbLongDate)
+            End If
+          End If
+          If Len(featuredPublishedText) > 0 Then
+          %>
+            <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>
+      </article>
+
+      <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>
+          </div>
+        <%
+        Loop
+        %>
+      </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">
+            <%
+            Dim homeCategoryIter, homeCategoryItem
+            Set homeCategoryIter = categories.Iterator()
+            Do While homeCategoryIter.HasNext
+              Set homeCategoryItem = homeCategoryIter.GetNext()
+            %>
+              <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>
+            <%
+            Loop
+            %>
+          </ul>
+        <% End If %>
+      </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>
+    </div>
   </div>
 </div>