Read the map keys from GOOGLE_MAPS_KEY and MAPBOX_KEY instead of the source (#3092)

.changeset/google-maps-key-env.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Removed the hardcoded Google Maps and Mapbox keys; map demos now read `GOOGLE_MAPS_KEY` and `MAPBOX_KEY` from the environment.

.gitignore

@@ -37,6 +37,7 @@ package-lock.json
 dist/
 packages-zip/
 .env
+.env*.local
 sri.json
 
 # TypeScript

preview/.env.example

@@ -0,0 +1,7 @@
+# Google Maps JavaScript API key for the map demo page (map-fullsize).
+# Optional. Restrict the key by HTTP referrer in the Google Cloud console.
+GOOGLE_MAPS_KEY=
+
+# Mapbox public access token (pk.…) for the Mapbox GL map demos.
+# Optional. Restrict the token by URL in the Mapbox account settings.
+MAPBOX_KEY=

shared/components/demo/Map.astro

@@ -1,8 +1,9 @@
 ---
-// Mapbox GL map. Access token from site.mapboxKey. Renders nothing unless
+// Mapbox GL map. Access token from the MAPBOX_KEY environment variable (.env or
-// maps[mapId] exists.
+// the host's settings), never from the source. Renders nothing unless
+// maps[mapId] exists; without a token the container renders but the map is not
+// initialised (Mapbox GL throws on a missing token).
 import maps from '@data/maps.json';
-import site from '@data/site.json';
 import CaptureScript from '../CaptureScript.astro';
 
 interface Props {
@@ -13,6 +14,8 @@ interface Props {
 
 const { mapId, ratio } = Astro.props;
 
+const mapboxKey = import.meta.env.MAPBOX_KEY ?? process.env.MAPBOX_KEY ?? '';
+
 type MapData = {
 	title?: string;
 	ratio?: string;
@@ -44,10 +47,10 @@ const ratioClass = data?.ratio ?? ratio ?? '16x9';
 	)
 }
 {
-	data && (
+	data && mapboxKey && (
 		<CaptureScript>
 			<!-- BEGIN MAP -->
-			<script is:inline define:vars={{ mapboxKey: site.mapboxKey, mapContainerId, style, zoom, center, markers }}>
+			<script is:inline define:vars={{ mapboxKey, mapContainerId, style, zoom, center, markers }}>
 				window.tabler_map ??= {};
 
 				function initMap() {

shared/data/site.json

@@ -13,9 +13,6 @@
   "changelogUrl": "https://tabler.io/changelog",
   "previewUrl": "https://preview.tabler.io",
   "docsUrl": "https://docs.tabler.io",
-  "mapboxKey": "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
-  "googleMapsKey": "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
-  "googleMapsDevKey": "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
   "npmPackage": "@tabler/core",
   "cssPlugins": [
     "flags",

shared/layouts/BaseLayout.astro

@@ -37,10 +37,12 @@ const rtlSuffix = rtl ? '.rtl' : ''
 
 type Lib = { npm?: string; js?: string[]; css?: string[]; head?: boolean }
 const pageLibEntries = Object.entries(libs as Record<string, Lib>).filter(([name]) => pageLibs.includes(name))
-const googleMapsKey = site.googleMapsDevKey
+// Google Maps API key comes from the environment (GOOGLE_MAPS_KEY in .env or the
+// host's settings), never from the source. Without it the script loads keyless.
+const googleMapsKey = import.meta.env.GOOGLE_MAPS_KEY ?? process.env.GOOGLE_MAPS_KEY ?? ''
 // External URLs (http/https) are emitted verbatim (with the maps-key placeholder
 // replaced); local files as ./dist/libs/{npm}/{file}.
-const libHref = (lib: Lib, file: string) => (/^https?:\/\//.test(file) ? file.replace('GOOGLE_MAPS_KEY', googleMapsKey) : `${base}/dist/libs/${lib.npm}/${file}`)
+const libHref = (lib: Lib, file: string) => (/^https?:\/\//.test(file) ? file.replace(googleMapsKey ? 'GOOGLE_MAPS_KEY' : '?key=GOOGLE_MAPS_KEY', googleMapsKey) : `${base}/dist/libs/${lib.npm}/${file}`)
 const libCssFiles = pageLibEntries.flatMap(([, lib]) => (lib.css ?? []).map((file) => libHref(lib, file)))
 const libJsFiles = (head: boolean) => pageLibEntries.filter(([, lib]) => Boolean(lib.head) === head).flatMap(([, lib]) => (lib.js ?? []).map((file) => libHref(lib, file)))
 ---

shared/lib/site.ts

@@ -15,8 +15,6 @@ export const site = {
   githubSponsorsUrl: 'https://github.com/sponsors/codecalm',
   icons: { link: 'https://tabler.io/icons' },
   emails: { price: '$29', buy_link: 'https://r.tabler.io/buy-emails' },
-  // Dev Google Maps API key for local development builds.
-  googleMapsDevKey: 'AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw',
   // From shared/data/icons-info.json.
   iconsCount: iconsInfo.count,
   iconsVersion: iconsInfo.version,

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalEnv": ["NODE_ENV", "VERCEL_ENV", "NEXT_PUBLIC_POSTHOG_KEY", "NEXT_PUBLIC_POSTHOG_HOST", "DOCSEARCH_API_KEY", "DOCSEARCH_APP_ID", "DOCSEARCH_INDEX_NAME"],
+  "globalEnv": ["NODE_ENV", "VERCEL_ENV", "NEXT_PUBLIC_POSTHOG_KEY", "NEXT_PUBLIC_POSTHOG_HOST", "DOCSEARCH_API_KEY", "DOCSEARCH_APP_ID", "DOCSEARCH_INDEX_NAME", "GOOGLE_MAPS_KEY", "MAPBOX_KEY"],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],