Fix/thumbnail fix

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bbrauzzi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,9 +1,18 @@
 # MapExplorer — ESA data search portal via STAC
 
+[![CI](https://github.com/bbrauzzi/map-explorer/actions/workflows/ci.yml/badge.svg)](https://github.com/bbrauzzi/map-explorer/actions/workflows/ci.yml)
+[![Live demo](https://img.shields.io/badge/demo-GitHub%20Pages-2ea44f)](https://bbrauzzi.github.io/map-explorer/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![React](https://img.shields.io/badge/React-18-61dafb?logo=react&logoColor=white)](https://react.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org)
+[![Vite](https://img.shields.io/badge/Vite-5-646cff?logo=vite&logoColor=white)](https://vite.dev)
+
 Web app for simple, filtered exploration of the **Copernicus Data Space Ecosystem
 STAC catalog** (ESA data: Sentinel-1/2/3/5P/6, Copernicus Contributing Missions,
 CLMS, ...).
 
+**🌍 Live demo:** <https://bbrauzzi.github.io/map-explorer/>
+
 ![MapExplorer preview](docs/preview.png)
 
 ## Features
@@ -37,12 +46,20 @@ authentication (out of scope for this portal).
 
 ### Note on CORS
 
-In **development**, requests go through a Vite proxy (`/stac` → real endpoint),
-configured in `vite.config.ts`, to avoid CORS issues.
+In **development**, requests go through Vite proxies (`/stac` → STAC API, `/thumb` →
+quicklook host), configured in `vite.config.ts`, so everything loads same-origin.
+
+In **production** (e.g. GitHub Pages) no proxy is needed for data: the STAC API at
+`https://stac.dataspace.copernicus.eu/v1` sends `Access-Control-Allow-Origin: *`, so the
+app calls the absolute endpoint directly (see `src/config.ts`).
 
-In **production**, the app calls the absolute endpoint directly (see `src/config.ts`).
-If the API does not send CORS headers, you will need a small reverse proxy in front
-(e.g. the same rule from `vite.config.ts` on Nginx/Cloudflare Worker).
+The one catch is **quicklook thumbnails**: their hrefs point at `datahub.creodias.eu`,
+which 301-redirects to the same path on `zipper.creodias.eu`. Only the final response
+carries CORS headers — the redirect itself does not — so a cross-origin WebGL texture
+fetch is blocked on the redirect hop. In prod the app rewrites the host straight to
+`zipper.creodias.eu` to skip the redirect (`thumbForMap` in `src/components/MapView.tsx`).
+If CreoDIAS ever changes that mapping or gates `zipper` behind auth, fall back to a small
+reverse proxy (e.g. the `/thumb` rule from `vite.config.ts` on Nginx/Cloudflare Worker).
 
 ## Structure
 
@@ -56,3 +73,7 @@ src/
   components/            # FilterPanel, MapView, ResultList, ItemDetail, SavedSearchesPanel
   App.tsx                # 3-zone layout and shared state
 ```
+
+## License
+
+Released under the [MIT License](LICENSE).

package.json

@@ -1,9 +1,15 @@
 {
   "name": "map-explorer",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
-  "description": "Portale di ricerca per dati ESA via STAC (Copernicus Data Space)",
+  "description": "Search portal for ESA data via STAC (Copernicus Data Space Ecosystem)",
+  "license": "MIT",
+  "homepage": "https://bbrauzzi.github.io/map-explorer/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bbrauzzi/map-explorer.git"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/components/MapView.test.tsx

@@ -331,11 +331,11 @@ describe('MapView quicklook overlays', () => {
     )
   })
 
-  it('loads creodias quicklook URLs directly in prod', () => {
+  it('rewrites datahub quicklook URLs to zipper in prod (skips the CORS-less redirect)', () => {
     vi.stubEnv('DEV', false)
     renderMapView({ selectedIds: new Set(['S2_A']) })
     expect(screen.getByTestId('source-quicklook-S2_A').getAttribute('data-url')).toBe(
-      'https://datahub.creodias.eu/odata/v1/preview.png',
+      'https://zipper.creodias.eu/odata/v1/preview.png',
     )
   })
 })

src/components/MapView.tsx

@@ -33,14 +33,21 @@ interface Props {
 
 type Corner = { lng: number; lat: number }
 
-// In dev, route creodias quicklook URLs through the Vite /thumb proxy so the
-// WebGL texture loads same-origin (no CORS / redirect quirks). In prod the
-// final image response is CORS `*`, so we load it directly.
+// Quicklook URLs point at datahub.creodias.eu, which 301-redirects to the same
+// path on zipper.creodias.eu. The redirect response carries no CORS header, so a
+// cross-origin WebGL texture fetch fails on the redirect hop even though the final
+// zipper response is CORS `*`. In dev we proxy via /thumb (followRedirects); in prod
+// we rewrite straight to zipper to skip the redirect.
 function thumbForMap(href: string): string {
-  if (!import.meta.env.DEV) return href
   try {
     const u = new URL(href, window.location.origin)
-    if (u.hostname.endsWith('creodias.eu')) return `/thumb${u.pathname}${u.search}`
+    if (u.hostname.endsWith('creodias.eu')) {
+      if (import.meta.env.DEV) return `/thumb${u.pathname}${u.search}`
+      if (u.hostname === 'datahub.creodias.eu') {
+        u.hostname = 'zipper.creodias.eu'
+        return u.toString()
+      }
+    }
     return href
   } catch {
     return href