<p></p>
<blockquote>
<blockquote>
<p dir="auto">Separate JS Files: There's already a heatmap.js file containing heatmap-related functionality, included in application.js for precompilation.</p>
</blockquote>
<p dir="auto">How is it included in <code class="notranslate">application.js</code> if you're including <code class="notranslate">heatmap.js</code> <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5402/files#diff-78ff736409d758722403cce31873ba803b3fb526d37398ca21caa557b54dfd95R3">here</a>? But <code class="notranslate">d3</code> and <code class="notranslate">cal-heatmap</code> are added to <code class="notranslate">application.js</code>, bringing its size up to ~400kb from ~250kb.</p>
</blockquote>
<p dir="auto">I've moved the import to <code class="notranslate">heatmap.js</code>. Should be resolved now.</p>
<blockquote>
<blockquote>
<p dir="auto">I've updated the code to account for the "Preferred Website Color Scheme." Theme settings should now be working correctly.</p>
</blockquote>
<p dir="auto">It's not going to work correctly because our <em>Auto</em> option follows <code class="notranslate">prefers-color-scheme</code> which can change any time. If it does, you'll get for example this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://private-user-images.githubusercontent.com/4158490/399146698-77ad7234-a4e0-4441-a321-6f723f5a826a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzY4NDQ5NzMsIm5iZiI6MTczNjg0NDY3MywicGF0aCI6Ii80MTU4NDkwLzM5OTE0NjY5OC03N2FkNzIzNC1hNGUwLTQ0NDEtYTMyMS02ZjcyM2Y1YTgyNmEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAxMTRUMDg1MTEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjRiNmEwNGRhZWUwYTllMDZjMDRlNGM5Yjg5OTViMjQwNzM1OGE0NDg2YWIzYWZkOTMzNTliYTBmNTU5NGE3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.09evvZz2WBft87-EVJs6CR7YWBIyJxyH79iJhJvn2ho"><img src="https://private-user-images.githubusercontent.com/4158490/399146698-77ad7234-a4e0-4441-a321-6f723f5a826a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzY4NDQ5NzMsIm5iZiI6MTczNjg0NDY3MywicGF0aCI6Ii80MTU4NDkwLzM5OTE0NjY5OC03N2FkNzIzNC1hNGUwLTQ0NDEtYTMyMS02ZjcyM2Y1YTgyNmEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAxMTRUMDg1MTEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjRiNmEwNGRhZWUwYTllMDZjMDRlNGM5Yjg5OTViMjQwNzM1OGE0NDg2YWIzYWZkOTMzNTliYTBmNTU5NGE3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.09evvZz2WBft87-EVJs6CR7YWBIyJxyH79iJhJvn2ho" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Looks like cal-heatmap doesn't have a proper auto scheme <a href="https://cal-heatmap.com/docs/options/theme" rel="nofollow">"as not all websites support dark/light mode"</a>.</p>
<p dir="auto">You'd have to then setup a listener like <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4777/commits/e35141b2d1c1733d9a15a01c08b796e4edda6b4e#diff-4fe14e869cf17b068e1bea009a55b094fed13f0cad85337cf4769f32b40a01b5R11-R13">this</a> but without using Leaflet of course and redraw the heatmap.</p>
<p dir="auto">Same is true for <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2752684525" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/5426" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/5426/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/5426">#5426</a> by the way.</p>
</blockquote>
<p dir="auto">Added the logic to handle the auto prefered-color-changes. Should be resolved now as well.</p>
<blockquote>
<p dir="auto">CSP violations, days of week won't be visible if not resolved:</p>
<blockquote>
<p dir="auto">Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-attr) from being applied</p>
</blockquote>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://private-user-images.githubusercontent.com/4158490/399146508-63e176b4-22d8-4238-9d3c-101a1cd06332.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzY4NDQ5NzMsIm5iZiI6MTczNjg0NDY3MywicGF0aCI6Ii80MTU4NDkwLzM5OTE0NjUwOC02M2UxNzZiNC0yMmQ4LTQyMzgtOWQzYy0xMDFhMWNkMDYzMzIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAxMTRUMDg1MTEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTBmMzk1ZDkzMGZjMDJlMWEwMzliZjg4OTEyYWY1NGQ2MmZjNDZiN2Y0MjRhYmM5YTFkNTU5ZjI3MTdhZDY2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.NOccBT9pka3XwEZsiLGH3Z_6Oard3C0UcPaL8sTn8wk"><img src="https://private-user-images.githubusercontent.com/4158490/399146508-63e176b4-22d8-4238-9d3c-101a1cd06332.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzY4NDQ5NzMsIm5iZiI6MTczNjg0NDY3MywicGF0aCI6Ii80MTU4NDkwLzM5OTE0NjUwOC02M2UxNzZiNC0yMmQ4LTQyMzgtOWQzYy0xMDFhMWNkMDYzMzIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDExNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAxMTRUMDg1MTEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTBmMzk1ZDkzMGZjMDJlMWEwMzliZjg4OTEyYWY1NGQ2MmZjNDZiN2Y0MjRhYmM5YTFkNTU5ZjI3MTdhZDY2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.NOccBT9pka3XwEZsiLGH3Z_6Oard3C0UcPaL8sTn8wk" alt="image" style="max-width: 100%;"></a></p>
</blockquote>
<p dir="auto">I'm working on resolving this CSP violations. They are from <code class="notranslate">CalendarLabel</code> 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.</p>
<p dir="auto">Thank you.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5402#issuecomment-2589406777">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLI5O3A72DC4UDCH7YL2KTJM3AVCNFSM6AAAAABTWNRZO6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOBZGQYDMNZXG4">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLKA4O4UFEUZDPWO2S32KTJM3A5CNFSM6AAAAABTWNRZO6WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTU2K43DS.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5402/c2589406777</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5402#issuecomment-2589406777",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5402#issuecomment-2589406777",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>