Capture live app screenshots for public docs #94

New issue

Closed

opened 2026-05-23 10:14:22 +00:00 by steve · 0 comments

steve commented

2026-05-23 10:14:22 +00:00

Owner

Add a repeatable screenshot and animated GIF pipeline for the public Lapis Notes documentation site.

Problem

The public site currently uses CSS product-evidence mockups. Those are useful for layout, but the docs need real captures from the app so help pages and the landing page reflect the current UI.

Goal

Capture still screenshots and short animated GIFs from the e2e-vault flow and publish them through packages/lapis.md as optimized static assets.

Scope

Add or reuse an app capture workflow that opens e2e-vault in a deterministic state.
Capture still screenshots for the landing feature cards and relevant help pages.
Capture short animated GIFs for workflows where motion is clearer than still images, such as command palette use, graph navigation, canvas editing, or plugin setup.
Store generated assets under the docs site package and reference them from landing/help/developer pages.
Document the capture command and asset refresh expectations in the lapis.md package spec.

Non-goals

Replacing every docs page with media.
Shipping large unoptimized media files.
Capturing private user vault content.

Acceptance Criteria

A documented command can regenerate public docs screenshots from a known test vault state.
Landing page feature frames use real app captures where available.
At least one help page uses an animated GIF for a workflow that benefits from motion.
Media assets have predictable filenames, alt text, and size guidance.
Site build and package checks pass after the media is added.

Implementation Notes

Prefer Playwright-driven captures against the existing smoke/e2e vault setup. Use deterministic viewport sizes and seed data so screenshots do not churn unnecessarily.

Suggested Files or Specs To Inspect

packages/lapis.md/spec.md
packages/lapis.md/src/pages/index.astro
packages/lapis.md/src/content/docs/help/**
packages/workspace/e2e/**

Validation Commands

pnpm --filter @lapis-notes/lapis.md check
pnpm site:build
pnpm test:smoke

Follow-up Tasks

Implementation Summary

Added a deterministic public-site media pipeline, generated landing PNGs and a command-palette GIF, replaced the landing mockups with real captures, and documented the refresh workflow plus filename/size guidance in the package spec and rendered spec page.

Add a repeatable screenshot and animated GIF pipeline for the public Lapis Notes documentation site. ## Problem The public site currently uses CSS product-evidence mockups. Those are useful for layout, but the docs need real captures from the app so help pages and the landing page reflect the current UI. ## Goal Capture still screenshots and short animated GIFs from the `e2e-vault` flow and publish them through `packages/lapis.md` as optimized static assets. ## Scope - Add or reuse an app capture workflow that opens `e2e-vault` in a deterministic state. - Capture still screenshots for the landing feature cards and relevant help pages. - Capture short animated GIFs for workflows where motion is clearer than still images, such as command palette use, graph navigation, canvas editing, or plugin setup. - Store generated assets under the docs site package and reference them from landing/help/developer pages. - Document the capture command and asset refresh expectations in the lapis.md package spec. ## Non-goals - Replacing every docs page with media. - Shipping large unoptimized media files. - Capturing private user vault content. ## Acceptance Criteria - A documented command can regenerate public docs screenshots from a known test vault state. - Landing page feature frames use real app captures where available. - At least one help page uses an animated GIF for a workflow that benefits from motion. - Media assets have predictable filenames, alt text, and size guidance. - Site build and package checks pass after the media is added. ## Implementation Notes Prefer Playwright-driven captures against the existing smoke/e2e vault setup. Use deterministic viewport sizes and seed data so screenshots do not churn unnecessarily. ## Suggested Files or Specs To Inspect - `packages/lapis.md/spec.md` - `packages/lapis.md/src/pages/index.astro` - `packages/lapis.md/src/content/docs/help/**` - `packages/workspace/e2e/**` ## Validation Commands - `pnpm --filter @lapis-notes/lapis.md check` - `pnpm site:build` - `pnpm test:smoke` ## Follow-up Tasks ## Implementation Summary Added a deterministic public-site media pipeline, generated landing PNGs and a command-palette GIF, replaced the landing mockups with real captures, and documented the refresh workflow plus filename/size guidance in the package spec and rendered spec page.

steve

2026-05-23 10:14:22 +00:00