zudoku 0.0.0-e4d0ea8 → 0.0.0-e5559fc

package/src/app/entry.server.tsx

@@ -1,53 +1,56 @@
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 import { type HelmetData } from "@zudoku/react-helmet-async";
 import type express from "express";
 import logger from "loglevel";
 import { Transform } from "node:stream";
 import { renderToPipeableStream, renderToStaticMarkup } from "react-dom/server";
-import { isRouteErrorResponse } from "react-router-dom";
 import {
   createStaticHandler,
   createStaticRouter,
-} from "react-router-dom/server.js";
+  isRouteErrorResponse,
+  type RouteObject,
+} from "react-router";
 import "virtual:zudoku-theme.css";
+import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
-import type { ZudokuConfig } from "../config/config.js";
-import type { FileWritingResponse } from "../vite/prerender.js";
+import { NO_DEHYDRATE } from "../lib/components/cache.js";
+import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
-
 export { getRoutesByConfig };
 
 export const render = async ({
   template,
   request: baseRequest,
   response,
-  config,
+  routes,
+  basePath,
+  bypassProtection,
 }: {
   template: string;
   request: express.Request | Request;
-  response: express.Response | FileWritingResponse;
-  config: ZudokuConfig;
+  response: express.Response | PrerenderResponse;
+  routes: RouteObject[];
+  basePath?: string;
+  bypassProtection?: boolean;
 }) => {
-  const routes = getRoutesByConfig(config);
   const { query, dataRoutes } = createStaticHandler(routes, {
-    basename: config.basePath,
+    basename: basePath,
   });
+  const queryClient = new QueryClient();
 
   const request =
     baseRequest instanceof Request
       ? baseRequest
       : createFetchRequest(baseRequest, response);
 
-  if (!request) {
-    throw new Error("Either fetchRequest or expressRequest must be provided");
-  }
   const context = await query(request);
   let status = 200;
 
   if (context instanceof Response) {
     if ([301, 302, 303, 307, 308].includes(context.status)) {
       return response.redirect(
-        context.status,
+        import.meta.env.PROD ? context.status : 307,
         context.headers.get("Location")!,
       );
     }
@@ -66,70 +69,84 @@ export const render = async ({
   const router = createStaticRouter(dataRoutes, context);
   const helmetContext = {} as HelmetData["context"];
 
-  const { pipe } = renderToPipeableStream(
+  const App = (
     <BootstrapStatic
       router={router}
       context={context}
+      queryClient={queryClient}
       helmetContext={helmetContext}
-    />,
-    {
-      onShellError(error) {
-        response.status(500);
-        response.set({ "Content-Type": "text/html" });
-
-        const html = renderToStaticMarkup(<ServerError error={error} />);
-
-        response.send(html);
-      },
-      // for SSG we could use onAllReady instead of onShellReady
-      // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
-      onShellReady() {
-        response.set({ "Content-Type": "text/html" });
-        response.status(status);
-
-        const transformStream = new Transform({
-          transform(chunk, encoding, callback) {
-            response.write(chunk, encoding);
-            callback();
-          },
-        });
+      bypassProtection={bypassProtection}
+    />
+  );
 
-        const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
+  const { pipe } = renderToPipeableStream(App, {
+    onShellError(error) {
+      response.status(500);
+      response.set({ "Content-Type": "text/html" });
 
-        if (!htmlStart) {
-          throw new Error("No <!--app-html--> found in template");
-        }
+      const html = renderToStaticMarkup(<ServerError error={error} />);
 
-        response.write(
-          htmlStart.replace(
-            "<!--app-helmet-->",
-            [
-              helmetContext.helmet.title.toString(),
-              helmetContext.helmet.meta.toString(),
-              helmetContext.helmet.link.toString(),
-              helmetContext.helmet.style.toString(),
-              helmetContext.helmet.script.toString(),
-            ].join("\n"),
-          ),
-        );
+      response.send(html);
+    },
+    onAllReady() {
+      response.set({ "Content-Type": "text/html" });
+      response.status(status);
+
+      const transformStream = new Transform({
+        transform(chunk, encoding, callback) {
+          response.write(chunk, encoding);
+          callback();
+        },
+      });
 
-        transformStream.on("finish", () => {
-          response.end(htmlEnd);
+      const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
+
+      if (!htmlStart) {
+        throw new Error("No <!--app-html--> found in template");
+      }
+
+      response.write(
+        htmlStart.replace(
+          "<!--app-helmet-->",
+          [
+            helmetContext.helmet.title.toString(),
+            helmetContext.helmet.meta.toString(),
+            helmetContext.helmet.link.toString(),
+            helmetContext.helmet.style.toString(),
+            helmetContext.helmet.script.toString(),
+          ].join("\n"),
+        ),
+      );
+
+      transformStream.on("finish", () => {
+        const dehydrated = dehydrate(queryClient, {
+          shouldDehydrateQuery: (query) =>
+            !query.queryKey.includes(NO_DEHYDRATE),
         });
 
-        pipe(transformStream);
-      },
-      onError(error) {
-        status = 500;
-        logger.error(error);
-      },
+        response.end(
+          htmlEnd?.replace(
+            "</body>",
+            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
+          ),
+        );
+      });
+
+      pipe(transformStream);
     },
-  );
+    onError(error) {
+      status = 500;
+      if (import.meta.env.PROD) {
+        throw error;
+      }
+      logger.error(error);
+    },
+  });
 };
 
 export function createFetchRequest(
   req: express.Request,
-  res: express.Response | FileWritingResponse,
+  res: express.Response | PrerenderResponse,
 ): Request {
   const origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying

package/src/app/env.ts

@@ -0,0 +1,35 @@
+import { BuildConfigSchema } from "./ZuploBuildConfig.js";
+
+const getZuploBuildConfig = () => {
+  if (!process.env.ZUPLO_BUILD_CONFIG) return undefined;
+
+  try {
+    const zuploBuildConfig = BuildConfigSchema.parse(
+      JSON.parse(process.env.ZUPLO_BUILD_CONFIG),
+    );
+    return zuploBuildConfig;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(
+      "ZUPLO_BUILD_CONFIG is a reserved environment variable and cannot be used for custom configuration. Please remove it from your environment variables.",
+    );
+    // eslint-disable-next-line no-console
+    console.log(error);
+    return undefined;
+  }
+};
+
+export const ZuploEnv = {
+  /**
+   * Indicates that the build is running in Zuplo "mode"
+   */
+  get isZuplo(): boolean {
+    return process.env.ZUPLO === "1";
+  },
+
+  get serverUrl(): string | undefined {
+    return process.env.ZUPLO_SERVER_URL;
+  },
+
+  buildConfig: getZuploBuildConfig(),
+};

package/src/app/main.css

@@ -82,11 +82,12 @@
     --top-nav-height: 50px;
     --banner-height: 40px;
     --header-height: calc(
-      var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
+      var(--top-header-height) + var(--top-nav-height) + var(--banner-height) -
+        /* borders */ 2px
     );
     --scroll-padding: calc(var(--header-height) + 10px);
     --side-nav-width: theme("spacing.72");
-    --padding-content-top: theme("spacing.12");
+    --padding-content-top: theme("spacing.6");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
@@ -95,7 +96,12 @@
 
   html {
     /* This is to prevent layout jumping when the scrollbar appears/disappears */
-    @apply -mr-[--scrollbar-width] scroll-pt-[--scroll-padding];
+    @apply -me-[--scrollbar-width] scroll-pt-[--scroll-padding];
+    --dark: -1;
+  }
+
+  html.dark {
+    --dark: 1;
   }
 
   html,
@@ -108,8 +114,9 @@
   }
 
   #root {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full grid grid-rows-[auto_1fr];
   }
+
   * {
     @apply border-border;
   }
@@ -121,15 +128,26 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary/100 text-primary-foreground;
+  }
+
+  .bg-primary::selection,
+  .bg-primary ::selection {
+    background: theme(colors.background);
+    color: theme(colors.foreground);
+  }
+
   .dark {
     color-scheme: dark;
   }
 
   .prose.prose {
-    @apply prose-a:underline-offset-4 hover:prose-a:text-primary;
+    @apply prose-a:underline-offset-4 prose-a:font-normal hover:prose-a:text-primary;
     @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
-    @apply prose-headings:prose-code:mx-2;
-    @apply prose-code:before:content-none prose-code:after:content-none;
+    @apply prose-code:before:content-none prose-code:after:content-none prose-code:font-normal;
+    @apply prose-headings:prose-code:mx-2 prose-li:my-0.5;
+    @apply prose-hr:border-border;
 
     ul.contains-task-list {
       @apply list-none px-0;
@@ -139,6 +157,51 @@
     }
   }
 
+  .shiki {
+    counter-reset: line;
+    @apply leading-normal;
+  }
+  .code-block .shiki {
+    @apply grid;
+  }
+
+  .shiki,
+  .shiki span {
+    color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style) !important;
+    font-weight: var(--shiki-light-font-weight) !important;
+    text-decoration: var(--shiki-light-text-decoration) !important;
+  }
+
+  html.dark .shiki,
+  html.dark .shiki span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
+  .line-numbers .shiki .line::before {
+    counter-increment: line;
+    content: counter(line);
+    @apply tabular-nums inline-flex items-baseline justify-end me-4 w-3 text-muted-foreground/25;
+  }
+
+  .shiki.not-inline .line {
+    @apply inline-flex items-baseline -mx-4 px-4 w-[calc(100%+2rem)];
+    --highlighted-bg: hsl(
+      from hsl(var(--muted)) h s calc(l + 4 * var(--dark)) / 50%
+    );
+  }
+  .shiki .line.highlighted {
+    @apply bg-[--highlighted-bg];
+  }
+
+  .shiki .highlighted-word {
+    @apply bg-[--highlighted-bg] px-0.5 rounded;
+    box-shadow: 0 0 0 4px var(--highlighted-bg);
+  }
+
   select {
     @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-none;
   }
@@ -146,7 +209,6 @@
   .CollapsibleContent {
     --easing: cubic-bezier(0.4, 0, 0.2, 1);
     --slide-offset: -0.75rem;
-    @apply overflow-hidden;
   }
   .CollapsibleContent[data-state="open"] {
     animation: slideDown 300ms var(--easing);
@@ -188,7 +250,7 @@
   }
 
   .scrollbar:hover {
-    scrollbar-color: hsla(var(--border)) transparent;
+    scrollbar-color: var(--scrollbar-color, hsla(var(--border))) transparent;
   }
 
   .scrollbar::-webkit-scrollbar {
@@ -222,7 +284,8 @@
 
     --R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
     height: calc(2 * var(--R));
-    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
+    --_g:
+      #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
     mask:
       radial-gradient(
           var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
@@ -241,46 +304,94 @@
   /* Theme */
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: var(--primary);
-    --radius: 0.5rem;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 95%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.75rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: var(--primary);
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer components {
+  .stepper > ol {
+    --bullet-size: 1.75rem;
+    --line-spacing: 0.25rem;
+    @apply flex flex-col list-none p-0 m-0;
+    counter-reset: step-counter;
+  }
+
+  .stepper > ol > li {
+    @apply relative ps-12 pb-6 my-0;
+    counter-increment: step-counter;
+  }
+
+  .stepper > ol > li:last-child {
+    @apply pb-0;
+  }
+
+  /* Bullet with number */
+  .stepper > ol > li::before {
+    @apply absolute start-0 flex items-center justify-center size-[--bullet-size];
+    @apply bg-muted/80 border border-border text-muted-foreground text-[calc(var(--bullet-size)/2)] font-semibold rounded-full;
+    content: counter(step-counter);
+  }
+
+  /* Vertical line */
+  .stepper > ol > li::after {
+    @apply absolute content-[''] w-[2px] bg-border -translate-x-1/2 rtl:translate-x-1/2;
+    inset-inline-start: calc(var(--bullet-size) / 2);
+    top: calc(var(--bullet-size) + var(--line-spacing));
+    height: calc(100% - var(--bullet-size) - (2 * var(--line-spacing)));
+  }
+
+  .stepper > ol > li > :first-child {
+    @apply mt-0 pt-0;
+    transform: translateY(calc((var(--bullet-size) - 1lh) / 2));
   }
 }