Merge pull request #121 from UW-Macrostrat/vike-redesign

Vike redesign

package.json

@@ -126,7 +126,7 @@
     "use-debounce": "^9.0.4",
     "use-react-router-breadcrumbs": "^3.2.1",
     "use-resize-observer": "^9.1.0",
-    "vike": "0.4.150-commit-63b1c32",
+    "vike": "^0.4.159",
     "vite": "^4.4.9",
     "vite-plugin-cesium": "^1.2.22"
   },

src/pages/+Page.ts

@@ -0,0 +1,13 @@
+import h from "@macrostrat/hyper";
+import { Link } from "~/renderer/Link";
+
+export function Page() {
+  return h([
+    h("h1", "Macrostrat dev"),
+    h("ul", [
+      h("li", h(Link, { href: "map" }, "Map")),
+      h("li", h(Link, { href: "maps" }, "Map index")),
+      h("li", h(Link, { href: "dev" }, "Dev layers")),
+    ]),
+  ]);
+}

src/pages/_error/+Page.ts

@@ -0,0 +1,14 @@
+export { Page };
+
+import h from "@macrostrat/hyper";
+
+function Page({ is404 }: { is404: boolean }) {
+  if (is404) {
+    return h([
+      h("h1", "404 Page Not Found"),
+      h("p", "This page could not be found."),
+    ]);
+  } else {
+    return h([h("h1", "500 Internal Error"), h("p", "Something went wrong.")]);
+  }
+}

src/pages/dev/ui-tests/data-sheet.page.ts → src/pages/dev/ui-tests/data-sheet/+Page.ts

@@ -1,7 +1,7 @@
-import hyper from "@macrostrat/hyper";
 import { Breadcrumbs, HotkeysProvider } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
 import { ClientOnly } from "~/renderer/client-only";
-import style from "./main.module.sass";
+import style from "../main.module.sass";
 
 const h = hyper.styled(style);
 

src/renderer/+config.h.ts

@@ -0,0 +1,5 @@
+import { Config } from "vike/types";
+
+export default {
+  passToClient: ["pageProps", "urlPathname"],
+} satisfies Config;

src/renderer/_default.page.client.tsx → src/renderer/+onRenderClient.ts

@@ -1,9 +1,10 @@
-export { render };
+export { render as onRenderClient };
 
+import { FocusStyleManager } from "@blueprintjs/core";
+import h from "@macrostrat/hyper";
 import { hydrateRoot } from "react-dom/client";
 import { PageShell } from "./page-shell";
 import type { PageContextClient } from "./types";
-import { FocusStyleManager } from "@blueprintjs/core";
 
 // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
 async function render(pageContext: PageContextClient) {
@@ -18,12 +19,7 @@ async function render(pageContext: PageContextClient) {
   console.log("Rendering on client");
   const root = document.getElementById("app-container");
   if (!root) throw new Error("DOM element #react-root not found");
-  hydrateRoot(
-    root,
-    <PageShell pageContext={pageContext}>
-      <Page {...pageProps} />
-    </PageShell>
-  );
+  hydrateRoot(root, h(PageShell, { pageContext }, h(Page, pageProps)));
 }
 
 /* To enable Client-side Routing:

src/renderer/_default.page.server.tsx → src/renderer/+onRenderHtml.ts

@@ -1,10 +1,10 @@
-export { render };
+export { render as onRenderHtml };
 // See https://vike.dev/data-fetching
-export const passToClient = ["pageProps", "urlPathname"];
 
+import h from "@macrostrat/hyper";
 import ReactDOMServer from "react-dom/server";
+import { dangerouslySkipEscape, escapeInject } from "vike/server";
 import { PageShell } from "./page-shell";
-import { escapeInject, dangerouslySkipEscape } from "vike/server";
 import type { PageContextServer } from "./types";
 
 async function render(pageContext: PageContextServer) {
@@ -13,9 +13,7 @@ async function render(pageContext: PageContextServer) {
   if (!Page)
     throw new Error("render() hook expects pageContext.Page to be defined");
   const pageHtml = ReactDOMServer.renderToString(
-    <PageShell pageContext={pageContext}>
-      <Page {...pageProps} />
-    </PageShell>
+    h(PageShell, { pageContext }, h(Page, pageProps))
   );
 
   // See https://vike.dev/head

src/renderer/Link.tsx → src/renderer/Link.ts

@@ -1,3 +1,4 @@
+import h from "@macrostrat/hyper";
 import { usePageContext } from "./page-context";
 
 export function Link(props: {
@@ -12,5 +13,5 @@ export function Link(props: {
   ]
     .filter(Boolean)
     .join(" ");
-  return <a {...props} className={className} />;
+  return h("a", { ...props, className });
 }