From d3e0ecb0a7ebf0f3fb921d8f0989a085e661510a Mon Sep 17 00:00:00 2001 From: Adam <24621027+adoyle0@users.noreply.github.com> Date: Fri, 21 Apr 2023 08:32:26 -0400 Subject: [PATCH] set up for context --- lightning/package.json | 4 +- lightning/pnpm-lock.yaml | 56 +++--- lightning/src/components/BadassMap.tsx | 178 ++++++------------ lightning/src/components/Counter.css | 20 -- lightning/src/components/Counter.tsx | 11 -- lightning/src/components/MapArcLayer.tsx | 9 +- lightning/src/components/MapControls.tsx | 14 +- lightning/src/components/MapScatLayer.tsx | 7 +- .../src/components/MapScenegraphLayer.tsx | 21 ++- lightning/src/components/StationsContext.tsx | 64 +++++++ lightning/src/entry-server.tsx | 6 +- lightning/src/root.css | 38 ++-- lightning/src/root.tsx | 32 ++-- lightning/src/routes/about.tsx | 5 +- lightning/src/routes/index.tsx | 9 +- lightning/tsconfig.json | 1 + 16 files changed, 207 insertions(+), 268 deletions(-) delete mode 100644 lightning/src/components/Counter.css delete mode 100644 lightning/src/components/Counter.tsx create mode 100644 lightning/src/components/StationsContext.tsx diff --git a/lightning/package.json b/lightning/package.json index 9bd6657..f550425 100644 --- a/lightning/package.json +++ b/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" diff --git a/lightning/pnpm-lock.yaml b/lightning/pnpm-lock.yaml index a3ada56..af96ecf 100644 --- a/lightning/pnpm-lock.yaml +++ b/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 - version: 5.21.2 + specifier: ^5.22.0 + 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 - version: 4.3.0(@types/node@18.15.12) + specifier: ^4.3.1 + 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 - vite: 4.3.0(@types/node@18.15.12) + undici: 5.22.0 + 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 - vite: 4.3.0(@types/node@18.15.12) - vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.0) - vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.0) + undici: 5.22.0 + vite: 4.3.1(@types/node@18.15.12) + 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.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: - resolution: {integrity: sha512-f6pTQ9RF4DQtwoWSaC42P/NKlUjvezVvd9r155ohqkwFNRyBKM3f3pcty3ouusefNRyM25XhIQEbeQ46sZDJfQ==} - engines: {node: '>=12.18'} + /undici@5.22.0: + resolution: {integrity: sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==} + 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) - vitefu: 0.2.4(vite@4.3.0) + vite: 4.3.1(@types/node@18.15.12) + vitefu: 0.2.4(vite@4.3.1) transitivePeerDependencies: - supports-color - /vite@4.3.0(@types/node@18.15.12): - resolution: {integrity: sha512-JTGFgDh3dVxeGBpuQX04Up+JZmuG6wu9414Ei36vQzaEruY/M4K0AgwtuB2b4HaBgB7R8l+LHxjB0jcgz4d2qQ==} + /vite@4.3.1(@types/node@18.15.12): + 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==} diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx index 863bc29..430bca0 100644 --- a/lightning/src/components/BadassMap.tsx +++ b/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 { useRouteData } from 'solid-start'; +import { createSignal, Show} from 'solid-js'; 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: { - LngLatLike: { lng: -71.05625, lat: 42.36, }, - coords: [-71.05625, 42.36] - }, - GDT: { - LngLatLike: { lng: -71.056922, lat: 42.360919 }, - 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], - }, + FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] }, + GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, 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, - 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); + +function BadassMap(props: any): JSX.Element { const [viewport, setViewport] = createSignal(INITIAL_VIEWPORT); const [rotate, setRotate] = createSignal(true); + const [scatData, setScatData] = createSignal(SCAT_DATA); + const [arcData, setArcData] = createSignal(ARC_DATA); const toggleRotate = () => setRotate(!rotate()); - function flyTo(viewUpdate: Viewport) { + async function flyTo(viewUpdate: Viewport) { setRotate(false) setViewport(viewUpdate); }; - function eventHandler(event: any) { + async function eventHandler(event: any) { switch (event.type) { case 'mousedown': setRotate(false) @@ -161,40 +97,36 @@ function BadassMap(): JSX.Element { }; }; return ( - setViewport(evt)} - onDrag={eventHandler} - onMouseDown={eventHandler} - onZoomStart={eventHandler} - onTouchStart={eventHandler} - transitionType="flyTo" - > - - + <> + setViewport(evt)} + onDrag={eventHandler} + onMouseDown={eventHandler} + onZoomStart={eventHandler} + onTouchStart={eventHandler} + transitionType="flyTo" + > + + - + -
  • - Rotation On } > +
    • + Turn Rotation On } > -
      • -
      • -
      • -
      • - Loading stations...}> - - {(station) =>
    • {station.Dist}
      • } -       -       -
    +
    • +
    • +
    • +
- - - ); + + + + ) as JSX.Element; }; export default BadassMap; diff --git a/lightning/src/components/Counter.css b/lightning/src/components/Counter.css deleted file mode 100644 index 8bd0eb3..0000000 --- a/lightning/src/components/Counter.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/lightning/src/components/Counter.tsx b/lightning/src/components/Counter.tsx deleted file mode 100644 index 55a4e67..0000000 --- a/lightning/src/components/Counter.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSignal } from "solid-js"; -import "./Counter.css"; - -export default function Counter() { - const [count, setCount] = createSignal(0); - return ( - - ); -} diff --git a/lightning/src/components/MapArcLayer.tsx b/lightning/src/components/MapArcLayer.tsx index 1c8a03a..a585408 100644 --- a/lightning/src/components/MapArcLayer.tsx +++ b/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): JSX.Element { - +function MapArcLayer(props: any) { 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 ( <> - ); + ) as JSX.Element; }; export default MapArcLayer; diff --git a/lightning/src/components/MapControls.tsx b/lightning/src/components/MapControls.tsx index 776601d..bdb43a1 100644 --- a/lightning/src/components/MapControls.tsx +++ b/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 ( <> - ) -} + ) as JSX.Element; +}; export default MapControls; diff --git a/lightning/src/components/MapScatLayer.tsx b/lightning/src/components/MapScatLayer.tsx index c086217..2f2eceb 100644 --- a/lightning/src/components/MapScatLayer.tsx +++ b/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 { <> - ); + ) as JSX.Element; }; export default MapScatLayer; diff --git a/lightning/src/components/MapScenegraphLayer.tsx b/lightning/src/components/MapScenegraphLayer.tsx index acf7270..60b7396 100644 --- a/lightning/src/components/MapScenegraphLayer.tsx +++ b/lightning/src/components/MapScenegraphLayer.tsx @@ -4,25 +4,28 @@ import { Layer } from 'solid-map-gl'; import type { JSX } from 'solid-js'; - -function MapScenegraphLayer(props): JSX.Element { +function MapScenegraphLayer(props: any) { const scenegraphLayer = new MapboxLayer({ - id: 'deckgl-arc', + id: 'deckgl-scenegraph', type: ScenegraphLayer, data: props.data, - getSourcePosition: (d: any) => d.source, - getTargetPosition: (d: any) => d.target, - getSourceColor: [200, 0, 0], - getTargetColor: [0, 230, 0], - getWidth: 6, + pickable: true, + scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb', + getPosition: d => d.coordinates, + getOrientation: d => [0, Math.random() * 180, 90], + _animations: { + '*': { speed: 5 } + }, + sizeScale: 500, + _lighting: 'pbr' }); return ( <> - ); + ) as JSX.Element; }; export default MapScenegraphLayer; diff --git a/lightning/src/components/StationsContext.tsx b/lightning/src/components/StationsContext.tsx new file mode 100644 index 0000000..808e54e --- /dev/null +++ b/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; + }); + return ( + + {props.children} + + ) as JSX.Element; +}; + +export function getStations() { return useContext(StationsContext); }; diff --git a/lightning/src/entry-server.tsx b/lightning/src/entry-server.tsx index a796995..53e5825 100644 --- a/lightning/src/entry-server.tsx +++ b/lightning/src/entry-server.tsx @@ -1,8 +1,4 @@ -import { - createHandler, - renderAsync, - StartServer, -} from "solid-start/entry-server"; +import { createHandler, renderAsync, StartServer, } from "solid-start/entry-server"; export default createHandler( renderAsync((event) => ) diff --git a/lightning/src/root.css b/lightning/src/root.css index da8585a..d243ac7 100644 --- a/lightning/src/root.css +++ b/lightning/src/root.css @@ -1,46 +1,30 @@ body { background-color: #4C5270; - font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, + font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - max-width: 300px; - margin: auto; + max-width: 300px; } - a { - margin-right: 1rem; + margin-right: 1rem; } - main { - text-align: center; - padding: 1em; - margin: 0 auto; -} + background-color: hsla(230, 19%, 17%, 0.6); +} h1 { - color: #335d92; - text-transform: uppercase; - font-size: 4rem; - font-weight: 100; - line-height: 1.1; - margin: 1rem auto; - max-width: 14rem; + color: #36EEE0; + text-transform: uppercase; + font-size: 4rem; + font-weight: 300; + line-height: 1.1; } - p { - max-width: 14rem; - margin: 2rem auto; - line-height: 1.35; + line-height: 1.35; } -ul { - max-width: 7rem; - margin: auto; -} - @media (min-width: 480px) { h1 { max-width: none; } - p { max-width: none; } diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx index 7fcaa4e..acba196 100644 --- a/lightning/src/root.tsx +++ b/lightning/src/root.tsx @@ -1,19 +1,9 @@ // @refresh reload import { Suspense } from "solid-js"; -import { - A, - Body, - ErrorBoundary, - FileRoutes, - Head, - Html, - Meta, - Routes, - Scripts, - Title, -} from "solid-start"; +import { 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() { - Map - About - - - - + + Map + About + + + + + ); -} +}; diff --git a/lightning/src/routes/about.tsx b/lightning/src/routes/about.tsx index 00d56d0..97dedb9 100644 --- a/lightning/src/routes/about.tsx +++ b/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() {

- ); + ) as JSX.Element; } diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx index e3b77cb..91fb92c 100644 --- a/lightning/src/routes/index.tsx +++ b/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 (
Ride the Lightning
- ); -} + ) as JSX.Element; +}; diff --git a/lightning/tsconfig.json b/lightning/tsconfig.json index 2412d87..009eca1 100644 --- a/lightning/tsconfig.json +++ b/lightning/tsconfig.json @@ -2,6 +2,7 @@ "compilerOptions": { "allowSyntheticDefaultImports": true, "esModuleInterop": true, + "resolveJsonModule": true, "target": "ESNext", "module": "ESNext", "moduleResolution": "node",