Update layout: Color modes, jQuery removal, and more

[robinheidrich]

This improves the phpMyAdmin website. It updates the layout, many of the pages and cleans everything up a bit.

Changes

• Updated Bootstrap to 5.3.3, which supports color modes, allowing selection between dark and light mode and auto-detection based on system preference. The color-modes.js script comes from the Bootstrap docs.
• Removed jQuery and replaced colorbox with bs5-lightbox.
• Removed Font Awesome and replaced it with SVG icons from Bootstrap Icons.
• Updated the team page to use GitHub avatars and a better overview.
• Updated the downloads page to make everything a little clearer, and show requirements of each version.
• Updated the themes page to no longer use extra JavaScript code, removed the “All” filter and reversed the version listing.
• And more...

Screenshots

Home page

Home page (light)

Download modal

Docs page

Team page

404 page

[williamdes]

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="scrutinizer-ci">
  <path d="m3.991 19.862.005-.004.002-.002zM22.2 12.943c.007.014.011.029.017.043l.005.008-.022-.051zm-4.304 10.944c-.131.004-.262.005-.393.008l-.003.001.396-.009z"></path>
  <path fill="#868E91" d="M22.101 19.055a8.207 8.207 0 0 0 .397-2.55 8.346 8.346 0 0 0-.775-3.519 8.583 8.583 0 0 0-2.307-2.859l-.017-.013a6.833 6.833 0 0 0-2.35-.976l-.045-.008c-.246-.06-4.052-.106-7.812-.121l.001-.002c-3.759-.015-7.472 0-7.532.06-.126.126-.06.798.06 1.35a5.66 5.66 0 0 0 1.834 2.753l.01.008a7.501 7.501 0 0 0 3.264 1.581l.049.009c.366.126 1.044.126 4.598.126 4.237 0 4.916.06 5.221.24.142.107.265.23.369.367l.003.005c.18.24.181.307.181.979s-.066.732-.186 1.044a1.48 1.48 0 0 1-.419.362l-.007.004c-.186.12-.307.119-4.358.179-4.671 0-5.156 0-6.321.432a6.458 6.458 0 0 0-2.463 1.352c-1.163 1.038-1.84 2.202-1.96 3.426l.06.611C3.891 23.962 6.591 24 9.3 24c2.577 0 5.146-.037 7.707-.105l.489-.119c.285-.069.531-.153.766-.256l-.029.011.367-.18a7.768 7.768 0 0 0 3.484-4.242l.017-.054z"></path>
  <path fill="#08458E" d="M22.461.12C22.401 0 21.421 0 14.863 0L6.877.06a6.172 6.172 0 0 0-3.732 2.488l-.013.02a6.328 6.328 0 0 0-1.348 2.596l-.009.044-.12.553-.119.857c-.06.799-.06 1.351.12 1.471h5.276c.06 0-.186-.246-.186-.672 0-.738.252-.924.552-1.23.552-.426 2.946-.12 4.729-.246 2.449 0 4.603-.06 4.849-.12 2.701-.427 5.031-2.388 5.524-4.536.121-.547.121-1.105.061-1.165z"></path>
</svg>

https://iconscout.com/free-icon/scrutinizer-ci-3521695
Scrutinizer Ci by Icon 54

Or https://github.com/avmaisak/ngx-simple-icons/blob/develop/ngx-simple-icons/src/lib/icons/scrutinizerci.ts

Ref: https://github.com/search?q=%22scrutinizer%22+%22%3Csvg%22&type=code

Pick the one you want

[robinheidrich]

I think one with the name in the logo would be better, to match the others.

Also found more things to check:

• Michal is linked on https://phpmyadmin.net/about-website/, but he is not on the team page. Should I add him to the previous team members?
• Microformats is mentioned there too. Is it still up to date? I couldn't really find out what it does. Also, the PAD website seems to be outdated, it comes up with their sitemap.

One more thing, on https://www.phpmyadmin.net/try/ the link to the stable release seems to be broken. It links to https://demo.phpmyadmin.net/STABLE/.

[nijel]

I've randomly noticed this section while looking and new website screenshots after being mentioned for the Weblate logo, and it seems unfair to me. Listing one randomly chosen previous team member and omitting people who spent years on the project is not the best approach. Better to remove previous members here and keep them only on https://docs.phpmyadmin.net/en/latest/credits.html.

[williamdes]

Listing one randomly chosen previous team member and omitting people who spent years on the project is not the best approach.

I think this is mostly due to the fact that Dan never announced leaving the team. So that was me requesting to move him to a new section
But you are right, let's make a nice page for all of them that spent a lifetime maintaining phpMyAdmin
The link should be right after the team members in a visible way

Edit: it would be great to pick some of them an make a page ? or just use credits ?

[robinheidrich]

I think the pull request is ready for review now.

I changed the themes page so it doesn't need any extra JavaScript code. I have removed “All” and reversed the list. I noticed that there are still themes for version 2 in themes.py, but since “All” is gone now I think they can be removed?

An SVG logo for Scrutinizer is still missing, preferably one with white text. Unfortunately I couldn't find anything.

Furthermore, should I remove all links to planet.phpmyadmin.net?

[williamdes]

The diff looks good
Thank you for all the work !

[williamdes]

Furthermore, should I remove all links to planet.phpmyadmin.net?

Yes, please do in a separate commit. I can cherry-pick it right away

I changed the themes page so it doesn't need any extra JavaScript code. I have removed “All” and reversed the list.

Very cool !

I noticed that there are still themes for version 2 in themes.py, but since “All” is gone now I think they can be removed?

Removed from where ? the files. server ?

An SVG logo for Scrutinizer is still missing, preferably one with white text. Unfortunately I couldn't find anything.

Okay, can you give me one that is okay and I can change the text color with Inkscape ?

[robinheidrich]

Yes, please do in a separate commit. I can cherry-pick it right away

Alright, will do! Should I also remove all the code and the migration?

Removed from where ? the files. server ?

In the version list on the Themes page there is no tab for version 2. Since “All” is now gone, these are no longer visible. Or should I add version 2 there?

Okay, can you give me one that is okay and I can change the text color with Inkscape ?

Unfortunately I could not find any SVG from Scrutinizer where text is included.

[williamdes]

Alright, will do! Should I also remove all the code and the migration?

Yes, remove everything about planet. We can discuss it in the separate PR

In the version list on the Themes page there is no tab for version 2. Since “All” is now gone, these are no longer visible. Or should I add version 2 there?

Maybe we can have a section for "old themes" below the normal ones ?
Edit: let's add a 2.x option ?

Unfortunately I could not find any SVG from Scrutinizer where text is included.

Okay, on it.

[williamdes]

Unfortunately I could not find any SVG from Scrutinizer where text is included.

After some copy pasting from their website, and Inkscape work I did get a nice logo.

Final version to use (compressed with https://svgomg.net/):

Less compressed:

Inkscape version:

[robinheidrich]

Not quite sure how to make a new PR for removing Planet, wouldn't there be conflicts with this PR?

[williamdes]

Not quite sure how to make a new PR for removing Planet, wouldn't there be conflicts with this PR?

Okay, you can remove it in this PR then
Keep a separate commit for it

[robinheidrich]

Removed everything from Planet and updated the migrations. Is that all right?

[williamdes]

Removed everything from Planet and updated the migrations. Is that all right?

Probably yes, if @ibennetch can review this PR diff

If it ready for review ?

[robinheidrich]

Yes, I think it's ready for review. Other improvements can be made in new PRs, for example I think the screenshots from the demo could use an update. See https://www.phpmyadmin.net/try/.

And then there is test-data, which somehow has no use except to display TEST DATA. See https://www.phpmyadmin.net/test/data.

And contest.html which I think serves no historical purpose, unlike the 15-years page.

[williamdes]

I am working on this, some of your work got cherry-picked into the master branch before merging this PR

[codecov]

Codecov Report

❌ Patch coverage is 86.36364% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 65.52%. Comparing base (449779e) to head (8a4d755).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #186      +/-   ##
==========================================
+ Coverage   65.29%   65.52%   +0.22%     
==========================================
  Files          77       77              
  Lines        1530     1543      +13     
==========================================
+ Hits          999     1011      +12     
- Misses        531      532       +1     

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[williamdes]

Thank you for your good work.

Sorry for the time it took to review and merge your work

I disclose using Claude Code on diff of the last commit
It found 30 points to fix, and very good ones. I tried to post most of them as suggestions.