Skip to content

docs: add hero image to README#5058

Merged
tig merged 6 commits intogui-cs:developfrom
livlign:docs/add-readme-hero
Apr 25, 2026
Merged

docs: add hero image to README#5058
tig merged 6 commits intogui-cs:developfrom
livlign:docs/add-readme-hero

Conversation

@livlign
Copy link
Copy Markdown
Contributor

@livlign livlign commented Apr 22, 2026

Summary

Adds a hero image to the top of README.md that surfaces what Terminal.Gui is at a glance — a cross-platform .NET TUI toolkit — with a composed mock of the actual widget set (menu bar, tree explorer, form with focused field, dropdown, checkboxes, chart, status bar).

  • Inserted right after the tagline and before the existing ![logo](docfx/images/logo.png) line
  • Existing sample.gif and logo.png embeds are left untouched — this is additive, not a replacement
  • Image is a static PNG (1200×580, 2× retina) so it doesn't compete with the real animation below
  • Alt text spells out the positioning + stats for screen-reader and text-only viewers

What's in the composition

  • Brand block: Terminal + gradient .Gui wordmark, cross-platform eyebrow
  • Platform chips: .NET · Windows · macOS · Linux · MIT
  • Stats row under the title: 30+ Views, 3 Platforms, TrueColor (Unicode · mouse), '17 Since
  • Mock TUI window on the right: menu bar with hotkey mnemonics, Explorer tree showing real widget names (Button, DatePicker, ListView, Menu, TableView, Wizard, FileDialog, MessageBox, Drawing, Graphs), a "New Project — step 2 / 4" form with Name / Preset / Theme / Mouse / Unicode rows, FPS chart, status bar with F1 / F5 / F10 / ^Q hotkeys

All stats are drawn from the repo itself:

  • 30+ Views — counted from Terminal.Gui/Views/ (~43 files, minus auxiliary types)
  • 3 Platforms — from README ("Windows, macOS, and Linux/Unix")
  • '17 Since — first commit 2017-12-10 ("Initial commit")
  • TrueColor / Unicode / mouse — features named in README

No volatile stats (no star count, no release version, no download count) so the image doesn't date itself.

Changes

  • Add docfx/images/hero.png (1200×580 @2×, ~113 KB)
  • Insert a single ![…] line in README.md between the tagline and the existing ![logo] embed

Test plan

  • Open README.md on GitHub and confirm the hero renders between the tagline and the existing logo image
  • Easy revert: delete docfx/images/hero.png + remove the one new line

Feel free to close if the direction isn't aligned with the project's identity — happy to iterate on palette, copy, or composition, or drop it entirely.

@livlign livlign requested a review from tig as a code owner April 22, 2026 17:23
@tig
Copy link
Copy Markdown
Member

tig commented Apr 22, 2026

Cool! but the image needs to represent a real TG app, not a simulation.

Per PR review: the image now embeds a real Terminal.Gui app running
(menu bar, Explorer tree, New Project form, status bar) rather than a
composed mock. Layout, stats, and footer links preserved.
@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 22, 2026

@tig Thanks for quick review! I have updated with a real TG app image.

@tig
Copy link
Copy Markdown
Member

tig commented Apr 22, 2026

That's still not real. Can you use UICatalog? or AllViewsTester?

It'd be killer if it were a GIF that cycled through all Views like this::

WindowsTerminal_d2ULDjyoXQ

Replaces the static hero screenshot with an animated version:
- Embeds a real Terminal.Gui demo recording inside the hero frame
  so the motion carries the pitch.
- Redesigns the surrounding chrome to a monochrome black/white/gray
  palette so the demo's ANSI colors pop.
- README reference updated from hero.png to hero.gif.
@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 23, 2026

@tig Thanks for suggesting. I added a real gif and re-design the tone to b&w for matching. I think this gif is cooler but just let me know if you still prefer AllViewsTester, or if you think the pace of the gif is too fast.

@tig
Copy link
Copy Markdown
Member

tig commented Apr 23, 2026

Looking great!

I did like the colors you had in the earlier versions (the static part) better than the latest.

A few things I think a really worth highlighting in the gif:

  • UI Catalog About Box (the logo)
  • Background image in terminal
  • Themes
  • Markdown
  • Tables
  • Animation
  • FileDialog
  • TreeView
  • AttributePicker
  • GraphView
  • Tabs

If you really want to get ambitious with this see https://github.com/[gui-cs/TUIcast](https://github.com/gui-cs/TUIcast)

I started that because i wanted a way of automaticaly creating gifs. And then I wanted something where I could say "Generate a gif showing each of the items in the bullets above for at least 3 seconds each." and an LLM would script it.

I wanted to use it to generate GIFs of each View to replace the ANSI->HTML art that ./.docfx/scripts/OutputView curently generates when creating https://gui-cs.github.io/Terminal.Gui/docs/views.html

I got it to the point where I could make it run via a workflow (on push), but not as a service... Then I got distracted with other things.

I think its a pretty innovative concept! It was COMPLETEY vibe-coded - i didn't even look at any of the code.

However, what you've done here is awesome and if you just want me to merge it I will.

Updates the README hero:
- New cyan→purple brand palette (Terminal white, .Gui gradient).
- Full 55.6s Terminal.Gui demo loop stretched to preserve its 932×674 ratio.
- Brighter stats band, unified meta tone on CROSS-PLATFORM /
  github / NuGet / MIT labels.
- Re-rendered at 1200×580, 12 fps, 128 colors (10.0 MB).
@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 24, 2026

Thank you! For sharing your thoughts and so kindly to allow merging.

I cannot access TUIcast (404, maybe it is a private project). Anw, I managed to record a full cycle of features you suggested and changed back to the original color palette. The gif now significant longer but convey a lot more I think.

If it is still not perfect, I can use your GIF above that cycled through all Views. Just let me know.

@BDisp
Copy link
Copy Markdown
Collaborator

BDisp commented Apr 24, 2026

The correct link is https://github.com/gui-cs/TUIcast.

@tig
Copy link
Copy Markdown
Member

tig commented Apr 24, 2026

@livlign will you please add this to ./docfx/docs/index.md as well?

@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 24, 2026

@tig I updated /docfx/docs/index.md

@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 24, 2026

The correct link is https://github.com/gui-cs/TUIcast.

@BDisp Yes, that's the link I used and see 404
https://ibb.co/dszjDD8Z

@BDisp
Copy link
Copy Markdown
Collaborator

BDisp commented Apr 24, 2026

But did you click on my link? The link that @tig posted is malformed as https://github.com/%5Bgui-cs/TUIcast%5D(https://github.com/gui-cs/TUIcast) and that why yo get the 404 error.

@livlign
Copy link
Copy Markdown
Contributor Author

livlign commented Apr 24, 2026

Yes, you can see the screenshot I posted above.

@BDisp
Copy link
Copy Markdown
Collaborator

BDisp commented Apr 25, 2026

Yes, you can see the screenshot I posted above.

It's really marked as private.

@tig
Copy link
Copy Markdown
Member

tig commented Apr 25, 2026

Yes, you can see the screenshot I posted above.

It's really marked as private.

Fixed. Now public.

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