set up for context

lightning/package.json

@@ -12,7 +12,7 @@
         "postcss": "^8.4.23",
         "solid-start-node": "^0.2.26",
         "typescript": "^4.9.5",
-        "vite": "^4.3.0"
+        "vite": "^4.3.1"
     },
     "dependencies": {
         "@deck.gl/layers": "^8.9.8",
@@ -25,7 +25,7 @@
         "solid-js": "^1.7.3",
         "solid-map-gl": "^1.7.2",
         "solid-start": "^0.2.26",
-        "undici": "^5.21.2"
+        "undici": "^5.22.0"
     },
     "engines": {
         "node": ">=16.8"

lightning/pnpm-lock.yaml

@@ -30,10 +30,10 @@ dependencies:
     version: 1.7.2(empty-npm-package@1.0.0)
   solid-start:
     specifier: ^0.2.26
-    version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0)
+    version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1)
   undici:
-    specifier: ^5.21.2
+    specifier: ^5.22.0
-    version: 5.21.2
+    version: 5.22.0
 
 devDependencies:
   '@types/node':
@@ -47,13 +47,13 @@ devDependencies:
     version: 8.4.23
   solid-start-node:
     specifier: ^0.2.26
-    version: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0)
+    version: 0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1)
   typescript:
     specifier: ^4.9.5
     version: 4.9.5
   vite:
-    specifier: ^4.3.0
+    specifier: ^4.3.1
-    version: 4.3.0(@types/node@18.15.12)
+    version: 4.3.1(@types/node@18.15.12)
 
 packages:
 
@@ -3097,7 +3097,7 @@ packages:
       '@babel/types': 7.21.4
       solid-js: 1.7.3
 
-  /solid-start-node@0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0):
+  /solid-start-node@0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1):
     resolution: {integrity: sha512-8vciTGoQV+lIlCUSVHJPazlaoKDRfBowDkPeBr/EZdmtbcMOKoJYf/APPQWFspylF+nhzunMf0+zJP90VtMEYg==}
     peerDependencies:
       solid-start: '*'
@@ -3111,14 +3111,14 @@ packages:
       polka: 1.0.0-next.22
       rollup: 3.20.6
       sirv: 2.0.2
-      solid-start: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0)
+      solid-start: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1)
       terser: 5.17.1
-      undici: 5.21.2
+      undici: 5.22.0
-      vite: 4.3.0(@types/node@18.15.12)
+      vite: 4.3.1(@types/node@18.15.12)
     transitivePeerDependencies:
       - supports-color
 
-  /solid-start@0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0):
+  /solid-start@0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1):
     resolution: {integrity: sha512-kne2HZlnSMzsirdnvNs1CsDqBl0L0uvKKt1t4de1CH7JIngyqoMcER97jTE0Ejr84KknANaKAdvJAzZcL7Ueng==}
     hasBin: true
     peerDependencies:
@@ -3181,12 +3181,12 @@ packages:
       set-cookie-parser: 2.6.0
       sirv: 2.0.2
       solid-js: 1.7.3
-      solid-start-node: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0)
+      solid-start-node: 0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1)
       terser: 5.17.1
-      undici: 5.21.2
+      undici: 5.22.0
-      vite: 4.3.0(@types/node@18.15.12)
+      vite: 4.3.1(@types/node@18.15.12)
-      vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.0)
+      vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.1)
-      vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.0)
+      vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.1)
       wait-on: 6.0.1(debug@4.3.4)
     transitivePeerDependencies:
       - supports-color
@@ -3302,9 +3302,9 @@ packages:
     hasBin: true
     dev: true
 
-  /undici@5.21.2:
+  /undici@5.22.0:
-    resolution: {integrity: sha512-f6pTQ9RF4DQtwoWSaC42P/NKlUjvezVvd9r155ohqkwFNRyBKM3f3pcty3ouusefNRyM25XhIQEbeQ46sZDJfQ==}
+    resolution: {integrity: sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==}
-    engines: {node: '>=12.18'}
+    engines: {node: '>=14.0'}
     dependencies:
       busboy: 1.6.0
 
@@ -3356,7 +3356,7 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
-  /vite-plugin-inspect@0.7.23(rollup@3.20.6)(vite@4.3.0):
+  /vite-plugin-inspect@0.7.23(rollup@3.20.6)(vite@4.3.1):
     resolution: {integrity: sha512-VodzewpE9ufA8aPQhzTihbiMKAJ1aFoXNe+BB/3L52HB4Hf7I2WEOc1Yu4BC45rvw2VFuVnlXYlXL7JVQuseUw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -3368,12 +3368,12 @@ packages:
       fs-extra: 11.1.1
       picocolors: 1.0.0
       sirv: 2.0.2
-      vite: 4.3.0(@types/node@18.15.12)
+      vite: 4.3.1(@types/node@18.15.12)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /vite-plugin-solid@2.7.0(solid-js@1.7.3)(vite@4.3.0):
+  /vite-plugin-solid@2.7.0(solid-js@1.7.3)(vite@4.3.1):
     resolution: {integrity: sha512-avp/Jl5zOp/Itfo67xtDB2O61U7idviaIp4mLsjhCa13PjKNasz+IID0jYTyqUp9SFx6/PmBr6v4KgDppqompg==}
     peerDependencies:
       solid-js: ^1.7.2
@@ -3386,13 +3386,13 @@ packages:
       merge-anything: 5.1.4
       solid-js: 1.7.3
       solid-refresh: 0.5.2(solid-js@1.7.3)
-      vite: 4.3.0(@types/node@18.15.12)
+      vite: 4.3.1(@types/node@18.15.12)
-      vitefu: 0.2.4(vite@4.3.0)
+      vitefu: 0.2.4(vite@4.3.1)
     transitivePeerDependencies:
       - supports-color
 
-  /vite@4.3.0(@types/node@18.15.12):
+  /vite@4.3.1(@types/node@18.15.12):
-    resolution: {integrity: sha512-JTGFgDh3dVxeGBpuQX04Up+JZmuG6wu9414Ei36vQzaEruY/M4K0AgwtuB2b4HaBgB7R8l+LHxjB0jcgz4d2qQ==}
+    resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -3423,7 +3423,7 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
-  /vitefu@0.2.4(vite@4.3.0):
+  /vitefu@0.2.4(vite@4.3.1):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
@@ -3431,7 +3431,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.3.0(@types/node@18.15.12)
+      vite: 4.3.1(@types/node@18.15.12)
 
   /vt-pbf@3.1.3:
     resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}

lightning/src/components/BadassMap.tsx

@@ -1,9 +1,7 @@
 import MapGL, { Viewport, Camera } from 'solid-map-gl';
-import { createSignal, Show, Suspense, createEffect, createResource, For, Accessor } from 'solid-js';
+import { createSignal, Show} from 'solid-js';
-import { useRouteData } from 'solid-start';
 import * as maplibre from 'maplibre-gl';
 import MapControls from './MapControls';
-import { createStore } from 'solid-js/store';
 
 // deck.gl
 import { unstable_clientOnly } from 'solid-start';
@@ -12,69 +10,21 @@ const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')
 
 import type { JSX } from 'solid-js';
 import type { MapOptions } from 'maplibre-gl';
+import type { StyleSpecification } from 'maplibre-gl';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
-import * as MAP_STYLE from '~/style.json';
+import styleJson from '~/style.json';
+import type { ArcLayer, ArcLayerProps } from '@deck.gl/layers/typed';
+const MAP_STYLE: StyleSpecification = styleJson;
 
-type ChargingStation = {
-    Name: string
-    PhoneNumer: string
-    IntersectionDirections: string
-    AccessTime: string
-    Connectors: string[]
-    Network: string
-    Pricing: string
-    RestrictedAccess: boolean
-    CntLevel2Chargers: number
-    CntLevel3Chargers: number
-};
-type Location = {
-    StreetAddresss: string
-    City: string
-    State: string
-    Country: string
-    Zip: string
-    GeocodeStatus: string
-    Coordinates: string
-    CoordinateString: string
-    Stations: ChargingStation[]
-};
-type StationRequest = {
-    Latitude: number
-    Longitude: number
-    Distance: number
-    CountLimit: number
-};
-type StationResponse = {
-    Dist: number
-    Loc: Location
-}
 
 const TEST = {
-    FAN: {
+    FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
-        LngLatLike: { lng: -71.05625, lat: 42.36, },
+    GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], },
-        coords: [-71.05625, 42.36]
+    BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], },
-    },
+    GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], },
-    GDT: {
+    PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], },
-        LngLatLike: { lng: -71.056922, lat: 42.360919 },
+    NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
-        coords: [-71.056922, 42.360919],
-    },
-    BBC: {
-        LngLatLike: { lng: -71.103, lat: 42.3145 },
-        coords: [-71.103, 42.3145],
-    },
-    GAR: {
-        LngLatLike: { lng: -71.062228, lat: 42.366303 },
-        coords: [-71.062228, 42.366303],
-    },
-    PRH: {
-        LngLatLike: { lng: -71.053678, lat: 42.363722 },
-        coords: [-71.053678, 42.363722],
-    },
-    NSE: {
-        LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 },
-        coords: [-74.0112660425065, 40.70689167578798],
-    },
 };
 const ARC_DATA = [
     { source: TEST.FAN.coords, target: TEST.GDT.coords },
@@ -90,6 +40,18 @@ const SCAT_DATA = [
     { coordinates: TEST.PRH.coords },
     { coordinates: TEST.NSE.coords },
 ];
+const BOS: Viewport = {
+    center: TEST.FAN.coords,
+    zoom: 15.5,
+    bearing: 160,
+    pitch: 60,
+};
+const NYC: Viewport = {
+    center: TEST.NSE.coords,
+    zoom: 15.5,
+    bearing: 10,
+    pitch: 60,
+};
 
 const USER_LOC = TEST.FAN.LngLatLike;
 const INITIAL_VIEWPORT: Viewport = {
@@ -105,46 +67,20 @@ const options: MapOptions = {
     antialias: true,
     renderWorldCopies: false,
 };
-const BOS: Viewport = {
+
-    center: TEST.FAN.coords,
+function BadassMap(props: any): JSX.Element {
-    zoom: 15.5,
-    bearing: 160,
-    pitch: 60,
-};
-const NYC: Viewport = {
-    center: TEST.NSE.coords,
-    zoom: 15.5,
-    bearing: 10,
-    pitch: 60,
-};
-const TEST_PACKET: StationRequest = {
-    Latitude: USER_LOC.lat,
-    Longitude: USER_LOC.lng,
-    Distance: 10,
-    CountLimit: 10,
-}
-async function fetchStations() {
-    const payload: RequestInit = {
-        method: "POST",
-        cache: 'default',
-        body: JSON.stringify(TEST_PACKET),
-        headers: { 'Content-Type': 'application/json' },
-    }
-    const response = await fetch("https://kevinfwu.com/getnearest", payload);
-    return await response.json() as StationResponse[];
-};
-function BadassMap(): JSX.Element {
-    const [stations] = createResource(fetchStations);
 
     const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
     const [rotate, setRotate] = createSignal<boolean>(true);
+    const [scatData, setScatData] = createSignal(SCAT_DATA);
+    const [arcData, setArcData] = createSignal(ARC_DATA);
     const toggleRotate = () => setRotate<boolean>(!rotate());
 
-    function flyTo(viewUpdate: Viewport) {
+    async function flyTo(viewUpdate: Viewport) {
         setRotate<boolean>(false)
         setViewport<Viewport>(viewUpdate);
     };
-    function eventHandler(event: any) {
+    async function eventHandler(event: any) {
         switch (event.type) {
             case 'mousedown':
                 setRotate(false)
@@ -161,6 +97,7 @@ function BadassMap(): JSX.Element {
         };
     };
     return (
+        <>
             <MapGL
                 mapLib={maplibre}
                 options={options}
@@ -172,29 +109,24 @@ function BadassMap(): JSX.Element {
                 onTouchStart={eventHandler}
                 transitionType="flyTo"
             >
-            <MapScatLayer data={SCAT_DATA} />
+                <MapScatLayer data={scatData()} />
-            <MapArcLayer data={ARC_DATA} />
+                <MapArcLayer data={arcData()} />
 
                 <Camera rotateViewport={rotate()} reverse={true} />
 
                 <ul> <li>
                     <Show when={rotate()}
-                    fallback={<button onClick={toggleRotate}> Rotation On </button>} >
+                        fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
 
-                    <button onClick={toggleRotate}> Rotation Off </button> </Show> </li>
+                        <button onClick={toggleRotate}> Turn Rotation Off </button> </Show> </li>
                     <li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
                     <li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
-                <li><button onClick={() => console.log(stations())}> log stations </button> </li>
-                <Suspense fallback={<li>Loading stations...</li>}>
-                    <For each={stations()}>
-                        {(station) => <li>{station.Dist}</li>}
-                    </For>
-                </Suspense>
                 </ul>
 
                 <MapControls />
             </MapGL >
-    );
+        </>
+    ) as JSX.Element;
 };
 
 export default BadassMap;

lightning/src/components/Counter.css

@@ -1,20 +0,0 @@
-.increment {
-  font-family: inherit;
-  font-size: inherit;
-  padding: 1em 2em;
-  color: #335d92;
-  background-color: rgba(68, 107, 158, 0.1);
-  border-radius: 2em;
-  border: 2px solid rgba(68, 107, 158, 0);
-  outline: none;
-  width: 200px;
-  font-variant-numeric: tabular-nums;
-}
-
-.increment:focus {
-  border: 2px solid #335d92;
-}
-
-.increment:active {
-  background-color: rgba(68, 107, 158, 0.2);
-}

lightning/src/components/Counter.tsx

@@ -1,11 +0,0 @@
-import { createSignal } from "solid-js";
-import "./Counter.css";
-
-export default function Counter() {
-  const [count, setCount] = createSignal(0);
-  return (
-    <button class="increment" onClick={() => setCount(count() + 1)}>
-      Clicks: {count()}
-    </button>
-  );
-}

lightning/src/components/MapArcLayer.tsx

@@ -1,12 +1,10 @@
-import { ArcLayer } from '@deck.gl/layers/typed';
 import { MapboxLayer } from '@deck.gl/mapbox/typed';
+import { ArcLayer } from '@deck.gl/layers/typed';
 import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-
+function MapArcLayer(props: any) {
-function MapArcLayer(props): JSX.Element {
-
     const arcLayer = new MapboxLayer({
         id: 'deckgl-arc',
         type: ArcLayer,
@@ -17,12 +15,11 @@ function MapArcLayer(props): JSX.Element {
         getTargetColor: [0, 230, 0],
         getWidth: 6,
     });
-
     return (
         <>
             <Layer customLayer={arcLayer} />
         </>
-    );
+    ) as JSX.Element;
 };
 
 export default MapArcLayer;

lightning/src/components/MapControls.tsx

@@ -8,12 +8,12 @@ import type {
 
 import type { JSX } from 'solid-js';
 
-function MapControls(): JSX.Element {
+function MapControls() {
     const NAV_OPTIONS: NavigationOptions = {
         showCompass: true,
         showZoom: true,
         visualizePitch: true,
-    }
+    };
     const GEO_OPTIONS: GeolocateOptions = {
         positionOptions: {
             enableHighAccuracy: false,
@@ -24,15 +24,15 @@ function MapControls(): JSX.Element {
         trackUserLocation: false,
         showAccuracyCircle: false,
         showUserLocation: true,
-    }
+    };
     const ATTRIB_OPTIONS: AttributionOptions = {
         compact: false,
         customAttribution: 'OpenStreetMap',
-    }
+    };
     const SCALE_OPTIONS: ScaleOptions = {
         maxWidth: 100,
         unit: 'imperial',
-    }
+    };
     return (
         <>
             <Control
@@ -56,8 +56,8 @@ function MapControls(): JSX.Element {
                 options={SCALE_OPTIONS}
             />
         </>
-    )
+    ) as JSX.Element;
-}
+};
 
 export default MapControls;
 

lightning/src/components/MapScatLayer.tsx

@@ -3,11 +3,8 @@ import { MapboxLayer } from '@deck.gl/mapbox/typed';
 import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
-import type { ScatterplotLayerProps } from '@deck.gl/layers/typed';
-
-
-function MapScatLayer(props): JSX.Element {
 
+function MapScatLayer(props: any) {
     const scatterplotLayer = new MapboxLayer({
         id: 'deckgl-scatterplot',
         type: ScatterplotLayer,
@@ -21,7 +18,7 @@ function MapScatLayer(props): JSX.Element {
         <>
             <Layer customLayer={scatterplotLayer} />
         </>
-    );
+    ) as JSX.Element;
 };
 
 export default MapScatLayer;

lightning/src/components/MapScenegraphLayer.tsx

@@ -4,25 +4,28 @@ import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-
+function MapScenegraphLayer(props: any) {
-function MapScenegraphLayer(props): JSX.Element {
 
     const scenegraphLayer = new MapboxLayer({
-        id: 'deckgl-arc',
+        id: 'deckgl-scenegraph',
         type: ScenegraphLayer,
         data: props.data,
-        getSourcePosition: (d: any) => d.source,
+        pickable: true,
-        getTargetPosition: (d: any) => d.target,
+        scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
-        getSourceColor: [200, 0, 0],
+        getPosition: d => d.coordinates,
-        getTargetColor: [0, 230, 0],
+        getOrientation: d => [0, Math.random() * 180, 90],
-        getWidth: 6,
+        _animations: {
+            '*': { speed: 5 }
+        },
+        sizeScale: 500,
+        _lighting: 'pbr'
     });
 
     return (
         <>
             <Layer customLayer={scenegraphLayer} />
         </>
-    );
+    ) as JSX.Element;
 };
 
 export default MapScenegraphLayer;

lightning/src/components/StationsContext.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, createResource } from "solid-js";
+
+import type { JSX } from "solid-js";
+
+type ChargingStation = {
+    Name: string
+    PhoneNumer: string
+    IntersectionDirections: string
+    AccessTime: string
+    Connectors: string[]
+    Network: string
+    Pricing: string
+    RestrictedAccess: boolean
+    CntLevel2Chargers: number
+    CntLevel3Chargers: number
+};
+type Location = {
+    StreetAddresss: string
+    City: string
+    State: string
+    Country: string
+    Zip: string
+    GeocodeStatus: string
+    Coordinates: string
+    CoordinateString: string
+    Stations: ChargingStation[]
+};
+type StationRequest = {
+    Latitude: number
+    Longitude: number
+    Distance: number
+    CountLimit: number
+};
+type StationResponse = {
+    Dist: number
+    Loc: Location
+};
+const USER_LOC = { lng: -71.05625, lat: 42.36, };
+const TEST_PACKET: StationRequest = {
+    Latitude: USER_LOC.lat,
+    Longitude: USER_LOC.lng,
+    Distance: 10,
+    CountLimit: 10,
+};
+
+const StationsContext = createContext();
+
+export function StationsProvider(props: any) {
+    const [stations] = createResource(async () => {
+        const response = await fetch("https://kevinfwu.com/getnearest", {
+            method: "POST",
+            cache: 'default',
+            body: JSON.stringify(TEST_PACKET),
+            headers: { 'Content-Type': 'application/json' }
+        }); return await response.json() as Promise<StationResponse[]>;
+    });
+    return (
+        <StationsContext.Provider value={stations()}>
+            {props.children}
+        </StationsContext.Provider>
+    ) as JSX.Element;
+};
+
+export function getStations() { return useContext(StationsContext); };

lightning/src/entry-server.tsx

@@ -1,8 +1,4 @@
-import {
+import { createHandler, renderAsync, StartServer, } from "solid-start/entry-server";
-    createHandler,
-    renderAsync,
-    StartServer,
-} from "solid-start/entry-server";
 
 export default createHandler(
     renderAsync((event) => <StartServer event={event} />)

lightning/src/root.css

@@ -3,44 +3,28 @@ body {
     font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
         max-width: 300px;
-    margin: auto;
 }
-
 a {
     margin-right: 1rem;
 }
-
 main {
-    text-align: center;
+    background-color: hsla(230, 19%, 17%, 0.6);
-    padding: 1em;
-    margin: 0 auto;
-}
 
+}
 h1 {
-  color: #335d92;
+    color: #36EEE0;
     text-transform: uppercase;
     font-size: 4rem;
-  font-weight: 100;
+    font-weight: 300;
     line-height: 1.1;
-  margin: 1rem auto;
-  max-width: 14rem;
 }
-
 p {
-  max-width: 14rem;
-  margin: 2rem auto;
     line-height: 1.35;
 }
-ul {
-    max-width: 7rem;
-    margin: auto;
-}
-
 @media (min-width: 480px) {
   h1 {
     max-width: none;
   }
-
   p {
     max-width: none;
   }

lightning/src/root.tsx

@@ -1,19 +1,9 @@
 // @refresh reload
 import { Suspense } from "solid-js";
-import {
+import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start";
-    A,
-    Body,
-    ErrorBoundary,
-    FileRoutes,
-    Head,
-    Html,
-    Meta,
-    Routes,
-    Scripts,
-    Title,
-} from "solid-start";
 import "./root.css";
-import BadassMap from '~/components/BadassMap';
+import BadassMap from './components/BadassMap';
+import { StationsProvider } from "./components/StationsContext";
 
 export default function Root() {
     return (
@@ -26,16 +16,18 @@ export default function Root() {
             <Body>
                 <Suspense>
                     <ErrorBoundary>
+                        <StationsProvider>
                             <A href="/">Map</A>
                             <A href="/about">About</A>
-                        <BadassMap />
                             <Routes>
                                 <FileRoutes />
                             </Routes>
+                            <BadassMap />
+                        </StationsProvider>
                     </ErrorBoundary>
                 </Suspense>
                 <Scripts />
             </Body>
         </Html>
     );
-}
+};

lightning/src/routes/about.tsx

@@ -1,5 +1,6 @@
 import { Title } from 'solid-start';
-import Counter from "~/components/Counter";
+
+import type { JSX } from 'solid-js';
 
 export default function Home() {
     return (
@@ -55,5 +56,5 @@ export default function Home() {
                 </a>
             </p>
         </main>
-    );
+    ) as JSX.Element;
 }

lightning/src/routes/index.tsx

@@ -1,9 +1,12 @@
-import { Title } from "solid-start";
+import { Title } from 'solid-start';
+import { getStations } from '~/components/StationsContext';
+
+import type { JSX } from 'solid-js';
 
 export default function Home() {
     return (
         <main>
             <Title>Ride the Lightning</Title>
         </main>
-    );
+    ) as JSX.Element;
-}
+};

lightning/tsconfig.json

@@ -2,6 +2,7 @@
     "compilerOptions": {
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
+        "resolveJsonModule": true,
         "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "node",