From cc2487875a89a58656ddc4b32f1888578b750cc1 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Tue, 4 Jun 2024 04:46:23 -0500 Subject: [PATCH 01/16] Partial solution to environment etc. --- src/pages/+config.ts | 17 ++++++++--- src/pages/+onBeforeRenderClient.ts | 5 ++++ ...{+onRenderClient.ts => _onRenderClient.ts} | 1 + .../{+onRenderHtml.ts => _onRenderHtml.ts} | 0 src/pages/sift/+config.ts | 1 + src/renderer/Head.ts | 21 ++++++++++++++ src/renderer/page-shell.ts | 28 ++++++------------- 7 files changed, 50 insertions(+), 23 deletions(-) create mode 100644 src/pages/+onBeforeRenderClient.ts rename src/pages/{+onRenderClient.ts => _onRenderClient.ts} (98%) rename src/pages/{+onRenderHtml.ts => _onRenderHtml.ts} (100%) create mode 100644 src/renderer/Head.ts diff --git a/src/pages/+config.ts b/src/pages/+config.ts index 5a4bc392..594babd9 100644 --- a/src/pages/+config.ts +++ b/src/pages/+config.ts @@ -1,12 +1,14 @@ +// For full vike-react integration, we need to remove +onRenderClient.ts and +onRenderHTML.ts import vikeReact from "vike-react/config"; import type { Config } from "vike/types"; -//const Layout = "import:~/layouts:BasePage"; -//import Head from "../layouts/HeadDefault.js"; + +const Layout = "import:../renderer/page-shell.ts:PageShell"; +const Head = "import:../renderer/head.ts:Head"; // Default config (can be overridden by pages) export default { - //Layout, - //Head, + Layout, + Head, // title: "Macrostrat", extends: vikeReact, @@ -20,6 +22,7 @@ export default { "urlPathname", "description", "title", + "environment", ], clientRouting: true, meta: { @@ -41,5 +44,11 @@ export default { server: true, }, }, + environment: { + env: { + client: true, + server: true, + }, + }, }, } satisfies Config; diff --git a/src/pages/+onBeforeRenderClient.ts b/src/pages/+onBeforeRenderClient.ts new file mode 100644 index 00000000..840dbfdb --- /dev/null +++ b/src/pages/+onBeforeRenderClient.ts @@ -0,0 +1,5 @@ +import { FocusStyleManager } from "@blueprintjs/core"; + +export function onBeforeRenderClient() { + FocusStyleManager.onlyShowFocusOnTabs(); +} diff --git a/src/pages/+onRenderClient.ts b/src/pages/_onRenderClient.ts similarity index 98% rename from src/pages/+onRenderClient.ts rename to src/pages/_onRenderClient.ts index 0766268b..51b0f3e0 100644 --- a/src/pages/+onRenderClient.ts +++ b/src/pages/_onRenderClient.ts @@ -5,6 +5,7 @@ import h from "@macrostrat/hyper"; import ReactDOM from "react-dom/client"; import { PageShell } from "../renderer/page-shell"; import type { PageContextClient } from "../renderer/types"; +import vikeReact from "vike-react"; let root: ReactDOM.Root; diff --git a/src/pages/+onRenderHtml.ts b/src/pages/_onRenderHtml.ts similarity index 100% rename from src/pages/+onRenderHtml.ts rename to src/pages/_onRenderHtml.ts diff --git a/src/pages/sift/+config.ts b/src/pages/sift/+config.ts index 0acd0dec..3d09516c 100644 --- a/src/pages/sift/+config.ts +++ b/src/pages/sift/+config.ts @@ -13,4 +13,5 @@ export default { }, }, }, + title: "Sift", }; diff --git a/src/renderer/Head.ts b/src/renderer/Head.ts new file mode 100644 index 00000000..826856c2 --- /dev/null +++ b/src/renderer/Head.ts @@ -0,0 +1,21 @@ +import h from "@macrostrat/hyper"; +import { usePageContext } from "vike-react/usePageContext"; + +export function Head() { + const ctx = usePageContext(); + const { environment } = ctx; + + return h([ + h("meta", { + name: "viewport", + content: "width=device-width, initial-scale=1", + }), + h("meta", { name: "description", content: "Macrostrat" }), + h("script", { + type: "text/javascript", + children: `window.env = ${JSON.stringify( + environment + )}; window.process = {env: {NODE_ENV: "production"}};`, + }), + ]); +} diff --git a/src/renderer/page-shell.ts b/src/renderer/page-shell.ts index a7f83862..4acf8dc5 100644 --- a/src/renderer/page-shell.ts +++ b/src/renderer/page-shell.ts @@ -4,7 +4,7 @@ import React, { useEffect } from "react"; import { PageContextProvider } from "./page-context"; import { PageContext, PageStyle } from "./types"; import { AuthProvider } from "./auth"; - +import { usePageContext } from "vike-react/usePageContext"; import "~/styles/blueprint-core"; import "../styles/_theme.styl"; @@ -15,29 +15,19 @@ import styles from "./page-shell.module.sass"; const h = hyper.styled(styles); -export function PageShell({ - children, - pageContext, -}: { - children: React.ReactNode; - pageContext: PageContext; - supportsDarkMode?: boolean; -}) { - const { exports, config, user } = pageContext; +export function PageShell({ children }: { children: React.ReactNode }) { + const pageContext = usePageContext(); + const { exports = {}, config, user } = pageContext; const supportsDarkMode = config?.supportsDarkMode ?? true; const pageStyle = exports?.pageStyle ?? "fullscreen"; return h( - PageContextProvider, - { pageContext }, + AuthProvider, + { user }, // Prefer detailed user if available h( - AuthProvider, - { user }, // Prefer detailed user if available - h( - supportsDarkMode ? DarkModeProvider : NoOpDarkModeProvider, - { followSystem: true }, - h("div.app-shell", { className: pageStyle + "-page" }, children) - ) + supportsDarkMode ? DarkModeProvider : NoOpDarkModeProvider, + { followSystem: true }, + h("div.app-shell", { className: pageStyle + "-page" }, children) ) ); } From 77d2b54086bd332088ebef2c62f738a04f3760a8 Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 13:13:53 -0500 Subject: [PATCH 02/16] Created minimal test page demonstrating HMR error --- src/pages/test/+Page.tsx | 5 +++++ src/pages/test/style.module.css | 4 ++++ vite.config.ts | 2 +- 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 src/pages/test/+Page.tsx create mode 100644 src/pages/test/style.module.css diff --git a/src/pages/test/+Page.tsx b/src/pages/test/+Page.tsx new file mode 100644 index 00000000..8db2448a --- /dev/null +++ b/src/pages/test/+Page.tsx @@ -0,0 +1,5 @@ +import styles from "./style.module.css"; + +export function Page() { + return <div className={styles.test}>Hello world</div>; +} diff --git a/src/pages/test/style.module.css b/src/pages/test/style.module.css new file mode 100644 index 00000000..6a3e4974 --- /dev/null +++ b/src/pages/test/style.module.css @@ -0,0 +1,4 @@ +.test { + color: yellow; + margin: 2em; +} diff --git a/vite.config.ts b/vite.config.ts index 62b1a440..b1d357aa 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -83,7 +83,7 @@ const config: UserConfig = { cesiumBuildPath, cesiumBuildRootPath: cesiumRoot, }), - hyperStyles(), + //hyperStyles(), ], envDir: path.resolve(__dirname), build: { From 02e745b2ae3377a8fc773cf32920e8e5ae46ec7c Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 13:24:13 -0500 Subject: [PATCH 03/16] Updated dependencies --- package.json | 6 +- yarn.lock | 334 +++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 301 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 0aa44c13..94ed1bf9 100644 --- a/package.json +++ b/package.json @@ -144,9 +144,9 @@ "use-debounce": "^9.0.4", "use-react-router-breadcrumbs": "^3.2.1", "use-resize-observer": "^9.1.0", - "vike": "^0.4.172", - "vike-react": "^0.4.11", - "vite": "^5.2.11", + "vike": "^0.4.177", + "vike-react": "^0.4.15", + "vite": "^5.3.2", "vite-plugin-cesium": "^1.2.22", "vite-plugin-inspect": "^0.8.4", "zustand": "^4.5.1" diff --git a/yarn.lock b/yarn.lock index 13a27186..3b2c60db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4140,14 +4140,7 @@ __metadata: languageName: node linkType: hard -"@brillout/picocolors@npm:^1.0.10": - version: 1.0.10 - resolution: "@brillout/picocolors@npm:1.0.10" - checksum: 10/e14436613d6c4c6f3f6921b5244b13f5bd21b69cb8645f4c454961ceba41bc666613ee11d03534000cdfc8da95eb09efb1f90bf8a941f9e37f362359f8b2b4c3 - languageName: node - linkType: hard - -"@brillout/picocolors@npm:^1.0.11": +"@brillout/picocolors@npm:^1.0.11, @brillout/picocolors@npm:^1.0.13": version: 1.0.13 resolution: "@brillout/picocolors@npm:1.0.13" checksum: 10/337fd4d9799b7cd55225a7405061c3aca1c6b357bb9f02996bf054713344dd1044cf7fb56e80044029d08a3c3169cb3e7094269bfcacc00b6530b408c39c6a69 @@ -4662,6 +4655,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/aix-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/aix-ppc64@npm:0.21.5" + conditions: os=aix & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/android-arm64@npm:0.18.20" @@ -4690,6 +4690,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm64@npm:0.21.5" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/android-arm@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/android-arm@npm:0.18.20" @@ -4718,6 +4725,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm@npm:0.21.5" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@esbuild/android-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/android-x64@npm:0.18.20" @@ -4746,6 +4760,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-x64@npm:0.21.5" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + "@esbuild/darwin-arm64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/darwin-arm64@npm:0.18.20" @@ -4774,6 +4795,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-arm64@npm:0.21.5" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/darwin-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/darwin-x64@npm:0.18.20" @@ -4802,6 +4830,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-x64@npm:0.21.5" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@esbuild/freebsd-arm64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/freebsd-arm64@npm:0.18.20" @@ -4830,6 +4865,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-arm64@npm:0.21.5" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/freebsd-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/freebsd-x64@npm:0.18.20" @@ -4858,6 +4900,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-x64@npm:0.21.5" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/linux-arm64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-arm64@npm:0.18.20" @@ -4886,6 +4935,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm64@npm:0.21.5" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/linux-arm@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-arm@npm:0.18.20" @@ -4914,6 +4970,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm@npm:0.21.5" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@esbuild/linux-ia32@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-ia32@npm:0.18.20" @@ -4942,6 +5005,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ia32@npm:0.21.5" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/linux-loong64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-loong64@npm:0.18.20" @@ -4970,6 +5040,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-loong64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-loong64@npm:0.21.5" + conditions: os=linux & cpu=loong64 + languageName: node + linkType: hard + "@esbuild/linux-mips64el@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-mips64el@npm:0.18.20" @@ -4998,6 +5075,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-mips64el@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-mips64el@npm:0.21.5" + conditions: os=linux & cpu=mips64el + languageName: node + linkType: hard + "@esbuild/linux-ppc64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-ppc64@npm:0.18.20" @@ -5026,6 +5110,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ppc64@npm:0.21.5" + conditions: os=linux & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/linux-riscv64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-riscv64@npm:0.18.20" @@ -5054,6 +5145,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-riscv64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-riscv64@npm:0.21.5" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + "@esbuild/linux-s390x@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-s390x@npm:0.18.20" @@ -5082,6 +5180,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-s390x@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-s390x@npm:0.21.5" + conditions: os=linux & cpu=s390x + languageName: node + linkType: hard + "@esbuild/linux-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/linux-x64@npm:0.18.20" @@ -5110,6 +5215,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-x64@npm:0.21.5" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + "@esbuild/netbsd-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/netbsd-x64@npm:0.18.20" @@ -5138,6 +5250,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/netbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/netbsd-x64@npm:0.21.5" + conditions: os=netbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/openbsd-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/openbsd-x64@npm:0.18.20" @@ -5166,6 +5285,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/openbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/openbsd-x64@npm:0.21.5" + conditions: os=openbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/sunos-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/sunos-x64@npm:0.18.20" @@ -5194,6 +5320,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/sunos-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/sunos-x64@npm:0.21.5" + conditions: os=sunos & cpu=x64 + languageName: node + linkType: hard + "@esbuild/win32-arm64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/win32-arm64@npm:0.18.20" @@ -5222,6 +5355,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-arm64@npm:0.21.5" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/win32-ia32@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/win32-ia32@npm:0.18.20" @@ -5250,6 +5390,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-ia32@npm:0.21.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/win32-x64@npm:0.18.20": version: 0.18.20 resolution: "@esbuild/win32-x64@npm:0.18.20" @@ -5278,6 +5425,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-x64@npm:0.21.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@eslint-community/eslint-utils@npm:^4.4.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" @@ -6676,9 +6830,9 @@ __metadata: use-debounce: "npm:^9.0.4" use-react-router-breadcrumbs: "npm:^3.2.1" use-resize-observer: "npm:^9.1.0" - vike: "npm:^0.4.172" - vike-react: "npm:^0.4.11" - vite: "npm:^5.2.11" + vike: "npm:^0.4.177" + vike-react: "npm:^0.4.15" + vite: "npm:^5.3.2" vite-plugin-cesium: "npm:^1.2.22" vite-plugin-inspect: "npm:^0.8.4" vite-plugin-rewrite-all: "npm:^1.0.1" @@ -18533,6 +18687,86 @@ __metadata: languageName: node linkType: hard +"esbuild@npm:^0.21.3": + version: 0.21.5 + resolution: "esbuild@npm:0.21.5" + dependencies: + "@esbuild/aix-ppc64": "npm:0.21.5" + "@esbuild/android-arm": "npm:0.21.5" + "@esbuild/android-arm64": "npm:0.21.5" + "@esbuild/android-x64": "npm:0.21.5" + "@esbuild/darwin-arm64": "npm:0.21.5" + "@esbuild/darwin-x64": "npm:0.21.5" + "@esbuild/freebsd-arm64": "npm:0.21.5" + "@esbuild/freebsd-x64": "npm:0.21.5" + "@esbuild/linux-arm": "npm:0.21.5" + "@esbuild/linux-arm64": "npm:0.21.5" + "@esbuild/linux-ia32": "npm:0.21.5" + "@esbuild/linux-loong64": "npm:0.21.5" + "@esbuild/linux-mips64el": "npm:0.21.5" + "@esbuild/linux-ppc64": "npm:0.21.5" + "@esbuild/linux-riscv64": "npm:0.21.5" + "@esbuild/linux-s390x": "npm:0.21.5" + "@esbuild/linux-x64": "npm:0.21.5" + "@esbuild/netbsd-x64": "npm:0.21.5" + "@esbuild/openbsd-x64": "npm:0.21.5" + "@esbuild/sunos-x64": "npm:0.21.5" + "@esbuild/win32-arm64": "npm:0.21.5" + "@esbuild/win32-ia32": "npm:0.21.5" + "@esbuild/win32-x64": "npm:0.21.5" + dependenciesMeta: + "@esbuild/aix-ppc64": + optional: true + "@esbuild/android-arm": + optional: true + "@esbuild/android-arm64": + optional: true + "@esbuild/android-x64": + optional: true + "@esbuild/darwin-arm64": + optional: true + "@esbuild/darwin-x64": + optional: true + "@esbuild/freebsd-arm64": + optional: true + "@esbuild/freebsd-x64": + optional: true + "@esbuild/linux-arm": + optional: true + "@esbuild/linux-arm64": + optional: true + "@esbuild/linux-ia32": + optional: true + "@esbuild/linux-loong64": + optional: true + "@esbuild/linux-mips64el": + optional: true + "@esbuild/linux-ppc64": + optional: true + "@esbuild/linux-riscv64": + optional: true + "@esbuild/linux-s390x": + optional: true + "@esbuild/linux-x64": + optional: true + "@esbuild/netbsd-x64": + optional: true + "@esbuild/openbsd-x64": + optional: true + "@esbuild/sunos-x64": + optional: true + "@esbuild/win32-arm64": + optional: true + "@esbuild/win32-ia32": + optional: true + "@esbuild/win32-x64": + optional: true + bin: + esbuild: bin/esbuild + checksum: 10/d2ff2ca84d30cce8e871517374d6c2290835380dc7cd413b2d49189ed170d45e407be14de2cb4794cf76f75cf89955c4714726ebd3de7444b3046f5cab23ab6b + languageName: node + linkType: hard + "escalade@npm:^3.1.1": version: 3.1.1 resolution: "escalade@npm:3.1.1" @@ -27566,6 +27800,13 @@ __metadata: languageName: node linkType: hard +"picocolors@npm:^1.0.1": + version: 1.0.1 + resolution: "picocolors@npm:1.0.1" + checksum: 10/fa68166d1f56009fc02a34cdfd112b0dd3cf1ef57667ac57281f714065558c01828cdf4f18600ad6851cbe0093952ed0660b1e0156bddf2184b6aaf5817553a5 + languageName: node + linkType: hard + "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" @@ -28528,6 +28769,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.39": + version: 8.4.39 + resolution: "postcss@npm:8.4.39" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.0.1" + source-map-js: "npm:^1.2.0" + checksum: 10/ad9c1add892c96433b9a5502878201ede4a20c4ce02d056251f61f8d9a3e5426dab3683fe5a086edfa78a1a19f2b4988c8cea02c5122136d29758cb5a17e2621 + languageName: node + linkType: hard + "posthtml-parser@npm:^0.10.1": version: 0.10.2 resolution: "posthtml-parser@npm:0.10.2" @@ -30028,9 +30280,9 @@ __metadata: languageName: node linkType: hard -"react-streaming@npm:^0.3.27": - version: 0.3.28 - resolution: "react-streaming@npm:0.3.28" +"react-streaming@npm:^0.3.36": + version: 0.3.36 + resolution: "react-streaming@npm:0.3.36" dependencies: "@brillout/import": "npm:^0.2.3" "@brillout/json-serializer": "npm:^0.5.1" @@ -30039,7 +30291,7 @@ __metadata: peerDependencies: react: ">=18" react-dom: ">=18" - checksum: 10/700f41b753425c2de894875b8c0e00fc685b7caa914d90ef3f7c39aa07fe269afe8e24c406cc57f170e7cc279e011b891220472b6922692b4a0ddd9ab757fa40 + checksum: 10/0f358047ce58afa1a4f180b21331cd29efbca8da81fc0d271498a4d04b66b25b1201c5d1fb478a5b27dbc1e3d2d50e005450bf055e7acbea17d20bca16a64541 languageName: node linkType: hard @@ -31749,6 +32001,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.6.2": + version: 7.6.2 + resolution: "semver@npm:7.6.2" + bin: + semver: bin/semver.js + checksum: 10/296b17d027f57a87ef645e9c725bff4865a38dfc9caf29b26aa084b85820972fbe7372caea1ba6857162fa990702c6d9c1d82297cecb72d56c78ab29070d2ca2 + languageName: node + linkType: hard + "send@npm:0.18.0": version: 0.18.0 resolution: "send@npm:0.18.0" @@ -35214,27 +35475,27 @@ __metadata: languageName: node linkType: hard -"vike-react@npm:^0.4.11": - version: 0.4.11 - resolution: "vike-react@npm:0.4.11" +"vike-react@npm:^0.4.15": + version: 0.4.16 + resolution: "vike-react@npm:0.4.16" dependencies: - react-streaming: "npm:^0.3.27" + react-streaming: "npm:^0.3.36" peerDependencies: - react: 18.x.x - react-dom: 18.x.x - vike: ^0.4.160 - vite: ^4.3.8 || ^5.0.10 - checksum: 10/38f08f58f884264aa15b8f63df815d374da3a9307ad7a55579de258bdf7657567214eb8b2ccdf11ac24f4e48b88feaa05d5122941b4a0f6ce8cbdeb9c15df7f6 + react: ">=18.0.0" + react-dom: ">=18.0.0" + vike: ">=0.4.178" + vite: ">=4.3.8" + checksum: 10/274aa7e29400bd8169ff6c8be9751a52d44f780c60bedc1bcdff9ac455da87131b5be51e552101c6e6bc4883b745af3b9623bd1025d0fcd802c0a0e6aad57cbd languageName: node linkType: hard -"vike@npm:^0.4.172": - version: 0.4.172 - resolution: "vike@npm:0.4.172" +"vike@npm:^0.4.177": + version: 0.4.178 + resolution: "vike@npm:0.4.178" dependencies: "@brillout/import": "npm:^0.2.3" "@brillout/json-serializer": "npm:^0.5.10" - "@brillout/picocolors": "npm:^1.0.10" + "@brillout/picocolors": "npm:^1.0.13" "@brillout/require-shim": "npm:^0.1.2" "@brillout/vite-plugin-server-entry": "npm:^0.4.5" acorn: "npm:^8.0.0" @@ -35242,17 +35503,18 @@ __metadata: es-module-lexer: "npm:^1.0.0" esbuild: "npm:^0.19.0" fast-glob: "npm:^3.0.0" + semver: "npm:^7.6.2" sirv: "npm:^2.0.0" source-map-support: "npm:^0.5.0" peerDependencies: - react-streaming: ">=0.3.5" + react-streaming: ">=0.3.36" vite: ">=4.4.0" peerDependenciesMeta: react-streaming: optional: true bin: vike: node/cli/bin-entry.js - checksum: 10/5a1adb43af3ed953318b14ada19b50ad65d674de474b49dcf1e2ae6d7ed6c23ac5a095c82dfab4bd40c42e629c9943ecd6e53d1e933f99ff2c26a11a8a5f3ab5 + checksum: 10/b4abcdfb66a9ea503ca8de5ef795e184186140eb510f27b1aadb47bd6fa90c91d8688b57c950b0d6e96d057bebce6c9362dcbbfb6d6536527b448ef00adf8208 languageName: node linkType: hard @@ -35438,13 +35700,13 @@ __metadata: languageName: node linkType: hard -"vite@npm:^5.2.11": - version: 5.2.12 - resolution: "vite@npm:5.2.12" +"vite@npm:^5.3.2": + version: 5.3.3 + resolution: "vite@npm:5.3.3" dependencies: - esbuild: "npm:^0.20.1" + esbuild: "npm:^0.21.3" fsevents: "npm:~2.3.3" - postcss: "npm:^8.4.38" + postcss: "npm:^8.4.39" rollup: "npm:^4.13.0" peerDependencies: "@types/node": ^18.0.0 || >=20.0.0 @@ -35474,7 +35736,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10/c27d3efff93016e8171b6a362f605ad5f78e24086292987097ad4a7382ae78d9e0659065976a13bf7b51ba0f593d675579010692097ef36d8a5cc965f3efec4c + checksum: 10/e7a094cefedad9e204b715588502118e07d1b9c00c617f55b810169181907f55144f0a82f650995d6a74f12e3695fca65afc348b475b91a81dcbd0274d30a088 languageName: node linkType: hard From f8b410dcd3394f4cf322e2ad48f9c530d006f03f Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 13:45:04 -0500 Subject: [PATCH 04/16] Prevent env var errors from impacting HMR --- packages/settings/utils.ts | 2 +- src/pages/test/+Page.tsx | 2 +- src/pages/test/style.module.css | 2 +- src/renderer/page-shell.ts | 6 +++--- vite.config.ts | 10 ++++------ 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/settings/utils.ts b/packages/settings/utils.ts index 0784c7e1..557c6455 100644 --- a/packages/settings/utils.ts +++ b/packages/settings/utils.ts @@ -8,7 +8,7 @@ export function getRuntimeConfig( if (activeEnv === "server") { // We are running on the server, try to get directly from process.env val = process.env["VITE_" + key]; - } else { + } else if (window.env !== undefined) { // We are running on the client and have access to window.env val = window.env[key]; } diff --git a/src/pages/test/+Page.tsx b/src/pages/test/+Page.tsx index 8db2448a..73bf6e56 100644 --- a/src/pages/test/+Page.tsx +++ b/src/pages/test/+Page.tsx @@ -1,5 +1,5 @@ import styles from "./style.module.css"; export function Page() { - return <div className={styles.test}>Hello world</div>; + return <div className={styles.test}>Hello world 4</div>; } diff --git a/src/pages/test/style.module.css b/src/pages/test/style.module.css index 6a3e4974..d9c6c6f4 100644 --- a/src/pages/test/style.module.css +++ b/src/pages/test/style.module.css @@ -1,4 +1,4 @@ .test { - color: yellow; + color: orange; margin: 2em; } diff --git a/src/renderer/page-shell.ts b/src/renderer/page-shell.ts index 4acf8dc5..7191b332 100644 --- a/src/renderer/page-shell.ts +++ b/src/renderer/page-shell.ts @@ -1,8 +1,8 @@ import hyper from "@macrostrat/hyper"; import { DarkModeProvider } from "@macrostrat/ui-components"; -import React, { useEffect } from "react"; -import { PageContextProvider } from "./page-context"; -import { PageContext, PageStyle } from "./types"; +import React from "react"; +//import { PageContextProvider } from "./page-context"; +//import { PageContext, PageStyle } from "./types"; import { AuthProvider } from "./auth"; import { usePageContext } from "vike-react/usePageContext"; diff --git a/vite.config.ts b/vite.config.ts index b1d357aa..93de3c28 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,7 +3,7 @@ import mdx from "@mdx-js/rollup"; import react from "@vitejs/plugin-react"; import path from "path"; import ssr from "vike/plugin"; -import { UserConfig, Plugin } from "vite"; +import { defineConfig, Plugin } from "vite"; import cesium from "vite-plugin-cesium"; import pkg from "./package.json"; @@ -57,7 +57,7 @@ function hyperStyles(): Plugin { }; } -const config: UserConfig = { +export default defineConfig({ root: path.resolve("./src"), resolve: { conditions: ["typescript"], @@ -83,7 +83,7 @@ const config: UserConfig = { cesiumBuildPath, cesiumBuildRootPath: cesiumRoot, }), - //hyperStyles(), + hyperStyles(), ], envDir: path.resolve(__dirname), build: { @@ -99,6 +99,4 @@ const config: UserConfig = { ssr: { noExternal: ["labella", "@supabase/postgrest-js"], }, -}; - -export default config; +}); From cfcd7b21bf066355c6e44ccba79ef27cbfebaf1c Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 15:28:46 -0500 Subject: [PATCH 05/16] Streamline page rendering somewhat --- server/index.ts | 4 ++-- server/vike-handler.ts | 9 ++++++--- src/pages/+config.ts | 6 ++++-- src/pages/_simple_test/+Page.tsx | 6 ++++++ src/pages/_simple_test/style.module.css | 4 ++++ src/pages/test/+Page.tsx | 5 ----- src/pages/test/style.module.css | 4 ---- src/renderer/Head.ts | 6 +++++- src/renderer/{page-shell.ts => Layout.ts} | 4 ++-- src/styles/core.sass | 3 ++- vite.config.ts | 7 +------ 11 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 src/pages/_simple_test/+Page.tsx create mode 100644 src/pages/_simple_test/style.module.css delete mode 100644 src/pages/test/+Page.tsx delete mode 100644 src/pages/test/style.module.css rename src/renderer/{page-shell.ts => Layout.ts} (93%) diff --git a/server/index.ts b/server/index.ts index 3760746a..95ea91da 100644 --- a/server/index.ts +++ b/server/index.ts @@ -66,7 +66,7 @@ async function startServer() { app.use(compression()); app.use(cookieParser()); - + // if (isProduction) { app.use(sirv(`${root}/dist/client`)); // Special case for cesium files at /cesium prefix @@ -94,7 +94,7 @@ async function startServer() { process.env.VITE_MACROSTRAT_TILESERVER_DOMAIN, process.env.VITE_MACROSTRAT_INSTANCE ); - + // /** * Vike route * diff --git a/server/vike-handler.ts b/server/vike-handler.ts index fe840f65..8b06a8d1 100644 --- a/server/vike-handler.ts +++ b/server/vike-handler.ts @@ -9,10 +9,9 @@ const environment = synthesizeConfigFromEnvironment(); export async function vikeHandler< Context extends Record<string | number | symbol, unknown> >(request: Request, context?: Context): Promise<Response> { - const baseContext = context ?? {}; const user = await getUserFromCookie(request); const pageContextInit = { - ...baseContext, + ...context, urlOriginal: request.url, environment, user, @@ -21,7 +20,11 @@ export async function vikeHandler< const pageContext = await renderPage(pageContextInit); const response = pageContext.httpResponse; - return new Response(response?.getReadableWebStream(), { + const { readable, writable } = new TransformStream(); + + response?.pipe(writable); + + return new Response(readable, { status: response?.statusCode, headers: response?.headers, }); diff --git a/src/pages/+config.ts b/src/pages/+config.ts index 594babd9..1f4de355 100644 --- a/src/pages/+config.ts +++ b/src/pages/+config.ts @@ -2,8 +2,10 @@ import vikeReact from "vike-react/config"; import type { Config } from "vike/types"; -const Layout = "import:../renderer/page-shell.ts:PageShell"; -const Head = "import:../renderer/head.ts:Head"; +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 { diff --git a/src/pages/_simple_test/+Page.tsx b/src/pages/_simple_test/+Page.tsx new file mode 100644 index 00000000..e9719ad2 --- /dev/null +++ b/src/pages/_simple_test/+Page.tsx @@ -0,0 +1,6 @@ +import styles from "./style.module.css"; +import React from "react"; + +export function Page() { + return <div className={styles.test}>Hello world</div>; +} diff --git a/src/pages/_simple_test/style.module.css b/src/pages/_simple_test/style.module.css new file mode 100644 index 00000000..5805cf14 --- /dev/null +++ b/src/pages/_simple_test/style.module.css @@ -0,0 +1,4 @@ +.test { + color: brown; + margin: 3em; +} diff --git a/src/pages/test/+Page.tsx b/src/pages/test/+Page.tsx deleted file mode 100644 index 73bf6e56..00000000 --- a/src/pages/test/+Page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styles from "./style.module.css"; - -export function Page() { - return <div className={styles.test}>Hello world 4</div>; -} diff --git a/src/pages/test/style.module.css b/src/pages/test/style.module.css deleted file mode 100644 index d9c6c6f4..00000000 --- a/src/pages/test/style.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.test { - color: orange; - margin: 2em; -} diff --git a/src/renderer/Head.ts b/src/renderer/Head.ts index 826856c2..d6f2545a 100644 --- a/src/renderer/Head.ts +++ b/src/renderer/Head.ts @@ -1,7 +1,7 @@ import h from "@macrostrat/hyper"; import { usePageContext } from "vike-react/usePageContext"; -export function Head() { +export default function Head() { const ctx = usePageContext(); const { environment } = ctx; @@ -10,6 +10,10 @@ export function Head() { name: "viewport", content: "width=device-width, initial-scale=1", }), + h("link", { + href: "https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro", + rel: "stylesheet", + }), h("meta", { name: "description", content: "Macrostrat" }), h("script", { type: "text/javascript", diff --git a/src/renderer/page-shell.ts b/src/renderer/Layout.ts similarity index 93% rename from src/renderer/page-shell.ts rename to src/renderer/Layout.ts index 7191b332..64acdeb6 100644 --- a/src/renderer/page-shell.ts +++ b/src/renderer/Layout.ts @@ -10,12 +10,12 @@ import "~/styles/blueprint-core"; import "../styles/_theme.styl"; import "../styles/core.sass"; import "../styles/padding.css"; - +// import styles from "./page-shell.module.sass"; const h = hyper.styled(styles); -export function PageShell({ children }: { children: React.ReactNode }) { +export default function Layout({ children }: { children: React.ReactNode }) { const pageContext = usePageContext(); const { exports = {}, config, user } = pageContext; const supportsDarkMode = config?.supportsDarkMode ?? true; diff --git a/src/styles/core.sass b/src/styles/core.sass index f28f9ed3..75a25904 100644 --- a/src/styles/core.sass +++ b/src/styles/core.sass @@ -1,5 +1,5 @@ @use "@blueprintjs/colors/lib/scss/colors.scss" as colors - + .float-right float: right @@ -32,3 +32,4 @@ .fade-to-top background: linear-gradient(var(--background-color), rgba(255, 255, 255, 0)) + diff --git a/vite.config.ts b/vite.config.ts index 93de3c28..284bfe01 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -64,12 +64,7 @@ export default defineConfig({ alias: { "~": path.resolve("./src"), }, - dedupe: [ - "react", - "react-dom", - "mapbox-gl", - ...aliasedModules.map((d) => "@macrostrat/" + d), - ], + dedupe: [...aliasedModules.map((d) => "@macrostrat/" + d)], }, plugins: [ react(), From 9f8f203936790fb2d7234b86626d5864df6eb0d8 Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 16:23:13 -0500 Subject: [PATCH 06/16] Start streamlining title handling --- server/vike-handler.ts | 5 +++++ src/_utils/page-meta.ts | 19 ------------------- src/pages/+config.ts | 3 ++- src/pages/+onBeforeRenderClient.ts | 6 +++++- src/pages/+onRenderHtml.ts | 8 ++++++++ src/pages/_simple_test/+config.ts | 3 +++ src/pages/columns/+Page.ts | 8 +++++++- src/renderer/Head.ts | 8 +++++--- src/renderer/Layout.ts | 4 +++- src/renderer/page-meta.ts | 29 +++++++++++++++++++++++++++++ 10 files changed, 67 insertions(+), 26 deletions(-) delete mode 100644 src/_utils/page-meta.ts create mode 100644 src/pages/+onRenderHtml.ts create mode 100644 src/pages/_simple_test/+config.ts create mode 100644 src/renderer/page-meta.ts diff --git a/server/vike-handler.ts b/server/vike-handler.ts index 8b06a8d1..c7f1ad42 100644 --- a/server/vike-handler.ts +++ b/server/vike-handler.ts @@ -10,6 +10,11 @@ export async function vikeHandler< Context extends Record<string | number | symbol, unknown> >(request: Request, context?: Context): Promise<Response> { const user = await getUserFromCookie(request); + + // We add some custom instrumentation to the page context + // to adjust titles, etc. + console.log(context); + const pageContextInit = { ...context, urlOriginal: request.url, diff --git a/src/_utils/page-meta.ts b/src/_utils/page-meta.ts deleted file mode 100644 index c6e100d0..00000000 --- a/src/_utils/page-meta.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { PageContext } from "~/renderer/types"; - -export function buildPageMeta(pageContext: PageContext): { - title: string; - description: string; -} { - let title = pageContext.exports.title ?? "Macrostrat"; - if (typeof title === "function") { - title = title(pageContext); - } - - let description = - pageContext.exports.description ?? - "A platform for geological data exploration, integration, and analysis."; - if (title != "Macrostrat") { - title = `${title} - Macrostrat`; - } - return { title, description }; -} diff --git a/src/pages/+config.ts b/src/pages/+config.ts index 1f4de355..534bdbc7 100644 --- a/src/pages/+config.ts +++ b/src/pages/+config.ts @@ -13,6 +13,8 @@ export default { Head, // <title> title: "Macrostrat", + description: + "A platform for geological data exploration, integration, and analysis.", extends: vikeReact, passToClient: [ "pageProps", @@ -21,7 +23,6 @@ export default { "macrostratLogoFlavor", "routeParams", "user", - "urlPathname", "description", "title", "environment", diff --git a/src/pages/+onBeforeRenderClient.ts b/src/pages/+onBeforeRenderClient.ts index 840dbfdb..e67b584e 100644 --- a/src/pages/+onBeforeRenderClient.ts +++ b/src/pages/+onBeforeRenderClient.ts @@ -1,5 +1,9 @@ import { FocusStyleManager } from "@blueprintjs/core"; +import { updatePageMeta } from "~/renderer/page-meta"; + +export function onBeforeRenderClient(pageContext) { + // Adjust title and description as needed + updatePageMeta(pageContext); -export function onBeforeRenderClient() { FocusStyleManager.onlyShowFocusOnTabs(); } diff --git a/src/pages/+onRenderHtml.ts b/src/pages/+onRenderHtml.ts new file mode 100644 index 00000000..51c67aa5 --- /dev/null +++ b/src/pages/+onRenderHtml.ts @@ -0,0 +1,8 @@ +import { onRenderHtml as _onRenderHtml } from "vike-react/renderer/onRenderHtml"; +import { updatePageMeta } from "~/renderer/page-meta"; + +// there is no onBeforeRenderHtml hook in vike-react, so we need to call updatePageMeta here + +export function onRenderHtml(pageContext) { + return _onRenderHtml(updatePageMeta(pageContext)); +} diff --git a/src/pages/_simple_test/+config.ts b/src/pages/_simple_test/+config.ts new file mode 100644 index 00000000..50a10039 --- /dev/null +++ b/src/pages/_simple_test/+config.ts @@ -0,0 +1,3 @@ +export default { + title: "Simple Page", +}; diff --git a/src/pages/columns/+Page.ts b/src/pages/columns/+Page.ts index ab480687..e5593b65 100644 --- a/src/pages/columns/+Page.ts +++ b/src/pages/columns/+Page.ts @@ -3,7 +3,13 @@ import { ContentPage } from "~/layouts"; import { PageHeader, Link } from "~/components"; import { Tag } from "@blueprintjs/core"; -export function Page({ columnGroups, title = "Columns", linkPrefix = "/" }) { +export function Page({ + columnGroups, + title = "Columns", + linkPrefix = "/", + ...rest +}) { + console.log(rest, columnGroups); return h(ContentPage, [ h(PageHeader, { title }), columnGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix })), diff --git a/src/renderer/Head.ts b/src/renderer/Head.ts index d6f2545a..973485b2 100644 --- a/src/renderer/Head.ts +++ b/src/renderer/Head.ts @@ -17,9 +17,11 @@ export default function Head() { h("meta", { name: "description", content: "Macrostrat" }), h("script", { type: "text/javascript", - children: `window.env = ${JSON.stringify( - environment - )}; window.process = {env: {NODE_ENV: "production"}};`, + dangerouslySetInnerHTML: { + __html: `window.env = ${JSON.stringify( + environment + )}; window.process = {env: {NODE_ENV: "production"}};`, + }, }), ]); } diff --git a/src/renderer/Layout.ts b/src/renderer/Layout.ts index 64acdeb6..ccd3ebc0 100644 --- a/src/renderer/Layout.ts +++ b/src/renderer/Layout.ts @@ -15,12 +15,14 @@ import styles from "./page-shell.module.sass"; const h = hyper.styled(styles); -export default function Layout({ children }: { children: React.ReactNode }) { +export default function Layout({ children }: { children: React.ReactNode, ...rest }) { const pageContext = usePageContext(); const { exports = {}, config, user } = pageContext; const supportsDarkMode = config?.supportsDarkMode ?? true; const pageStyle = exports?.pageStyle ?? "fullscreen"; + console.log(rest) + return h( AuthProvider, { user }, // Prefer detailed user if available diff --git a/src/renderer/page-meta.ts b/src/renderer/page-meta.ts new file mode 100644 index 00000000..ca1af869 --- /dev/null +++ b/src/renderer/page-meta.ts @@ -0,0 +1,29 @@ +import { PageContext, PageContextClient } from "vike/types"; + +export function updatePageMeta<T extends PageContext | PageContextClient>( + pageContext: T +): T { + let titleCfg = pageContext.configEntries.title?.[0]; + + let title = titleCfg?.configValue ?? "Macrostrat"; + + if (typeof title === "function") { + title = title(pageContext); + } + + if (typeof title !== "string") { + // Something went wrong, leave it to vike-react to deal with + return pageContext; + } + + if (title != "Macrostrat") { + title = `${title} - Macrostrat`; + } + + titleCfg.configValue = title; + + pageContext.configEntries.title ??= []; + pageContext.configEntries.title[0] = titleCfg; + + return pageContext; +} From 1a61134d742947446206d904b10730e8a1d95b00 Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 17:09:52 -0500 Subject: [PATCH 07/16] Started updating page shell --- src/pages/+config.ts | 1 - src/pages/_onRenderClient.ts | 46 ---------- src/pages/_onRenderHtml.ts | 94 -------------------- src/pages/columns/+Page.ts | 11 +-- src/pages/columns/@column/+Page.ts | 4 +- src/pages/columns/@column/+onBeforeRender.ts | 2 + src/pages/docs/api/postgrest/+Page.ts | 8 +- src/pages/maps/+Page.ts | 9 +- src/renderer/Head.ts | 7 ++ src/renderer/Layout.ts | 5 +- src/renderer/page-context.ts | 27 ++---- 11 files changed, 34 insertions(+), 180 deletions(-) delete mode 100644 src/pages/_onRenderClient.ts delete mode 100644 src/pages/_onRenderHtml.ts diff --git a/src/pages/+config.ts b/src/pages/+config.ts index 534bdbc7..a748656b 100644 --- a/src/pages/+config.ts +++ b/src/pages/+config.ts @@ -18,7 +18,6 @@ export default { extends: vikeReact, passToClient: [ "pageProps", - "pageStyle", "supportsDarkMode", "macrostratLogoFlavor", "routeParams", diff --git a/src/pages/_onRenderClient.ts b/src/pages/_onRenderClient.ts deleted file mode 100644 index 58604990..00000000 --- a/src/pages/_onRenderClient.ts +++ /dev/null @@ -1,46 +0,0 @@ -export { render as onRenderClient }; - -import { FocusStyleManager } from "@blueprintjs/core"; -import h from "@macrostrat/hyper"; -import ReactDOM from "react-dom/client"; -import { PageShell } from "../renderer/page-shell"; -import type { PageContextClient } from "../renderer/types"; -import { buildPageMeta } from "~/_utils/page-meta"; -import vikeReact from "vike-react"; - -let root: ReactDOM.Root; - -async function render(pageContext: PageContextClient) { - const { Page, pageProps } = pageContext; - if (!Page) - throw new Error( - "Client-side render() hook expects pageContext.Page to be defined" - ); - - FocusStyleManager.onlyShowFocusOnTabs(); - - const page = h(PageShell, { pageContext }, h(Page, pageProps)); - - const container = document.getElementById("app-container")!; - - const { title, description } = buildPageMeta(pageContext); - - // TODO: we might be able to switch to vike-react's internal renderer - if (container.innerHTML !== "" && pageContext.isHydration) { - // First render (hydration) - root = ReactDOM.hydrateRoot(container, page); - } else { - if (!root) { - // First render (not hydration) - root = ReactDOM.createRoot(container); - } else { - // Client-side navigation - document.title = title; - document - .querySelector('meta[name="description"]')! - .setAttribute("content", description); - } - - root.render(page); - } -} diff --git a/src/pages/_onRenderHtml.ts b/src/pages/_onRenderHtml.ts deleted file mode 100644 index b168653c..00000000 --- a/src/pages/_onRenderHtml.ts +++ /dev/null @@ -1,94 +0,0 @@ -export { render as onRenderHtml }; -// See https://vike.dev/data-fetching - -import h from "@macrostrat/hyper"; -import ReactDOMServer from "react-dom/server"; -import { dangerouslySkipEscape, escapeInject } from "vike/server"; -import { PageShell } from "../renderer/page-shell"; -import type { PageContextServer } from "../renderer/types"; -import { buildPageMeta } from "~/_utils/page-meta"; - -async function render(pageContext: PageContextServer) { - const { Page, pageProps, config, user, environment } = pageContext; - // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA - let pageHtml = ""; - if (Page != null) { - pageHtml = ReactDOMServer.renderToString( - h(PageShell, { pageContext, user }, h(Page, pageProps)) - ); - } - - const { clientRouting, isolateStyles = false } = config; - - if (isolateStyles && clientRouting) { - throw new Error( - "Isolating styles is not allowed when using client routing" - ); - } - - /** Get runtime environment synthesized by server. This is a substitute for using - * compile-time environment variables in the client. The environment is - * injected into vite as a global variable. - * - * We also set `process.env.NODE_ENV` to "production" to allow Cesium to work properly. - */ - const envScript = `<script> - window.env = ${JSON.stringify(environment)}; - window.process = {env: {NODE_ENV: "production"}}; - </script>`; - - // This doesn't work in production - // if (!isolateStyles || clientRouting) { - // await import("@blueprintjs/core/lib/css/blueprint.css"); - // await import("~/styles/_theme.styl"); - // await import("~/styles/core.sass"); - // await import("~/styles/padding.css"); - // } - - // See https://vike.dev/head - let { scripts = [] } = pageContext.exports; - - const scriptTags = scripts - .map((src) => `<script src="${src}"></script>`) - .join("\n"); - - const { title, description } = buildPageMeta(pageContext); - - const documentHtml = escapeInject`<!DOCTYPE html> - <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta http-equiv="Content-Language" content="en" /> - <meta name="mobile-wep-app-capable" content="yes" /> - <meta name="apple-mobile-web-app-capable" content="yes" /> - <meta - name="apple-mobile-web-app-status-bar-style" - content="black-translucent" - /> - <meta - name="viewport" - content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" - /> - <link - href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro" - rel="stylesheet" - /> - ${dangerouslySkipEscape(scriptTags)} - ${dangerouslySkipEscape(envScript)} - <meta name="description" content="${description}" /> - <title>${title} - - - - -
${dangerouslySkipEscape(pageHtml)}
- - `; - - return { - documentHtml, - pageContext: { - // We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection - }, - }; -} diff --git a/src/pages/columns/+Page.ts b/src/pages/columns/+Page.ts index e5593b65..07220002 100644 --- a/src/pages/columns/+Page.ts +++ b/src/pages/columns/+Page.ts @@ -2,14 +2,11 @@ import h from "@macrostrat/hyper"; import { ContentPage } from "~/layouts"; import { PageHeader, Link } from "~/components"; import { Tag } from "@blueprintjs/core"; +import { usePageProps } from "~/renderer"; + +export function Page() { + const { columnGroups, title, linkPrefix } = usePageProps(); -export function Page({ - columnGroups, - title = "Columns", - linkPrefix = "/", - ...rest -}) { - console.log(rest, columnGroups); return h(ContentPage, [ h(PageHeader, { title }), columnGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix })), diff --git a/src/pages/columns/@column/+Page.ts b/src/pages/columns/@column/+Page.ts index 0a8f83d9..eacc77cb 100644 --- a/src/pages/columns/@column/+Page.ts +++ b/src/pages/columns/@column/+Page.ts @@ -1,6 +1,8 @@ import ColumnPage from "./column-inspector"; import h from "@macrostrat/hyper"; +import { usePageProps } from "~/renderer"; -export function Page(props) { +export function Page() { + const props = usePageProps(); return h(ColumnPage, props); } diff --git a/src/pages/columns/@column/+onBeforeRender.ts b/src/pages/columns/@column/+onBeforeRender.ts index 1af9801b..982b1522 100644 --- a/src/pages/columns/@column/+onBeforeRender.ts +++ b/src/pages/columns/@column/+onBeforeRender.ts @@ -1,3 +1,5 @@ +// https://vike.dev/onBeforeRender + import { apiV2Prefix } from "@macrostrat-web/settings"; import { preprocessUnits } from "@macrostrat/column-views/src/helpers"; import fetch from "node-fetch"; diff --git a/src/pages/docs/api/postgrest/+Page.ts b/src/pages/docs/api/postgrest/+Page.ts index a9ab3266..c6da7c16 100644 --- a/src/pages/docs/api/postgrest/+Page.ts +++ b/src/pages/docs/api/postgrest/+Page.ts @@ -2,9 +2,9 @@ import hyper from "@macrostrat/hyper"; import SwaggerUI from "swagger-ui-react"; import "swagger-ui-react/swagger-ui.css"; +import { usePageProps } from "~/renderer"; -const Page = ({ swaggerUrl }) => { +export function Page() { + const { swaggerUrl } = usePageProps(); return hyper(SwaggerUI, { url: swaggerUrl }); -}; - -export default Page; +} diff --git a/src/pages/maps/+Page.ts b/src/pages/maps/+Page.ts index cd03efdc..d01ace86 100644 --- a/src/pages/maps/+Page.ts +++ b/src/pages/maps/+Page.ts @@ -1,13 +1,12 @@ -import hyper from "@macrostrat/hyper"; -// Page for a list of maps -import styles from "./main.module.scss"; +import h from "./main.module.scss"; import { AnchorButton, ButtonGroup } from "@blueprintjs/core"; import { ContentPage } from "~/layouts"; import { PageHeader, DevLinkButton } from "~/components"; +import { usePageProps } from "~/renderer"; -const h = hyper.styled(styles); +export function Page() { + const { sources } = usePageProps(); -export function Page({ sources }) { return h(ContentPage, [ h("div.float-right.padding.stick-to-top", [ h(ButtonGroup, { vertical: true, large: true }, [ diff --git a/src/renderer/Head.ts b/src/renderer/Head.ts index 973485b2..2da4b2dc 100644 --- a/src/renderer/Head.ts +++ b/src/renderer/Head.ts @@ -10,6 +10,13 @@ export default function Head() { name: "viewport", content: "width=device-width, initial-scale=1", }), + h("meta", { httpEquiv: "Content-Language", content: "en" }), + h("meta", { name: "mobile-web-app-capable", content: "yes" }), + h("meta", { + name: "apple-mobile-web-app-status-bar-style", + content: "black-translucent", + }), + h("meta", { charset: "utf-8" }), h("link", { href: "https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro", rel: "stylesheet", diff --git a/src/renderer/Layout.ts b/src/renderer/Layout.ts index ccd3ebc0..dbadfd00 100644 --- a/src/renderer/Layout.ts +++ b/src/renderer/Layout.ts @@ -3,6 +3,7 @@ import { DarkModeProvider } from "@macrostrat/ui-components"; import React from "react"; //import { PageContextProvider } from "./page-context"; //import { PageContext, PageStyle } from "./types"; + import { AuthProvider } from "./auth"; import { usePageContext } from "vike-react/usePageContext"; @@ -15,14 +16,12 @@ import styles from "./page-shell.module.sass"; const h = hyper.styled(styles); -export default function Layout({ children }: { children: React.ReactNode, ...rest }) { +export default function Layout({ children }: { children: React.ReactNode }) { const pageContext = usePageContext(); const { exports = {}, config, user } = pageContext; const supportsDarkMode = config?.supportsDarkMode ?? true; const pageStyle = exports?.pageStyle ?? "fullscreen"; - console.log(rest) - return h( AuthProvider, { user }, // Prefer detailed user if available diff --git a/src/renderer/page-context.ts b/src/renderer/page-context.ts index bd3223a1..ae730f1a 100644 --- a/src/renderer/page-context.ts +++ b/src/renderer/page-context.ts @@ -1,25 +1,14 @@ // `usePageContext` allows us to access `pageContext` in any React component. // See https://vike.dev/pageContext-anywhere -import React, { useContext } from "react"; -import type { PageContext } from "./types"; -import h from "@macrostrat/hyper"; +import { usePageContext } from "vike-react/usePageContext"; -const Context = React.createContext( - undefined as unknown as PageContext -); +export { usePageContext }; -export function PageContextProvider({ - pageContext, - children, -}: { - pageContext: PageContext; - children: React.ReactNode; -}) { - return h(Context.Provider, { value: pageContext }, children); -} - -export function usePageContext() { - const pageContext = useContext(Context); - return pageContext; +export function usePageProps() { + const pageContext = usePageContext(); + console.warn( + "usePageProps and +onBeforeRender are deprecated. Shift to useData" + ); + return pageContext?.pageProps ?? {}; } From 95b6114dfd443a9379eb2e287ff79735b059028f Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Fri, 5 Jul 2024 04:11:16 -0500 Subject: [PATCH 08/16] Small update to text --- content/.obsidian/.gitignore | 1 + content/.obsidian/workspace.json | 168 ------------------------------- content/Community.md | 5 + 3 files changed, 6 insertions(+), 168 deletions(-) create mode 100644 content/.obsidian/.gitignore delete mode 100644 content/.obsidian/workspace.json diff --git a/content/.obsidian/.gitignore b/content/.obsidian/.gitignore new file mode 100644 index 00000000..622d59be --- /dev/null +++ b/content/.obsidian/.gitignore @@ -0,0 +1 @@ +workspace.json diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json deleted file mode 100644 index 69d7ef30..00000000 --- a/content/.obsidian/workspace.json +++ /dev/null @@ -1,168 +0,0 @@ -{ - "main": { - "id": "54bd71a4296930db", - "type": "split", - "children": [ - { - "id": "b3cf2043eaa4bc1c", - "type": "tabs", - "children": [ - { - "id": "334ed1c38175c4da", - "type": "leaf", - "state": { - "type": "markdown", - "state": { - "file": "Macrostrat.md", - "mode": "source", - "source": false - } - } - }, - { - "id": "dede0fad4051b323", - "type": "leaf", - "state": { - "type": "markdown", - "state": { - "file": "Macrostrat.md", - "mode": "source", - "source": false - } - } - } - ], - "currentTab": 1 - } - ], - "direction": "vertical" - }, - "left": { - "id": "f0fafc014c02ecac", - "type": "split", - "children": [ - { - "id": "68e51cca67be1bc7", - "type": "tabs", - "children": [ - { - "id": "ea16a5b64a96d3fe", - "type": "leaf", - "state": { - "type": "file-explorer", - "state": { - "sortOrder": "alphabetical" - } - } - }, - { - "id": "aefc63aeb87bc73c", - "type": "leaf", - "state": { - "type": "search", - "state": { - "query": "", - "matchingCase": false, - "explainSearch": false, - "collapseAll": false, - "extraContext": false, - "sortOrder": "alphabetical" - } - } - }, - { - "id": "df790a7090ccb6bd", - "type": "leaf", - "state": { - "type": "bookmarks", - "state": {} - } - } - ] - } - ], - "direction": "horizontal", - "width": 300 - }, - "right": { - "id": "a60526d3595b51d4", - "type": "split", - "children": [ - { - "id": "673fc4209c079446", - "type": "tabs", - "children": [ - { - "id": "23ccb1734eaf33d6", - "type": "leaf", - "state": { - "type": "backlink", - "state": { - "file": "Macrostrat.md", - "collapseAll": false, - "extraContext": false, - "sortOrder": "alphabetical", - "showSearch": false, - "searchQuery": "", - "backlinkCollapsed": false, - "unlinkedCollapsed": true - } - } - }, - { - "id": "e90ef1ec860287d2", - "type": "leaf", - "state": { - "type": "outgoing-link", - "state": { - "file": "Macrostrat.md", - "linksCollapsed": false, - "unlinkedCollapsed": true - } - } - }, - { - "id": "75b5ba0c40b2c900", - "type": "leaf", - "state": { - "type": "tag", - "state": { - "sortOrder": "frequency", - "useHierarchy": true - } - } - }, - { - "id": "5404a44c5aae78a4", - "type": "leaf", - "state": { - "type": "outline", - "state": { - "file": "Macrostrat.md" - } - } - } - ] - } - ], - "direction": "horizontal", - "width": 300, - "collapsed": true - }, - "left-ribbon": { - "hiddenItems": { - "switcher:Open quick switcher": false, - "graph:Open graph view": false, - "canvas:Create new canvas": false, - "daily-notes:Open today's daily note": false, - "templates:Insert template": false, - "command-palette:Open command palette": false - } - }, - "active": "dede0fad4051b323", - "lastOpenFiles": [ - "Community.md", - "Frequently asked questions.md", - "Macrostrat.md" - ] -} \ No newline at end of file diff --git a/content/Community.md b/content/Community.md index 77b6e637..50b0d861 100644 --- a/content/Community.md +++ b/content/Community.md @@ -1 +1,6 @@ Macrostrat is part of a broad geoinformatics ecosystem. + + +## Cool Earth observing websites + +https://earth.nullschool.net: weather and ocean-circulation visualizations \ No newline at end of file From e598cf8ac5bce8cc98420cfe72d71c5b58044c99 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Fri, 5 Jul 2024 04:21:15 -0500 Subject: [PATCH 09/16] Some updates to layout --- src/renderer/Layout.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/renderer/Layout.ts b/src/renderer/Layout.ts index dbadfd00..fb6ea7de 100644 --- a/src/renderer/Layout.ts +++ b/src/renderer/Layout.ts @@ -1,8 +1,5 @@ -import hyper from "@macrostrat/hyper"; import { DarkModeProvider } from "@macrostrat/ui-components"; import React from "react"; -//import { PageContextProvider } from "./page-context"; -//import { PageContext, PageStyle } from "./types"; import { AuthProvider } from "./auth"; import { usePageContext } from "vike-react/usePageContext"; @@ -12,9 +9,7 @@ import "../styles/_theme.styl"; import "../styles/core.sass"; import "../styles/padding.css"; // -import styles from "./page-shell.module.sass"; - -const h = hyper.styled(styles); +import h from "./page-shell.module.sass"; export default function Layout({ children }: { children: React.ReactNode }) { const pageContext = usePageContext(); From ff3c8e7fb7780f63311d2a674702a2e4293c2f90 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Fri, 5 Jul 2024 04:31:14 -0500 Subject: [PATCH 10/16] Started updating page props --- src/pages/lex/strat-names/+Page.ts | 4 +++- src/pages/maps/@id/+Page.ts | 5 +++-- src/pages/maps/@id/correlation/+Page.ts | 5 +++-- src/pages/maps/ingestion/+Page.ts | 5 +++-- src/pages/maps/ingestion/@id/+Page.ts | 4 +++- src/pages/maps/ingestion/@id/@editMode/+Page.ts | 10 +++------- src/pages/maps/ingestion/@id/meta/+Page.ts | 4 +++- src/pages/projects/+Page.ts | 4 +++- src/pages/projects/@project/+Page.ts | 4 +++- 9 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/pages/lex/strat-names/+Page.ts b/src/pages/lex/strat-names/+Page.ts index fb368760..d45fbde4 100644 --- a/src/pages/lex/strat-names/+Page.ts +++ b/src/pages/lex/strat-names/+Page.ts @@ -18,6 +18,7 @@ import { } from "./data-service"; import { setQueryString } from "@macrostrat/ui-components"; import styles from "./main.module.sass"; +import { usePageProps } from "~/renderer"; const h = hyper.styled(styles); @@ -47,7 +48,8 @@ function compareQueryParams(a, b) { return newParams; } -export function Page({ data, filters: startingFilters }) { +export function Page() { + const { data, filters: startingFilters } = usePageProps(); const [showSettings, setShowSettings] = useState(false); const [state, dispatch] = useReducer(filterReducer, startingFilters); diff --git a/src/pages/maps/@id/+Page.ts b/src/pages/maps/@id/+Page.ts index d969b594..3c78864d 100644 --- a/src/pages/maps/@id/+Page.ts +++ b/src/pages/maps/@id/+Page.ts @@ -32,7 +32,7 @@ import { MapNavbar } from "~/components/map-navbar"; import "~/styles/global.styl"; import { MapReference, DevLink } from "~/components"; import styles from "./main.module.sass"; -import { PageBreadcrumbs } from "~/renderer"; +import { PageBreadcrumbs, usePageProps } from "~/renderer"; const h = hyper.styled(styles); @@ -135,7 +135,8 @@ function basemapStyle(basemap, inDarkMode) { } } -export default function MapInterface({ map }) { +export function Page() { + const { map } = usePageProps(); const [isOpen, setOpen] = useState(false); const dark = useDarkMode()?.isEnabled ?? false; const title = map.properties.name; diff --git a/src/pages/maps/@id/correlation/+Page.ts b/src/pages/maps/@id/correlation/+Page.ts index cf38d17a..9493e668 100644 --- a/src/pages/maps/@id/correlation/+Page.ts +++ b/src/pages/maps/@id/correlation/+Page.ts @@ -7,7 +7,7 @@ import { } from "@blueprintjs/core"; import { FullscreenPage } from "~/layouts"; import h from "./main.module.sass"; -import { PageBreadcrumbs } from "~/renderer"; +import { PageBreadcrumbs, usePageProps } from "~/renderer"; import { useLegendData, MapInfo } from "../utils"; import { useElementSize, useInDarkMode } from "@macrostrat/ui-components"; import { useMemo, useRef } from "react"; @@ -28,7 +28,8 @@ import { import { LegendItemInformation } from "./legend-item"; import { UnitDetailsPopover } from "~/components/unit-details"; -export function Page({ map }) { +export function Page() { + const { map } = usePageProps(); const ref = useRef(null); const size = useElementSize(ref); const legendData = useLegendData(map); diff --git a/src/pages/maps/ingestion/+Page.ts b/src/pages/maps/ingestion/+Page.ts index 8d8568bf..35e05cb9 100644 --- a/src/pages/maps/ingestion/+Page.ts +++ b/src/pages/maps/ingestion/+Page.ts @@ -2,7 +2,7 @@ import { AnchorButton } from "@blueprintjs/core"; import { ingestPrefix } from "@macrostrat-web/settings"; import hyper from "@macrostrat/hyper"; import { useEffect, useState } from "react"; -import { PageBreadcrumbs } from "~/renderer"; +import { PageBreadcrumbs, usePageProps } from "~/renderer"; import { IngestProcessCard } from "./components"; import styles from "./main.module.sass"; import { AuthStatus } from "@macrostrat/auth-components"; @@ -12,7 +12,8 @@ import Tag from "./components/Tag"; const h = hyper.styled(styles); -export function Page({ user, url }) { +export function Page() { + const { user, url } = usePageProps(); const [ingestProcess, setIngestProcess] = useState([]); const [ingestFilter, setIngestFilter] = useState(undefined); const [tags, setTags] = useState([]); diff --git a/src/pages/maps/ingestion/@id/+Page.ts b/src/pages/maps/ingestion/@id/+Page.ts index e74daf25..8d1322be 100644 --- a/src/pages/maps/ingestion/@id/+Page.ts +++ b/src/pages/maps/ingestion/@id/+Page.ts @@ -4,6 +4,7 @@ import { AnchorButton, ButtonGroup } from "@blueprintjs/core"; import { FullscreenPage } from "~/layouts"; import { Header } from "./components"; import { MapInterface } from "./components"; +import { usePageProps } from "~/renderer"; const h = hyper.styled(styles); @@ -16,7 +17,8 @@ interface EditInterfaceProps { ingestProcess?: any; } -export function Page({ source_id, source, mapBounds }: EditInterfaceProps) { +export function Page() { + const { source_id, source, mapBounds }: EditInterfaceProps = usePageProps(); const title = source.name; const headerProps = { diff --git a/src/pages/maps/ingestion/@id/@editMode/+Page.ts b/src/pages/maps/ingestion/@id/@editMode/+Page.ts index 6a5ae12c..54301fa6 100644 --- a/src/pages/maps/ingestion/@id/@editMode/+Page.ts +++ b/src/pages/maps/ingestion/@id/@editMode/+Page.ts @@ -7,6 +7,7 @@ import { Header, WidthAdjustablePanel } from "../components"; import styles from "./main.module.sass"; import { MapInterface } from "../components"; import { LinesTable, PointsTable, PolygonsTable } from "../tables"; +import { usePageProps } from "~/renderer"; const h = hyper.styled(styles); @@ -25,13 +26,8 @@ const routeMap = { points: PointsTable, }; -export function Page({ - source_id, - mapBounds, - source, - ingestProcess, - editMode, -}: EditInterfaceProps) { +export function Page() { + const { source, ingestProcess, editMode, mapBounds } = usePageProps(); const slug = source.slug; const sourcePrefix = `${ingestPrefix}/sources/${source_id}`; diff --git a/src/pages/maps/ingestion/@id/meta/+Page.ts b/src/pages/maps/ingestion/@id/meta/+Page.ts index 6b402824..f64d78d2 100644 --- a/src/pages/maps/ingestion/@id/meta/+Page.ts +++ b/src/pages/maps/ingestion/@id/meta/+Page.ts @@ -2,13 +2,15 @@ import h from "@macrostrat/hyper"; import { Header } from "../components"; import { EditSourceForm } from "../source-form"; import { ContentPage } from "~/layouts"; +import { usePageProps } from "~/renderer"; interface EditInterfaceMetaProps { source_id?: number; source?: any; } -export function Page({ source_id, source }: EditInterfaceMetaProps) { +export function Page() { + const { source_id, source }: EditInterfaceMetaProps = usePageProps(); return h(ContentPage, { centered: true }, [ h("div", {}, [ h(Header, { diff --git a/src/pages/projects/+Page.ts b/src/pages/projects/+Page.ts index 6859fc18..ffa2dfc6 100644 --- a/src/pages/projects/+Page.ts +++ b/src/pages/projects/+Page.ts @@ -1,8 +1,10 @@ import h from "@macrostrat/hyper"; import { ContentPage } from "~/layouts"; import { PageHeader, LinkCard } from "~/components"; +import { usePageProps } from "~/renderer"; -export function Page({ projects }) { +export function Page() { + const { projects } = usePageProps(); return h(ContentPage, [ h(PageHeader, { title: "Projects" }), projects.map((d) => h(ProjectItem, { data: d, key: d.project_id })), diff --git a/src/pages/projects/@project/+Page.ts b/src/pages/projects/@project/+Page.ts index c5133823..8fe6809c 100644 --- a/src/pages/projects/@project/+Page.ts +++ b/src/pages/projects/@project/+Page.ts @@ -1,7 +1,9 @@ import h from "@macrostrat/hyper"; import { Page as ColumnPage } from "~/pages/columns/+Page"; +import { usePageProps } from "~/renderer"; -export function Page({ columnGroups, project }) { +export function Page() { + const { columnGroups, project } = usePageProps(); return h(ColumnPage, { columnGroups, title: project.project, From 412097c45bd7132602a74272f0d1e0821fe76124 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Sat, 6 Jul 2024 01:10:28 -0500 Subject: [PATCH 11/16] Streamline slightly --- packages/text-toolchain/src/index.ts | 2 -- server/vike-handler.ts | 4 ---- src/pages/projects/@project/columns/@column/+Page.ts | 4 +++- vite.config.ts | 1 - 4 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/text-toolchain/src/index.ts b/packages/text-toolchain/src/index.ts index 63171cbc..35b615ed 100644 --- a/packages/text-toolchain/src/index.ts +++ b/packages/text-toolchain/src/index.ts @@ -20,8 +20,6 @@ export default function viteTextToolchain({ const [pageIndex, permalinkIndex] = buildPageIndex(contentDir, wikiPrefix); const permalinks = Object.keys(permalinkIndex); - console.log(pageIndex, permalinkIndex); - const include = [join(contentDir, "**/*.md"), "**/*.mdx"]; return mdx({ diff --git a/server/vike-handler.ts b/server/vike-handler.ts index c7f1ad42..fe99fef7 100644 --- a/server/vike-handler.ts +++ b/server/vike-handler.ts @@ -11,10 +11,6 @@ export async function vikeHandler< >(request: Request, context?: Context): Promise { const user = await getUserFromCookie(request); - // We add some custom instrumentation to the page context - // to adjust titles, etc. - console.log(context); - const pageContextInit = { ...context, urlOriginal: request.url, diff --git a/src/pages/projects/@project/columns/@column/+Page.ts b/src/pages/projects/@project/columns/@column/+Page.ts index 2c93f790..4392373d 100644 --- a/src/pages/projects/@project/columns/@column/+Page.ts +++ b/src/pages/projects/@project/columns/@column/+Page.ts @@ -1,6 +1,8 @@ import ColumnPage from "~/pages/columns/@column/column-inspector"; import h from "@macrostrat/hyper"; +import { usePageProps } from "~/renderer"; -export function Page({ columnInfo, linkPrefix }) { +export function Page() { + const { columnInfo, linkPrefix } = usePageProps(); return h(ColumnPage, { columnInfo, linkPrefix }); } diff --git a/vite.config.ts b/vite.config.ts index bce7952a..4bbf1382 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -53,7 +53,6 @@ function hyperStyles(): Plugin { // Keep backwards compatibility with the existing default style object. Object.assign(h, styles); export default h;`; - //console.log(code3, id); return code3; } }, From 4ab2539ded2accb20fcf0f893936023a3498a30f Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Sat, 6 Jul 2024 01:27:20 -0500 Subject: [PATCH 12/16] Created basic URL testing function --- package.json | 1 + tests/test-urls.ts | 44 ++++++++++++++++++++++++++++++++++++++++++++ tests/test-urls.txt | 3 --- 3 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 tests/test-urls.ts delete mode 100644 tests/test-urls.txt diff --git a/package.json b/package.json index 574a4a70..32946d62 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "server:prod": "NODE_NO_WARNINGS=1 NODE_ENV=production yarn run server", "dev:storybook": "yarn workspace @macrostrat/storybook run dev", "start": "yarn run build && yarn run server", + "test:runtime": "tsx tests/test-urls.ts", "test": "vitest" }, "workspaces": [ diff --git a/tests/test-urls.ts b/tests/test-urls.ts new file mode 100644 index 00000000..a3970cc3 --- /dev/null +++ b/tests/test-urls.ts @@ -0,0 +1,44 @@ +// Script to test URL availability in runtime + +const urls = [ + "/", + "/dev/docs", + "/map", + "/maps", + "/projects", + "/columns", + "/docs", + "/_simple_test", + "/integrations/qgis/layers/macrostrat-carto-slim.qlr", +]; + +const baseURL = "http://localhost:3000"; + +let success = 0; +let errors = 0; + +async function testURL(url) { + const testURL = baseURL + url; + console.log(`Testing URL ${testURL}`); + const res = await fetch(testURL); + if (res.status === 200) { + console.log(`URL ${url} is available`); + success++; + } else { + console.error(`URL ${url} is not available`); + errors++; + } +} + +async function testAll() { + for (const url of urls) { + await testURL(url); + } + console.log(`Success: ${success}, Errors: ${errors}`); + + if (errors > 0) { + process.exit(1); + } +} + +testAll(); diff --git a/tests/test-urls.txt b/tests/test-urls.txt deleted file mode 100644 index 2755dc3e..00000000 --- a/tests/test-urls.txt +++ /dev/null @@ -1,3 +0,0 @@ -# Test urls for eventual testing - -curl /integrations/qgis/layers/macrostrat-carto-slim.qlr \ No newline at end of file From ecdcba7954825058961f942371121feac98f1f91 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Sat, 6 Jul 2024 02:28:53 -0500 Subject: [PATCH 13/16] Updated providers --- .idea/web.iml | 1 + src/_providers/index.ts | 9 ++------- src/_providers/patterns.ts | 7 +++++++ src/{providers => _providers}/postgrest.ts | 0 src/pages/+config.ts | 1 + .../data-sheet/{+Page.ts => +Page.client.ts} | 13 ++----------- src/pages/maps/+onBeforeRender.ts | 2 +- src/pages/maps/@id/utils.ts | 2 +- src/pages/maps/legend/+Page.ts | 2 +- src/providers/index.ts | 1 - 10 files changed, 16 insertions(+), 22 deletions(-) create mode 100644 src/_providers/patterns.ts rename src/{providers => _providers}/postgrest.ts (100%) rename src/pages/dev/ui-tests/data-sheet/{+Page.ts => +Page.client.ts} (69%) delete mode 100644 src/providers/index.ts diff --git a/.idea/web.iml b/.idea/web.iml index dbe413b7..25b03879 100644 --- a/.idea/web.iml +++ b/.idea/web.iml @@ -6,6 +6,7 @@ + diff --git a/src/_providers/index.ts b/src/_providers/index.ts index ba1f4077..e8d889b8 100644 --- a/src/_providers/index.ts +++ b/src/_providers/index.ts @@ -1,7 +1,2 @@ -import { GeologicPatternProvider } from "@macrostrat/column-components"; -import h from "@macrostrat/hyper"; -import { resolvePattern } from "~/_utils"; - -export function PatternProvider({ children }) { - return h(GeologicPatternProvider, { resolvePattern }, children); -} +export * from "./patterns"; +export * from "./postgrest"; diff --git a/src/_providers/patterns.ts b/src/_providers/patterns.ts new file mode 100644 index 00000000..ba1f4077 --- /dev/null +++ b/src/_providers/patterns.ts @@ -0,0 +1,7 @@ +import { GeologicPatternProvider } from "@macrostrat/column-components"; +import h from "@macrostrat/hyper"; +import { resolvePattern } from "~/_utils"; + +export function PatternProvider({ children }) { + return h(GeologicPatternProvider, { resolvePattern }, children); +} diff --git a/src/providers/postgrest.ts b/src/_providers/postgrest.ts similarity index 100% rename from src/providers/postgrest.ts rename to src/_providers/postgrest.ts diff --git a/src/pages/+config.ts b/src/pages/+config.ts index a748656b..750f025f 100644 --- a/src/pages/+config.ts +++ b/src/pages/+config.ts @@ -20,6 +20,7 @@ export default { "pageProps", "supportsDarkMode", "macrostratLogoFlavor", + "urlPathname", "routeParams", "user", "description", diff --git a/src/pages/dev/ui-tests/data-sheet/+Page.ts b/src/pages/dev/ui-tests/data-sheet/+Page.client.ts similarity index 69% rename from src/pages/dev/ui-tests/data-sheet/+Page.ts rename to src/pages/dev/ui-tests/data-sheet/+Page.client.ts index 2b4264bb..54b34595 100644 --- a/src/pages/dev/ui-tests/data-sheet/+Page.ts +++ b/src/pages/dev/ui-tests/data-sheet/+Page.client.ts @@ -1,16 +1,7 @@ import { HotkeysProvider } from "@blueprintjs/core"; -import hyper from "@macrostrat/hyper"; -import { ClientOnly } from "~/renderer/client-only"; -import style from "../main.module.sass"; +import h from "../main.module.sass"; import { PageBreadcrumbs } from "~/renderer"; - -const h = hyper.styled(style); - -function DataSheetTest() { - return h(ClientOnly, { - component: () => import("@macrostrat-web/data-sheet-test"), - }); -} +import DataSheetTest from "@macrostrat-web/data-sheet-test"; export function Page() { return h( diff --git a/src/pages/maps/+onBeforeRender.ts b/src/pages/maps/+onBeforeRender.ts index 7d6d3ec1..c4413ce7 100644 --- a/src/pages/maps/+onBeforeRender.ts +++ b/src/pages/maps/+onBeforeRender.ts @@ -1,4 +1,4 @@ -import { postgrest } from "~/providers"; +import { postgrest } from "~/_providers"; export async function onBeforeRender(pageContext) { // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here. diff --git a/src/pages/maps/@id/utils.ts b/src/pages/maps/@id/utils.ts index 28f37ed5..101d9a26 100644 --- a/src/pages/maps/@id/utils.ts +++ b/src/pages/maps/@id/utils.ts @@ -1,6 +1,6 @@ import { useState } from "react"; import { useAsyncEffect } from "@macrostrat/ui-components"; -import { postgrest } from "~/providers"; +import { postgrest } from "~/_providers"; export type MapInfo = { source_id: number; diff --git a/src/pages/maps/legend/+Page.ts b/src/pages/maps/legend/+Page.ts index 98b982cf..6371a390 100644 --- a/src/pages/maps/legend/+Page.ts +++ b/src/pages/maps/legend/+Page.ts @@ -13,7 +13,7 @@ import { lithologyRenderer, ExpandedLithologies, } from "~/components/legend-table"; -import { postgrest } from "~/providers"; +import { postgrest } from "~/_providers"; import { useReducer } from "react"; const h = hyper.styled(styles); diff --git a/src/providers/index.ts b/src/providers/index.ts deleted file mode 100644 index 6d8afbdd..00000000 --- a/src/providers/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./postgrest"; From 98ed953bfbf1e5585e762c23d254a1f064c1d33d Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Sat, 6 Jul 2024 02:54:51 -0500 Subject: [PATCH 14/16] Start moving providers --- packages/globe-dev/src/index.ts | 2 +- packages/sift/src/js/components/Column.tsx | 6 +++--- src/components/buttons.ts | 2 +- src/components/cards/index.ts | 2 +- src/components/index.ts | 1 + src/components/macrostrat-icon.ts | 7 ++----- .../navigation}/breadcrumbs.module.sass | 0 src/{renderer => components/navigation}/breadcrumbs.ts | 4 ++-- src/components/navigation/index.ts | 2 ++ .../Link.ts => components/navigation/link-component.ts} | 2 +- src/components/page-header.ts | 8 +------- src/renderer/index.ts | 2 +- 12 files changed, 16 insertions(+), 22 deletions(-) rename src/{renderer => components/navigation}/breadcrumbs.module.sass (100%) rename src/{renderer => components/navigation}/breadcrumbs.ts (97%) create mode 100644 src/components/navigation/index.ts rename src/{renderer/Link.ts => components/navigation/link-component.ts} (92%) diff --git a/packages/globe-dev/src/index.ts b/packages/globe-dev/src/index.ts index 2639516a..d81cfabb 100644 --- a/packages/globe-dev/src/index.ts +++ b/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 "~/renderer/Link"; +import { Link } from "~/components/navigation/link-component"; import CesiumView from "./cesium-view"; import { diff --git a/packages/sift/src/js/components/Column.tsx b/packages/sift/src/js/components/Column.tsx index f78605b4..175a7e81 100644 --- a/packages/sift/src/js/components/Column.tsx +++ b/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 "~/renderer/Link"; +import { Link as VikeLink } from "~/components/navigation/link-component"; import Chart from "./Chart"; import Footer from "./Footer"; import { SiftLink } from "./Link"; @@ -285,13 +285,13 @@ class _Column extends React.Component { - Alternate column view - +