Skip to content

docs: replace screenshot placeholders with styled mockups#116

Merged
Nathan Schram (nathanschram) merged 4 commits intomasterfrom
docs/screenshot-clippings
Mar 11, 2026
Merged

docs: replace screenshot placeholders with styled mockups#116
Nathan Schram (nathanschram) merged 4 commits intomasterfrom
docs/screenshot-clippings

Conversation

@nathanschram
Copy link
Member

Summary

  • Replace all 47 <!-- SCREENSHOT: ... --> placeholder comments across 24 doc files with styled markdown mockups
  • Add CSS stylesheet (docs/stylesheets/workflow-preview.css) for button/UI mockup styling
  • Covers 14 how-to guides, 6 tutorials, and troubleshooting docs

Preview notes

  • GitHub won't render MkDocs admonitions (!!!) or custom CSS — use the Files changed tab for diffs
  • For full-fidelity preview, build locally: uv run zensical serve
  • CI docs job will confirm the MkDocs build succeeds

Test plan

  • Review rendered markdown in GitHub file browser
  • Verify MkDocs build passes in CI
  • Spot-check a few mockups match the original screenshot intent

🤖 Generated with Claude Code

…ions

Replace text-reproducible screenshot placeholders across 14 doc files
with styled admonitions using existing custom !!! untether (pink) and
!!! user (green) types. Terminal output uses code blocks instead.

This covers Phase 1 of the screenshot strategy — 25 of 47 placeholders
replaced with maintainable markdown. The remaining 22 require actual
Telegram UI captures (inline buttons, voice bubbles, file attachments).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 2a: convert remaining text-reproducible placeholders to styled
admonitions, code blocks, and formatted descriptions. Includes
BotFather conversation flow, /browse file listing, /file put/get
confirmations, diff preview, forum topic binding, webhook notification,
and schedule picker instructions.

47 original placeholders → 38 replaced with markdown, 9 remain for
actual Telegram UI screenshots (inline buttons + voice waveform).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add .tg-buttons/.tg-btn CSS classes to workflow-preview.css for
Telegram inline keyboard button mockups (gray rounded rectangles
with blue text, dark mode support). Replace all remaining
<!-- SCREENSHOT: --> placeholders across 4 doc files with styled
admonitions + CSS button rows. Zero placeholders remain in docs/.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Running action symbol: … → ▸ (matches STATUS dict in markdown.py)
- /planmode show response: "(chat default)" → "(plan mode)" (matches planmode.py)
- Resume lines: add backtick wrapping to match format_resume() output
- Meta line: remove extra backtick wrapping (rendered as plain text)
- Approval messages: match actual Permission Request format with
  diff preview (📝 prefix, inline - /+ lines)
- Cooldown mockup: show actual synthetic "Plan outlined" title

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@nathanschram Nathan Schram (nathanschram) marked this pull request as ready for review March 11, 2026 05:56
@nathanschram Nathan Schram (nathanschram) merged commit 920967d into master Mar 11, 2026
18 checks passed
@nathanschram Nathan Schram (nathanschram) deleted the docs/screenshot-clippings branch March 11, 2026 05:56
@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant