Fix flag emoji rendering on desktop/Linux

Replace text emojis with Twemoji SVG images for cross-platform compatibility.
Flags now visible on all browsers regardless of system emoji font support.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: aborruso

LOG.md

@@ -2,6 +2,15 @@
 
 ## 2026-02-02
 
+### Website - Fix flag emoji rendering on Linux/desktop
+
+- **Fix**: Replace emoji flags with SVG images from Twemoji CDN
+- **Problem**: Country flag emojis (🇮🇹, 🇺🇸, 🇨🇦, 🇦🇺, 🇬🇧, 🇨🇭) not visible on Linux/desktop browsers lacking color emoji fonts
+- **Solution**: Use `<img>` tags pointing to `https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/`
+- **Benefits**: Works on all platforms, consistent appearance, better accessibility
+- **Files**: `website/src/pages/index.astro` (6 flag replacements), `website/src/styles/global.css` (removed `.emoji-flag` class)
+- **Impact**: Flags now visible on all devices (Linux, Windows, macOS, mobile)
+
 ### Release v0.4.38
 
 - Enhancement: add portal entries and API base URLs for catalog.data.gov, open.canada.ca, data.gov.au, and opendata.swiss

website/src/pages/index.astro

@@ -480,7 +480,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl emoji-flag">🇮🇹</span>
+              <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f9.svg" alt="🇮🇹" class="w-8 h-8" />
               <h3 class="display-font text-xl font-semibold text-navy">dati.gov.it</h3>
             </div>
             <p class="text-sm text-gray-600">Italian National Open Data Portal</p>
@@ -493,7 +493,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl emoji-flag">🇺🇸</span>
+              <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1f8.svg" alt="🇺🇸" class="w-8 h-8" />
               <h3 class="display-font text-xl font-semibold text-navy">catalog.data.gov</h3>
             </div>
             <p class="text-sm text-gray-600">United States Open Data</p>
@@ -506,7 +506,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl emoji-flag">🇨🇦</span>
+              <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1e6.svg" alt="🇨🇦" class="w-8 h-8" />
               <h3 class="display-font text-xl font-semibold text-navy">open.canada.ca</h3>
             </div>
             <p class="text-sm text-gray-600">Canada Open Government</p>
@@ -519,7 +519,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl emoji-flag">🇦🇺</span>
+              <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1fa.svg" alt="🇦🇺" class="w-8 h-8" />
               <h3 class="display-font text-xl font-semibold text-navy">data.gov.au</h3>
             </div>
             <p class="text-sm text-gray-600">Australian Government Open Data</p>
@@ -532,7 +532,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl emoji-flag">🇬🇧</span>
+              <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1e7.svg" alt="🇬🇧" class="w-8 h-8" />
               <h3 class="display-font text-xl font-semibold text-navy">data.gov.uk</h3>
             </div>
             <p class="text-sm text-gray-600">United Kingdom Open Data</p>
@@ -545,7 +545,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl emoji-flag">🇨🇭</span>
+              <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1ed.svg" alt="🇨🇭" class="w-8 h-8" />
               <h3 class="display-font text-xl font-semibold text-navy">opendata.swiss</h3>
             </div>
             <p class="text-sm text-gray-600">Swiss Open Data Portal</p>

website/src/styles/global.css

@@ -9,10 +9,5 @@
 }
 
 @layer utilities {
-  .emoji-flag {
-    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Segoe UI Symbol",
-      sans-serif;
-    font-variant-emoji: emoji;
-    line-height: 1;
-  }
+  /* Removed .emoji-flag - now using SVG images instead */
 }