Add post summaries, featured images and a page outro

Recreating gizmolab.net as a blog showed three things the design system
could not express, all of them ordinary blog features:

- Listings can show a summary and a "Read more" link instead of the whole
  post (theme.list_style). The summary is the source up to <!--more-->;
  without the marker a Markdown post is cut at a block boundary after 70
  words (never inside a code fence) and an HTML post is shown whole, since
  cutting hand-written markup blind would leave tags open. Computed at
  render time (Post.Excerpt/HasMore), nothing new is stored.
- A post can carry a featured image (posts.image, a library file that is
  unset when the file is deleted): a thumbnail floated beside the entry on
  listings, and on the post page above or below the text, or not at all,
  as theme.post_image says. The picker is the design page's imagepick; its
  library panel moves out of design.html into partials/imagelib.html so
  both forms share it — which also removes a stale pickAction call the
  design form's click handler would have hit.
- A page can have a closing text after its posts (pages.outro_md/html), in
  the intro's format: the per-page counterpart of the blog-wide "after the
  posts" module, for a home page that ends in a site map or a widget. The
  editor partial takes formatof to share another editor's Format row, and
  its upload field is now <name>_file so two editors fit in one form.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

3 files changed, 19 insertions, 61 deletions

diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 261eb69..71597e8 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -181,6 +181,18 @@
       {{range .Data.perPage}}<option value="{{.}}"{{if eq . $t.PostsPerPage}} selected{{end}}>{{.}}</option>{{end}}
     </select></label>
   </div>
+  <div class="row">
+    <label>{{t "On listings show"}}<br><select name="list_style">
+      <option value="full"{{if eq $t.ListStyle "full"}} selected{{end}}>{{t "The whole post"}}</option>
+      <option value="summary"{{if eq $t.ListStyle "summary"}} selected{{end}}>{{t "A summary and a “Read more” link"}}</option>
+    </select></label>
+    <label>{{t "Featured image on the post page"}}<br><select name="post_image">
+      <option value="top"{{if eq $t.PostImage "top"}} selected{{end}}>{{t "Above the text"}}</option>
+      <option value="bottom"{{if eq $t.PostImage "bottom"}} selected{{end}}>{{t "Below the text"}}</option>
+      <option value="list"{{if eq $t.PostImage "list"}} selected{{end}}>{{t "Only on listings"}}</option>
+    </select></label>
+  </div>
+  <p class="muted small">{{t "A summary is the post up to a line with <!--more-->, or its first paragraphs. A post's featured image is picked on the post form and shown as a thumbnail on listings."}}</p>
   <h3>{{t "Around the posts"}}</h3>
   <p class="muted small">{{t "Your own HTML before and after the posts — an intro box, a newsletter form, a badge…"}}</p>
   {{template "arealist" (dict "area" "above" "root" .)}}
@@ -260,19 +272,8 @@
 </details>
 </div>
 
-{{/* The library panel: filled by the script from /files?kind=image as JSON, one page at a time. */}}
-<div class="picker" id="picker" hidden>
-  <div class="picker-box">
-    <div class="picker-head">
-      <input type="search" placeholder="{{t "Filter by name…"}}" aria-label="{{t "Filter by name…"}}">
-      <span class="muted small pcount">{{tf "%d images" .Data.imageCount}}</span>
-      <button type="button" class="secondary small" data-pick="close">{{t "Close"}}</button>
-    </div>
-    <div class="picks"></div>
-    <p class="muted small pnone" hidden>{{t "No images match."}}</p>
-    <div class="pager"><button type="button" class="mini" data-pick="prev">&larr; {{t "Newer"}}</button> <span class="pnum"></span> <button type="button" class="mini" data-pick="next">{{t "Older"}} &rarr;</button></div>
-  </div>
-</div>
+{{/* The library panel behind the image pickers (partials/imagelib.html). */}}
+{{template "imagelib" (dict "sub" $sub "count" .Data.imageCount)}}
 
 <script>
 (function () {
@@ -303,7 +304,7 @@
     return row;
   }
   form.addEventListener("click", function (e) {
-    var b = e.target.closest("[data-act],[data-menu],[data-pick],.preset");
+    var b = e.target.closest("[data-act],[data-menu],.preset"); // the image pickers are imagelib's
     if (!b) return;
     var row = b.closest(".modrow"), list = row && row.parentNode;
     switch (b.getAttribute("data-act")) {
@@ -336,7 +337,6 @@
       q("[name=link_hover_custom]").checked = q("[name=nav_hover_custom]").checked = false;
       touch(); return;
     }
-    pickAction(b);
   });
   form.addEventListener("change", function (e) {
     var t = e.target;
@@ -379,52 +379,6 @@
     q("[name=at]").value = section(); // so the page comes back to the section in view
   });
 
-  // ---- the image library panel: one shared panel, fetched page by page
-  var panel = document.getElementById("picker"), pick = null, page = 1, filter = "", timer;
-  if (!window.fetch) { qa(".imagepick .jsonly").forEach(function (el) { el.hidden = true; }); qa(".imagepick select").forEach(function (el) { el.className = ""; }); return; }
-  function pickAction(b) {
-    var act = b.getAttribute("data-pick"), ip = b.closest(".imagepick");
-    if (act === "open") { pick = ip; panel.hidden = false; q("input", panel).value = filter = ""; load(1); q("input", panel).focus(); }
-    else if (act === "clear") { choose(ip, "none", ""); }
-  }
-  panel.addEventListener("click", function (e) {
-    var b = e.target.closest("[data-pick],.pick");
-    if (!b) return;
-    if (b.className.indexOf("pick") === 0) { choose(pick, b.getAttribute("data-id"), b.getAttribute("data-name")); panel.hidden = true; return; }
-    switch (b.getAttribute("data-pick")) {
-      case "close": panel.hidden = true; break;
-      case "prev": load(page - 1); break;
-      case "next": load(page + 1); break;
-    }
-  });
-  panel.addEventListener("keydown", function (e) { if (e.key === "Escape") panel.hidden = true; });
-  q("input", panel).addEventListener("input", function () { clearTimeout(timer); timer = setTimeout(function () { filter = q("input", panel).value.trim(); load(1); }, 250); });
-  function load(n) {
-    var url = "/b/" + form.getAttribute("data-sub") + "/files?kind=image&p=" + n + (filter ? "&q=" + encodeURIComponent(filter) : "");
-    fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" }).then(function (r) { return r.json(); }).then(function (d) {
-      page = d.page;
-      var grid = q(".picks", panel); grid.innerHTML = "";
-      (d.files || []).forEach(function (f) {
-        var b = document.createElement("button"), img = document.createElement("img"), s = document.createElement("span");
-        b.type = "button"; b.className = "pick"; b.setAttribute("data-id", f.id); b.setAttribute("data-name", f.filename);
-        img.loading = "lazy"; img.src = "/b/" + form.getAttribute("data-sub") + "/media/" + f.id; img.alt = "";
-        s.className = "name"; s.textContent = f.filename;
-        b.appendChild(img); b.appendChild(s); grid.appendChild(b);
-      });
-      q(".pnone", panel).hidden = !!(d.files && d.files.length);
-      q(".pnum", panel).textContent = d.last > 1 ? d.page + " / " + d.last : "";
-      q("[data-pick=prev]", panel).disabled = d.page <= 1; q("[data-pick=next]", panel).disabled = d.page >= d.last;
-    });
-  }
-  function choose(ip, id, name) { // the select stays the value the form sends
-    var sel = q("select", ip), pv = q(".preview", ip), found = false;
-    for (var i = 0; i < sel.options.length; i++) if (sel.options[i].value === id) found = true;
-    if (!found) { var o = document.createElement("option"); o.value = id; o.textContent = name; sel.appendChild(o); }
-    sel.value = id;
-    pv.innerHTML = id === "none" ? '<span class="swatch">&times;</span>' : "";
-    if (id !== "none") { var img = document.createElement("img"); img.src = "/b/" + form.getAttribute("data-sub") + "/media/" + id; img.alt = ""; pv.appendChild(img); }
-    touch();
-  }
 })();
 </script>
 {{end}}
diff --git a/internal/web/templates/dashboard/page_form.html b/internal/web/templates/dashboard/page_form.html
index 4754c91..18b0a86 100644
--- a/internal/web/templates/dashboard/page_form.html
+++ b/internal/web/templates/dashboard/page_form.html
@@ -9,6 +9,8 @@
       <input name="slug" value="{{.Data.page.Slug}}" pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?" maxlength="80"></label>
     <label for="ed-intro">{{t "Intro text"}} <span class="muted">({{t "shown above the posts; optional"}})</span></label>
     {{template "editor" (dict "name" "intro" "value" .Data.page.IntroMD "format" .Data.page.Format "rows" 8 "tall" false "upload" (print "/b/" .Blog.Subdomain "/files/upload") "preview" (print "/b/" .Blog.Subdomain "/preview") "csrf" .CSRF)}}
+    <label for="ed-outro">{{t "Closing text"}} <span class="muted">({{t "shown after the posts, in the same format; optional"}})</span></label>
+    {{template "editor" (dict "name" "outro" "value" .Data.page.OutroMD "format" .Data.page.Format "formatof" "intro" "rows" 8 "tall" false "upload" (print "/b/" .Blog.Subdomain "/files/upload") "preview" (print "/b/" .Blog.Subdomain "/preview") "csrf" .CSRF)}}
     <label class="check"><input type="checkbox" name="show_in_nav"{{if .Data.page.ShowInNav}} checked{{end}}> {{t "Show in menu"}}</label>
     <p class="actionrow">
       <button type="submit">{{t "Save"}}</button>
diff --git a/internal/web/templates/dashboard/post_form.html b/internal/web/templates/dashboard/post_form.html
index 70cddcc..9bd7624 100644
--- a/internal/web/templates/dashboard/post_form.html
+++ b/internal/web/templates/dashboard/post_form.html
@@ -39,6 +39,7 @@
     </script>
     <label for="ed-body">{{t "Content"}}</label>
     {{template "editor" (dict "name" "body" "value" .Data.post.BodyMD "format" .Data.post.Format "rows" 24 "tall" true "upload" (print "/b/" .Blog.Subdomain "/files/upload") "preview" (print "/b/" .Blog.Subdomain "/preview") "csrf" .CSRF)}}
+    {{template "imagepick" (dict "name" "image" "current" .Data.post.Image "sub" .Blog.Subdomain "images" .Data.images "names" .Data.imageNames "label" (t "Featured image") "hint" (t "Optional. A thumbnail on listings, and on the post page where the Design tab puts it."))}}
     <label class="check"><input type="checkbox" name="published"{{if .Data.post.Published}} checked{{end}}> {{t "Visible on the blog"}}</label>
     <p class="actionrow">
       <button type="submit">{{t "Save"}}</button>
@@ -47,4 +48,5 @@
     </p>
   </form>
 </div>
+{{template "imagelib" (dict "sub" .Blog.Subdomain "count" .Data.imageCount)}}
 {{end}}