From d0601f06c080a8eb8d781fdd0e3338cd7ed42690 Mon Sep 17 00:00:00 2001
From: grm <grm@eyesin.space>
Date: Thu, 17 Sep 2026 16:42:15 +0300
Subject: Add post summaries, featured images and a page outro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 internal/web/static/blog.css      | 11 +++++++++++
 internal/web/static/dashboard.css |  1 +
 2 files changed, 12 insertions(+)

(limited to 'internal/web/static')

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 4fd7b76..ace5e5a 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -18,11 +18,21 @@ img { max-width: 100%; height: auto; }
 .content { padding: 1.5em 2em; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
 .page-title { margin-top: 0; }
 .intro { padding-bottom: 1em; margin-bottom: 1.5em; border-bottom: 1px solid rgba(0,0,0,0.1); }
+.outro { padding-top: 1em; margin-top: 1.5em; border-top: 1px solid rgba(0,0,0,0.1); }
 .post { margin-bottom: 2.5em; }
 .post-title { margin: 0 0 0.1em; font-size: 1.5em; line-height: 1.25; }
 .post-title a { text-decoration: none; }
 .post-title a:hover { text-decoration: underline; }
 .post-date { margin: 0 0 0.8em; font-size: 0.85em; opacity: 0.7; }
+/* featured image: a thumbnail floated beside the listing entry, full width on the post page */
+.post-thumb { float: right; width: 30%; max-width: 250px; margin: 0.3em 0 0.5em 1.5em; }
+.post-thumb img { display: block; width: 100%; }
+.post.has-thumb { overflow: hidden; }
+.post-image { margin: 0 0 1em; }
+.post-image img { display: block; max-width: 100%; margin: 0 auto; }
+.read-more { margin: 0.3em 0 0; font-weight: bold; }
+.read-more a { text-decoration: none; }
+.read-more a:hover { text-decoration: underline; }
 .post.single .post-title { font-size: 2em; }
 .post-body blockquote { margin: 1em 0; padding: 0.2em 1em; border-left: 4px solid rgba(0,0,0,0.15); opacity: 0.9; }
 .post-body pre { overflow-x: auto; padding: 0.8em 1em; background: rgba(0,0,0,0.06); border-radius: 4px; }
@@ -102,6 +112,7 @@ img { max-width: 100%; height: auto; }
 .col .notice { font-size: 0.9em; padding: 0.6em 0.8em; }
 @media (max-width: 700px) {
   .content { padding: 1em; }
+  .post-thumb { width: 40%; margin-left: 1em; }
   .site-title { font-size: 1.5em; }
   .cols { display: block; }
   .col-left, .col-right { padding: 0; margin-top: 1.5em; }
diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css
index 32561bf..f5e0fd4 100644
--- a/internal/web/static/dashboard.css
+++ b/internal/web/static/dashboard.css
@@ -208,6 +208,7 @@ table.files .copy { width: 100%; min-width: 11em; padding: 0.3em 0.4em; margin:
 /* what only makes sense with, or without, the script */
 form.js .nojs { display: none !important; }
 form:not(.js) .jsonly { display: none !important; }
+.imagepick.js .ip-nojs, .imagepick:not(.js) .ip-jsonly { display: none !important; }
 .presets { display: flex; flex-wrap: wrap; gap: 0.8em; }
 .presets .preset { width: 8.5em; margin: 0; padding: 0.55em 0.45em; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 500; text-align: center; }
 .presets .preset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
-- 
cgit v1.2.3