zudoku 0.3.0-dev.4 → 0.3.0-dev.41

package/src/lib/errors/RouterError.tsx

@@ -0,0 +1,13 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { NotFoundPage } from "../components/NotFoundPage.js";
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function RouterError() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error) && error.status === 404) {
+    return <NotFoundPage />;
+  }
+
+  return <ErrorAlert error={error} />;
+}

package/src/lib/errors/ServerError.tsx

@@ -0,0 +1,5 @@
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function ServerError({ error }: { error: unknown }) {
+  return <ErrorAlert error={error} />;
+}

package/src/lib/errors/TopLevelError.tsx

@@ -0,0 +1,8 @@
+import { FallbackProps } from "react-error-boundary";
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function TopLevelError({ error, resetErrorBoundary }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return <ErrorAlert error={error} />;
+}

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

@@ -45,7 +45,7 @@ export const slugifyOperation = (operation: OperationLike, tag?: string) => {
   );
 };
 
-const cache = new LRUCache<string, OpenAPIDocument>({
+const cache = new LRUCache<string, Promise<OpenAPIDocument>>({
   ttl: 60 * 10 * 1000,
   ttlAutopurge: true,
 });
@@ -384,7 +384,7 @@ const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
     return cache.get(hash)!;
   }
 
-  const schema = await validate(input);
+  const schema = validate(input);
 
   cache.set(hash, schema);
 

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

@@ -1,3 +1,4 @@
+import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
@@ -9,10 +10,6 @@ type DeepOmitReference<T> = T extends ReferenceObject
     ? { [K in keyof T]: DeepOmitReference<T[K]> }
     : T;
 
-// type Prettify<T> = {
-//   [K in keyof T]: T[K];
-// } & {};
-
 export type OpenAPIDocument = DeepOmitReference<OpenAPIV3_1.Document>;
 export type ResponseObject = DeepOmitReference<OpenAPIV3_1.ResponseObject>;
 export type OperationObject = DeepOmitReference<OpenAPIV3_1.OperationObject>;
@@ -46,35 +43,63 @@ export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 // };
 
 const parseSchemaInput = async (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  schemaInput: any,
+  schemaInput: unknown,
 ): Promise<JSONSchema & { openapi?: string }> => {
   if (typeof schemaInput === "string") {
     if (schemaInput.trim().startsWith("{")) {
-      return JSON.parse(schemaInput);
+      try {
+        return JSON.parse(schemaInput);
+      } catch (err) {
+        throw new GraphQLError("Invalid JSON schema", {
+          originalError: err,
+        });
+      }
     }
     if (schemaInput.includes("://")) {
-      const response = await fetch(schemaInput);
-      return (await response.json()) as JSONSchema;
+      let response;
+      try {
+        response = await fetch(schemaInput, {
+          cache: "force-cache",
+        });
+      } catch (err) {
+        throw new GraphQLError("Failed to fetch schema", {
+          originalError: err,
+        });
+      }
+
+      if (!response.ok) {
+        throw new GraphQLError(
+          `Failed to fetch schema: ${response.statusText}`,
+        );
+      }
+
+      try {
+        return (await response.json()) as JSONSchema;
+      } catch (err) {
+        throw new GraphQLError("Fetched invalid JSON schema", {
+          originalError: err,
+        });
+      }
     }
     const yaml = await import("yaml");
-    return yaml.parse(schemaInput);
+    const parsed = yaml.parse(schemaInput);
+
+    if (typeof parsed === "object") return parsed;
   }
 
-  if (typeof schemaInput === "object") return schemaInput;
+  if (typeof schemaInput === "object") return schemaInput as JSONSchema;
 
-  throw new Error("Unsupported schema input");
+  throw new GraphQLError("Unsupported schema input: " + schemaInput);
 };
 
 /**
  * Validates, dereferences and upgrades the OpenAPI schema (to v3.1) if necessary.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const validate = async (schemaInput: any) => {
+export const validate = async (schemaInput: unknown) => {
   const schema = await parseSchemaInput(schemaInput);
 
   if (!schema.openapi) {
-    throw new Error("OpenAPI version is not defined");
+    throw new GraphQLError("OpenAPI version is not defined");
   }
 
   // const validator = await getValidator(schema.openapi);
@@ -86,9 +111,5 @@ export const validate = async (schemaInput: any) => {
 
   const dereferenced = await dereference(schema);
 
-  const upgraded = upgradeSchema(
-    dereferenced as OpenAPIV3_1.Document | OpenAPIV3.Document,
-  );
-
-  return upgraded;
+  return upgradeSchema(dereferenced);
 };

package/src/lib/plugins/{api-key → api-keys}/CreateApiKey.tsx

@@ -12,17 +12,11 @@ import {
   SelectValue,
 } from "../../components/Select.js";
 import { Button } from "../../ui/Button.js";
-import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description: string; expiresOn?: string };
 
-export const CreateApiKey = ({
-  options,
-  service,
-}: {
-  options: ApiKeyPluginOptions;
-  service: ApiKeyService;
-}) => {
+export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   const context = useDevPortal();
   const navigate = useNavigate();
   const form = useForm<CreateApiKey>({

package/src/lib/plugins/{api-key → api-keys}/SettingsApiKeys.tsx

@@ -8,21 +8,15 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useDevPortal } from "../../components/context/DevPortalProvider.js";
 import { Button } from "../../ui/Button.js";
-import { Card } from "../../ui/Card.js";
-import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import { ApiKeyService } from "./index.js";
 
-export const SettingsApiKeys = ({
-  options,
-  service,
-}: {
-  options: ApiKeyPluginOptions;
-  service: ApiKeyService;
-}) => {
+export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useDevPortal();
   const queryClient = useQueryClient();
   const { data } = useSuspenseQuery({
     queryFn: () => service.getKeys(context),
     queryKey: ["api-keys"],
+    retry: false,
   });
 
   const deleteKeyMutation = useMutation({
@@ -39,7 +33,7 @@ export const SettingsApiKeys = ({
   });
 
   return (
-    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
+    <div className="max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]">
       <div className="flex justify-between mb-4 border-b border-border pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
         {service.createKey && (
@@ -49,9 +43,22 @@ export const SettingsApiKeys = ({
         )}
       </div>
 
-      <Card>
-        <ul className="grid grid-cols-[min-content_1fr_min-content] ">
-          {data.map((key) => (
+      {data.length === 0 ? (
+        <div className="flex flex-col justify-center gap-4 items-center h-1/2 my-8">
+          <div className="text-center">
+            No API keys created yet.
+            <br />
+            Get started and create the first one now
+          </div>
+          {service.createKey && (
+            <Button asChild>
+              <Link to="/settings/api-keys/new">Create API Key</Link>
+            </Button>
+          )}
+        </div>
+      ) : (
+        <ul className="grid grid-cols-[minmax(250px,min-content)_1fr_min-content] ">
+          {data.map((key: any) => (
             <li
               className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
               key={key.id}
@@ -100,7 +107,7 @@ export const SettingsApiKeys = ({
             </li>
           ))}
         </ul>
-      </Card>
+      )}
     </div>
   );
 };

package/src/lib/plugins/{api-key → api-keys}/index.tsx

@@ -1,8 +1,13 @@
+import { Outlet, type RouteObject } from "react-router-dom";
+import invariant from "tiny-invariant";
+import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
+import { RouterError } from "../../errors/RouterError.js";
+import { Button } from "../../ui/Button.js";
 import { CreateApiKey } from "./CreateApiKey.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
@@ -47,7 +52,8 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
 
       await context.signRequest(request);
 
-      await fetch(request);
+      const response = await fetch(request);
+      invariant(response.ok, "Failed to delete API key");
     },
     createKey: async (apiKey, context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`, {
@@ -59,7 +65,9 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       });
 
       await context.signRequest(request);
-      await fetch(request);
+
+      const response = await fetch(request);
+      invariant(response.ok, "Failed to create API key");
     },
     getKeys: async (context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`);
@@ -67,12 +75,31 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       await context.signRequest(request);
 
       const keys = await fetch(request);
+      invariant(keys.ok, "Failed to fetch API keys");
 
       return await keys.json();
     },
   };
 };
 
+const ProtectedRoute = () => {
+  const auth = useAuth();
+
+  // TODO: should we suspend here somehow?
+  if (auth.isPending) {
+    return null;
+  }
+
+  return auth.isAuthenticated ? (
+    <Outlet />
+  ) : (
+    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
+      Please login first to view this page
+      <Button onClick={() => auth.login()}>Login</Button>
+    </div>
+  );
+};
+
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): DevPortalPlugin & ApiIdentityPlugin => {
@@ -99,15 +126,22 @@ export const apiKeyPlugin = (
         return [];
       }
     },
-    getRoutes: () => {
+    getRoutes: (): RouteObject[] => {
+      // TODO: Make lazy
       return [
         {
-          path: "/settings/api-keys",
-          element: <SettingsApiKeys options={options} service={service} />,
-        },
-        {
-          path: "/settings/api-keys/new",
-          element: <CreateApiKey options={options} service={service} />,
+          element: <ProtectedRoute />,
+          errorElement: <RouterError />,
+          children: [
+            {
+              path: "/settings/api-keys",
+              element: <SettingsApiKeys service={service} />,
+            },
+            {
+              path: "/settings/api-keys/new",
+              element: <CreateApiKey service={service} />,
+            },
+          ],
         },
       ];
     },

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,18 +1,18 @@
 import { useMDXComponents } from "@mdx-js/react";
+import { Helmet } from "@zudoku/react-helmet-async";
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
-import { Helmet } from "../../core/helmet.js";
-import { Link, useLocation } from "../../core/router.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
-import type { MDXImport } from "./index.js";
+import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
@@ -30,11 +30,13 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
-  frontmatter,
+  frontmatter = {},
+  defaultOptions,
   tableOfContents,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
     mdxComponent: MDXImport["default"];
+    defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
   const navItem = useTopNavigationItem();
@@ -50,10 +52,11 @@ export const MdxPage = ({
 
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
-  const hideToc = frontmatter.toc === false;
-
+  const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+  const hidePager =
+    frontmatter.disablePager ?? defaultOptions?.disablePager ?? false;
 
   const tocEntries =
     tableOfContents.find((item) => item.depth === 1)?.children ??
@@ -112,35 +115,49 @@ export const MdxPage = ({
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />
-        <hr />
-        <div className="not-prose flex items-center justify-between gap-8">
-          {prev.path ? (
-            <Link
-              to={prev.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof prev.label === "string" ? prev.label : undefined}
-            >
-              <div className="text-sm text-muted-foreground">
-                ← Previous page
-              </div>
-              <div className="text-lg text-primary truncate">{prev.label}</div>
-            </Link>
-          ) : (
-            <div className="flex-1" />
-          )}
-          {next.path ? (
-            <Link
-              to={next.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof next.label === "string" ? next.label : undefined}
-            >
-              <div className="text-sm text-muted-foreground">Next page →</div>
-              <div className="text-lg text-primary truncate">{next.label}</div>
-            </Link>
-          ) : (
-            <div className="flex-1" />
-          )}
-        </div>
+        {!hidePager && (
+          <>
+            <hr />
+            <div className="not-prose flex items-center justify-between gap-8">
+              {prev.path ? (
+                <Link
+                  to={prev.path}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={
+                    typeof prev.label === "string" ? prev.label : undefined
+                  }
+                >
+                  <div className="text-sm text-muted-foreground">
+                    ← Previous page
+                  </div>
+                  <div className="text-lg text-primary truncate">
+                    {prev.label}
+                  </div>
+                </Link>
+              ) : (
+                <div className="flex-1" />
+              )}
+              {next.path ? (
+                <Link
+                  to={next.path}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={
+                    typeof next.label === "string" ? next.label : undefined
+                  }
+                >
+                  <div className="text-sm text-muted-foreground">
+                    Next page →
+                  </div>
+                  <div className="text-lg text-primary truncate">
+                    {next.label}
+                  </div>
+                </Link>
+              ) : (
+                <div className="flex-1" />
+              )}
+            </div>
+          </>
+        )}
       </div>
       <div className="hidden xl:block">
         {showToc && <Toc entries={tocEntries} />}

package/src/lib/plugins/markdown/Toc.tsx

@@ -1,4 +1,5 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
+import { ListTreeIcon } from "lucide-react";
 import {
   useEffect,
   useRef,
@@ -8,7 +9,6 @@ import {
 } from "react";
 import { AnchorLink } from "../../components/AnchorLink.js";
 import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
-import { ListTreeIcon } from "../../core/icons.js";
 import { cn } from "../../util/cn.js";
 
 const DATA_ANCHOR_ATTR = "data-active";

package/src/lib/plugins/markdown/generateRoutes.tsx

@@ -1,12 +1,16 @@
+import { Navigate, type RouteObject } from "react-router-dom";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
-import { Navigate, type RouteObject } from "../../core/router.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
-import { MdxPage } from "./MdxPage.js";
-import type { MarkdownPluginOptions } from "./index.js";
+
+import {
+  MarkdownPluginDefaultOptions,
+  MarkdownPluginOptions,
+} from "./index.js";
 
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
+  defaultOptions?: MarkdownPluginDefaultOptions,
 ): RouteObject[] => {
   const routes = Object.entries(markdownFiles).flatMap(
     ([file, importPromise]) => {
@@ -25,17 +29,23 @@ export const generateRoutes = (
       return {
         path: routePath,
         lazy: async () => {
+          const { MdxPage } = await import("./MdxPage.js");
           const { default: Component, ...props } = await importPromise();
-
           return {
-            element: <MdxPage mdxComponent={Component} {...props} />,
+            element: (
+              <MdxPage
+                mdxComponent={Component}
+                {...props}
+                defaultOptions={defaultOptions}
+              />
+            ),
           };
         },
       } satisfies RouteObject;
     },
   );
 
-  const rootRoutes = Array.from(
+  const rootRoutes: RouteObject[] = Array.from(
     new Set(routes.map((route) => route.path.split("/").at(0))),
   ).map((dir) => ({
     path: `/${dir}`,

package/src/lib/plugins/markdown/index.tsx

@@ -5,13 +5,19 @@ import { generateRoutes } from "./generateRoutes.js";
 
 export type MarkdownPluginOptions = {
   markdownFiles: Record<string, () => Promise<MDXImport>>;
+  defaultOptions?: MarkdownPluginDefaultOptions;
 };
+export type MarkdownPluginDefaultOptions = Pick<
+  Frontmatter,
+  "toc" | "disablePager"
+>;
 
 export type Frontmatter = {
   title?: string;
   description?: string;
   category?: string;
   toc?: boolean;
+  disablePager?: boolean;
 };
 
 export type MDXImport = {
@@ -22,10 +28,7 @@ export type MDXImport = {
 
 export const markdownPlugin = ({
   markdownFiles,
-}: MarkdownPluginOptions): DevPortalPlugin => {
-  return {
-    getRoutes() {
-      return generateRoutes(markdownFiles);
-    },
-  };
-};
+  defaultOptions,
+}: MarkdownPluginOptions): DevPortalPlugin => ({
+  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+});

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

@@ -1,11 +1,16 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { InlineCode } from "../../components/InlineCode.js";
+import { Markdown } from "../../components/Markdown.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { Callout } from "../../ui/Callout.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
+import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { useOasConfig } from "./index.js";
+import { SchemaProseClasses } from "./util/prose.js";
 import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
@@ -90,11 +95,42 @@ export const OperationList = () => {
     context: suspenseContext,
   });
 
+  const error = result.error?.graphQLErrors.at(0);
+
+  // Looks like there is no Suspense level error handling (yet)?
+  // So we handle the error case in the component directly
+  if (error) {
+    return (
+      <ErrorPage
+        category="Error"
+        title="Schema cannot be displayed"
+        message={
+          <>
+            {import.meta.env.DEV && (
+              <Callout type="danger" title="Developer hint" className="mb-4">
+                Check your configuration value{" "}
+                <InlineCode>apis.type</InlineCode> and{" "}
+                <InlineCode>apis.input</InlineCode> in the Zudoku config.
+              </Callout>
+            )}
+            An error occurred while trying to fetch the API reference:
+            <SyntaxHighlight code={error.toString()} language="plain" />
+          </>
+        }
+      />
+    );
+  }
+
   if (!result.data) return null;
 
   return (
     <div className="pt-[--padding-content-top]">
-      <div className={cn(ProseClasses, "mb-16")}>
+      <div
+        className={cn(
+          SchemaProseClasses,
+          "mb-16 max-w-full prose-img:max-w-prose",
+        )}
+      >
         <CategoryHeading>Overview</CategoryHeading>
         <Heading level={1} id="description" registerSidebarAnchor>
           {result.data.schema.title}
@@ -108,7 +144,7 @@ export const OperationList = () => {
             {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
             {tag.description && (
               <Markdown
-                className={`${ProseClasses} mt-2 mb-12`}
+                className={`${SchemaProseClasses} mt-2 mb-12`}
                 content={tag.description}
               />
             )}