support rendering individual pages for tags

examples/ship-happens/schema/label-v3.json

@@ -129,6 +129,35 @@
     }
   },
   "paths": {
+    "/health": {
+      "get": {
+        "summary": "Health check",
+        "description": "Check if the API is up and running",
+        "operationId": "getHealth",
+        "responses": {
+          "200": {
+            "description": "API is healthy",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "healthy"
+                    },
+                    "version": {
+                      "type": "string",
+                      "example": "3.0.0"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/stamps": {
       "post": {
         "tags": ["Stamps"],

packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx

@@ -67,7 +67,7 @@ export const SidebarCategory = ({
             isActive: false,
             className: [
               "text-start font-medium",
-              isCollapsible
+              isCollapsible || typeof category.link !== "undefined"
                 ? "cursor-pointer"
                 : "cursor-default hover:bg-transparent",
             ],
@@ -82,7 +82,7 @@ export const SidebarCategory = ({
           {category.link?.type === "doc" ? (
             <NavLink
               to={joinPath(category.link.id)}
-              className="flex-1"
+              className="flex-1 truncate"
               onClick={() => {
                 // if it is the current path and closed then open it because there's no path change to trigger the open
                 if (isActive && !open) {
@@ -112,6 +112,7 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
+          category.items.length === 0 && "hidden",
           "ms-6 my-1",
         )}
       >

packages/zudoku/src/lib/oas/graphql/index.ts

@@ -67,15 +67,26 @@ const builder = new SchemaBuilder<{
   };
   Context: {
     schema: OpenAPIDocument;
+    operations: GraphQLOperationObject[];
+    tags: TagObject[];
     schemaImports?: SchemaImports;
+    currentTag?: string;
+    slugify: CountableSlugify;
   };
 }>({});
 
+type GraphQLOperationObject = OperationObject & {
+  path: string;
+  method: string;
+  slug?: string;
+  parentTag?: string;
+};
+
 const JSONScalar = builder.addScalarType("JSON", GraphQLJSON);
 const JSONObjectScalar = builder.addScalarType("JSONObject", GraphQLJSONObject);
 const JSONSchemaScalar = builder.addScalarType("JSONSchema", GraphQLJSONSchema);
 
-const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
+export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
   const tags = schema.tags ?? [];
 
   // Extract tags from operations
@@ -94,10 +105,10 @@ const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
   return [...tags, ...uniqueOperationTags.map((tag) => ({ name: tag }))];
 };
 
-const getAllOperations = (paths?: PathsObject, tag?: string) => {
-  const slugify = slugifyWithCounter();
+const getAllOperations = (paths?: PathsObject) => {
+  const start = performance.now();
 
-  return Object.entries(paths ?? {}).flatMap(([path, value]) =>
+  const operations = Object.entries(paths ?? {}).flatMap(([path, value]) =>
     HttpMethods.flatMap((method) => {
       if (!value?.[method]) return [];
 
@@ -118,23 +129,17 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
         ...operationParameters,
       ];
 
-      const slugData = {
-        summary: operation.summary,
-        operationId: operation.operationId,
-        path,
-        method,
-      };
-
       return {
         ...operation,
         method,
         path,
         parameters,
         tags: operation.tags ?? [],
-        slug: createOperationSlug(slugify, slugData, tag),
       };
     }),
   );
+
+  return operations;
 };
 
 const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
@@ -144,15 +149,19 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
     operations: t.field({
       type: [OperationItem],
       resolve: (parent, _args, ctx) => {
-        const rootTags = getAllTags(ctx.schema).map((tag) => tag.name);
-
-        return getAllOperations(ctx.schema.paths, parent.name).filter((item) =>
-          parent.name
-            ? item.tags.includes(parent.name)
-            : item.tags.length === 0 ||
-              // If none of the tags are present in the root tags, then show them here
-              item.tags.every((tag) => !rootTags.includes(tag)),
-        );
+        const rootTags = ctx.tags.map((tag) => tag.name);
+        return ctx.operations
+          .filter((item) =>
+            parent.name
+              ? item.tags?.includes(parent.name)
+              : item.tags?.length === 0 ||
+                // 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,
+          }));
       },
     }),
   }),
@@ -300,12 +309,24 @@ const ResponseItem = builder
   });
 
 const OperationItem = builder
-  .objectRef<
-    OperationObject & { path: string; method: string; slug: string }
-  >("OperationItem")
+  .objectRef<GraphQLOperationObject>("OperationItem")
   .implement({
     fields: (t) => ({
-      slug: t.exposeString("slug"),
+      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);
+        },
+      }),
+
       path: t.exposeString("path"),
       method: t.exposeString("method"),
       operationId: t.exposeString("operationId", { nullable: true }),
@@ -414,8 +435,8 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         name: t.arg.string(),
       },
       type: [SchemaTag],
-      resolve: (root, args) => {
-        const tags = [...getAllTags(root), { name: "" }];
+      resolve: (root, args, ctx) => {
+        const tags = [...ctx.tags, { name: "" }];
         return args.name ? tags.filter((tag) => tag.name === args.name) : tags;
       },
     }),
@@ -426,15 +447,18 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         method: t.arg.string(),
         operationId: t.arg.string(),
         tag: t.arg.string(),
+        untagged: t.arg.boolean(),
       },
-      resolve: (parent, args) =>
-        getAllOperations(parent.paths).filter(
-          (item) =>
-            (!args.operationId || item.operationId === args.operationId) &&
-            (!args.path || item.path === args.path) &&
-            (!args.method || item.method === args.method) &&
-            (!args.tag || item.tags.includes(args.tag)),
-        ),
+      resolve: (parent, args, ctx) =>
+        ctx.operations.filter((op) => {
+          return (
+            (!args.operationId || op.operationId === args.operationId) &&
+            (!args.path || op.path === args.path) &&
+            (!args.method || op.method === args.method) &&
+            (!args.tag || op.tags?.some((tag) => args.tag?.includes(tag))) &&
+            (!args.untagged || (op.tags ?? []).length === 0)
+          );
+        }),
     }),
   }),
 });
@@ -467,6 +491,10 @@ builder.queryType({
         }
 
         ctx.schema = schema;
+        ctx.operations = getAllOperations(schema.paths);
+        ctx.slugify = slugifyWithCounter();
+        ctx.tags = getAllTags(schema);
+
         return schema;
       },
     }),

packages/zudoku/src/lib/plugins/openapi/Endpoint.tsx

@@ -77,14 +77,14 @@ export const Endpoint = () => {
             setSelectedServer(e.target.value);
           })
         }
-        value={selectedServer ?? result.data.schema.url}
+        value={selectedServer ?? servers.at(0)!.url}
         showChevrons={servers.length > 1}
         options={servers.map((server) => ({
           value: server.url,
           label: server.url,
         }))}
       />
-      <CopyButton url={selectedServer ?? result.data.schema.url} />
+      <CopyButton url={selectedServer ?? servers.at(0)!.url} />
     </div>
   );
 };

packages/zudoku/src/lib/plugins/openapi/Route.tsx → packages/zudoku/src/lib/plugins/openapi/OpenApiRoute.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useParams } from "react-router";
+import { Outlet } from "react-router";
 import { joinPath } from "../../util/joinPath.js";
 import type { GraphQLClient } from "./client/GraphQLClient.js";
 import { GraphQLProvider } from "./client/GraphQLContext.js";
@@ -8,16 +8,16 @@ import { type OasPluginConfig } from "./interfaces.js";
 export const OpenApiRoute = ({
   basePath,
   versions,
+  version,
   config,
   client,
 }: {
   basePath: string;
+  version?: string;
   versions: string[];
   config: OasPluginConfig;
   client: GraphQLClient;
 }) => {
-  const { version } = useParams<"version">();
-
   const input =
     config.type === "file"
       ? {