docs: fix standalone examples (#12)

- add minimal stylesheet so control-panel works - alias source version of package to support debugging use-cases
visgl · Oct 4, 2023 · ce482f2 · ce482f2
1 parent 27c4f63
commit ce482f2
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 4 deletions.
diff --git a/examples/_template/index.html b/examples/_template/index.html
@@ -10,6 +10,7 @@
     <style>
       body {
         margin: 0;
+        font-family: sans-serif;
       }
       #app {
         width: 100vw;
@@ -20,6 +21,7 @@
   <body>
     <div id="app"></div>
     <script type="module">
+      import '../../website/src/styles.css';
       import {renderToDom} from './src/app';
       renderToDom(document.querySelector('#app'));
     </script>

diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js
@@ -1,12 +1,17 @@
-/* @ts-check */
 import {defineConfig, loadEnv} from 'vite';
+import {resolve} from 'node:path';
 
 export default defineConfig(({mode}) => {
   const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
 
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps': resolve('../../src/index.ts')
+      }
     }
   };
 });
diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html
@@ -12,6 +12,7 @@
     <style>
       body {
         margin: 0;
+        font-family: sans-serif;
       }
       #app {
         width: 100vw;
@@ -22,6 +23,7 @@
   <body>
     <div id="app" style=""></div>
     <script type="module">
+      import '../../website/src/styles.css';
       import {renderToDom} from './src/app';
       renderToDom(document.querySelector('#app'));
     </script>

diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js
@@ -1,12 +1,17 @@
-/* @ts-check */
 import {defineConfig, loadEnv} from 'vite';
+import {resolve} from 'node:path';
 
 export default defineConfig(({mode}) => {
   const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
 
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps': resolve('../../src/index.ts')
+      }
     }
   };
 });
diff --git a/examples/deckgl-overlay/index.html b/examples/deckgl-overlay/index.html
@@ -10,6 +10,7 @@
     <style>
       body {
         margin: 0;
+        font-family: sans-serif;
       }
       #app {
         width: 100vw;
@@ -20,6 +21,7 @@
   <body>
     <div id="app"></div>
     <script type="module">
+      import '../../website/src/styles.css';
       import {renderToDom} from './src/app';
       renderToDom(document.querySelector('#app'));
     </script>

diff --git a/examples/deckgl-overlay/vite.config.js b/examples/deckgl-overlay/vite.config.js
@@ -1,12 +1,17 @@
-/* @ts-check */
 import {defineConfig, loadEnv} from 'vite';
+import {resolve} from 'node:path';
 
 export default defineConfig(({mode}) => {
   const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
 
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps': resolve('../../src/index.ts')
+      }
     }
   };
 });
diff --git a/examples/markers-and-infowindows/index.html b/examples/markers-and-infowindows/index.html
@@ -10,6 +10,7 @@
     <style>
       body {
         margin: 0;
+        font-family: sans-serif;
       }
       #app {
         width: 100vw;
@@ -20,6 +21,7 @@
   <body>
     <div id="app"></div>
     <script type="module">
+      import '../../website/src/styles.css';
       import {renderToDom} from './src/app';
       renderToDom(document.querySelector('#app'));
     </script>

diff --git a/examples/markers-and-infowindows/vite.config.js b/examples/markers-and-infowindows/vite.config.js
@@ -1,12 +1,17 @@
-/* @ts-check */
 import {defineConfig, loadEnv} from 'vite';
+import {resolve} from 'node:path';
 
 export default defineConfig(({mode}) => {
   const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
 
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps': resolve('../../src/index.ts')
+      }
     }
   };
 });