# TagKit

> Copy-paste page templates and snippets in plain semantic HTML. TagBrush.css styles them, TagAction makes them behave, and every one passes TagCheck (no errors or warnings, WCAG AA contrast in light and dark mode, no sideways scrolling on phones). Start a page from a template, or paste a snippet into a page, then replace the example content.

## How to use it

- Fetch the template or snippet from its URL below and copy it as it is. Change the words, links, numbers, and images; keep the elements and attributes.
- A template is a complete page with the TagBrush.css stylesheet and the TagAction script in `<head>`.
- A snippet goes inside `<main>` of a page that already has them, unless it is marked page-level, in which case it replaces or sits beside the page's own `<header>`, `<main>`, `<aside>`, or `<footer>` directly in `<body>`.
- Ids in a snippet (`orders-table`, `delete-project`, `account-menu`) must stay unique: rename them, and every attribute that points at them (`aria-controls`, `commandfor`), when you use a snippet twice.
- Don't add classes, wrapper `<div>`s, or CSS for layout. If something looks wrong, check the HTML against the TagBrush.css guide instead.
- Run `npx @kovirlabs/tagcheck page.html` when you are done.

## Build-time includes

Share a header, nav, and footer between static pages without a framework. In each page, put an include comment where the piece goes, and keep the pieces in a folder whose name starts with `_`:

```html
<body>
<!--#include file="_includes/header.html" -->
<main>…</main>
<!--#include virtual="/_includes/footer.html" -->
</body>
```

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.

## 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.
- [Jekyll theme](https://github.com/kovirlabs/tagkit-jekyll): a GitHub Pages site styled with one config line, `remote_theme: kovirlabs/tagkit-jekyll` (and `plugins: [jekyll-remote-theme]`). Layouts `home`, `page`, `post`; `toc: true` adds a table of contents. Guide: https://raw.githubusercontent.com/kovirlabs/tagkit-jekyll/main/llms.txt
- [MkDocs theme](https://github.com/kovirlabs/tagkit/tree/main/themes/mkdocs): `pip install "mkdocs-tagkit @ git+https://github.com/kovirlabs/tagkit#subdirectory=themes/mkdocs"`, then `theme: { name: tagkit }` in mkdocs.yml (options `primary_color`, `tagaction: false`). Site nav as a sidebar, a table of contents beside each page, previous/next links. No search yet.
- [Hugo theme](https://github.com/kovirlabs/tagkit/tree/main/themes/hugo): import the module `github.com/kovirlabs/tagkit/themes/hugo`, or `npx degit kovirlabs/tagkit/themes/hugo themes/tagkit` and `theme = "tagkit"`. A blog with a home page of post cards, `toc: true` for a table of contents, and `[params.tagkit]` for `primaryColor`, `dateFormat`, `tagaction`.
- [WordPress theme](https://github.com/kovirlabs/tagkit-wordpress): a block theme; upload the release zip in Appearance > Themes. The Site Editor's Primary color themes the whole site.

<!-- catalog:start (generated by scripts/build.mjs) -->

## Page templates

- [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
- [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
- [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
- [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
- [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.

## Snippets

- [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
- [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
- [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
- [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
- [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
- [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
- [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
- [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
- [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.
- [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.
- [Testimonials](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/testimonials.html): quotes from customers as cards.
- [User menu](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/user-menu.html): a top bar with a dropdown account menu. Without JavaScript the menu links simply show in the bar.

<!-- catalog:end -->

## Links

- [The Tag family](https://kovirlabs.github.io/tagstack/llms.txt): how TagBrush.css, TagAction, TagCheck, and TagKit fit together
- [Gallery](https://kovirlabs.github.io/tagkit/): every template and snippet with a preview
- [snippets.json](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets.json): the same catalog as data