Getting posts and blog index looking better

site/_layouts/post.html

@@ -1,15 +1,22 @@
 ---
 layout: default
+body-class: post-page
 ---
 <article class="post">
-  <header>
-    <h1 class="page-title post-title">$title$</h1>
-    <p class="published">
-      Posted on $date$
-      $if(author)$
-      by $author$
-      $endif$
-    </p>
+  <header class="post-header">
+    <h1 class="post-title page-title"><a href="$url$">$title$</a></h1>
+    <div class="post-published">
+      <p>
+        $if(published)$
+          Posted on $published(shortDate)$
+        $else$
+          Drafted on $date(shortDate)$
+        $endif$
+        $if(author)$
+          by $author$
+        $endif$
+      </p>
+    </div>
   </header>
   $body$
 </article>

site/_partials/teaser-list.html

@@ -1,15 +1,21 @@
 <section class="teaser-list">
-  <h1>Recently Mowed Lawns</h1>
+  <h1>Latest Blog Posts</h1>
   $for(recentPosts)$
   <section class="teaser-item post">
     <header class="post-header">
       <h2 class="post-title"><a href="$url$">$title$</a></h2>
-      <p class="post-published">
-        Posted on $published$
-        $if(author)$
-        by $author$
-        $endif$
-      </p>
+      <div class="post-published">
+        <p>
+          $if(published)$
+            Posted on $published(shortDate)$
+          $else$
+            Drafted on $date(shortDate)$
+          $endif$
+          $if(author)$
+            by $author$
+          $endif$
+        </p>
+      </div>
     </header>
     $if(teaser)$$teaser$$endif$
     <p class="read-more"><a href="$url$">Read more...</a></p>

site/blog/index.html

@@ -1,6 +1,32 @@
 ---
-layout: page
-updated: 2021-05-24T20:07:11-05:00
+layout: default
+title: "Blogging About Life and Tech"
+updated: $latestPostDate$
+body-class: blog
 ---
-$latestPost$
+
+<header>
+  <h1 class="page-title">$title$ -- Latest Posts</h1>
+</header>
+
+<article class="post latest-post">
+  <header class="post-header">
+    <h1 class="post-title"><a href="$latestPostUrl$">$latestPostTitle$</a></h1>
+    <div class="post-published">
+      <p>
+        This latest post
+        $if(latestPostPublished)$
+          published on $latestPostPublished$
+        $else$
+          drafted on $latestPostDate$
+        $endif$
+        $if(latestPostAuthor)$
+          by $latestPostAuthor$
+        $endif$
+      </p>
+    </div>
+  </header>
+  $latestPostBody$
+</article>
+
 $partial("_partials/teaser-list.html")$

site/css/_theme.scss

@@ -6,7 +6,6 @@
 @import "elements/headers";
 @import "elements/asides";
 @import "elements/code";
-@import "elements/teaser-list";
 @import "layout/header";
 @import "layout/main";
 @import "layout/footer";

site/css/_variables.scss

@@ -9,6 +9,7 @@ $code-font-size: 80%; // because JetBrains Mono runs a bit big
 $color-green: darkgreen;
 $color-green-light: lighten($color-green, 78%);
 $color-text: darkslategray;
+$color-text-light: slategray;
 $color-text-em: $color-green;
 $color-highlight: yellow;
 $color-hover: lemonchiffon;

site/css/elements/_teaser-list.scss

@@ -1,21 +0,0 @@
-.teaser-list {
-  .post-title {
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem;
-  }
-  .teaser-item {
-    > *:nth-last-child(2) {
-      margin-bottom: 0.5rem;
-    }
-  }
-  .teaser-item + .teaser-item {
-    border-top: $border-thin;
-  }
-  header + * {
-    margin-top: 0.5rem;
-  }
-  .read-more {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-}

site/css/layout/_post.scss

@@ -1,19 +1,50 @@
-.post {
+.blog {
   .page-title {
+    color: $color-text-light;
+    font-style: italic;
+    font-weight: normal;
     margin-bottom: 0;
   }
+}
 
+.post {
   .post-header {
     .post-title {
       margin: 0.5rem 0 0;
       padding: 0;
+
+      &.page-title {
+        margin-bottom: 0.5rem;
+      }
     }
 
-    .post-published {
+    div.post-published p {
       margin: 0 0 0.5rem;
       font-size: 0.9rem;
       font-style: italic;
-      color: slategrey;
+      color: $color-text-light;
+    }
+  }
+}
+
+.teaser-list {
+  .post-title {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+  }
+  .teaser-item {
+    > *:nth-last-child(2) {
+      margin-bottom: 0.5rem;
     }
   }
+  .teaser-item + .teaser-item {
+    border-top: $border-thin;
+  }
+  header + * {
+    margin-top: 0.5rem;
+  }
+  .read-more {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
 }

src/Green/Context/DateFields.hs

@@ -16,7 +16,7 @@ dateFields config =
     displayFormat = config ^. siteDisplayFormat
     longDateFormat = displayFormat ^. displayDateLongFormat
     shortDateFormatField = constField "shortDate" $ displayFormat ^. displayDateShortFormat
-    timeFormatField = constField "timeFormat" $ displayFormat ^. displayTimeFormat
+    timeFormatField = constField "timeOnly" $ displayFormat ^. displayTimeFormat
     fields = uncurry mkFields <$> fieldKeys
     mkFields f k = f longDateFormat timeLocale k
     fieldKeys =

src/Green/Rule/Blog.hs

@@ -148,14 +148,29 @@ draftArchivesCompiler config = do
 
 buildBlogContext :: Item String -> [Item String] -> Context String -> Compiler (Context String)
 buildBlogContext latestPost recentPosts siteContext' = do
-  latestPostTitle <- unContextString siteContext' "title" [] latestPost
-  return $
-    mconcat
-      [ constField "title" ("Most Recently Mowed: " ++ latestPostTitle),
-        constField "latestPost" (itemBody latestPost),
-        recentPostsField,
-        siteContext'
+  -- TODO find a less sucky way to get this info
+  let f k = unContextString siteContext' k [] latestPost
+  [published, date, title, author, url] <-
+    mapM
+      f
+      [ "published",
+        "date",
+        "title",
+        "author",
+        "url"
       ]
+
+  let latestPostFields =
+        uncurry constField
+          <$> [ ("latestPostPublished", published),
+                ("latestPostDate", date),
+                ("latestPostTitle", title),
+                ("latestPostAuthor", author),
+                ("latestPostUrl", url),
+                ("latestPostBody", itemBody latestPost)
+              ]
+
+  return $ mconcat latestPostFields <> recentPostsField <> siteContext'
   where
     recentPostsField =
       listField