mirror of
https://github.com/hanzoai/cal.git
synced 2026-10-16 20:43:01 +00:00
The app mounts <Hanzo> from @hanzo/ui with its stylesheet instead of a stock
gui config, so the Booker reads hanzo.ai's own tokens. @hanzo/ui 8.27.89
draws a placeholder at the ink's 45% and the value at the full ink, and
@hanzo/booker 8.3.7 carries no sample-data placeholders ("Your name",
"[email protected]"), a white pill Confirm (black on light) and a quiet Back.
The page follows the device's light or dark, as hanzo.ai and its checkout do,
painted in <head> before first paint. Grounds are the checkout's: #000 or #fff,
fields on #171717 / #ededed under the #2e2e2e / #d5d5d5 hairline. One layout,
the mark then one card, on every page: the landing's frame around the Booker's
own card is gone, the booking page is a single card with a white-pill Keep it,
and the popup embed draws the Booker bare inside its panel, which follows the
device too. An embedded document decides it is framed in <head>, so it is
see-through before React mounts.
Co-authored-by: Hanzo Dev <[email protected]>
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { bootScript } from "@hanzo/appearance/state";
|
|
import react from "@vitejs/plugin-react";
|
|
import { defineConfig } from "vite";
|
|
|
|
import { SCHEME } from "./src/scheme";
|
|
|
|
// Hanzo Calendar SPA — hosts the native universal Booker (@hanzo/booker, gui)
|
|
// inside <Hanzo> against the /v1/calendar backend. NODE_ENV is pinned so React
|
|
// and gui take their production paths in the browser.
|
|
//
|
|
// gui's substrate is react-native primitives, which on the web is
|
|
// react-native-web: the alias maps it, and `.web.*` outranks `.js` so
|
|
// react-native-svg (which @hanzo/ui draws icons with) reaches its web build
|
|
// rather than its native codegen. Same mapping as hanzo.ai's checkout.
|
|
//
|
|
// The scheme is painted in <head> before anything renders: a page that decides
|
|
// light or dark after React mounts flashes the wrong ground first. So is
|
|
// `framed`: an embedded document paints no ground of its own, and decided in an
|
|
// effect it showed an opaque slab in the host page until React mounted.
|
|
const FRAMED = `if(location.pathname==="/embed")document.documentElement.classList.add("framed")`;
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
{
|
|
name: "scheme",
|
|
transformIndexHtml: () => [
|
|
{ tag: "script", children: `${FRAMED};${bootScript({ base: SCHEME })}`, injectTo: "head-prepend" },
|
|
],
|
|
},
|
|
],
|
|
resolve: {
|
|
alias: [
|
|
{ find: /^react-native$/, replacement: "react-native-web" },
|
|
{
|
|
find: "@react-native/assets-registry/registry",
|
|
replacement: "react-native-web/dist/modules/AssetRegistry",
|
|
},
|
|
],
|
|
extensions: [".web.js", ".web.jsx", ".web.ts", ".web.tsx", ".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
|
|
dedupe: ["react", "react-dom", "react-native-web", "@hanzo/gui"],
|
|
},
|
|
define: {
|
|
"process.env.NODE_ENV": JSON.stringify("production"),
|
|
},
|
|
optimizeDeps: {
|
|
esbuildOptions: { target: "es2020" },
|
|
},
|
|
build: {
|
|
outDir: "dist",
|
|
sourcemap: false,
|
|
chunkSizeWarningLimit: 4000,
|
|
},
|
|
});
|