Fix thumbnails and use Panel design on index page

[MarcSkovMadsen]

For the panel-chat-examples we are using the index page with thumbnails. The index page could need a make over because

• Its not using the Panel blue
• Thumbnails are not positioned well (Also reported in Document how to customize the index page #5128)
• The header background could be more Panel specific as well as work better with Panel blue.

This fixes the issues

Before

panel serve app1.py app2.py --autoreload --static thumbnails=thumbnails

After

Todo

[ ] @philippjfr should consider replacing the existing index_background.png image with the below in the CDN. (see discussion below).

FYI. @ahuang11

[codecov]

Codecov Report

Merging #5595 (3813a19) into main (a3ac955) will increase coverage by 9.79%.
The diff coverage is n/a.

❗ Current head 3813a19 differs from pull request most recent head c88f454. Consider uploading reports for the commit c88f454 to get more accurate results

@@            Coverage Diff             @@
##             main    #5595      +/-   ##
==========================================
+ Coverage   73.70%   83.50%   +9.79%     
==========================================
  Files         275      275              
  Lines       39549    39549              
==========================================
+ Hits        29151    33024    +3873     
+ Misses      10398     6525    -3873     

Flag	Coverage Δ
ui-tests	40.81% <ø> (?)
unitexamples-tests	73.44% <ø> (-0.27%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 71 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[Hoxbro]

I think the top banner should be somewhat generic. When showing apps in it, there could be an expectation that the apps served can produce these.

[MarcSkovMadsen]

I think the top banner should be somewhat generic. When showing apps in it, there could be an expectation that the apps served can produce these.

I had the same thought about not making apps specific. So I tried to darken the picture to only "indicate" applications.

Do you have a suggestion for a better picture?

[MarcSkovMadsen]

Please review the PR

if you are not satisfied with the new background picture. Just keep the old one. But the rest of the PR is still a huge improvement.

I'm not able to find an idea or starting point for a better new header image. I have tried.

[Hoxbro]

No objections to the rest of the PR.

I also tried to find a better image with the same luck as you. I tried with blue generic wallpaper and ocean header.

[philippjfr]

I'd be in favor of finding a different background image too but will go ahead and merge shortly.