Skip to content

docs: add animated hero gif to README#1861

Merged
coliff merged 3 commits intohtmlhint:mainfrom
livlign:docs/add-hero-gif
Apr 22, 2026
Merged

docs: add animated hero gif to README#1861
coliff merged 3 commits intohtmlhint:mainfrom
livlign:docs/add-hero-gif

Conversation

@livlign
Copy link
Copy Markdown
Contributor

@livlign livlign commented Apr 21, 2026

Summary

Replaces the square logo at the top of the README with a slim animated hero (1200×200, 48 KB) that shows HTMLHint in action — the CLI running against a messy HTML file and reporting real findings with rule names and locations.

The hero renders at roughly the same vertical height as the previous 170px-square logo, so the rest of the README layout (badges, table of contents, everything below) is unaffected.

What it shows

  • Left panel: HTMLHint brand + "Static analysis for HTML. 40+ battle-tested rules · CLI & API."
  • Right panel (terminal): `htmlhint index.html` runs; five real findings stream in (`tagname-lowercase`, `doctype-first`, `alt-require`, `tag-pair`, `inline-style-disabled`); closing summary line.

Details

  • File: `website/src/assets/img/hero.gif` — sits alongside the existing `htmlhint.png` logo in the same assets directory.
  • Size: 48 KB · 1200×200 · 20 s loop.
  • No timestamps, version numbers, or rule counts that would drift — copy stays accurate as the project evolves.
  • Logo image (`htmlhint.png`) is untouched and still available for other uses.

Test plan

  • Open the README on github.com/htmlhint/HTMLHint — hero renders at top of the page and loops cleanly
  • Vertical height is comparable to the previous logo (no layout shift below)
  • All text is legible at rendered width, including the terminal output lines
  • Badges, TOC, and all following sections unchanged

@livlign livlign requested a review from coliff as a code owner April 21, 2026 18:43
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates the README.md to replace the static logo with an animated hero GIF and improves the associated alt text. A review comment suggests using a relative path for the image source instead of an absolute URL to ensure the image renders correctly across forks and pull request previews.

Comment thread README.md
Per PR review feedback: absolute URLs to raw.githubusercontent.com/main
don't render in forks or in the PR preview until after merge. A
relative path resolves correctly on GitHub, npm, and preview tools.
livlign added a commit to livlign/claude-skills that referenced this pull request Apr 21, 2026
Gemini Code Assist flagged this on htmlhint/HTMLHint#1861:
absolute raw.githubusercontent.com URLs pinned to main don't render in
forks or in PR previews until after merge, which hurts review quality.

Encode relative paths as the default, even when the existing README
uses absolute URLs for its current images (legacy debt, don't propagate).
@coliff
Copy link
Copy Markdown
Member

coliff commented Apr 22, 2026

this is neat - thanks. I do think we should use https://raw.githubusercontent.com/htmlhint/HTMLHint/main/ in the URL though so it works everywhere.

@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 22, 2026

Hi @coliff, thank you for the comment. I have updated the pr as per the suggestion.

@coliff coliff merged commit 298d585 into htmlhint:main Apr 22, 2026
6 checks passed
@coliff
Copy link
Copy Markdown
Member

coliff commented Apr 22, 2026

nice work @livlign - that's a neat script you created. thanks! 👍

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.

3 participants