Showcase vs Examples part of the website

[Its-Just-Nans]

Hi

Does the scrollbar still need help ?

What is blocking #249 ?

Also, on the website these two pages are very similar https://ratatui.rs/examples/widgets/ https://ratatui.rs/showcase/widgets/. Why not merging them (add links to doc.rs) ?

[joshka]

Does the scrollbar still need help ?
What is blocking #249 ?

Yes, for the scrollbar widget it would be nice to have a small example screenshot that looks good in context with the other examples, so yes please if you'd like to contribute something. Probably in the size available I'd show a few different examples of scrollbars in each orientation, with various customizations and colors to make them look good.

Also, on the website these two pages are very similar https://ratatui.rs/examples/widgets/ https://ratatui.rs/showcase/widgets/. Why not merging them (add links to doc.rs) ?

You're right that there's some overlap, but perhaps I could explain my thinking on this and it would help work out what to do:

• The purpose of the examples is to show in simple terms how to use each widget. The goal is to make it easy to to combine the API docs with something which is the simplest running code without too much conceptual overhead. These examples choose code simplicity over good looks as their purpose is to teach. The examples are generally copied directly from the Ratatui repo each time we release. Additionally, the code for these examples also show up directly in the API docs.
• The purpose of the showcase was to make it easy to see some ideas about how each widget can be used to create good looking apps, hopefully encouraging developers to move away from colorless bordered apps that lack soul and identity. These preferentially choose good looks over code simplicity. These are also designed to look good alongside https://ratatui.rs/showcase/third-party-widgets/. The showcase was created much later than the examples purely for the website.

So at a high level, it's teaching vs demo.

Right now we're also moving around the examples quite a bit for the next Ratatui release (0.30.0). Details in ratatui/ratatui#1512 (TLDR - splitting things up into simple examples, demos / application style examples, and tools). This will end up being reflected in the example section of the website when we sync them.

Ideally each example would also have some narrative text associated with it (maybe worth LLM generating that), but we haven't got to that yet.

Given that context, I'd suggest that we should:

1. Leave the examples section alone as it's not the source of truth.
2. Move the showcase section earlier in the website tree to answer the question "What can I build" before "How can I build it"

Any other ideas you'd suggest?

Another approach might be to make each example page have a bunch of small screenshot + code examples to make it super easy to copy paste the code that solves your problem directly into your own code.

[Its-Just-Nans]

Thanks for the informations

I've updated the PR with

• the image for scrollbar demo
• links to the example code for each widget

Note that only LineGauge doesn't have an example

[joshka]

Ha - I didn't look at this carefully enough and thought I was responding to an issue rather than a PR. Apologies for the brainfart :D

[joshka]

Without the scrollbar image update this would be fine.

[joshka]

I'd prefer something smaller and more fitting with the other images in the showcase for this rather than reusing this image.

[Its-Just-Nans]

I've updated the img
Is it better ?

Thanks

[joshka]

Sizing is better, but it still feels a bit janky due to the text. The formatted lines of text are mostly unnecessary and take away from the part that's meaningful to show.

What I envisage: maybe 6ish vertical scroll bars (top, bottom, full, colored, symbols changed, symbols omitted) to show how customizable this is, and then the same for horizontal bars. Add that to a small paragraph with both bars and some greyed out Lorem ipsum text. The paragraph should be on the left to take up about 1/3 the space, while the extra bars take up the rest of the space on the right.