zudoku 0.0.0-e614aaa → 0.0.0-e6d1d34

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

@@ -42,21 +42,29 @@ type OperationLike = {
 export const createOperationSlug = (
   slugify: CountableSlugify,
   operation: OperationLike,
-  tag?: string,
 ) => {
   const summary =
     operation.summary ||
     operation.operationId ||
     `${operation.method}-${operation.path}`;
-  const prefix = tag ? `${tag}-` : "";
 
-  return slugify(prefix + summary);
+  return slugify(summary);
 };
 
-export type SchemaImports = Record<
-  string,
-  () => Promise<{ schema: OpenAPIDocument }>
->;
+export type SchemaImport = () => Promise<{
+  schema: OpenAPIDocument;
+  slugs: ReturnType<typeof getAllSlugs>;
+}>;
+
+export type SchemaImports = Record<string, SchemaImport>;
+
+type Context = {
+  schema: OpenAPIDocument;
+  operations: GraphQLOperationObject[];
+  schemaImports?: SchemaImports;
+  tags: ReturnType<typeof getAllTags>;
+  slugs: ReturnType<typeof getAllSlugs>;
+};
 
 const builder = new SchemaBuilder<{
   DefaultFieldNullability: false;
@@ -65,14 +73,7 @@ const builder = new SchemaBuilder<{
     JSONObject: any;
     JSONSchema: any;
   };
-  Context: {
-    schema: OpenAPIDocument;
-    operations: GraphQLOperationObject[];
-    tags: TagObject[];
-    schemaImports?: SchemaImports;
-    currentTag?: string;
-    slugify: CountableSlugify;
-  };
+  Context: Context;
 }>({
   defaultFieldNullability: false,
 });
@@ -88,7 +89,15 @@ const JSONScalar = builder.addScalarType("JSON", GraphQLJSON);
 const JSONObjectScalar = builder.addScalarType("JSONObject", GraphQLJSONObject);
 const JSONSchemaScalar = builder.addScalarType("JSONSchema", GraphQLJSONSchema);
 
-export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
+const resolveExtensions = (obj: Record<string, any>) =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([key]) => key.startsWith("x-")),
+  );
+
+export const getAllTags = (
+  schema: OpenAPIDocument,
+  slugs: ReturnType<typeof getAllSlugs>["tags"],
+): Array<Omit<TagObject, "name"> & { name?: string; slug?: string }> => {
   const rootTags = schema.tags ?? [];
   const operationTags = new Set(
     Object.values(schema.paths ?? {})
@@ -96,16 +105,53 @@ export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
       .flatMap((op) => (op as OperationObject).tags ?? []),
   );
 
+  const hasUntaggedOperations = Object.values(schema.paths ?? {}).some((path) =>
+    Object.values(path ?? {}).some(
+      (op) => !(op as OperationObject).tags?.length,
+    ),
+  );
+
   return [
     // Keep root tags that are actually used in operations
-    ...rootTags.filter((tag) => operationTags.has(tag.name)),
+    ...rootTags
+      .filter((tag) => operationTags.has(tag.name))
+      .map((tag) => ({ ...tag, slug: slugs[tag.name] })),
     // Add tags found in operations but not defined in root tags
     ...[...operationTags]
       .filter((tag) => !rootTags.some((rt) => rt.name === tag))
-      .map((tag) => ({ name: tag })),
+      .map((tag) => ({ name: tag, slug: slugs[tag] })),
+    // Add untagged operations if there are any
+    ...(hasUntaggedOperations ? [{ name: undefined, slug: undefined }] : []),
   ];
 };
 
+export const getAllSlugs = (
+  ops: GraphQLOperationObject[],
+  schemaTags: TagObject[] = [],
+) => {
+  const slugify = slugifyWithCounter();
+
+  const tags = Array.from(
+    new Set([
+      ...ops.flatMap((op) => op.tags ?? []),
+      ...schemaTags.map((tag) => tag.name),
+    ]),
+  );
+
+  return {
+    operations: Object.fromEntries(
+      ops.map((op) => [
+        getOperationSlugKey(op),
+        createOperationSlug(slugify, op),
+      ]),
+    ),
+    tags: Object.fromEntries(tags.map((tag) => [tag, slugify(tag)])),
+  };
+};
+
+const getOperationSlugKey = (op: GraphQLOperationObject) =>
+  [op.path, op.method, op.operationId, op.summary].filter(Boolean).join("-");
+
 export const getAllOperations = (
   paths?: PathsObject,
 ): GraphQLOperationObject[] => {
@@ -143,14 +189,21 @@ export const getAllOperations = (
   return operations;
 };
 
-const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
+const SchemaTag = builder.objectRef<
+  Omit<TagObject, "name"> & { name?: string; slug?: string }
+>("SchemaTag");
+
+SchemaTag.implement({
   fields: (t) => ({
-    name: t.exposeString("name"),
+    name: t.exposeString("name", { nullable: true }),
+    slug: t.exposeString("slug", { nullable: true }),
+    isUntagged: t.field({ type: "Boolean", resolve: (parent) => !parent.name }),
     description: t.exposeString("description", { nullable: true }),
     operations: t.field({
       type: [OperationItem],
       resolve: (parent, _args, ctx) => {
         const rootTags = ctx.tags.map((tag) => tag.name);
+
         return ctx.operations
           .filter((item) =>
             parent.name
@@ -159,12 +212,30 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
                 // If none of the tags are present in the root tags, then show them here
                 item.tags?.every((tag) => !rootTags.includes(tag)),
           )
-          .map((item) => ({
-            ...item,
-            parentTag: parent.name,
-          }));
+          .map((item) => ({ ...item, parentTag: parent.name }));
       },
     }),
+    prev: t.field({
+      type: SchemaTag,
+      nullable: true,
+      resolve: (parent, _args, ctx) => {
+        const index = ctx.tags.findIndex((tag) => tag.slug === parent.slug);
+        return ctx.tags[index - 1];
+      },
+    }),
+    next: t.field({
+      type: SchemaTag,
+      nullable: true,
+      resolve: (parent, _args, ctx) => {
+        const index = ctx.tags.findIndex((tag) => tag.slug === parent.slug);
+        return ctx.tags[index + 1];
+      },
+    }),
+    extensions: t.field({
+      type: JSONObjectScalar,
+      resolve: (parent) => resolveExtensions(parent),
+      nullable: true,
+    }),
   }),
 });
 
@@ -191,6 +262,11 @@ const TagItem = builder.objectRef<TagObject>("TagItem").implement({
   fields: (t) => ({
     name: t.exposeString("name"),
     description: t.exposeString("description", { nullable: true }),
+    extensions: t.field({
+      type: JSONObjectScalar,
+      resolve: (parent) => resolveExtensions(parent),
+      nullable: true,
+    }),
   }),
 });
 
@@ -249,6 +325,11 @@ const ParameterItem = builder
         nullable: true,
       }),
       schema: t.expose("schema", { type: JSONSchemaScalar, nullable: true }),
+      extensions: t.field({
+        type: JSONObjectScalar,
+        resolve: (parent) => resolveExtensions(parent),
+        nullable: true,
+      }),
     }),
   });
 
@@ -306,6 +387,11 @@ const ResponseItem = builder
       content: t.expose("content", { type: [MediaTypeItem], nullable: true }),
       headers: t.expose("headers", { type: JSONScalar, nullable: true }),
       links: t.expose("links", { type: JSONScalar, nullable: true }),
+      extensions: t.field({
+        type: JSONObjectScalar,
+        resolve: (parent) => resolveExtensions(parent),
+        nullable: true,
+      }),
     }),
   });
 
@@ -316,18 +402,16 @@ const OperationItem = builder
       slug: t.field({
         type: "String",
         resolve: (parent, _, ctx) => {
-          const slugData = {
-            summary: parent.summary,
-            operationId: parent.operationId,
-            path: parent.path,
-            method: parent.method,
-          };
-
-          //TODO: fix parent tag parent.tags
-          return createOperationSlug(ctx.slugify, slugData, parent.parentTag);
+          const slug = ctx.slugs.operations[getOperationSlugKey(parent)];
+
+          if (!slug) {
+            throw new Error(
+              `No slug found for operation: ${getOperationSlugKey(parent)}`,
+            );
+          }
+          return slug;
         },
       }),
-
       path: t.exposeString("path"),
       method: t.exposeString("method"),
       operationId: t.exposeString("operationId", { nullable: true }),
@@ -399,9 +483,51 @@ const OperationItem = builder
         nullable: true,
       }),
       deprecated: t.exposeBoolean("deprecated", { nullable: true }),
+      extensions: t.field({
+        type: JSONObjectScalar,
+        resolve: (parent) => resolveExtensions(parent),
+        nullable: true,
+      }),
+    }),
+  });
+
+const SchemaItem = builder
+  .objectRef<{
+    name: string;
+    schema: SchemaObject;
+    extensions?: Record<string, any>;
+  }>("SchemaItem")
+  .implement({
+    fields: (t) => ({
+      name: t.exposeString("name"),
+      schema: t.expose("schema", { type: JSONSchemaScalar }),
+      extensions: t.expose("extensions", {
+        type: JSONObjectScalar,
+        nullable: true,
+      }),
     }),
   });
 
+const Components = builder.objectRef<{
+  schemas?: Record<string, SchemaObject>;
+}>("Components");
+
+Components.implement({
+  fields: (t) => ({
+    schemas: t.field({
+      type: [SchemaItem],
+      resolve: (parent) => {
+        return Object.entries(parent.schemas ?? {}).map(([name, schema]) => ({
+          name,
+          schema,
+          extensions: resolveExtensions(schema),
+        }));
+      },
+      nullable: true,
+    }),
+  }),
+});
+
 const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   fields: (t) => ({
     openapi: t.string({ resolve: (root) => root.openapi }),
@@ -431,17 +557,30 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
           methods: Object.keys(value!) as typeof HttpMethods,
         })),
     }),
-    tags: t.field({
+    tag: t.field({
+      type: SchemaTag,
       args: {
+        slug: t.arg.string(),
         name: t.arg.string(),
+        untagged: t.arg.boolean(),
       },
-      type: [SchemaTag],
-      resolve: (root, args, ctx) => {
-        return args.name
-          ? ctx.tags.filter((tag) => tag.name === args.name)
-          : ctx.tags;
+      nullable: true,
+      resolve: (_, args, ctx) => {
+        if (args.untagged) {
+          return ctx.tags.find((tag) => tag.name === undefined);
+        }
+        if (args.slug) {
+          return ctx.tags.find((tag) => tag.slug === args.slug);
+        }
+        if (args.name) {
+          return ctx.tags.find((tag) => tag.name === args.name);
+        }
       },
     }),
+    tags: t.field({
+      type: [SchemaTag],
+      resolve: (_root, _args, ctx) => ctx.tags,
+    }),
     operations: t.field({
       type: [OperationItem],
       args: {
@@ -451,7 +590,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         tag: t.arg.string(),
         untagged: t.arg.boolean(),
       },
-      resolve: (parent, args, ctx) =>
+      resolve: (_parent, args, ctx) =>
         ctx.operations.filter((op) => {
           return (
             (!args.operationId || op.operationId === args.operationId) &&
@@ -462,6 +601,16 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
           );
         }),
     }),
+    components: t.field({
+      type: Components,
+      resolve: (root) => root.components,
+      nullable: true,
+    }),
+    extensions: t.field({
+      type: JSONObjectScalar,
+      resolve: (root) => resolveExtensions(root),
+      nullable: true,
+    }),
   }),
 });
 
@@ -477,27 +626,26 @@ builder.queryType({
         type: t.arg({ type: SchemaSource, required: true }),
         input: t.arg({ type: JSONScalar, required: true }),
       },
-      resolve: async (_, args, ctx) => {
-        let schema: OpenAPIDocument;
-
+      resolve: async (_parent, args, ctx) => {
         if (args.type === "file" && typeof args.input === "string") {
           const loadSchema = ctx.schemaImports?.[args.input];
 
           if (!loadSchema) {
             throw new Error(`No schema loader found for path: ${args.input}`);
           }
-          const module = await loadSchema();
-          schema = module.schema;
+          const { schema, slugs } = await loadSchema();
+          ctx.schema = schema;
+          ctx.operations = getAllOperations(schema.paths);
+          ctx.slugs = slugs;
+          ctx.tags = getAllTags(schema, ctx.slugs.tags);
         } else {
-          schema = await validate(args.input as string);
+          ctx.schema = await validate(args.input as string);
+          ctx.operations = getAllOperations(ctx.schema.paths);
+          ctx.slugs = getAllSlugs(ctx.operations);
+          ctx.tags = getAllTags(ctx.schema, ctx.slugs.tags);
         }
 
-        ctx.schema = schema;
-        ctx.operations = getAllOperations(schema.paths);
-        ctx.slugify = slugifyWithCounter();
-        ctx.tags = getAllTags(schema);
-
-        return schema;
+        return ctx.schema;
       },
     }),
   }),
@@ -507,4 +655,4 @@ export const schema = builder.toSchema();
 
 export const createGraphQLServer = (
   options?: Omit<YogaServerOptions<any, any>, "schema">,
-) => createYoga({ schema, ...options });
+) => createYoga({ schema, batching: true, ...options });

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

@@ -38,6 +38,8 @@ export const dereference = async (
         }
       } else {
         if ("$ref" in current && typeof current.$ref === "string") {
+          // Store the ref path before resolving
+          current.__$ref = current.$ref;
           for (const resolver of resolvers) {
             const resolved = await resolver(current.$ref);
             if (resolved) return await resolve(resolved, path);

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

@@ -3,11 +3,15 @@ import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
 
-type ReferenceObject = OpenAPIV3_1.ReferenceObject;
-type DeepOmitReference<T> = T extends ReferenceObject
+// Must be an interface (not a type) to allow merging with OpenAPI types with index signatures
+interface WithRef {
+  __$ref?: string;
+}
+
+type DeepOmitReference<T> = T extends OpenAPIV3_1.ReferenceObject
   ? never
   : T extends object
-    ? { [K in keyof T]: DeepOmitReference<T[K]> }
+    ? { [K in keyof T]: DeepOmitReference<T[K]> } & WithRef
     : T;
 
 export type OpenAPIDocument = DeepOmitReference<OpenAPIV3_1.Document>;
@@ -24,25 +28,6 @@ export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 
-// class ValidationError extends Error {
-//   constructor(public errors: OutputUnit[]) {
-//     super("Validation error");
-//   }
-// }
-
-// const getValidator = async (openApiVersion: string) => {
-//   if (openApiVersion.startsWith("3.0")) {
-//     const schema = (await import("./schemas/v3.0.json")) as any;
-//     return new Validator(schema, "4");
-//   }
-//   if (openApiVersion.startsWith("3.1")) {
-//     const schema = (await import("./schemas/v3.1.json")) as any;
-//     return new Validator(schema as any, "2020-12");
-//   }
-
-//   throw new Error(`Unsupported OpenAPI version: ${openApiVersion}`);
-// };
-
 const parseSchemaInput = async (
   schemaInput: unknown,
 ): Promise<JSONSchema & { openapi?: string }> => {
@@ -110,13 +95,6 @@ export const validate = async (schemaInput: unknown) => {
     throw new GraphQLError("OpenAPI version is not defined");
   }
 
-  // const validator = await getValidator(schema.openapi);
-  // const result = validator.validate(schema);
-  //
-  // if (!result.valid) {
-  //   throw new ValidationError(result.errors);
-  // }
-
   const dereferenced = await dereference(schema);
 
   return upgradeSchema(dereferenced);

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -29,10 +29,7 @@ export const Catalog = ({
   const dataSet = activeCategory ? { "data-pagefind-ignore": "all" } : {};
 
   return (
-    <section
-      className="pt-[--padding-content-top] pb-[--padding-content-bottom]"
-      {...dataSet}
-    >
+    <section className="pt-[--padding-content-top]" {...dataSet}>
       <Helmet>
         <title>
           {categoryLabel ? `${categoryLabel} - ` : ""}

package/src/lib/plugins/api-catalog/index.tsx

@@ -51,9 +51,22 @@ export const apiCatalogPlugin = ({
   items: ApiCatalogItem[];
   filterCatalogItems?: filterCatalogItems;
 }): ZudokuPlugin => {
+  const paths = Object.fromEntries(
+    categories.flatMap((category) =>
+      [undefined, ...category.tags].map((tag) => [
+        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),
+        tag,
+      ]),
+    ),
+  );
+
   return {
-    getSidebar: async function Sidebar(path) {
-      if (!matchPath({ path: joinUrl(navigationId), end: false }, path)) {
+    getSidebar: async (currentPath) => {
+      const matches = Object.keys(paths).some((path) =>
+        matchPath(path, currentPath),
+      );
+
+      if (!matches) {
         return [];
       }
 
@@ -61,22 +74,19 @@ export const apiCatalogPlugin = ({
         type: "category" as const,
         label: category.label,
         collapsible: false,
-        items: category.tags.map((tag) => {
-          const tagPath = getKey(category.label, tag);
-          return {
-            type: "doc" as const,
-            id: joinUrl(navigationId, tagPath),
-            label: tag,
-            badge: {
-              label: String(
-                items.filter((api) =>
-                  api.categories.find((c) => c.tags.includes(tag)),
-                ).length,
-              ),
-              color: "outline" as const,
-            },
-          };
-        }),
+        items: category.tags.map((tag) => ({
+          type: "doc" as const,
+          id: joinUrl(navigationId, getKey(category.label, tag)),
+          label: tag,
+          badge: {
+            label: String(
+              items.filter((api) =>
+                api.categories.find((c) => c.tags.includes(tag)),
+              ).length,
+            ),
+            color: "outline" as const,
+          },
+        })),
       }));
 
       sidebar.unshift({
@@ -89,22 +99,17 @@ export const apiCatalogPlugin = ({
       return sidebar;
     },
     getRoutes: () =>
-      categories.flatMap((category) =>
-        [undefined, ...category.tags].map((tag) => ({
-          path: joinUrl(
-            navigationId,
-            tag ? getKey(category.label, tag) : undefined,
-          ),
-          element: (
-            <Catalog
-              label={label}
-              categoryLabel={tag}
-              items={items}
-              filterCatalogItems={filterCatalogItems}
-              categories={categories}
-            />
-          ),
-        })),
-      ),
+      Object.entries(paths).map(([path, tag]) => ({
+        path,
+        element: (
+          <Catalog
+            label={label}
+            categoryLabel={tag}
+            items={items}
+            filterCatalogItems={filterCatalogItems}
+            categories={categories}
+          />
+        ),
+      })),
   };
 };

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

@@ -2,18 +2,18 @@ import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren, useEffect } from "react";
-import { Link, useHref } from "react-router";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
+import { Pagination } from "../../components/Pagination.js";
+import { Toc } from "../../components/navigation/Toc.js";
 import {
   useCurrentItem,
   usePrevNext,
 } from "../../components/navigation/utils.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
-import { Toc } from "./Toc.js";
-import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
+import { type MarkdownPluginDefaultOptions, type MDXImport } from "./index.js";
 
 declare global {
   interface Window {
@@ -51,12 +51,6 @@ export const MdxPage = ({
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
-  let canonicalUrl = null;
-  const path = useHref("");
-  if (typeof window !== "undefined") {
-    const domain = window.location.origin;
-    canonicalUrl = `${domain}${path}`;
-  }
 
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
@@ -91,19 +85,18 @@ export const MdxPage = ({
 
   return (
     <div
-      className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between"
+      className="grid grid-cols-1 xl:grid-cols-[--sidecar-grid-cols] gap-8 justify-between"
       data-pagefind-filter="section:markdown"
       data-pagefind-meta="section:markdown"
     >
       <Helmet>
         <title>{pageTitle}</title>
         {excerpt && <meta name="description" content={excerpt} />}
-        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
       </Helmet>
       <div
         className={cn(
           ProseClasses,
-          "max-w-full xl:w-full xl:max-w-3xl flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+          "max-w-full xl:w-full xl:max-w-3xl flex-1 flex-shrink pt-[--padding-content-top]",
         )}
       >
         {(category || title) && (
@@ -121,41 +114,12 @@ export const MdxPage = ({
         />
         {!hidePager && (
           <>
-            <hr />
-            <div className="not-prose flex flex-wrap items-center justify-between gap-2 lg:gap-8">
-              {prev ? (
-                <Link
-                  to={prev.id}
-                  className="flex flex-col items-stretch gap-2 flex-1 min-w-max border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-                  title={prev.label}
-                >
-                  <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 ? (
-                <Link
-                  to={next.id}
-                  className="flex flex-col items-stretch gap-2 flex-1 min-w-max border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-                  title={next.label}
-                >
-                  <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>
+            <hr className="my-10" />
+            <Pagination
+              prev={prev ? { to: prev.id, label: prev.label } : undefined}
+              next={next ? { to: next.id, label: next.label } : undefined}
+              className="mb-4"
+            />
           </>
         )}
       </div>