[openstreetmap/openstreetmap-website] Add user profile heatmap visualization for contributions (PR #5402)

[Emin Kocan]

> > Separate JS Files: There's already a heatmap.js file containing heatmap-related functionality, included in application.js for precompilation.
> 
> How is it included in `application.js` if you're including `heatmap.js` [here](https://github.com/openstreetmap/openstreetmap-website/pull/5402/files#diff-78ff736409d758722403cce31873ba803b3fb526d37398ca21caa557b54dfd95R3)? But `d3` and `cal-heatmap` are added to `application.js`, bringing its size up to ~400kb from ~250kb.

I've moved the import to `heatmap.js`. Should be resolved now.



> > I've updated the code to account for the "Preferred Website Color Scheme." Theme settings should now be working correctly.
> 
> It's not going to work correctly because our _Auto_ option follows `prefers-color-scheme` which can change any time. If it does, you'll get for example this:
> 
> ![image](https://private-user-images.githubusercontent.com/4158490/399146698-77ad7234-a4e0-4441-a321-6f723f5a826a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzY4NDQ5NzMsIm5iZiI6MTczNjg0NDY3MywicGF0aCI6Ii80MTU4NDkwLzM5OTE0NjY5OC03N2FkNzIzNC1hNGUwLTQ0NDEtYTMyMS02ZjcyM2Y1YTgyNmEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAxMTRUMDg1MTEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjRiNmEwNGRhZWUwYTllMDZjMDRlNGM5Yjg5OTViMjQwNzM1OGE0NDg2YWIzYWZkOTMzNTliYTBmNTU5NGE3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.09evvZz2WBft87-EVJs6CR7YWBIyJxyH79iJhJvn2ho)
> 
> Looks like cal-heatmap doesn't have a proper auto scheme ["as not all websites support dark/light mode"](https://cal-heatmap.com/docs/options/theme).
> 
> You'd have to then setup a listener like [this](https://github.com/openstreetmap/openstreetmap-website/pull/4777/commits/e35141b2d1c1733d9a15a01c08b796e4edda6b4e#diff-4fe14e869cf17b068e1bea009a55b094fed13f0cad85337cf4769f32b40a01b5R11-R13) but without using Leaflet of course and redraw the heatmap.
> 
> Same is true for #5426 by the way.

Added the logic to handle the auto prefered-color-changes. Should be resolved now as well.





> CSP violations, days of week won't be visible if not resolved:
> 
> > Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-attr) from being applied
> 
> ![image](https://private-user-images.githubusercontent.com/4158490/399146508-63e176b4-22d8-4238-9d3c-101a1cd06332.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzY4NDQ5NzMsIm5iZiI6MTczNjg0NDY3MywicGF0aCI6Ii80MTU4NDkwLzM5OTE0NjUwOC02M2UxNzZiNC0yMmQ4LTQyMzgtOWQzYy0xMDFhMWNkMDYzMzIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAxMTRUMDg1MTEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTBmMzk1ZDkzMGZjMDJlMWEwMzliZjg4OTEyYWY1NGQ2MmZjNDZiN2Y0MjRhYmM5YTFkNTU5ZjI3MTdhZDY2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.NOccBT9pka3XwEZsiLGH3Z_6Oard3C0UcPaL8sTn8wk)

I'm working on resolving this CSP violations. They are from `CalendarLabel` plugin. Right now I'm trying to generate nonce for the .js file and use that to validate and transpass the CSP violation. I'm not sure if it is the right approach for this since I never had experience dealing with similar stuff before. If there is a more elegant and compact solution, please feel free to point it out.

Thank you. 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5402#issuecomment-2589406777
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5402/c2589406777 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250114/a4a4e22b/attachment.htm>