Setup screenshot and animation pipeline for documentation

[strausmann]

Summary

Setup tooling to capture screenshots and animated GIFs/videos from running product instances for documentation.

Available Tools

Playwright MCP (already installed)

• Can navigate to authenticated web UIs
• Screenshots: Full page or element-specific captures
• Video recording: `--save-video=1280x720` captures browser sessions
• Headless Chromium on the Ansible VM

Post-Processing (to be installed)

• ffmpeg: Convert Playwright videos to GIF/WebM for docs
• ImageMagick: Crop, annotate, optimize screenshots
• gifsicle: Optimize GIF file sizes

Running Instances

Product	URL	Auth	Status
CrowdSec Manager	crowdsec.strausmann.cloud	Header Auth (Vault)	Running
Middleware Manager	—	—	Needs deployment

Middleware Manager Instance Needed

To capture screenshots and test documentation for the Middleware Manager, we need a running instance.
Options:

1. Deploy on hhdocker01 alongside the docs staging containers
2. Use the maintainer's instance (requires access)
3. Spin up a temporary dev instance with Docker Compose

Recommendation: Option 1 — deploy a Middleware Manager instance on hhdocker01.
This gives us full control for screenshots without depending on external access.

Screenshot Workflow

```

1. Playwright navigates to URL (with auth)
2. Takes screenshot / records video
3. ffmpeg converts video → GIF (if animation)
4. ImageMagick optimizes / annotates
5. File saved to projects/*/docs/content/docs/images/
6. Referenced in MDX: ``
   ```

Naming Convention

```
--.png
bouncers-list-connected.png
health-diagnostics-overview.png
security-hub-mtls-config.png
```

Acceptance Criteria

• Playwright MCP can capture screenshots from CrowdSec Manager (with Header Auth)
• Middleware Manager instance running and accessible for screenshots
• ffmpeg + ImageMagick installed on Ansible VM
• Screenshot capture documented in Makefile (`make screenshot-crowdsec`)
• At least one example screenshot captured and embedded in docs

[github-actions]

This issue has been inactive for 14 days. If it's blocked by #14 (Maintainer Alignment), please add status:blocked label. If work can proceed, please update the status.