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

3 files changed, 62 insertions, 1 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}}