Merge pull request #6 from protomaps/static-site

Static site

Author: bdon

app/App.tsx

@@ -1,37 +1,11 @@
-import { For, createSignal, createEffect, onMount, Component } from "solid-js";
+import { For, createSignal, createEffect, createResource, onMount, Component, Show } from "solid-js";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./App.css";
 import maplibregl from "maplibre-gl";
 import { StyleSpecification } from "maplibre-gl";
 import { Flavor, layers } from "@protomaps/basemaps";
 
-const FLAVORS = ["bio", "dusk_rose", "iris_bloom","rainforest", "seafoam", "flat"];
-
-const nameToFlavor = new Map<string, Flavor>();
-
-import bio from "../flavors/bio.ts";
-nameToFlavor.set("bio", bio);
-
-import iris_bloom from "../flavors/iris_bloom.ts";
-nameToFlavor.set("iris_bloom", iris_bloom);
-
-import seafoam from "../flavors/seafoam.ts";
-nameToFlavor.set("seafoam", seafoam);
-
-// import sol from "../flavors/sol.ts";
-// nameToFlavor.set("sol", sol);
-
-import flat from "../flavors/flat.ts";
-nameToFlavor.set("flat", flat);
-
-import dusk_rose from "../flavors/dusk_rose.ts";
-nameToFlavor.set("dusk_rose", dusk_rose);
-
-import rainforest from "../flavors/rainforest.ts";
-nameToFlavor.set("rainforest", rainforest);
-
-const getStyle = (index: number, showLabels: boolean): StyleSpecification => {
-  let flavorName = FLAVORS[index];
+const getStyle = (flavor: Flavor | undefined, showLabels: boolean): StyleSpecification => {
   return {
     version: 8,
     glyphs:
@@ -42,13 +16,13 @@ const getStyle = (index: number, showLabels: boolean): StyleSpecification => {
         url: "https://api.protomaps.com/tiles/v4.json?key=1003762824b9687f",
       },
     },
-    layers: layers("protomaps", nameToFlavor.get(flavorName)!, { lang: showLabels ? "en" : undefined }),
+    layers: flavor ? layers("protomaps", flavor, { lang: showLabels ? "en" : undefined }) : []
   };
 };
 
-const FlavorRow: Component<{ name: string, flavor: Flavor }> = (props) => {
+const FlavorRow: Component<{ name: string }> = (props) => {
   return (
-    <div class="flavorRow" style={{ "background-color": props.flavor.background, "color": props.flavor.city_label }}>
+    <div class="flavorRow">
       {props.name}
     </div>
   )
@@ -57,7 +31,7 @@ const FlavorRow: Component<{ name: string, flavor: Flavor }> = (props) => {
 function App() {
   let map: maplibregl.Map;
 
-  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [selectedFlavorName, setSelectedFlavorName] = createSignal();
   const [showLabels, setShowLabels] = createSignal(true);
 
   onMount(async () => {
@@ -68,17 +42,25 @@ function App() {
 
     map = new maplibregl.Map({
       container: "map",
-      style: getStyle(selectedIndex(), showLabels()),
+      style: getStyle(undefined, showLabels()),
     });
   });
 
-  createEffect(() => {
-    map.setStyle(getStyle(selectedIndex(), showLabels()));
+  const [flavorList] = createResource(async () => {
+    const resp = await fetch("/flavors.json");
+    const j = await resp.json();
+    setSelectedFlavorName(j[0]);
+    return j;
+  })
+
+  const [flavorJson] = createResource(selectedFlavorName, async () => {
+    const resp = await fetch(`/flavors/${selectedFlavorName()}.json`);
+    return await resp.json();
   });
 
-  const selectFlavor = (i: number) => {
-    setSelectedIndex(i);
-  }
+  createEffect(() => {
+    map.setStyle(getStyle(flavorJson(), showLabels()));
+  });
 
   const handleShowLabelsChange = (event: Event) => {
     const target = event.target as HTMLInputElement;
@@ -88,7 +70,9 @@ function App() {
   return (
     <div id="container">
       <div class="sidebar">
-        <For each={FLAVORS}>{(flavorName,i) => <div onClick={() => selectFlavor(i())}><FlavorRow name={flavorName} flavor={nameToFlavor.get(flavorName)!}/></div>}</For>
+        <Show when={flavorList()}>
+          <For each={flavorList()}>{(flavorName) => <div onClick={() => setSelectedFlavorName(flavorName)}><FlavorRow name={flavorName}/></div>}</For>
+        </Show>
         <input
           id="showLabels"
           type="checkbox"

flavors/black_and_white.ts

@@ -81,7 +81,7 @@ export default <Flavor>{
   city_label_halo: WHITE,
   state_label: BLACK,
   state_label_halo: WHITE,
-  country_label: BLACK
+  country_label: BLACK,
 
   address_label: BLACK,
   address_label_halo: WHITE,

flavors/sol.ts

@@ -92,7 +92,7 @@ export default <Flavor> {
     glacier: 'rgba(239, 240, 231, 1)',
     scrub: 'rgba(176, 205, 174, 1)',
     forest: 'rgba(149, 207, 194, 1)'
-  }
+  },
 
   address_label: "black",
   address_label_halo: "white",

package-lock.json

@@ -10,11 +10,12 @@
     "build-ghpages": "tsc -b && vite build --base=/basemaps-flavors/"
   },
   "dependencies": {
-    "maplibre-gl": "5.4.0",
     "@protomaps/basemaps": "5.3.0",
+    "maplibre-gl": "5.4.0",
     "solid-js": "1.9.5"
   },
   "devDependencies": {
+    "@types/node": "^22.15.18",
     "typescript": "5.8.3",
     "vite": "6.3.3",
     "vite-plugin-solid": "2.11.6"

package.json

@@ -18,7 +18,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "types": ["node"]
   },
   "include": ["vite.config.ts"]
 }

tsconfig.node.json

@@ -1,6 +1,47 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
+import path from 'path'
+import fs from 'fs'
+
+const flavorList = () => {
+  const contentDir = path.resolve(__dirname, 'flavors')
+  let files = fs.readdirSync(contentDir)
+  return files.filter(f => f.endsWith('.ts')).map(f => f.slice(0,-3));
+}
+
+const flavorBody = async (name: string) => {
+  return (await import(`./flavors/${name}.ts`)).default;
+}
 
 export default defineConfig({
-  plugins: [solid()],
-})
+  plugins: [
+    {
+      'name':'basemaps-flavors',
+      configureServer(server) {
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url === '/flavors.json') {
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify(flavorList()));
+            return
+          }
+          if (req.url && req.url.startsWith("/flavors/")) {
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify(await flavorBody(req.url.slice(9,-5))));
+            return
+          }
+          next()
+        })
+      },
+      async generateBundle() {
+        const flist = flavorList();
+        const dir = path.resolve(__dirname, 'dist', 'flavors')
+        fs.mkdirSync(dir, {recursive: true});
+        fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors.json'), JSON.stringify(flist, null, 2))
+        for (const name of flist) {
+          fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors', `${name}.json`), JSON.stringify(await flavorBody(name), null, 2))
+        }
+      },
+    },
+    solid()
+  ]
+});