From c98a8b369e47245abc8f31bd4e4bd4fb260a3cd1 Mon Sep 17 00:00:00 2001
From: Malte Modrow <modrow@ubilabs.net>
Date: Wed, 17 Jan 2024 16:45:30 +0100
Subject: [PATCH] refactor(examples): add new mechanism for api key in examples

---
 .github/workflows/deploy-website.yml |  8 +++++++-
 examples/basic-map/index.html        |  5 ++++-
 examples/basic-map/src/app.tsx       | 12 ++++++++----
 examples/basic-map/vite.config.js    |  6 ++++++
 examples/vite.config.local.js        |  3 +++
 website/static/scripts/examples.js   |  6 ++++++
 6 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 website/static/scripts/examples.js

diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
index 6088670f..c1fb133b 100644
--- a/.github/workflows/deploy-website.yml
+++ b/.github/workflows/deploy-website.yml
@@ -38,7 +38,6 @@ jobs:
         working-directory: ./website
         run: npm ci
 
-
       - name: Build website
         working-directory: ./website
         run: |
@@ -46,6 +45,13 @@ jobs:
         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/**'
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html
index 8edcfc78..a8ceaa92 100644
--- a/examples/basic-map/index.html
+++ b/examples/basic-map/index.html
@@ -24,9 +24,12 @@
     <div id="app"></div>
     <script type="module">
       import '@vis.gl/react-google-maps/examples.css';
+      import {GOOGLE_MAPS_API_KEY} from '@vis.gl/react-google-maps/examples.js';
       import {renderToDom} from './src/app';
 
-      renderToDom(document.querySelector('#app'));
+      renderToDom(document.querySelector('#app'), {
+        apiKey: GOOGLE_MAPS_API_KEY
+      });
     </script>
   </body>
 </html>
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx
index ff560e40..dac85c52 100644
--- a/examples/basic-map/src/app.tsx
+++ b/examples/basic-map/src/app.tsx
@@ -6,8 +6,12 @@ import ControlPanel from './control-panel';
 
 const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
 
-const App = () => (
-  <APIProvider apiKey={API_KEY}>
+interface Props {
+  apiKey?: string;
+}
+
+const App = (props: Props) => (
+  <APIProvider apiKey={props.apiKey ?? API_KEY}>
     <Map
       zoom={3}
       center={{lat: 22.54992, lng: 0}}
@@ -19,12 +23,12 @@ const App = () => (
 );
 export default App;
 
-export function renderToDom(container: HTMLElement) {
+export function renderToDom(container: HTMLElement, props: Props) {
   const root = createRoot(container);
 
   root.render(
     <React.StrictMode>
-      <App />
+      <App {...props} />
     </React.StrictMode>
   );
 }
diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js
index 187e629c..522c6cb9 100644
--- a/examples/basic-map/vite.config.js
+++ b/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'
+      }
     }
   };
 });
diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js
index 97bdf340..bf866b05 100644
--- a/examples/vite.config.local.js
+++ b/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'
         ),
diff --git a/website/static/scripts/examples.js b/website/static/scripts/examples.js
new file mode 100644
index 00000000..9da867f5
--- /dev/null
+++ b/website/static/scripts/examples.js
@@ -0,0 +1,6 @@
+// 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
+export default {
+  GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY
+};