zudoku 0.3.0-dev.56 → 0.3.0-dev.58

package/lib/zudoku.plugin-api-keys.js

@@ -1,7 +1,7 @@
-import { j as e, a as j, O as v } from "./jsx-runtime-CJZJivg2.js";
-import { u as b, R as w } from "./hook-Biq3zYel.js";
-import { u as k, a as h, S as N, b as K, c as E, d as A, e as S, f as p, B as o } from "./Button-DpHMZvVs.js";
-import { c as l, e as m, L as x } from "./Markdown-DtLFdxD1.js";
+import { j as e, a as j, O as b } from "./jsx-runtime-CJZJivg2.js";
+import { u as v, R as w } from "./hook-CrQMC_eg.js";
+import { u as k, a as h, S as N, b as K, c as E, d as A, e as S, f as p, B as o } from "./Button-CnuhSW99.js";
+import { c as l, b as m, L as x } from "./Markdown-DQrAhTkw.js";
 import { u as y, q as D, t as P } from "./DevPortalProvider-Do9oJqme.js";
 import * as C from "react";
 import { useState as I } from "react";
@@ -138,8 +138,8 @@ const T = ({ service: t }) => {
   const n = /* @__PURE__ */ new Date();
   return n.setDate(n.getDate() + t), n.toISOString();
 }, F = () => {
-  const t = b();
-  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(v, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
+  const t = v();
+  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(b, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
     "Please login first to view this page",
     /* @__PURE__ */ e.jsx(o, { onClick: () => t.login(), children: "Login" })
   ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(R, { className: "max-w-[600px]", children: [

package/lib/zudoku.plugin-markdown.js

@@ -10,7 +10,7 @@ const h = (t, e) => {
       return {
         path: i.at(-1) === "index" ? i.slice(0, -1).join("/") : o,
         lazy: async () => {
-          const { MdxPage: u } = await import("./MdxPage-CbwYRKf5.js"), { default: c, ...l } = await m();
+          const { MdxPage: u } = await import("./MdxPage-DMP-pM_g.js"), { default: c, ...l } = await m();
           return {
             element: /* @__PURE__ */ s.jsx(
               u,

package/lib/zudoku.plugin-openapi.js

@@ -1,8 +1,8 @@
 import "./jsx-runtime-CJZJivg2.js";
-import { o as n } from "./index-DZ910ttL.js";
+import { o as n } from "./index-tOwoT-uJ.js";
 import "./urql-DMlBWUKL.js";
 import "zudoku/openapi-worker";
-import "./Markdown-DtLFdxD1.js";
+import "./Markdown-DQrAhTkw.js";
 import "./router-CBw2vqJE.js";
 export {
   n as openApiPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.56",
+  "version": "0.3.0-dev.58",
   "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

@@ -2,6 +2,7 @@ import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 
 import { useAuth } from "../authentication/hook.js";
+import { cn } from "../util/cn.js";
 import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
@@ -19,7 +20,22 @@ 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={page.logo.src.light}
+                  alt={page.logo.alt ?? page.pageTitle}
+                  style={{ width: page.logo.width }}
+                  className={cn("h-10", isDark && "hidden")}
+                  loading="lazy"
+                />
+                <img
+                  src={page.logo.src.dark}
+                  alt={page.logo.alt ?? page.pageTitle}
+                  style={{ width: page.logo.width }}
+                  className={cn("h-10", !isDark && "hidden")}
+                  loading="lazy"
+                />
+              </>
             )}
             <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;