CLAUDE.md

# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. ## Commands ```bash # Install dependencies bundle install # Serve locally with live reload jbundle ``` ## Testing Use `playwright-cli` for browser-based testing. Save screenshots to `.screenshot-tests/` (gitignored): ```bash playwright-cli screenshot --filename=.screenshot-tests/page.png ``` ## Architecture This is a **Jekyll 3.9** static site deployed to GitHub Pages at vivqu.com. ### Content types - **Blog posts**: Markdown files in `_posts/` with frontmatter fields: `title`, `published`, `tags`, `read_time`, `seo_description`, `source` (bool for external source posts), `subtitle` - **Tags**: Each tag has a corresponding file in `_tags/` and a URL at `/tags//` - **Books**: Custom section under `books/` with sub-pages (e.g. `books/autumn/`, `books/japan_guide/`) - **Static pages**: `index.html`, `blog.html`, `about.html`, `archive.html`, `tags.html`, etc. ### Post patterns **Collapsible document block** (styled after Robin Sloan's `VISION.md`): use for a long quoted doc, brief, or prompt that would interrupt the flow of a post. Styles live in `details.vision-doc` in `assets/styles/post-styles.scss`. The `markdown="1"` attribute is required so kramdown renders markdown inside the element, and the blank lines around the body are required too. Collapsed, it shows the filename plus a light grey "expand to read more" hint. ```markdown

DESIGN.md

Body text, lists, and **bold** all render as markdown. - **One.** First point. - **Two.** Second point.

``` **Image paginator**: a click-through set of images with captions, prev/next buttons, a counter, arrow keys (when focused), and swipe. Styles are `.paginator` in `assets/styles/post-styles.scss`; behavior is `assets/js/paginator.js`. Add the script tag once per post, after the last paginator. Each `