feat: self-host all JS/CSS (GDPR) + clicksports map tiles
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 14s
Deploy Internet for Kids / Deploy (push) Successful in 5s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s

- Leaflet, TopJSON, Chart.js, Mermaid served from /js/
- Leaflet CSS from /css/leaflet.min.css
- World atlas GeoJSON from /data/countries-110m.json
- Zero external CDN requests (GDPR compliant)
- Map tiles from maps.clicksports.de (fixed missing Noto Sans font)
- Attribution: clicksports maps + OpenMapTiles + OpenStreetMap
- window.load for script initialization (load order fix)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-03 14:35:17 +03:00
parent 2954021f85
commit f4b2511333
9 changed files with 3351 additions and 10 deletions

View File

@@ -34,9 +34,9 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script src="{{ "js/chart.umd.min.js" | relURL }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('load', function() {
var LANG = "{{ $lang }}";
var countries = {{ $countries | jsonify }};

View File

@@ -76,7 +76,7 @@ timeline
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script src="{{ "js/mermaid.min.js" | relURL }}"></script>
<script>
mermaid.initialize({ startOnLoad: true, theme: 'neutral', timeline: { useMaxWidth: true } });
</script>

View File

@@ -1,7 +1,7 @@
{{ $lang := .Page.Language.Lang }}
{{ $countries := hugo.Data.countries }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" />
<link rel="stylesheet" href="{{ "css/leaflet.min.css" | relURL }}" />
<style>
.ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
.ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
@@ -29,10 +29,10 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
<script src="{{ "js/leaflet.min.js" | relURL }}"></script>
<script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('load', function() {
var LANG = "{{ $lang }}";
var STATUS_COLORS = { enforced: '#4d7c0f', passed: '#059669', progress: '#86efac', guidelines: '#d1fae5' };
var STATUS_LABELS = {
@@ -50,12 +50,12 @@ document.addEventListener('DOMContentLoaded', function() {
scrollWheelZoom: false, zoomControl: true
});
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
L.tileLayer('https://maps.clicksports.de/styles/klokantech-basic/256/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://maps.clicksports.de">clicksports maps</a> &copy; <a href="https://openmaptiles.org">OpenMapTiles</a> &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 6
}).addTo(map);
fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
fetch('{{ "data/countries-110m.json" | relURL }}')
.then(function(r) { return r.json(); })
.then(function(topo) {
var geo = topojson.feature(topo, topo.objects.countries);