Merge branch 'streamline-renderer'

* streamline-renderer:
  Somewhat improved styles for hyperscript
  Change import prefix for page routes
  Hoisted pages directory
  Updated style merging to preserve atmosphere characteristics
  Updated pages
  Simplified renderer functions

packages/globe-dev/src/index.ts

@@ -7,7 +7,7 @@ import {
 import hyper from "@macrostrat/hyper";
 import { MapPosition } from "@macrostrat/mapbox-utils";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link } from "~/components/navigation/link-component";
+import { Link } from "~/components/navigation/Link";
 import CesiumView from "./cesium-view";
 
 import {

packages/sift/src/js/components/Column.tsx

@@ -1,7 +1,7 @@
 import h from "@macrostrat/hyper";
 import React from "react";
 import { useParams } from "react-router-dom";
-import { Link as VikeLink } from "~/components/navigation/link-component";
+import { Link as VikeLink } from "~/components/navigation/Link";
 import Chart from "./Chart";
 import Footer from "./Footer";
 import { SiftLink } from "./Link";

src/renderer/Head.ts → pages/+Head.ts

@@ -1,11 +1,11 @@
 import h from "@macrostrat/hyper";
 import { usePageContext } from "vike-react/usePageContext";
-import favicon from "./assets/favicon.png";
+import favicon from "~/_assets/favicon.png";
 
 export default function Head() {
   const ctx = usePageContext();
   const { environment } = ctx;
-  const { scripts = [] } = ctx.exports;
+  const { scripts = [] } = ctx.config;
 
   return h([
     h("meta", {

src/renderer/Layout.ts → pages/+Layout.ts

@@ -1,20 +1,20 @@
 import { DarkModeProvider } from "@macrostrat/ui-components";
-import React from "react";
+import { ReactNode } from "react";
 
-import { AuthProvider } from "../_providers/auth";
+import { AuthProvider } from "~/_providers/auth";
 import { usePageContext } from "vike-react/usePageContext";
 
 import "~/styles/blueprint-core";
-import "../styles/_theme.styl";
-import "../styles/core.sass";
-import "../styles/padding.css";
+import "~/styles/_theme.styl";
+import "~/styles/core.sass";
+import "~/styles/padding.css";
 //
 import h from "./layout.module.sass";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }: { children: ReactNode }) {
   const pageContext = usePageContext();
   const { exports = {}, config, user } = pageContext;
-  const supportsDarkMode = config?.supportsDarkMode ?? true;
+  const supportsDarkMode = true;
   const pageStyle = exports?.pageStyle ?? "fullscreen";
 
   return h(

src/pages/+config.ts → pages/+config.ts

@@ -2,16 +2,8 @@
 import vikeReact from "vike-react/config";
 import type { Config } from "vike/types";
 
-const Layout = "import:../renderer/Layout.ts:default";
-const Head = "import:../renderer/Head.ts:default";
-
-// import Head from "../renderer/Head.js";
-
 // Default config (can be overridden by pages)
 export default {
-  Layout,
-  Head,
-  // <title>
   title: "Macrostrat",
   description:
     "A platform for geological data exploration, integration, and analysis.",
@@ -26,8 +18,10 @@ export default {
     "title",
     "environment",
     "urlPathname",
+    "scripts",
   ],
   clientRouting: true,
+  supportsDarkMode: true,
   meta: {
     supportsDarkMode: {
       env: {

src/pages/+onBeforeRenderClient.ts → pages/+onBeforeRenderClient.ts

@@ -1,5 +1,5 @@
 import { FocusStyleManager } from "@blueprintjs/core";
-import { updatePageMeta } from "~/renderer/page-meta";
+import { updatePageMeta } from "~/renderer/updatePageMeta";
 
 export function onBeforeRenderClient(pageContext) {
   // Adjust title and description as needed

src/pages/+onPageTransitionEnd.ts → pages/+onPageTransitionEnd.ts

@@ -1,6 +1,6 @@
 // https://vike.dev/onPageTransitionEnd
 export { onPageTransitionEnd };
-import { usePageTransitionStore } from "../renderer/transitions";
+import { usePageTransitionStore } from "~/renderer/usePageTransitionStore";
 
 function onPageTransitionEnd() {
   document.querySelector("body").classList.remove("in-page-transition");

src/pages/+onPageTransitionStart.ts → pages/+onPageTransitionStart.ts

@@ -1,5 +1,5 @@
 export { onPageTransitionStart };
-import { usePageTransitionStore } from "../renderer/transitions";
+import { usePageTransitionStore } from "~/renderer/usePageTransitionStore";
 
 async function onPageTransitionStart() {
   // This function is called when a page transition starts.

src/pages/+onRenderHtml.ts → pages/+onRenderHtml.ts

@@ -1,7 +1,8 @@
 import { onRenderHtml as _onRenderHtml } from "vike-react/renderer/onRenderHtml";
-import { updatePageMeta } from "~/renderer/page-meta";
+import { updatePageMeta } from "~/renderer/updatePageMeta";
 
-// there is no onBeforeRenderHtml hook in vike-react, so we need to call updatePageMeta here
+// there is no onBeforeRenderHtml hook in vike-react, so we need to call updatePageMeta here to rewrite titles etc.
+// There might be a better way to handle this.
 
 export function onRenderHtml(pageContext) {
   return _onRenderHtml(updatePageMeta(pageContext));

src/pages/columns/+Page.ts → pages/columns/+Page.ts

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 import { ContentPage } from "~/layouts";
 import { PageHeader, Link, AssistantLinks, DevLinkButton } from "~/components";
 import { AnchorButton, Tag } from "@blueprintjs/core";
-import { usePageProps } from "~/renderer";
+import { usePageProps } from "~/renderer/usePageProps";
 
 export function Page() {
   const { columnGroups, title, linkPrefix } = usePageProps();

src/pages/columns/@column/+Page.ts → pages/columns/@column/+Page.ts

@@ -1,6 +1,6 @@
 import ColumnPage from "./column-inspector";
 import h from "@macrostrat/hyper";
-import { usePageProps } from "~/renderer";
+import { usePageProps } from "~/renderer/usePageProps";
 
 export function Page() {
   const props = usePageProps();

src/pages/columns/@column/+onBeforeRender.ts → pages/columns/@column/+onBeforeRender.ts

@@ -4,8 +4,8 @@ import { apiV2Prefix } from "@macrostrat-web/settings";
 import { preprocessUnits } from "@macrostrat/column-views/src/helpers";
 import fetch from "node-fetch";
 
-import { ColumnSummary } from "~/pages/map/map-interface/app-state/handlers/columns";
-import { fetchAPIData } from "~/pages/columns/utils";
+import { ColumnSummary } from "#/map/map-interface/app-state/handlers/columns";
+import { fetchAPIData } from "#/columns/utils";
 
 export async function onBeforeRender(pageContext) {
   // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here.

src/pages/columns/@column/column-inspector/index.ts → pages/columns/@column/column-inspector/index.ts

@@ -16,7 +16,7 @@ import ModalUnitPanel from "./modal-panel";
 import { BasePage } from "~/layouts";
 
 import { navigate } from "vike/client/router";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 
 const h = hyperStyled(styles);
 

src/pages/columns/correlation/+Page.ts → pages/columns/correlation/+Page.ts

@@ -10,7 +10,7 @@ import { FullscreenPage } from "~/layouts";
 import h from "./main.module.sass";
 import { compose, C } from "@macrostrat/hyper";
 import { baseMapURL, mapboxAccessToken } from "@macrostrat-web/settings";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import { Feature, FeatureCollection, LineString, Point } from "geojson";
 import { useEffect, useMemo } from "react";
 import { setGeoJSON } from "@macrostrat/mapbox-utils";
@@ -27,7 +27,7 @@ import {
   UnitSelectionProvider,
   useSelectedUnit,
 } from "@macrostrat/column-views";
-import { UnitDescription } from "~/pages/columns/correlation/column";
+import { UnitDescription } from "#/columns/correlation/column";
 
 export function Page() {
   const startup = useCorrelationDiagramStore((state) => state.startup);

src/pages/columns/correlation/column.ts → pages/columns/correlation/column.ts

@@ -25,7 +25,7 @@ import {
   LegendPanelHeader,
   UnitDetailsPopover,
 } from "~/components/unit-details";
-import { useCorrelationDiagramStore } from "~/pages/columns/correlation/state";
+import { useCorrelationDiagramStore } from "#/columns/correlation/state";
 
 export function MacrostratColumnProvider(props) {
   // A column provider specialized the Macrostrat API

src/pages/columns/correlation/correlation-chart.ts → pages/columns/correlation/correlation-chart.ts

@@ -3,13 +3,13 @@ import {
   preprocessUnits,
   useUnitSelectionDispatch,
 } from "@macrostrat/column-views";
-import { runColumnQuery } from "~/pages/map/map-interface/app-state/handlers/fetch";
+import { runColumnQuery } from "#/map/map-interface/app-state/handlers/fetch";
 import { Column, TimescaleColumn } from "./column";
 import { UnitLong } from "@macrostrat/api-types";
 import { GapBoundPackage, SectionRenderData, AgeComparable } from "./types";
 
 import h from "./main.module.sass";
-import { useCorrelationDiagramStore } from "~/pages/columns/correlation/state";
+import { useCorrelationDiagramStore } from "#/columns/correlation/state";
 
 export interface ColumnIdentifier {
   col_id: number;

src/pages/columns/correlation/state.ts → pages/columns/correlation/state.ts

@@ -1,8 +1,8 @@
 import { LineString, Point } from "geojson";
 import { create } from "zustand";
-import { ColumnGeoJSONRecord } from "~/pages/map/map-interface/app-state/handlers/columns";
+import { ColumnGeoJSONRecord } from "#/map/map-interface/app-state/handlers/columns";
 // Turf intersection
-import { fetchAllColumns } from "~/pages/map/map-interface/app-state/handlers/fetch";
+import { fetchAllColumns } from "#/map/map-interface/app-state/handlers/fetch";
 import {
   getCorrelationHashParams,
   setHashStringForCorrelation,

src/pages/dev/+Page.mdx → pages/dev/+Page.mdx

@@ -1,6 +1,5 @@
 export { ContentPage as default } from "~/layouts";
-import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageHeader, PageBreadcrumbs } from "~/components";
 
 <PageHeader title="Development pages"></PageHeader>
 <PageBreadcrumbs></PageBreadcrumbs>

src/pages/dev/concepts/+Page.mdx → pages/dev/concepts/+Page.mdx

@@ -1,5 +1,5 @@
 export { ContentPage as default } from "~/layouts";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 
 <PageBreadcrumbs></PageBreadcrumbs>
 

src/pages/dev/docs/+Page.ts → pages/dev/docs/+Page.ts

@@ -1,9 +1,9 @@
 import h from "@macrostrat/hyper";
 import { Link } from "~/components";
-import { usePageContext } from "~/renderer/page-context";
+import { usePageContext } from "vike-react/usePageContext";
 import { ErrorBoundary } from "@macrostrat/ui-components";
 import { ContentPage } from "~/layouts";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import { Popover, Tag } from "@blueprintjs/core";
 
 export function Page() {

src/pages/dev/feedback/+Page.ts → pages/dev/feedback/+Page.ts

@@ -1,7 +1,7 @@
 import h from "@macrostrat/hyper";
 
 import { ContentPage } from "~/layouts";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import { FeedbackWrap } from "@macrostrat/feedback-components";
 
 export function Page() {

src/pages/dev/lexicon/+Page.mdx → pages/dev/lexicon/+Page.mdx

@@ -1,5 +1,5 @@
 import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import "./main.styl";
 import { Image } from "./index";
 import { MacrostratIcon } from "~/components";

src/pages/dev/sources/+Page.client.ts → pages/dev/sources/+Page.client.ts

@@ -17,7 +17,7 @@ import {
   FeatureSelectionHandler,
 } from "@macrostrat/map-interface";
 import { NonIdealState } from "@blueprintjs/core";
-import { LinkItem } from "~/pages/map/dev/map-layers";
+import { LinkItem } from "#/map/dev/map-layers";
 import { Link } from "~/components";
 
 export function Page() {

src/pages/dev/test-site/donate/+Page.mdx → pages/dev/test-site/donate/+Page.mdx

@@ -1,5 +1,5 @@
 import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import { Image, Navbar, Footer } from "../index";
 import "./main.styl";
 import "../main.styl";
@@ -24,4 +24,4 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Footer"
-<Footer></Footer>
+<Footer></Footer>

src/pages/dev/test-site/people/+Page.mdx → pages/dev/test-site/people/+Page.mdx

@@ -1,5 +1,5 @@
 import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import { Image, Navbar, Footer } from "../index";
 import "./main.styl";
 import "../main.styl";
@@ -42,7 +42,7 @@ import { MacrostratIcon } from "~/components";
                 <a href="mailto: mazko@wisc.edu"><e>mazko -at wisc.edu</e></a>
             </div>
         </div>
-            
+
         <div class="person-info" id="michael">
             <Image className="back-img" src="michael.jpg"></Image>
             <div class="text">
@@ -56,31 +56,31 @@ import { MacrostratIcon } from "~/components";
         <Image className="back-img" src="casey.jpg"></Image>
             <div class="text">
                 <n><a href="https://idzikowski-casey.github.io/personal-site/" target="_blank">Casey Idzikowski</a></n> \
-                <t>Research Specialist, Developer (former)</t> 
+                <t>Research Specialist, Developer (former)</t>
             </div>
         </div>
 
         <div class="person-info" id="daniel">
         <Image className="back-img" src="daniel.jpg"></Image>
             <div class="text">
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Daniel Segessenmen</a></n> \
-                <t>Graduate Student (former)</t> 
+                <t>Graduate Student (former)</t>
             </div>
         </div>
 
         <div class="person-info" id="shan">
         <Image className="back-img" src="shan.jpg"></Image>
             <div class="text">
                 <n><a href="https://www.wisc.edu/directories/person.php?name=Victoria+Khoo&email=vkhoo%40wisc.edu&query=victoria%20khoo" target="_blank">Shan Ye</a></n> \
-                <t>Graduate Student (former)</t> 
+                <t>Graduate Student (former)</t>
             </div>
         </div>
 
         <div class="person-info" id="ben">
         <Image className="back-img" src="ben.jpg"></Image>
             <div class="text">
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Ben Linzmeier</a></n> \
-                <t>Postdoctoral Scholar (former)</t> 
+                <t>Postdoctoral Scholar (former)</t>
             </div>
         </div>
     </div>
@@ -90,15 +90,15 @@ import { MacrostratIcon } from "~/components";
         <Image className="back-img" src="afiqah.jpg"></Image>
             <div class="text">
                 <n><a href="https://www.wisc.edu/directories/person.php?name=Victoria+Khoo&email=vkhoo%40wisc.edu&query=victoria%20khoo" target="_blank">Afiqah Rafi</a></n> \
-                <t>Undergrad Student (former)</t> 
+                <t>Undergrad Student (former)</t>
             </div>
         </div>
 
         <div class="person-info" id="sharon">
         <Image className="back-img" src="sharon.jpg"></Image>
             <div class="text">
                 <n><a href="http://geoscience.wisc.edu/geoscience/people/student/?id=1007" target="_blank">Sharon McMullen</a></n> \
-                <t>Researcher (former)</t> 
+                <t>Researcher (former)</t>
             </div>
         </div>
 
@@ -124,23 +124,23 @@ import { MacrostratIcon } from "~/components";
         <Image className="back-img" src="erika.jpg"></Image>
             <div class="text">
                 <n><a href="https://github.com/ItoErika" target="_blank">Erika Ito</a></n> \
-                <t>Research Intern (former)</t> 
+                <t>Research Intern (former)</t>
             </div>
         </div>
 
         <div class="person-info" id="noel">
         <Image className="back-img" src="noel.jpg"></Image>
             <div class="text">
                 <n><a href="http://sedpaleo.org" target="_blank">Noel Heim</a></n> \
-                <t>Researcher (former)</t> 
+                <t>Researcher (former)</t>
             </div>
         </div>
 
         <div class="person-info" id="john">
         <Image className="back-img" src="john.jpg"></Image>
             <div class="text">
                 <n><a href="http://www.johnjcz.com" target="_blank">John Czaplewski</a></n> \
-                <t>Next-level Developer (former)</t> 
+                <t>Next-level Developer (former)</t>
             </div>
         </div>
 

src/pages/dev/test-site/publications/+Page.mdx → pages/dev/test-site/publications/+Page.mdx

@@ -1,5 +1,5 @@
 import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 import { Image, Navbar, Footer } from "../index";
 import "./main.styl";
 import "../main.styl";
@@ -97,4 +97,4 @@ import { MacrostratIcon } from "~/components";
 [//]: # "Footer"
 <Footer></Footer>
 
-</div>
+</div>

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

@@ -1,6 +1,6 @@
 import h from "@macrostrat/hyper";
 import { ContentPage } from "~/layouts";
-import { PageBreadcrumbs } from "~/renderer";
+import { PageBreadcrumbs } from "~/components";
 
 export function Page() {
   return h(ContentPage, [