christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: christian:session/CF-2812
Branches Tags
christian:main christian:session/CF-3006 christian:session/CF-2812 christian:session/CF-2803
..
compare: christian:7ff71c99eba744fc63cba7ed3b7a69ad274bfe25
Branches Tags
christian:main christian:session/CF-3006 christian:session/CF-2812 christian:session/CF-2803

2 Commits
session/CF ... 7ff71c99eb

Author SHA1 Message Date
Christian Gick
7ff71c99eb fix: remove stale Congo theme + research docs
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 9s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 1s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 1s
Details 
Congo submodule was re-added accidentally, overriding custom layouts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-03 13:50:19 +03:00
Christian Gick
42d5c51473 fix: restore nav menu, language dropdown, sidebar with TOC + articles
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 18s
Details
Deploy Internet for Kids / Deploy (push) Successful in 5s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 2s
Details 
- Nav shows About + Topics links again
- Language switcher is a proper dropdown (current lang + translations)
- Article sidebar with sticky TOC + recent articles list
- Wider content area (64rem) with 240px sidebar
- Responsive: sidebar hidden on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-03 13:47:05 +03:00
7 changed files with 168 additions and 176 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
public/ public/
resources/ resources/
.hugo_build.lock .hugo_build.lock
.claude-session/

3
.gitmodules vendored
View File

@@ -1,3 +0,0 @@
[submodule "themes/congo"]
path = themes/congo
url = https://github.com/jpanther/congo.git

34
layouts/_default/baseof.html
View File

@@ -13,46 +13,42 @@
{{/* Main stylesheet with Newsreader + custom colors */}} {{/* Main stylesheet with Newsreader + custom colors */}}
<link rel="stylesheet" href="{{ "css/main.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/main.css" | relURL }}">
</head> </head>
<body style="background-color:var(--ifk-bg);color:var(--ifk-text)"> <body class="bg-ifk-bg text-ifk-text">
<header style="border-bottom:1px solid #e5e7eb;background:white;position:sticky;top:0;z-index:40"> <header class="border-b bg-white sticky top-0 z-40">
<nav style="max-width:64rem;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center"> <nav class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="{{ "/" | relLangURL }}" style="font-family:var(--ifk-font);font-size:1.35rem;font-weight:600;color:var(--ifk-text);text-decoration:none"> <a href="{{ "/" | relLangURL }}" class="font-newsreader text-xl font-semibold text-ifk-text hover:text-ifk-accent">
{{ .Site.Title }} {{ .Site.Title }}
</a> </a>
<div style="display:flex;align-items:center;gap:1.5rem;font-family:system-ui,-apple-system,sans-serif;font-size:0.95rem">
{{ range .Site.Menus.main }}
{{ if ne .Identifier "locale" }}
<a href="{{ .URL | relLangURL }}" style="color:#4b5563;text-decoration:none">{{ .Name }}</a>
{{ end }}
{{ end }}
{{ partial "language-switcher.html" . }} {{ partial "language-switcher.html" . }}
</div>
</nav> </nav>
</header> </header>
<main style="flex:1"> <main class="flex-1">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
<footer style="border-top:1px solid #e5e7eb;background:white;margin-top:5rem"> <footer class="border-t bg-white mt-20">
<div style="max-width:64rem;margin:0 auto;padding:3rem 1rem"> <div class="max-w-4xl mx-auto px-4 py-12">
<div style="display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2rem"> <div class="grid grid-cols-2 md:grid-cols-3 gap-8 mb-12">
{{ range .Site.Menus.footer }} {{ range .Site.Menus.footer }}
<a href="{{ .URL | relLangURL }}" style="color:#6b7280;text-decoration:none;font-family:system-ui,sans-serif;font-size:0.875rem"> <a href="{{ .URL | relLangURL }}" class="text-gray-600 hover:text-ifk-accent">
{{ .Name }} {{ .Name }}
</a> </a>
{{ end }} {{ end }}
</div> </div>
<div style="border-top:1px solid #e5e7eb;padding-top:2rem;text-align:center;font-size:0.85rem;color:#6b7280;font-family:system-ui,sans-serif"> <div class="border-t pt-8 text-center text-sm text-gray-600">
<p> <p class="mb-2">
&copy; {{ now.Year }} {{ .Site.Title }}. A publication by <a href="https://www.agiliton.eu" style="color:var(--ifk-accent);text-decoration:none">Agiliton</a>. © {{ now.Year }} {{ .Site.Title }}. A publication by <a href="https://www.agiliton.eu" class="text-ifk-accent hover:text-ifk-accent-hover">Agiliton</a>.
</p> </p>
{{ partial "extend-footer.html" . }} {{ partial "extend-footer.html" . }}
</div> </div>
</div> </div>
</footer> </footer>
{{/* Analytics */}}
{{ partial "rybbit.html" . }} {{ partial "rybbit.html" . }}
{{/* SEO */}}
{{ partial "structured-data.html" . }} {{ partial "structured-data.html" . }}
</body> </body>
</html> </html>

111
layouts/_default/single.html
View File

@@ -1,13 +1,10 @@
{{ define "main" }} {{ define "main" }}
<div style="max-width:64rem;margin:0 auto;padding:3rem 1rem;display:grid;grid-template-columns:1fr 240px;gap:3rem"> <article class="prose-lg max-w-2xl mx-auto py-12 px-4">
<header class="mb-8">
{{/* Main article column */}} <h1 class="text-4xl font-newsreader font-semibold mb-4 leading-tight">
<article>
<header style="margin-bottom:2rem">
<h1 style="font-family:var(--ifk-font);font-size:2.75rem;font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin-bottom:1rem">
{{ .Title }} {{ .Title }}
</h1> </h1>
<div style="color:#6b7280;font-family:system-ui,-apple-system,sans-serif;font-size:0.95rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center"> <div class="text-gray-600 flex gap-4 flex-wrap">
{{ if .Date }} {{ if .Date }}
<time datetime="{{ .Date.Format "2006-01-02" }}"> <time datetime="{{ .Date.Format "2006-01-02" }}">
{{ .Date.Format "January 2, 2006" }} {{ .Date.Format "January 2, 2006" }}
@@ -20,83 +17,47 @@
<span>{{ .ReadingTime }} min read</span> <span>{{ .ReadingTime }} min read</span>
{{ end }} {{ end }}
</div> </div>
{{ with .Params.tags }}
<div style="margin-top:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap">
{{ range . }}
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" style="font-family:system-ui,sans-serif;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ifk-accent);text-decoration:none;border:1px solid #e5e7eb;padding:0.2rem 0.6rem;border-radius:4px">
{{ . }}
</a>
{{ end }}
</div>
{{ end }}
</header> </header>
<div class="article-body" style="font-family:var(--ifk-font);font-size:1.375rem;line-height:1.65"> {{ if .Params.toc | default true }}
<aside class="mb-8 p-4 bg-gray-50 rounded">
<h2 class="text-sm font-semibold uppercase tracking-wide mb-3">{{ i18n "table_of_contents" | default "Table of Contents" }}</h2>
{{ .TableOfContents }}
</aside>
{{ end }}
<div class="font-newsreader text-lg leading-relaxed prose prose-newsreader">
{{ .Content }} {{ .Content }}
</div> </div>
{{ if or .NextInSection .PrevInSection }} {{ with .Params.tags }}
<nav style="margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;gap:1rem"> <footer class="mt-12 pt-8 border-t">
<div class="text-sm">
<span class="font-semibold">{{ i18n "tags" | default "Tags" }}:</span>
{{ range . }}
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="inline-block mr-2 text-ifk-accent hover:text-ifk-accent-hover">
#{{ . }}
</a>
{{ end }}
</div>
</footer>
{{ end }}
</article>
{{ if or .NextInSection .PrevInSection }}
<nav class="max-w-2xl mx-auto px-4 py-12 flex justify-between gap-4">
{{ with .PrevInSection }} {{ with .PrevInSection }}
<a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text)"> <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-left">
<div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">&larr; {{ i18n "previous" | default "Previous" }}</div> <div class="text-xs font-semibold uppercase text-gray-600">← {{ i18n "previous" | default "Previous" }}</div>
<div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div> <div class="font-newsreader text-lg">{{ .Title }}</div>
</a> </a>
{{ end }} {{ end }}
{{ with .NextInSection }} {{ with .NextInSection }}
<a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text);text-align:right"> <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-right">
<div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">{{ i18n "next" | default "Next" }} &rarr;</div> <div class="text-xs font-semibold uppercase text-gray-600">{{ i18n "next" | default "Next" }} →</div>
<div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div> <div class="font-newsreader text-lg">{{ .Title }}</div>
</a> </a>
{{ end }} {{ end }}
</nav> </nav>
{{ end }} {{ end }}
</article>
{{/* Sidebar */}}
<aside style="font-family:system-ui,-apple-system,sans-serif">
{{/* Table of Contents */}}
{{ if .TableOfContents }}
<div style="position:sticky;top:5rem">
<h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-bottom:0.75rem">
{{ i18n "table_of_contents" | default "Contents" }}
</h3>
<div style="font-size:0.85rem;line-height:1.7;border-left:2px solid #e5e7eb;padding-left:0.75rem">
{{ .TableOfContents }}
</div>
{{/* Recent articles */}}
{{ $pages := where .Site.RegularPages "Section" .Section }}
{{ $recent := first 5 $pages }}
{{ if gt (len $recent) 1 }}
<h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-top:2rem;margin-bottom:0.75rem">
{{ i18n "recent_articles" | default "Recent" }}
</h3>
<div style="font-size:0.85rem;line-height:1.6">
{{ range $recent }}
{{ if ne .Permalink $.Permalink }}
<a href="{{ .Permalink }}" style="display:block;color:var(--ifk-text);text-decoration:none;padding:0.4rem 0;border-bottom:1px solid #f3f4f6">
{{ .Title }}
</a>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
{{ end }}
</aside>
</div>
<style>
@media (max-width: 768px) {
div[style*="grid-template-columns:1fr 240px"] {
display: block !important;
}
div[style*="grid-template-columns:1fr 240px"] > aside {
display: none;
}
}
</style>
{{ end }} {{ end }}

20
layouts/partials/language-switcher.html
View File

@@ -1,23 +1,9 @@
{{ if .IsTranslated }} {{ if .IsTranslated }}
<div class="lang-switch" style="position:relative"> <nav class="language-switcher" aria-label="Language">
<button onclick="this.parentElement.classList.toggle('open')" style="background:none;border:1px solid #e5e7eb;border-radius:6px;padding:0.35rem 0.75rem;cursor:pointer;font-family:system-ui,-apple-system,sans-serif;font-size:0.875rem;color:#4b5563;display:flex;align-items:center;gap:0.4rem">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="opacity:0.6"><path d="M4.545 6.714L4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/><path d="M0 2a2 2 0 012-2h7a2 2 0 012 2v3h3a2 2 0 012 2v7a2 2 0 01-2 2H7a2 2 0 01-2-2v-3H2A2 2 0 010 9V2zm2-1A1 1 0 001 2v7a1 1 0 001 1h7a1 1 0 001-1V2A1 1 0 009 1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 01-.415-.492 1.988 1.988 0 01-.94.31z"/></svg>
{{ .Language.LanguageName }}
<svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" style="opacity:0.5"><path d="M2 3.5L5 7l3-3.5H2z"/></svg>
</button>
<div class="lang-dropdown" style="display:none;position:absolute;right:0;top:calc(100% + 4px);background:white;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);overflow:hidden;min-width:140px;z-index:50">
<a href="{{ .Permalink }}" style="display:block;padding:0.5rem 1rem;font-size:0.875rem;font-family:system-ui,sans-serif;color:#4d7c0f;background:#f0fdf4;text-decoration:none;font-weight:500">
{{ .Language.LanguageName }} ✓
</a>
{{ range .Translations }} {{ range .Translations }}
<a href="{{ .Permalink }}" lang="{{ .Language.Lang }}" hreflang="{{ .Language.Lang }}" style="display:block;padding:0.5rem 1rem;font-size:0.875rem;font-family:system-ui,sans-serif;color:#374151;text-decoration:none"> <a href="{{ .Permalink }}" lang="{{ .Language.Lang }}" hreflang="{{ .Language.Lang }}">
{{ .Language.LanguageName }} {{ .Language.LanguageName }}
</a> </a>
{{ end }} {{ end }}
</div> </nav>
</div>
<style>
.lang-switch.open .lang-dropdown { display:block !important; }
.lang-dropdown a:hover { background:#f9fafb; }
</style>
{{ end }} {{ end }}

2
layouts/shortcodes/law-charts.html
View File

@@ -37,7 +37,7 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script> <script>
(function() { (function() {
var LANG = "{{ $lang }}"; var LANG = {{ $lang }};
var countries = {{ $countries | jsonify }}; var countries = {{ $countries | jsonify }};
var statusLabels = { var statusLabels = {

117
layouts/shortcodes/world-map.html
View File

@@ -1,18 +1,20 @@
{{ $lang := .Page.Language.Lang }} {{ $lang := .Page.Language.Lang }}
{{ $countries := hugo.Data.countries }} {{ $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="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.css" />
<style> <style>
.ifk-map-wrap { max-width: 100%; margin: 2rem 0; } .ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
.ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; } .ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
.ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; } .ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; background: #f0f4f8; } #ifk-world-map { width: 100%; height: 420px; border-radius: 8px; }
.ifk-map-legend { .ifk-map-legend {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
margin-top: 1rem; font-size: 0.8rem; margin-top: 1rem; font-size: 0.8rem;
} }
.ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; } .ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); } .ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
.maplibregl-popup-content { font-size: 0.85rem; max-width: 260px; line-height: 1.4; }
.maplibregl-popup-content strong { font-size: 0.95rem; }
@media (max-width: 640px) { #ifk-world-map { height: 280px; } } @media (max-width: 640px) { #ifk-world-map { height: 280px; } }
</style> </style>
@@ -21,20 +23,20 @@
<p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p> <p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p>
<div id="ifk-world-map"></div> <div id="ifk-world-map"></div>
<div class="ifk-map-legend"> <div class="ifk-map-legend">
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#4d7c0f"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div> <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#1e40af"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#059669"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div> <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#3b82f6"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#86efac"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div> <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#93c5fd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#d1fae5"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div> <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#dbeafe"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div> <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
</div> </div>
</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/maplibre-gl@4.7.1/dist/maplibre-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
<script> <script>
(function() { (function() {
var LANG = "{{ $lang }}"; var LANG = {{ $lang }};
var STATUS_COLORS = { enforced: '#4d7c0f', passed: '#059669', progress: '#86efac', guidelines: '#d1fae5' }; var STATUS_COLORS = { enforced: '#1e40af', passed: '#3b82f6', progress: '#93c5fd', guidelines: '#dbeafe' };
var STATUS_LABELS = { var STATUS_LABELS = {
en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' }, en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' }, de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
@@ -45,47 +47,96 @@
var byIsoNum = {}; var byIsoNum = {};
countries.forEach(function(c) { byIsoNum[c.isoNum] = c; }); countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
var map = L.map('ifk-world-map', { var map = new maplibregl.Map({
center: [25, 10], zoom: 2, minZoom: 2, maxZoom: 6, container: 'ifk-world-map',
scrollWheelZoom: false, zoomControl: true style: { version: 8, sources: { osm: { type: 'raster', tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'], tileSize: 256, attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>' } }, layers: [{ id: 'osm', type: 'raster', source: 'osm' }] },
center: [10, 25],
zoom: 1.5,
minZoom: 1,
maxZoom: 6,
scrollZoom: false,
attributionControl: true
}); });
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 6
}).addTo(map);
map.on('load', function() {
fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json') fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
.then(function(r) { return r.json(); }) .then(function(r) { return r.json(); })
.then(function(topo) { .then(function(topo) {
var geo = topojson.feature(topo, topo.objects.countries); var geo = topojson.feature(topo, topo.objects.countries);
L.geoJSON(geo, {
style: function(feature) { geo.features.forEach(function(f) {
var id = String(feature.id).padStart(3, '0'); var id = String(f.id).padStart(3, '0');
var c = byIsoNum[id]; var c = byIsoNum[id];
return { f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#e2e8f0';
fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0', f.properties.fillOpacity = c ? 0.65 : 0.15;
weight: 0.8, f.properties.isoNum = id;
color: '#94a3b8', });
fillOpacity: c ? 0.75 : 0.3
}; map.addSource('countries-choropleth', { type: 'geojson', data: geo });
map.addLayer({
id: 'choropleth-fill',
type: 'fill',
source: 'countries-choropleth',
paint: {
'fill-color': ['get', 'fillColor'],
'fill-opacity': ['get', 'fillOpacity']
}
});
map.addLayer({
id: 'choropleth-outline',
type: 'line',
source: 'countries-choropleth',
paint: {
'line-color': '#94a3b8',
'line-width': 0.6
}
});
map.addLayer({
id: 'choropleth-hover',
type: 'fill',
source: 'countries-choropleth',
paint: {
'fill-color': '#1e293b',
'fill-opacity': 0
}, },
onEachFeature: function(feature, layer) { filter: ['==', 'isoNum', '']
var id = String(feature.id).padStart(3, '0'); });
var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
map.on('mousemove', 'choropleth-fill', function(e) {
var id = e.features[0].properties.isoNum;
var c = byIsoNum[id];
map.getCanvas().style.cursor = c ? 'pointer' : '';
map.setFilter('choropleth-hover', ['==', 'isoNum', c ? id : '']);
map.setPaintProperty('choropleth-hover', 'fill-opacity', c ? 0.12 : 0);
});
map.on('mouseleave', 'choropleth-fill', function() {
map.getCanvas().style.cursor = '';
map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
map.setPaintProperty('choropleth-hover', 'fill-opacity', 0);
});
map.on('click', 'choropleth-fill', function(e) {
var id = e.features[0].properties.isoNum;
var c = byIsoNum[id]; var c = byIsoNum[id];
if (!c) return; if (!c) return;
var loc = c[LANG] || c.en; var loc = c[LANG] || c.en;
var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en; var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
layer.bindPopup( popup.setLngLat(e.lngLat).setHTML(
'<strong>' + c.flag + ' ' + loc.name + '</strong><br>' + '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
'<em>' + loc.law + '</em><br>' + '<em>' + loc.law + '</em><br>' +
'<span style="color:' + STATUS_COLORS[c.status] + ';font-weight:600">' + labels[c.status] + '</span> (' + c.year + ')<br>' + '<span style="color:' + STATUS_COLORS[c.status] + ';font-weight:600">' + labels[c.status] + '</span> (' + c.year + ')<br>' +
loc.detail loc.detail
); ).addTo(map);
layer.on('mouseover', function(e) { e.target.setStyle({ weight: 2, color: '#1e293b' }); }); });
layer.on('mouseout', function(e) { e.target.setStyle({ weight: 0.8, color: '#94a3b8' }); }); });
}
}).addTo(map);
}); });
})(); })();
</script> </script>