fix: don't try to prerender, extract css, other minor fixes

visgl · May 10, 2024 · e207b05 · e207b05
1 parent d0e8b14
commit e207b05
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 36 deletions.
diff --git a/examples/extended-component-library/index.html b/examples/extended-component-library/index.html
@@ -5,7 +5,7 @@
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, user-scalable=no" />
-    <title>Example:</title>
+    <title>Example: Extended Component Library</title>
 
     <style>
       body {
@@ -16,37 +16,6 @@
         width: 100vw;
         height: 100vh;
       }
-
-      .App {
-        --gmpx-color-surface: #f6f5ff;
-        --gmpx-color-on-primary: #f8e8ff;
-        --gmpx-color-on-surface: #000;
-        --gmpx-color-on-surface-variant: #636268;
-        --gmpx-color-primary: #8a5cf4;
-        --gmpx-fixed-panel-height-column-layout: 420px;
-        --gmpx-fixed-panel-width-row-layout: 340px;
-        background: var(--gmpx-color-surface);
-        inset: 0;
-        position: fixed;
-      }
-
-      .MainContainer {
-        display: flex;
-        flex-direction: column;
-      }
-      .SplitLayoutContainer {
-        height: 100%;
-      }
-      .CollegePicker {
-        --gmpx-color-surface: #fff;
-        flex-grow: 1;
-        margin: 1rem;
-      }
-
-      .CloseButton {
-        display: block;
-        margin: 1rem;
-      }
     </style>
   </head>
   <body>

diff --git a/examples/extended-component-library/src/app.css b/examples/extended-component-library/src/app.css
@@ -0,0 +1,34 @@
+.App {
+  --gmpx-color-surface: #f6f5ff;
+  --gmpx-color-on-primary: #f8e8ff;
+  --gmpx-color-on-surface: #000;
+  --gmpx-color-on-surface-variant: #636268;
+  --gmpx-color-primary: #8a5cf4;
+  --gmpx-fixed-panel-height-column-layout: 420px;
+  --gmpx-fixed-panel-width-row-layout: 340px;
+
+  height: 100%;
+  width: 100%;
+  background: var(--gmpx-color-surface);
+  inset: 0;
+}
+
+.MainContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.SplitLayoutContainer {
+  height: 100%;
+}
+
+.CollegePicker {
+  --gmpx-color-surface: #fff;
+  flex-grow: 1;
+  margin: 1rem;
+}
+
+.CloseButton {
+  display: block;
+  margin: 1rem;
+}
diff --git a/examples/extended-component-library/src/app.tsx b/examples/extended-component-library/src/app.tsx
@@ -13,10 +13,13 @@ import {
   OverlayLayout,
   PlacePicker
 } from '@googlemaps/extended-component-library/react';
+
+import './app.css';
+
 // The below imports are necessary because we are creating refs of
 // the OverlayLayout and PlacePicker components.
 // You need to pass the ref property a web component type object.
-// Imports from  @googlemaps/extended-component-library/react are
+// Imports from @googlemaps/extended-component-library/react are
 // wrappers around web components, not the components themselves.
 // For the ref property we import the actual components and alias them for clarity.
 import {OverlayLayout as TOverlayLayout} from '@googlemaps/extended-component-library/overlay_layout.js';
@@ -25,7 +28,7 @@ import {PlacePicker as TPlacePicker} from '@googlemaps/extended-component-librar
 const API_KEY =
   globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
 
-const DEFAULT_CENTER = {lat: -34.397, lng: 150.644};
+const DEFAULT_CENTER = {lat: 38, lng: -98};
 const DEFAULT_ZOOM = 4;
 const DEFAULT_ZOOM_WITH_LOCATION = 16;
 
@@ -104,6 +107,7 @@ const App = () => {
                 college?.location ? DEFAULT_ZOOM_WITH_LOCATION : DEFAULT_ZOOM
               }
               gestureHandling="none"
+              disableDefaultUI
               fullscreenControl={false}
               zoomControl={false}>
               {college?.location && (

diff --git a/website/src/examples/extended-component-library.mdx b/website/src/examples/extended-component-library.mdx
@@ -1,5 +1,11 @@
 # Extended Component Library
 
-import App from 'website-examples/extended-component-library/src/app';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
-<App />
+<BrowserOnly>
+  {() => {
+    const App = require('website-examples/extended-component-library/src/app').default;
+    console.log(App);
+    return <App />;
+  }}
+</BrowserOnly>