Skip to content

docs(site): add screenshots with alt text and image metadata - #8

Merged
crypto-frog merged 1 commit into
mainfrom
docs/screenshots
Aug 23, 2026
Merged

crypto-frog merged 1 commit into
mainfrom
docs/screenshots

Conversation

@crypto-frog

Copy link
Copy Markdown
Owner

Summary

Adds three screenshots of Darkkle running against a blank spreadsheet, with alt text, explicit dimensions, and image structured data.

Image Shows
01-dark-grid.png Themed grid, toolbar, menu bar, sheet tabs; readable column letters and row numbers
02-settings-panel.png Pinned settings panel, on/off switch, live preview, quick styles
03-tinted-selection.png Range D7:E11 with coordinated green tint on row and column header highlights

Privacy handling

The original captures contained material that must not enter a public repository:

  • the spreadsheet document ID in the address bar;
  • the browser bookmarks bar;
  • the signed-in account avatar;
  • the desktop taskbar.

SECURITY.md and AGENTS.md both prohibit committing document IDs and unredacted screenshots, and removing them after the fact would require history rewriting, which is also prohibited.

Each capture was cropped to the application area and the avatar corner was masked. The remaining content is a blank Untitled spreadsheet. The Rent / Power / Total table visible in the second image is the extension's own built-in preview widget, not spreadsheet content.

Image and search metadata

  • Descriptive alt text on every image, written for screen readers first and usable as image-search text.
  • Explicit width and height so no layout shift occurs while loading, plus loading="lazy" and decoding="async" below the fold.
  • figcaption explaining what each image demonstrates.
  • screenshot array of ImageObject added to the existing SoftwareApplication JSON-LD.
  • The overview page now declares a screenshot as its og:image. The previous default was the 128px icon, which was too small for the summary_large_image Twitter card the site already emits.

Images are 1500px wide, 90–199 KB each.

Testing

  • npm run check passes. docs/ is not in scripts/release-files.mjs, so the extension archive and checksum are unchanged.
  • Documentation-only change.
  • Rendered output needs checking after merge, since the Jekyll build only runs against main.

Add three screenshots of Darkkle running against a blank spreadsheet: the
themed grid, the pinned settings panel, and a tinted selection showing
coordinated row and column header highlights.

The captures were cropped to remove browser chrome and the desktop taskbar,
which removes the spreadsheet document ID from the address bar, the browser
bookmarks, and the signed-in account avatar. Committing any of those is
prohibited by SECURITY.md and AGENTS.md, and history rewriting to remove them
later is not an option.

Each image carries descriptive alt text and an explicit width and height so
layout does not shift while they load. The overview page now declares a
screenshot as its social card image instead of the 128px icon, which was too
small for the summary_large_image card already being emitted, and the
SoftwareApplication structured data gains a matching screenshot array.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@crypto-frog
crypto-frog merged commit d1ec0d7 into main Aug 23, 2026
3 checks passed
@crypto-frog
crypto-frog deleted the docs/screenshots branch August 23, 2026 23:41
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