Small OpenAPI improvements (#4131)

.changeset/frank-feet-buy.md

@@ -0,0 +1,6 @@
+---
+"@gitbook/react-openapi": patch
+"gitbook": patch
+---
+
+Small OpenAPI Improvements

packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx

@@ -2,8 +2,6 @@ import type { JSONDocument } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import { type OpenAPIContextInput, checkIsValidLocale } from '@gitbook/react-openapi';
 
-import { tcls } from '@/lib/tailwind';
-
 import type { BlockProps } from '../Block';
 import { PlainCodeBlock } from '../CodeBlock';
 import { DocumentView } from '../DocumentView';
@@ -75,12 +73,7 @@ export function getOpenAPIContext(args: {
                 ancestorBlocks={props.ancestorBlocks}
                 isEstimatedOffscreen={props.isEstimatedOffscreen}
                 context={props.context}
-                style={tcls([
-                    headingProps.deprecated ? 'line-through' : undefined,
-                    headingProps.deprecated || !!headingProps.stability
-                        ? '[&>div]:pt-0'
-                        : undefined,
-                ])}
+                style={headingProps.deprecated ? 'line-through' : undefined}
                 block={{
                     object: 'block',
                     key: `${block.key}-heading`,

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -4,12 +4,13 @@
 /* Layout Components */
 .openapi-operation,
 .openapi-schemas,
-.openapi-webhook {
-    @apply flex-1 flex flex-col gap-8 mb-14 min-w-0;
+.openapi-webhook,
+.openapi-schemas-single {
+    @apply flex-1 flex flex-col gap-6 mb-14 min-w-0;
 }
 
-.openapi-schemas {
-    @apply flex flex-col mb-14 gap-0 flex-1;
+.openapi-schemas:not(.openapi-schemas-single) {
+    @apply gap-0;
 }
 
 .openapi-schemas-title {
@@ -33,6 +34,10 @@
     @apply flex flex-row gap-2 mt-[0.75em];
 }
 
+.openapi-summary-tags + .heading {
+    @apply pt-0;
+}
+
 .openapi-deprecated,
 .openapi-stability {
     @apply py-0.5 px-1.5 min-w-[1.625rem] font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded straight-corners:rounded-none circular-corners:rounded-sm text-sm leading-[calc(max(1.20em,1.25rem))] before:content-none! after:!content-none;
@@ -144,7 +149,7 @@
 }
 
 .openapi-column-preview {
-    @apply flex flex-col flex-1 xl:max-2xl:pt-20 lg:py-6 sticky max-h-[calc(100vh-var(--toc-top-offset))] top-(--toc-top-offset);
+    @apply flex flex-col flex-1 xl:max-2xl:pt-20 lg:pt-6 sticky self-start max-h-[calc(100vh-var(--toc-top-offset))] top-(--toc-top-offset);
 }
 
 .openapi-column-preview-body {

packages/gitbook/src/lib/document-sections.ts

@@ -6,6 +6,7 @@ import { getDataOrNull } from './data';
 import { getNodeReactText } from './document';
 import { resolveOpenAPIOperationBlock } from './openapi/resolveOpenAPIOperationBlock';
 import { resolveOpenAPISchemasBlock } from './openapi/resolveOpenAPISchemasBlock';
+import { resolveOpenAPIWebhookBlock } from './openapi/resolveOpenAPIWebhookBlock';
 import { resolveContentRef } from './references';
 
 export interface DocumentSection {
@@ -99,6 +100,25 @@ async function getSectionsFromNodes(
                 }
                 continue;
             }
+            case 'openapi-webhook': {
+                const id = block.meta?.id;
+                if (!id) {
+                    continue;
+                }
+                const { data: webhook } = await resolveOpenAPIWebhookBlock({
+                    block,
+                    context,
+                });
+                if (webhook) {
+                    sections.push({
+                        id,
+                        title: webhook.operation.summary || webhook.name,
+                        depth: 1,
+                        deprecated: webhook.operation.deprecated,
+                    });
+                }
+                continue;
+            }
             case 'openapi-schemas': {
                 const id = block.meta?.id;
                 if (!id) {

packages/gitbook/src/lib/document.tsx

@@ -25,7 +25,11 @@ export function hasFullWidthBlock(document: JSONDocument): boolean {
         if (block.data && 'fullWidth' in block.data && block.data.fullWidth) {
             return true;
         }
-        if (block.type === 'swagger' || block.type === 'openapi-operation') {
+        if (
+            block.type === 'swagger' ||
+            block.type === 'openapi-operation' ||
+            block.type === 'openapi-webhook'
+        ) {
             return true;
         }
         return false;

packages/react-openapi/src/OpenAPIWebhookExample.tsx

@@ -45,7 +45,7 @@ export function OpenAPIWebhookExample(props: {
     })();
 
     return (
-        <div className="openapi-panel">
+        <div className="openapi-panel" data-follow-color-scheme="true">
             <h4 className="openapi-panel-heading">Payload</h4>
             <div className="openapi-panel-body">
                 <OpenAPIMediaTypeContent

packages/react-openapi/src/schemas/OpenAPISchemas.tsx

@@ -39,7 +39,7 @@ export function OpenAPISchemas(props: {
     if (schemas.length === 1 && !grouped) {
         const title = `The ${firstSchema.name} object`;
         return (
-            <div className={clsx('openapi-schemas', className)}>
+            <div className={clsx('openapi-schemas openapi-schemas-single', className)}>
                 <div className="openapi-summary" id={context.id}>
                     {context.renderHeading({
                         title,
@@ -61,7 +61,7 @@ export function OpenAPISchemas(props: {
                     </div>
                     <div className="openapi-column-preview">
                         <div className="openapi-column-preview-body">
-                            <div className="openapi-panel">
+                            <div className="openapi-panel" data-follow-color-scheme="true">
                                 <h4 className="openapi-panel-heading">{title}</h4>
                                 <div className="openapi-panel-body">
                                     <OpenAPIExample