Add announcements: blog-wide notices on every page and post

A blog can have any number of announcements ("sections" in the schema):
a book club's next meeting, this month's pick, a holiday closure. Each
has a placement (above or below the posts, or under the menu when the
menu is a left sidebar), a look (highlighted, warning, plain), an order,
and an on/off switch so recurring notices can be kept around while hidden.

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

5 files changed, 72 insertions, 2 deletions

diff --git a/internal/web/templates/dashboard/overview.html b/internal/web/templates/dashboard/overview.html
index 0ec72e6..fbe49f9 100644
--- a/internal/web/templates/dashboard/overview.html
+++ b/internal/web/templates/dashboard/overview.html
@@ -7,7 +7,7 @@
   <div class="card">
     <h2>Quick actions</h2>
     <p><a class="btn" href="/b/{{.Blog.Subdomain}}/posts/new">Write a new post</a></p>
-    <p><a href="/b/{{.Blog.Subdomain}}/pages/new">Add a page</a> &middot; <a href="/b/{{.Blog.Subdomain}}/design">Change the look</a> &middot; <a href="/b/{{.Blog.Subdomain}}/images">Upload images</a></p>
+    <p><a href="/b/{{.Blog.Subdomain}}/pages/new">Add a page</a> &middot; <a href="/b/{{.Blog.Subdomain}}/announcements/new">Post an announcement</a> &middot; <a href="/b/{{.Blog.Subdomain}}/design">Change the look</a> &middot; <a href="/b/{{.Blog.Subdomain}}/images">Upload images</a></p>
   </div>
   <div class="card">
     <h2>Pages</h2>
diff --git a/internal/web/templates/dashboard/section_form.html b/internal/web/templates/dashboard/section_form.html
new file mode 100644
index 0000000..9d4529c
--- /dev/null
+++ b/internal/web/templates/dashboard/section_form.html
@@ -0,0 +1,32 @@
+{{define "title"}}{{if .Data.section.ID}}Edit announcement{{else}}New announcement{{end}} · {{.Blog.Title}}{{end}}
+{{define "content"}}
+{{$s := .Data.section}}
+<div class="card">
+  <h1>{{if $s.ID}}Edit announcement{{else}}New announcement{{end}}</h1>
+  <form method="post" enctype="multipart/form-data">
+    <input type="hidden" name="_csrf" value="{{.CSRF}}">
+    <label>Title <span class="muted">(optional)</span><br><input name="title" value="{{$s.Title}}" maxlength="120" autofocus placeholder="Next meeting"></label>
+    <div class="row">
+      <label>Where<br><select name="placement">
+        <option value="above"{{if eq $s.Placement "above"}} selected{{end}}>Above the posts</option>
+        <option value="below"{{if eq $s.Placement "below"}} selected{{end}}>Below the posts</option>
+        <option value="sidebar"{{if eq $s.Placement "sidebar"}} selected{{end}}>Sidebar, under the menu</option>
+      </select></label>
+      <label>Look<br><select name="style">
+        <option value="note"{{if eq $s.Style "note"}} selected{{end}}>Highlighted</option>
+        <option value="warning"{{if eq $s.Style "warning"}} selected{{end}}>Warning</option>
+        <option value="plain"{{if eq $s.Style "plain"}} selected{{end}}>Plain</option>
+      </select></label>
+    </div>
+    <p class="muted small">The sidebar spot only exists when the menu is a sidebar (see <a href="/b/{{.Blog.Subdomain}}/design">Design</a>); otherwise a sidebar announcement is shown above the posts.</p>
+    <label for="ed-body">Text <span class="muted">(Markdown)</span></label>
+    {{template "editor" (dict "name" "body" "value" $s.BodyMD "rows" 10 "tall" false "upload" (print "/b/" .Blog.Subdomain "/images/upload") "csrf" .CSRF)}}
+    <label class="check"><input type="checkbox" name="enabled"{{if $s.Enabled}} checked{{end}}> Shown on the blog</label>
+    <p class="actionrow">
+      <button type="submit">Save</button>
+      <a class="btn secondary" href="{{.BlogURL}}" target="_blank">View blog &#8599;</a>
+      <a href="/b/{{.Blog.Subdomain}}/announcements">Back to announcements</a>
+    </p>
+  </form>
+</div>
+{{end}}
diff --git a/internal/web/templates/dashboard/sections.html b/internal/web/templates/dashboard/sections.html
new file mode 100644
index 0000000..d2fade7
--- /dev/null
+++ b/internal/web/templates/dashboard/sections.html
@@ -0,0 +1,29 @@
+{{define "title"}}Announcements · {{.Blog.Title}}{{end}}
+{{define "content"}}
+{{$u := print "/b/" .Blog.Subdomain "/announcements"}}
+<div class="pagehead">
+  <h1>Announcements</h1>
+  <div class="actions"><a class="btn" href="{{$u}}/new">+ New announcement</a></div>
+  <p class="lead muted">Notices shown on every page and post of your blog — the next meeting, this month's book, a holiday closure. Hide one instead of deleting it if you will need it again.</p>
+</div>
+<div class="card">
+{{if .Data.sections}}
+<table>
+  <tr><th>Order</th><th>Announcement</th><th>Where</th><th>Look</th><th></th></tr>
+  {{range .Data.sections}}<tr{{if not .Enabled}} class="disabled"{{end}}>
+    <td class="nowrap">
+      <form method="post" action="{{$u}}/{{.ID}}/move" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="dir" value="up"><button class="mini" title="Move up">&#9650;</button></form>
+      <form method="post" action="{{$u}}/{{.ID}}/move" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="dir" value="down"><button class="mini" title="Move down">&#9660;</button></form>
+    </td>
+    <td><a href="{{$u}}/{{.ID}}/edit">{{if .Title}}{{.Title}}{{else}}(untitled){{end}}</a>{{if not .Enabled}}<span class="tag off">hidden</span>{{end}}</td>
+    <td>{{if eq .Placement "above"}}Above the posts{{else if eq .Placement "below"}}Below the posts{{else}}Sidebar{{end}}</td>
+    <td>{{if eq .Style "note"}}Highlighted{{else if eq .Style "warning"}}Warning{{else}}Plain{{end}}</td>
+    <td class="nowrap">
+      <form method="post" action="{{$u}}/{{.ID}}/toggle" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><button class="mini">{{if .Enabled}}Hide{{else}}Show{{end}}</button></form>
+      <a class="danger" href="{{$u}}/{{.ID}}/delete">delete</a>
+    </td>
+  </tr>{{end}}
+</table>
+{{else}}<p class="muted">No announcements yet. <a href="{{$u}}/new">Write the first one.</a></p>{{end}}
+</div>
+{{end}}
diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html
index 7e3128e..ac6595b 100644
--- a/internal/web/templates/layouts/blog.html
+++ b/internal/web/templates/layouts/blog.html
@@ -19,9 +19,11 @@
 </div>
 {{if eq .Data.theme.NavPosition "below-header"}}{{template "blognav" .}}{{end}}
 <div class="wrap body-wrap">
-  {{if eq .Data.theme.NavPosition "left-sidebar"}}{{template "blognav" .}}{{end}}
+  {{if eq .Data.theme.NavPosition "left-sidebar"}}{{template "blognav" .}}{{if .Data.sidebar}}<div class="sidebar-notices">{{template "notices" .Data.sidebar}}</div>{{end}}{{end}}
   <div class="content">
+  {{template "notices" .Data.above}}
   {{template "content" .}}
+  {{template "notices" .Data.below}}
   </div>
 </div>
 <div class="site-footer">
@@ -33,6 +35,12 @@
 </body>
 </html>{{end}}
 
+{{define "notices"}}{{range .}}<aside class="notice notice-{{.Style}}">
+  {{if .Title}}<h3 class="notice-title">{{.Title}}</h3>{{end}}
+  <div class="notice-body">{{html .BodyHTML}}</div>
+</aside>
+{{end}}{{end}}
+
 {{define "blognav"}}<div class="site-nav"><div class="wrap nav-inner">
 {{range .Data.nav}}<a href="{{if .IsHome}}/{{else}}/{{.Slug}}{{end}}"{{if and $.Data.page (eq $.Data.page.ID .ID)}} class="active"{{end}}>{{.Title}}</a>
 {{end}}</div></div>{{end}}
diff --git a/internal/web/templates/partials/dashnav.html b/internal/web/templates/partials/dashnav.html
index 44e518e..f54cb2d 100644
--- a/internal/web/templates/partials/dashnav.html
+++ b/internal/web/templates/partials/dashnav.html
@@ -20,6 +20,7 @@
     <a href="{{$b}}"{{if eq .Path $b}} class="active"{{end}}>Overview</a>
     <a href="{{$b}}posts"{{if hasPrefix .Path (print $b "posts")}} class="active"{{end}}>Posts</a>
     <a href="{{$b}}pages"{{if hasPrefix .Path (print $b "pages")}} class="active"{{end}}>Pages</a>
+    <a href="{{$b}}announcements"{{if hasPrefix .Path (print $b "announcements")}} class="active"{{end}}>Announcements</a>
     <a href="{{$b}}design"{{if hasPrefix .Path (print $b "design")}} class="active"{{end}}>Design</a>
     <a href="{{$b}}images"{{if hasPrefix .Path (print $b "images")}} class="active"{{end}}>Images</a>
     <a href="{{$b}}settings"{{if hasPrefix .Path (print $b "settings")}} class="active"{{end}}>Settings</a>