zudoku 0.0.0-f3f6db5 → 0.0.0-f40ea27

package/src/app/entry.server.tsx

@@ -8,31 +8,32 @@ import {
   createStaticHandler,
   createStaticRouter,
   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 "./main.css";
+import { NO_DEHYDRATE } from "../lib/components/cache.js";
+import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
 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();
 
@@ -47,7 +48,7 @@ export const render = async ({
   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")!,
       );
     }
@@ -72,6 +73,7 @@ export const render = async ({
       context={context}
       queryClient={queryClient}
       helmetContext={helmetContext}
+      bypassProtection={bypassProtection}
     />
   );
 
@@ -84,8 +86,6 @@ export const render = async ({
 
       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
     onAllReady() {
       response.set({ "Content-Type": "text/html" });
       response.status(status);
@@ -117,10 +117,15 @@ export const render = async ({
       );
 
       transformStream.on("finish", () => {
+        const dehydrated = dehydrate(queryClient, {
+          shouldDehydrateQuery: (query) =>
+            !query.queryKey.includes(NO_DEHYDRATE),
+        });
+
         response.end(
           htmlEnd?.replace(
             "</body>",
-            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
+            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
           ),
         );
       });
@@ -129,6 +134,9 @@ export const render = async ({
     },
     onError(error) {
       status = 500;
+      if (import.meta.env.PROD) {
+        throw error;
+      }
       logger.error(error);
     },
   });
@@ -136,7 +144,7 @@ export const render = async ({
 
 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,43 @@
+import z from "zod";
+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) {
+    if (error instanceof z.ZodError) {
+      // eslint-disable-next-line no-console
+      console.error("ZUPLO_BUILD_CONFIG is invalid.");
+      // eslint-disable-next-line no-console
+      console.log(error.errors);
+      return undefined;
+    }
+    // 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/font.geist.css

@@ -0,0 +1,73 @@
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
+    format("woff2");
+}

package/src/app/main.css

@@ -1,101 +1,64 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
-    format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
-}
+/* @vite-plugin-inject defaultTheme */
+@import "tailwindcss" source("..");
 
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
-}
+/* @vite-plugin-inject main */
 
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
-}
+@plugin "@tailwindcss/typography";
+@custom-variant dark (&:is(.dark *));
 
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
-    format("woff2");
+@utility prose {
+  a {
+    @apply font-normal underline-offset-4 hover:text-primary;
+  }
+  blockquote {
+    @apply not-italic text-neutral-500/75 dark:text-neutral-400;
+    /* Disable adding quote marks to block-quotes: https://github.com/tailwindlabs/tailwindcss-typography/issues/66 */
+    p {
+      &:first-of-type::before,
+      &:last-of-type::after {
+        content: none;
+      }
+    }
+  }
+  hr {
+    @apply border-border;
+  }
+  code {
+    font-weight: 400;
+  }
+  code::before {
+    content: none;
+  }
+  code::after {
+    content: none;
+  }
 }
 
 @layer base {
   :root {
     --top-header-height: 65px;
     --top-nav-height: 50px;
-    --banner-height: 40px;
+    --banner-height: 35px;
     --header-height: calc(
       var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.80");
-    --padding-content-top: theme("spacing.6");
-    --padding-content-bottom: theme("spacing.12");
-    --padding-nav-item: theme("spacing[2.5]");
+    --side-nav-width: --spacing(72);
+    --padding-content-top: --spacing(6);
+    --padding-content-bottom: --spacing(12);
+    --padding-nav-item: --spacing(2.5);
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
     --scrollbar-width: calc(100vw - 100%);
   }
 
   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,
@@ -103,13 +66,19 @@
     @apply h-full overscroll-none;
   }
 
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
   details summary {
     @apply cursor-pointer;
   }
 
   #root {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full grid grid-rows-[auto_1fr];
   }
+
   * {
     @apply border-border;
   }
@@ -121,16 +90,26 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  .bg-primary::selection,
+  .bg-primary ::selection {
+    background: var(--color-background);
+    color: var(--color-foreground);
+  }
+
   .dark {
     color-scheme: dark;
   }
 
-  .prose.prose {
-    @apply prose-a:underline-offset-4 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;
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 
+  .prose.prose {
     ul.contains-task-list {
       @apply list-none px-0;
       li {
@@ -139,8 +118,54 @@
     }
   }
 
+  .shiki {
+    counter-reset: line;
+    @apply leading-normal;
+  }
+  .code-block .shiki {
+    @apply grid grid-rows-1;
+    grid-auto-rows: 1lh;
+  }
+
+  .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;
+  }
+
+  .dark .shiki,
+  .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 block -mx-4 px-4 w-[calc(100%+2rem)];
+    --highlighted-bg: hsl(
+      from 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;
+    @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-hidden;
   }
 
   .CollapsibleContent {
@@ -221,7 +246,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)),
@@ -236,63 +262,50 @@
         50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
         calc(var(--s) + var(--b)) repeat-x;
   }
+}
 
-  /* Theme */
-
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 240 10% 3.9%;
-      --card: 0 0% 100%;
-      --card-foreground: 240 10% 3.9%;
-      --popover: 0 0% 100%;
-      --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%;
-    }
+@layer utilities {
+  .stepper > ol {
+    --bullet-size: 1.75rem;
+    --line-spacing: 0.25rem;
+    @apply flex flex-col list-none p-0 m-0;
+    counter-reset: step-counter;
+  }
 
-    .dark {
-      --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: 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%;
-    }
+  .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;
+    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)));
+  }
+
+  /*
+    This can't be as `rtl:*` variant above, because it breaks the CSS minification. See:
+    https://github.com/tailwindlabs/tailwindcss/issues/16582
+  */
+  [dir="rtl"] .stepper > ol > li::after {
+    @apply translate-x-1/2;
+  }
+
+  .stepper > ol > li > :first-child {
+    @apply mt-0 pt-0;
+    transform: translateY(calc((var(--bullet-size) - 1lh) / 2));
   }
 }