zudoku 0.3.0-dev.92 → 0.3.0-dev.93

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as l } from "./index-DjaqWcmv.js";
+import { o as l } from "./index-DGb_offs.js";
 import "./urql-DrBfkb92.js";
 import "./ZudokuContext-BIZ8zHbZ.js";
 import "zudoku/openapi-worker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.92",
+  "version": "0.3.0-dev.93",
   "type": "module",
   "files": [
     "dist",

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

@@ -23,15 +23,18 @@ export const ColorMap = {
 export const SidebarBadge = ({
   color,
   label,
+  className,
 }: {
   color: keyof typeof ColorMap;
   label: string;
+  className?: string;
 }) => {
   return (
     <span
       className={cn(
         "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
         ColorMap[color],
+        className,
       )}
     >
       {label}

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

@@ -54,8 +54,16 @@ export const SidebarItem = ({
           }
           to={joinPath(topNavItem?.id, item.id)}
         >
-          {item.label}
-          {item.badge && <SidebarBadge {...item.badge} />}
+          {item.badge ? (
+            <>
+              <span className="truncate" title={item.label}>
+                {item.label}
+              </span>
+              <SidebarBadge {...item.badge} />
+            </>
+          ) : (
+            item.label
+          )}
         </NavLink>
       );
     case "link":
@@ -71,10 +79,34 @@ export const SidebarItem = ({
             }),
           )}
         >
-          {item.label}
-          {item.badge && <SidebarBadge {...item.badge} />}
+          {item.badge ? (
+            <>
+              <span className="truncate" title={item.label}>
+                {item.label}
+              </span>
+              <SidebarBadge {...item.badge} />
+            </>
+          ) : (
+            <span className="break-all">{item.label}</span>
+          )}
         </AnchorLink>
-      ) : item.href.startsWith("http") ? (
+      ) : !item.href.startsWith("http") ? (
+        <NavLink
+          className={cn("flex gap-2.5 justify-between", navigationListItem())}
+          to={item.href}
+        >
+          {item.badge ? (
+            <>
+              <span className="truncate" title={item.label}>
+                {item.label}
+              </span>
+              <SidebarBadge {...item.badge} />
+            </>
+          ) : (
+            <span className="break-all">{item.label}</span>
+          )}
+        </NavLink>
+      ) : (
         <a
           className={cn(
             navigationListItem({ isTopLevel: level === 0 }),
@@ -85,16 +117,12 @@ export const SidebarItem = ({
           rel="noopener noreferrer"
         >
           <span className="whitespace-normal">{item.label}</span>
-          {/* This prevents that the icon would be positioned in its own line if the text fills an line entirely */}
+          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">
             &nbsp;
             <ExternalLinkIcon className="inline ml-1" size={12} />
           </span>
         </a>
-      ) : (
-        <NavLink className={cn(navigationListItem({}), "block")} to={item.href}>
-          {item.label}
-        </NavLink>
       );
   }
 };

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

@@ -37,7 +37,7 @@ type OperationLike = {
 };
 export const slugifyOperation = (operation: OperationLike, tag?: string) => {
   const summary =
-    operation.summary +
+    (operation.summary ?? "") +
     (operation.operationId
       ? "-" +
         operation.operationId.slice(0, operation.summary ? Infinity : Infinity)
@@ -95,6 +95,7 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
         method,
         path,
         parameters,
+        tags: operation.tags ?? [],
         slug: slugifyOperation(
           {
             summary: operation.summary,
@@ -115,12 +116,17 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
     description: t.exposeString("description", { nullable: true }),
     operations: t.field({
       type: [OperationItem],
-      resolve: (parent, _args, ctx) =>
-        getAllOperations(ctx.schema.paths, parent.name).filter((item) =>
+      resolve: (parent, _args, ctx) => {
+        const rootTags = ctx.schema.tags?.map((tag) => tag.name) ?? [];
+
+        return getAllOperations(ctx.schema.paths, parent.name).filter((item) =>
           parent.name
-            ? item.tags?.includes(parent.name)
-            : !item.tags || item.tags.length === 0,
-        ),
+            ? 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)),
+        );
+      },
     }),
   }),
 });
@@ -376,7 +382,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
             (!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)),
+            (!args.tag || item.tags.includes(args.tag)),
         ),
     }),
   }),

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

@@ -13,6 +13,7 @@ import { createClient } from "zudoku/openapi-worker";
 import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
+import { ColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { Button } from "../../ui/Button.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -57,6 +58,16 @@ const OpenApiErrorPage = () => {
 
 type InternalOasPluginConfig = { inMemory?: boolean };
 
+const MethodColorMap: Record<string, keyof typeof ColorMap> = {
+  get: "green",
+  post: "blue",
+  put: "yellow",
+  delete: "red",
+  patch: "purple",
+  options: "gray",
+  head: "gray",
+};
+
 export const openApiPlugin = (
   config: OasPluginConfig & InternalOasPluginConfig,
 ): DevPortalPlugin => {
@@ -161,7 +172,7 @@ export const openApiPlugin = (
             href: `#${operation.slug}`,
             badge: {
               label: operation.method,
-              color: "green",
+              color: MethodColorMap[operation.method.toLowerCase()],
             },
           })),
         }));