Add a nonprofit starter site

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- A row-actions snippet (`snippets/row-confirm.html`): a button on each table row opens that row's own confirm dialog, which posts the row's action. One dialog per row works with no page script, and the Actions column stays unsortable. The orders agent in the family evaluation worked this out on its own; now it's a pattern to copy.
+- A nonprofit starter site (`starters/nonprofit/`): 13 pages for a small nonprofit, built with `tagkit build` from shared includes, with donation and volunteer forms for static hosts, sortable and filterable event and budget tables, a live gift total, dialogs, a popover, a remembered FAQ, and a GitHub Pages workflow that runs TagCheck before publishing. Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit`. Tests build it and check every page with TagCheck (including contrast and phone overflow), TagAction, links, and JavaScript off.
 - Tested with TagBrush.css 1.2.0.
 - The blog post template's lead photo opens in TagAction's viewer: its link now ends in `.jpg`, since TagAction only treats links to image files as photos. A test checks every linked photo. Found by the family agent evaluation.
 - The gallery (the GitHub Pages site) wears the Tag family brand: the family bar, the shared theme from kovirlabs.github.io/tagstack/brand.css, and a footer linking the family and the Jekyll and WordPress themes. The linked-photo test skips links that have text beside an image, like the family bar's.

README.md

@@ -12,6 +12,8 @@ TagKit is part of the Tag family. Its HTML is styled by [TagBrush.css](https://g
 
 **Snippets** (`snippets/`): hero, feature grid, pricing table, testimonials, FAQ, card grid, stat tiles, page header, data table, search bar, confirm dialog, user menu, contact form, callouts, sidebar layout, docs layout, footer columns. Each file starts with a comment that says what it is and where it goes. Most go inside `<main>`; ones marked `(body)` are page-level.
 
+**Starter sites** (`starters/`): a whole multi-page site to copy and make your own. The [nonprofit starter](starters/nonprofit/) has 13 pages (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404), with donation and volunteer forms that work on any static host, built with `tagkit build`, checked with TagCheck, and published to GitHub Pages by an included workflow: `npx degit kovirlabs/tagkit/starters/nonprofit my-site`.
+
 **Themes**: a [Pandoc template](themes/pandoc/) that turns Markdown, Word, or AI-written documents into a styled page with one command, a [Jekyll theme for GitHub Pages](https://github.com/kovirlabs/tagkit-jekyll) used with one config line (`remote_theme: kovirlabs/tagkit-jekyll`), an [MkDocs theme](themes/mkdocs/) for documentation sites, a [Hugo theme](themes/hugo/) for blogs and sites, and a [WordPress block theme](https://github.com/kovirlabs/tagkit-wordpress).
 
 ## Build-time includes

ai/AGENTS.md

@@ -27,6 +27,10 @@ Share a header, nav, and footer between static pages without a framework. In eac
 
 Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs TagCheck). `file="…"` is relative to the page and `virtual="/…"` to the site folder. Pages get their includes filled in; other files are copied; names starting with `_` are left out. Links to the page being built get `aria-current="page"`, and root links (`/about.html`) in included pieces become relative, so write links in shared pieces from the site root. Don't use JavaScript or iframes to include headers and footers.
 
+### Starter sites
+
+- [Nonprofit](https://github.com/kovirlabs/tagkit/tree/main/starters/nonprofit): a 13-page static site for a small nonprofit (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404). Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit my-site`, then `npm install && npm run build` (writes `public/` and runs TagCheck). Shared pieces are in `site/_includes/` (`head.html` holds the brand color). Forms post to a form service such as Formspree and the donate form goes to a payment link; search for `your-` to find the addresses to replace. Includes a GitHub Pages workflow. Guide: https://raw.githubusercontent.com/kovirlabs/tagkit/main/starters/nonprofit/README.md
+
 ### Themes
 
 - [Pandoc template](https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html): turn Markdown, Word, or any Pandoc input into a styled page: `pandoc notes.md --standalone --toc --template https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html -o notes.html`. Front matter `primary-color` sets the brand color; `no-tagaction: true` leaves out the script. Add `--mathjax` for equations.
@@ -60,6 +64,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
 - [Stat tiles](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/stat-tiles.html): a row of key numbers with a change for each. A <dl> whose items are wrapped in <div>s becomes tiles.

ai/claude/tagkit/SKILL.md

@@ -32,6 +32,10 @@ Share a header, nav, and footer between static pages without a framework. In eac
 
 Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs TagCheck). `file="…"` is relative to the page and `virtual="/…"` to the site folder. Pages get their includes filled in; other files are copied; names starting with `_` are left out. Links to the page being built get `aria-current="page"`, and root links (`/about.html`) in included pieces become relative, so write links in shared pieces from the site root. Don't use JavaScript or iframes to include headers and footers.
 
+## Starter sites
+
+- [Nonprofit](https://github.com/kovirlabs/tagkit/tree/main/starters/nonprofit): a 13-page static site for a small nonprofit (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404). Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit my-site`, then `npm install && npm run build` (writes `public/` and runs TagCheck). Shared pieces are in `site/_includes/` (`head.html` holds the brand color). Forms post to a form service such as Formspree and the donate form goes to a payment link; search for `your-` to find the addresses to replace. Includes a GitHub Pages workflow. Guide: https://raw.githubusercontent.com/kovirlabs/tagkit/main/starters/nonprofit/README.md
+
 ## Themes
 
 - [Pandoc template](https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html): turn Markdown, Word, or any Pandoc input into a styled page: `pandoc notes.md --standalone --toc --template https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html -o notes.html`. Front matter `primary-color` sets the brand color; `no-tagaction: true` leaves out the script. Add `--mathjax` for equations.
@@ -65,6 +69,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
 - [Stat tiles](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/stat-tiles.html): a row of key numbers with a change for each. A <dl> whose items are wrapped in <div>s becomes tiles.

ai/cursor/tagkit.mdc

@@ -33,6 +33,10 @@ Share a header, nav, and footer between static pages without a framework. In eac
 
 Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs TagCheck). `file="…"` is relative to the page and `virtual="/…"` to the site folder. Pages get their includes filled in; other files are copied; names starting with `_` are left out. Links to the page being built get `aria-current="page"`, and root links (`/about.html`) in included pieces become relative, so write links in shared pieces from the site root. Don't use JavaScript or iframes to include headers and footers.
 
+## Starter sites
+
+- [Nonprofit](https://github.com/kovirlabs/tagkit/tree/main/starters/nonprofit): a 13-page static site for a small nonprofit (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404). Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit my-site`, then `npm install && npm run build` (writes `public/` and runs TagCheck). Shared pieces are in `site/_includes/` (`head.html` holds the brand color). Forms post to a form service such as Formspree and the donate form goes to a payment link; search for `your-` to find the addresses to replace. Includes a GitHub Pages workflow. Guide: https://raw.githubusercontent.com/kovirlabs/tagkit/main/starters/nonprofit/README.md
+
 ## Themes
 
 - [Pandoc template](https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html): turn Markdown, Word, or any Pandoc input into a styled page: `pandoc notes.md --standalone --toc --template https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html -o notes.html`. Front matter `primary-color` sets the brand color; `no-tagaction: true` leaves out the script. Add `--mathjax` for equations.
@@ -66,6 +70,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
 - [Stat tiles](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/stat-tiles.html): a row of key numbers with a change for each. A <dl> whose items are wrapped in <div>s becomes tiles.

index.html

@@ -297,6 +297,48 @@ <h3 id="pricing">Pricing table</h3>
     &lt;footer&gt;&lt;a class="button outline" href="/contact"&gt;Talk to us&lt;/a&gt;&lt;/footer&gt;
   &lt;/article&gt;
 &lt;/section&gt;</code></pre>
+    <h3 id="row-confirm">Row actions with a confirm dialog</h3>
+    <p>each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable. <a href="preview/row-confirm.html">Preview the row actions with a confirm dialog</a>.</p>
+    <pre><code>&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Invoice&lt;/th&gt;&lt;th&gt;Client&lt;/th&gt;&lt;th&gt;Amount&lt;/th&gt;&lt;th data-tagaction="off"&gt;Actions&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;td&gt;&lt;a href="/invoices/1042"&gt;#1042&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Harbor Bakery&lt;/td&gt;&lt;td&gt;&lt;data value="420"&gt;$420.00&lt;/data&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="secondary" commandfor="void-1042" command="show-modal" aria-label="Void invoice #1042"&gt;Void&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;&lt;a href="/invoices/1041"&gt;#1041&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Lumen Studio&lt;/td&gt;&lt;td&gt;&lt;data value="1250"&gt;$1,250.00&lt;/data&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="secondary" commandfor="void-1041" command="show-modal" aria-label="Void invoice #1041"&gt;Void&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;&lt;a href="/invoices/1040"&gt;#1040&lt;/a&gt;&lt;/td&gt;&lt;td&gt;North Fork Farm&lt;/td&gt;&lt;td&gt;&lt;data value="86.5"&gt;$86.50&lt;/data&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="secondary" commandfor="void-1040" command="show-modal" aria-label="Void invoice #1040"&gt;Void&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;dialog id="void-1042"&gt;
+  &lt;form method="post" action="/invoices/1042/void"&gt;
+    &lt;h2&gt;Void invoice #1042?&lt;/h2&gt;
+    &lt;p&gt;Harbor Bakery won't be able to pay it. This can't be undone.&lt;/p&gt;
+    &lt;footer&gt;
+      &lt;button type="button" class="secondary" commandfor="void-1042" command="close"&gt;Cancel&lt;/button&gt;
+      &lt;button&gt;Void invoice&lt;/button&gt;
+    &lt;/footer&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+&lt;dialog id="void-1041"&gt;
+  &lt;form method="post" action="/invoices/1041/void"&gt;
+    &lt;h2&gt;Void invoice #1041?&lt;/h2&gt;
+    &lt;p&gt;Lumen Studio won't be able to pay it. This can't be undone.&lt;/p&gt;
+    &lt;footer&gt;
+      &lt;button type="button" class="secondary" commandfor="void-1041" command="close"&gt;Cancel&lt;/button&gt;
+      &lt;button&gt;Void invoice&lt;/button&gt;
+    &lt;/footer&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+&lt;dialog id="void-1040"&gt;
+  &lt;form method="post" action="/invoices/1040/void"&gt;
+    &lt;h2&gt;Void invoice #1040?&lt;/h2&gt;
+    &lt;p&gt;North Fork Farm won't be able to pay it. This can't be undone.&lt;/p&gt;
+    &lt;footer&gt;
+      &lt;button type="button" class="secondary" commandfor="void-1040" command="close"&gt;Cancel&lt;/button&gt;
+      &lt;button&gt;Void invoice&lt;/button&gt;
+    &lt;/footer&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;</code></pre>
     <h3 id="search-bar">Search bar</h3>
     <p>a search field with filters and a button in one row, sent to the server as a GET form. <a href="preview/search-bar.html">Preview the search bar</a>.</p>
     <pre><code>&lt;form action="/users" method="get"&gt;

llms.txt

@@ -25,6 +25,10 @@ Share a header, nav, and footer between static pages without a framework. In eac
 
 Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs TagCheck). `file="…"` is relative to the page and `virtual="/…"` to the site folder. Pages get their includes filled in; other files are copied; names starting with `_` are left out. Links to the page being built get `aria-current="page"`, and root links (`/about.html`) in included pieces become relative, so write links in shared pieces from the site root. Don't use JavaScript or iframes to include headers and footers.
 
+## Starter sites
+
+- [Nonprofit](https://github.com/kovirlabs/tagkit/tree/main/starters/nonprofit): a 13-page static site for a small nonprofit (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404). Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit my-site`, then `npm install && npm run build` (writes `public/` and runs TagCheck). Shared pieces are in `site/_includes/` (`head.html` holds the brand color). Forms post to a form service such as Formspree and the donate form goes to a payment link; search for `your-` to find the addresses to replace. Includes a GitHub Pages workflow. Guide: https://raw.githubusercontent.com/kovirlabs/tagkit/main/starters/nonprofit/README.md
+
 ## Themes
 
 - [Pandoc template](https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html): turn Markdown, Word, or any Pandoc input into a styled page: `pandoc notes.md --standalone --toc --template https://raw.githubusercontent.com/kovirlabs/tagkit/main/themes/pandoc/template.html -o notes.html`. Front matter `primary-color` sets the brand color; `no-tagaction: true` leaves out the script. Add `--mathjax` for equations.
@@ -58,6 +62,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.
 - [Stat tiles](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/stat-tiles.html): a row of key numbers with a change for each. A <dl> whose items are wrapped in <div>s becomes tiles.