Example gifs, code, and main repo code don't match

[RCoder01]

For many examples the gif doesn't match the expected output of the code on the page. Also the run instructions at the top of the page uses the examples subdir of the ratatui/ratatui repo, which doesn't always match the code on the website.

Examples:

• Demo: All match 👍
• Demo2: Links directly to the main repo example, no code on the website
• Hello World: minor code organization differences between main repo code and website code
• Inline Viewport: minor code organization differences; the command being run in the gif doesn't work
• Minimal Hello World: minor code organization differences
• Panic Hooks: minor text and code organization differences; the command being run in the gif doesn't work; the output shown in the gif doesn't match the code
• Popup: gif and website code match, but main repo code is fairly different
• Ratatui Logo: minor code organization differences; image doesn't have "Powered by" text
• User Input: minor code organization differences
• Constraint explorer: minor code organization differences
• Constraints: minor code organization differences
• Flex: minor code organization differences
• Layout: code doesn't exist in the main repo?? The run instructions say to run constraint-explorer again and I don't see any layout example
• Colors: minor code organization differences
• Colors-rgb: minor code organization differences; the example is dynamic but the site only includes a static image
• Modifiers: minor code organization differences
• Barchart: website code, main repo code, and gif are all completely different
• Block: website code and gif match, main repo code is very different
• Calendar: website code and gif seem to match, main repo code is very different (also the website says to run with the widget-calendar feature, but it doesn't seem necessary)
• Canvas: website code and gif seem to match, main repo code is very different
• Chart: website code and gif seem to match, main repo code is very different
• Custom Widget: All match 👍
• Gauge: website code and gif are slightly different, main repo code is very different
• List: website code, main repo code, and gif are all completely different
• Paragraph: website code and gif are slightly different, main repo code is very different
• Scrollbar: website code and image seem to match, main repo code is very different
• Sparkline: website code and gif seem to match, main repo code is very different
• Table: website code and gif seem to match, main repo code is very different
• Tabs: website code and gif seem to match, main repo code is very different

[orhun]

Hey, thanks for the detailed issue!

I have created #1088 for this. Any chance that you could check?

Preview URL: https://914c105b.ratatui.pages.dev
Branch Preview URL: https://docs-align-examples.ratatui.pages.dev

[RCoder01]

For Popup, the gif alternates Press p to show the popup and Press p to close the popup but the code shows Press 'p' to toggle popup, 'q' to quit

For Panic Hooks, in the gif the first line is HOOK IS CURRENTLY **ENABLED** but for the code it is Panic hook is currently: Enabled

(The gif for Colors-rgb isn't very flattering for ratatui; it runs at a stable 30fps in my console)

For BarChart I think the terminal the image was taken from is too small, so the horizontal yellow bar gets cut off

I didn't recheck the ones with only minor code organization differences but the rest looked fine