zudoku 0.3.0-dev.56 → 0.3.0-dev.57

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-CJZJivg2.js";
-import { o as n } from "./index-DZ910ttL.js";
+import { o as n } from "./index-Bg82-bqR.js";
 import "./urql-DMlBWUKL.js";
 import "zudoku/openapi-worker";
 import "./Markdown-DtLFdxD1.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.56",
+  "version": "0.3.0-dev.57",
   "type": "module",
   "files": [
     "dist",
@@ -67,7 +67,7 @@
   "dependencies": {
     "@envelop/core": "5.0.1",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hiogawa/vite-plugin-ssr-css": "0.0.0",
+    "@hiogawa/vite-plugin-ssr-css": "0.0.1",
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",

package/src/app/demo.tsx

@@ -24,7 +24,12 @@ createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <DevPortal
       page={{
-        logo: "https://cdn.zudoku.dev/logos/icon.svg",
+        logo: {
+          src: {
+            light: "https://cdn.zudoku.dev/logos/icon.svg",
+            dark: "https://cdn.zudoku.dev/logos/icon.svg",
+          },
+        },
         pageTitle: "Developer Portal",
       }}
       navigation={[

package/src/app/entry.client.tsx

@@ -5,7 +5,7 @@ import {
   type RouteObject,
 } from "react-router-dom";
 import config from "virtual:zudoku-config";
-import "virtual:zudoku-custom-css.css";
+import "virtual:zudoku-theme.css";
 import { Bootstrap } from "zudoku/components";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";

package/src/app/entry.server.tsx

@@ -8,7 +8,7 @@ import {
   createStaticHandler,
   createStaticRouter,
 } from "react-router-dom/server.js";
-import "virtual:zudoku-custom-css.css";
+import "virtual:zudoku-theme.css";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
 import type { FileWritingResponse } from "../vite/prerender.js";

package/src/app/main.tsx

@@ -2,9 +2,9 @@ import { type RouteObject } from "react-router-dom";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
-import "virtual:zudoku-custom-css.css";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
+import "virtual:zudoku-theme.css";
 import { DevPortal, Layout, RouterError } from "zudoku/components";
 import { isNavigationPlugin } from "zudoku/internal";
 import type { ZudokuConfig } from "../config/config.js";
@@ -13,11 +13,20 @@ import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
 ): ZudokuContextOptions => {
+  const fallbackLogo =
+    config.page?.logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg";
+
   return {
     page: {
-      logo: "https://cdn.zudoku.dev/logos/icon.svg",
       pageTitle: "Developer Portal",
       ...config.page,
+      logo: {
+        ...config.page?.logo,
+        src: {
+          light: config.page?.logo?.src?.light ?? fallbackLogo,
+          dark: config.page?.logo?.src?.dark ?? fallbackLogo,
+        },
+      },
     },
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/icon.svg",

package/src/app/standalone.tsx

@@ -29,7 +29,12 @@ createRoot(root).render(
   <StrictMode>
     <DevPortal
       page={{
-        logo: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+        logo: {
+          src: {
+            light: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+            dark: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+          },
+        },
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         pageTitle: pageTitle ?? "Developer Portal",
       }}

package/src/lib/components/Header.tsx

@@ -19,7 +19,12 @@ export const Header = memo(function HeaderInner() {
         <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b border-border px-12 h-[--top-header-height]">
           <div className="flex items-center gap-3.5">
             {page?.logo && (
-              <img src={page.logo} alt={page.pageTitle} className="h-10" />
+              <img
+                src={isDark ? page.logo.src.dark : page.logo.src.light}
+                alt={page.logo.alt ?? page.pageTitle}
+                style={{ width: page.logo.width }}
+                className="h-10"
+              />
             )}
             <span className="font-bold text-2xl text-foreground/85 tracking-wide">
               {page?.pageTitle}

package/src/lib/components/navigation/SideNavigationCategory.tsx

@@ -8,7 +8,7 @@ import { useTopNavigationItem } from "../context/DevPortalProvider.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { SideNavigationItem } from "./SideNavigationItem.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
-import { checkHasActiveItem, isPathItem } from "./util.js";
+import { checkHasActiveItem } from "./util.js";
 
 export const SideNavigationCategory = ({
   category,
@@ -59,9 +59,9 @@ export const SideNavigationCategory = ({
       <Collapsible.Content className="CollapsibleContent -mx-[--padding-nav-item]">
         {/* margin on Collapsible.Content will lead jumpiness when animating because it's not added to the calculated height */}
         <ul className="space-y-0.5 mt-1.5 mb-4 ms-3">
-          {category.children.map((item) => (
+          {category.children.map((item, i) => (
             <SideNavigationItem
-              key={isPathItem(item) ? item.path + item.label : item.href}
+              key={i}
               category={category}
               item={item}
               activeAnchor={activeAnchor}

package/src/lib/core/DevPortalContext.ts

@@ -73,7 +73,14 @@ type Metadata = Partial<{
 }>;
 type Page = Partial<{
   pageTitle?: string;
-  logo?: string;
+  logo?: {
+    src: {
+      light: string;
+      dark: string;
+    };
+    width?: string;
+    alt?: string;
+  };
 }>;
 export type ZudokuContextOptions = {
   metadata?: Metadata;

package/src/lib/oas/graphql/index.ts

@@ -36,11 +36,15 @@ type OperationLike = {
   method: string;
 };
 export const slugifyOperation = (operation: OperationLike, tag?: string) => {
+  const summary =
+    operation.summary +
+    (operation.operationId
+      ? "-" + operation.operationId.slice(0, operation.summary ? 4 : 12)
+      : "");
+
   return slugify(
     (tag ? tag + "-" : "") +
-      (operation.summary ??
-        operation.operationId ??
-        `${operation.method}-${operation.path}`),
+      (summary || `${operation.method}-${operation.path}`),
     { lower: true, trim: true },
   );
 };

package/src/lib/plugins/openapi/OperationList.tsx

@@ -8,6 +8,7 @@ import { Markdown } from "../../components/Markdown.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
+import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
 import { SchemaProseClasses } from "./util/prose.js";
@@ -146,12 +147,14 @@ export const OperationList = () => {
               />
             )}
             <div className="operation mb-12">
-              {tag.operations.map((fragment) => (
-                <OperationListItem
-                  key={fragment.slug}
-                  operationFragment={fragment}
-                />
-              ))}
+              <StaggeredRender>
+                {tag.operations.map((fragment) => (
+                  <OperationListItem
+                    key={fragment.slug}
+                    operationFragment={fragment}
+                  />
+                ))}
+              </StaggeredRender>
             </div>
           </div>
         ))}

package/src/lib/plugins/openapi/StaggeredRender.tsx

@@ -0,0 +1,17 @@
+import { Children, ReactNode, useEffect, useState } from "react";
+
+const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
+  const [isMounted, setIsMounted] = useState(typeof window === "undefined");
+
+  useEffect(() => {
+    const x = window.requestIdleCallback(() => {
+      setIsMounted(true);
+    });
+
+    return () => window.cancelIdleCallback(x);
+  }, []);
+
+  return !isMounted ? Children.toArray(children).slice(0, 3) : children;
+};
+
+export default StaggeredRender;