docs: add new mechanism for api key in examples (#162)

Adds a new mechanism that allows us to use an API-key from github-secrets exclusively when examples are opened in a codesandbox from the links on our website.

.github/workflows/deploy-website.yml

@@ -38,14 +38,20 @@ jobs:
         working-directory: ./website
         run: npm ci
 
-
       - name: Build website
         working-directory: ./website
         run: |
           npm run build
         env:
           GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
 
+      - name: Find and Replace - Examples API Key
+        uses: jacobtomlinson/gha-find-replace@v3
+        with:
+          find: 'process.env.GOOGLE_MAPS_API_KEY'
+          replace: ${{ secrets.GOOGLE_MAPS_API_KEY_EXAMPLES }}
+          include: './website/build/scripts/examples.js'
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:

examples/basic-map/index.html

@@ -24,6 +24,7 @@
     <div id="app"></div>
     <script type="module">
       import '@vis.gl/react-google-maps/examples.css';
+      import '@vis.gl/react-google-maps/examples.js';
       import {renderToDom} from './src/app';
 
       renderToDom(document.querySelector('#app'));

examples/basic-map/src/app.tsx

@@ -4,7 +4,8 @@ import {createRoot} from 'react-dom/client';
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 import ControlPanel from './control-panel';
 
-const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+const API_KEY =
+  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
 
 const App = () => (
   <APIProvider apiKey={API_KEY}>

examples/basic-map/vite.config.js

@@ -6,6 +6,12 @@ export default defineConfig(({mode}) => {
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps/examples.js':
+          'https://visgl.github.io/react-google-maps/scripts/examples.js'
+      }
     }
   };
 });

examples/global.d.ts

@@ -0,0 +1,5 @@
+export declare global {
+  // const or let does not work in this case, it has to be var
+  // eslint-disable-next-line no-var
+  var GOOGLE_MAPS_API_KEY: string | undefined;
+}

examples/vite.config.local.js

@@ -10,6 +10,9 @@ export default defineConfig(({mode}) => {
     },
     resolve: {
       alias: {
+        '@vis.gl/react-google-maps/examples.js': resolve(
+          '../../website/static/scripts/examples.js'
+        ),
         '@vis.gl/react-google-maps/examples.css': resolve(
           '../../examples/examples.css'
         ),

website/static/scripts/examples.js

@@ -0,0 +1,4 @@
+// For the codesandbox examples, the 'process.env.GOOGLE_MAPS_API_KEY'
+// gets replaced in the deploy task in the github action
+// to contain the valid key for the examples
+globalThis.GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;