Fix up some of the markup, add post ledes to index

assets/css/style.css

@@ -711,3 +711,14 @@ div.homepage {
   grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
   grid-gap: 3em;
 }
+
+ul.posts {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+div.post_summary {
+  margin-bottom: 1em;
+  padding: 0.5rem;
+}

lib/jol/blog/post.ex

@@ -1,8 +1,25 @@
 defmodule JOL.Blog.Post do
-  @enforce_keys [:author, :title, :body, :tags, :date, :slug]
+  @enforce_keys [:author, :title, :body, :tags, :date, :slug, :lede]
-  defstruct [:author, :draft, :title, :body, :tags, :date, :slug]
+  defstruct [:author, :draft, :title, :body, :tags, :date, :slug, :lede]
 
   def build(_filename, attrs, body) do
-    struct!(__MODULE__, [author: "Jessica Phoenix Canady", body: body] ++ Map.to_list(attrs))
+    struct!(
+      __MODULE__,
+      [author: "Jessica Phoenix Canady", body: body, lede: extract_lede(body)] ++
+        Map.to_list(attrs)
+    )
+  end
+
+  defp extract_lede(text) do
+    case Regex.named_captures(~r/(?<lede>.*)\n<!-- more -->/s, text) do
+      %{"lede" => lede} ->
+        lede
+
+      _ ->
+        text
+        |> String.split()
+        |> Enum.take(50)
+        |> Enum.join(" ")
+    end
   end
 end

lib/jol_web/components/layouts/app.html.heex

@@ -14,9 +14,9 @@
 
     <nav class="menu">
       <ul class="menu__inner">
-        <li class="active"><a href="">home</a></li>
+        <li class="active"><a href={~p"/"}>home</a></li>
         <li><a href={~p"/tags/"}>tags</a></li>
-        <li><a href={~p"/archive/"}>blog archive</a></li>
+        <li><a href={~p"/blog/"}>blog archive</a></li>
         <li><a href={~p"/about/"}>about</a></li>
         <li><a href={~p"/now/"}>now</a></li>
         <li><a href="https://forge.sigill.zone/phoenix/">code</a></li>
@@ -27,8 +27,10 @@
   </header>
 
   <div class="content">
+    <div class="post">
       <%= @inner_content %>
     </div>
+  </div>
 
   <footer class="footer">
     <div class="footer__inner">

lib/jol_web/controllers/blog_html/index.heex

@@ -1,7 +1,9 @@
-<h1>The Blog</h1>
+<h1 class="post-title">Post Archive</h1>
 
-<ul>
 <%= for post <- @posts do %>
-    <li><.link href={~p"/blog/#{post.slug}"}><%= post.title %></.link></li>
+    <div class="post-summary">
+        <p class="post-date"><date><%= post.date %></date></p>
+        <h3> <.link href={~p"/blog/#{post.slug}"}><%= post.title %> </.link> </h3>
+        <p><%= raw post.lede %></p>
+    </div>
 <% end %>
-</ul>

lib/jol_web/controllers/page_html/tags.html.heex

@@ -3,7 +3,7 @@
     <ul>
         <%= for tag <- @tags do %>
             <li class="tag-list">
-                <a href="#"><%= tag %></a>
+                <a href={~p"/tags/#{tag}"}><%= tag %></a>
             </li>
         <% end %>
     </ul>