Repository: enzonotario/vitepress-openapi
Pull request #211: chore(Sandbox): update preview component names and add PagesByTag
Author: login: enzonotario
Created: 2025-04-26T17:41:44Z | Merged: 2025-04-26T22:02:04Z



Diff:
diff --git a/docs/.vitepress/theme/components/sandbox/Sandbox.vue b/docs/.vitepress/theme/components/sandbox/Sandbox.vue
index 6737a840..5c0bcec1 100644
--- a/docs/.vitepress/theme/components/sandbox/Sandbox.vue
+++ b/docs/.vitepress/theme/components/sandbox/Sandbox.vue
@@ -69,7 +69,15 @@ function share() {
 
 watch(hash, () => {
   const segments = hash.value.split('#')
-  sandboxData.operationId.value = segments.length > 1 ? segments[1] : ''
+
+  switch (sandboxData.previewComponent.value) {
+    case 'PagesByOperation':
+      sandboxData.operationId.value = segments.length > 1 ? segments[1] : ''
+      break
+    case 'PagesByTag':
+      sandboxData.tags.value = segments.length > 1 ? segments[1].split(',') : []
+      break
+  }
 })
 </script>
 
diff --git a/docs/.vitepress/theme/components/sandbox/SandboxPreview.vue b/docs/.vitepress/theme/components/sandbox/SandboxPreview.vue
index 4d2efa7e..b9213a3c 100644
--- a/docs/.vitepress/theme/components/sandbox/SandboxPreview.vue
+++ b/docs/.vitepress/theme/components/sandbox/SandboxPreview.vue
@@ -18,8 +18,8 @@ onMounted(() => {
 
 // Scroll into the operation when the operationId changes.
 watch(sandboxData.operationId, () => {
-  if (sandboxData.previewComponent.value === 'OAOperation') {
-  } else if (sandboxData.previewComponent.value === 'OASpec') {
+  if (sandboxData.previewComponent.value === 'PagesByOperation') {
+  } else if (sandboxData.previewComponent.value === 'PagesBySpec') {
     scrollToHash({
       hash: `#${sandboxData.operationId.value}`,
     })
@@ -40,9 +40,12 @@ watch(sandboxData.spec, (spec) => {
   }
 })
 
-// If the preview component is OAOperation and the operationId is not set, set it to the first operationId in the spec.
+/**
+ * If the preview component is PagesByOperation and the `operationId` is not
+ * set, set it to the first operationId in the spec.
+ */
 watch(sandboxData.previewComponent, () => {
-  if (sandboxData.previewComponent.value === 'OAOperation'
+  if (sandboxData.previewComponent.value === 'PagesByOperation'
     && !sandboxData.operationId.value) {
     const operationId = Object.entries(sandboxData.spec.value.paths)
       .map(([_, methods]) => {
@@ -56,6 +59,26 @@ watch(sandboxData.previewComponent, () => {
     sandboxData.operationId.value = operationId
   }
 })
+
+/**
+ * If the preview component is PagesByTag and `tags` is not set, set it to
+ * the first tag in the spec.
+ */
+watch(sandboxData.previewComponent, () => {
+  if (sandboxData.previewComponent.value === 'PagesByTag'
+    && (!sandboxData.tags.value || sandboxData.tags.value.length === 0)) {
+    const tags = Object.entries(sandboxData.spec.value.paths)
+      .map(([_, methods]) => {
+        return Object.entries(methods).map(([_, operation]) => {
+          return operation.tags
+        })
+      })
+      .flat()
+      .filter(Boolean)[0]
+
+    sandboxData.tags.value = tags
+  }
+})
 </script>
 
 <template>
@@ -74,7 +97,7 @@ watch(sandboxData.previewComponent, () => {
       <div class="VPDoc">
         <VPHomeContent>
           <OAOperation
-            v-if="sandboxData.previewComponent.value === 'OAOperation' && sandboxData.operationId.value"
+            v-if="sandboxData.previewComponent.value === 'PagesByOperation' && sandboxData.operationId.value"
             :key="sandboxData.operationId.value"
             :operation-id="sandboxData.operationId.value"
             :spec="sandboxData.spec.value"
@@ -82,13 +105,22 @@ watch(sandboxData.previewComponent, () => {
             @update:spec="sandboxData.spec.value = $event"
           />
           <OASpec
-            v-else-if="sandboxData.previewComponent.value === 'OASpec'"
+            v-else-if="sandboxData.previewComponent.value === 'PagesBySpec'"
+            :spec="sandboxData.spec.value"
+            :spec-url="sandboxData.specUrl.value"
+            @update:spec="sandboxData.spec.value = $event"
+          />
+          <OASpec
+            v-else-if="sandboxData.previewComponent.value === 'PagesByTag' && sandboxData.tags.value"
             :spec="sandboxData.spec.value"
             :spec-url="sandboxData.specUrl.value"
+            :tags="sandboxData.tags.value"
+            hide-info
+            hide-servers
             @update:spec="sandboxData.spec.value = $event"
           />
           <OAIntroduction
-            v-else-if="sandboxData.previewComponent.value === 'OAIntroduction'"
+            v-else-if="sandboxData.previewComponent.value === 'Introduction'"
             :spec="sandboxData.spec.value"
             :spec-url="sandboxData.specUrl.value"
             @update:spec="sandboxData.spec.value = $event"
diff --git a/docs/.vitepress/theme/components/theme/ThemeConfig.vue b/docs/.vitepress/theme/components/theme/ThemeConfig.vue
index b3ce8d47..64df1fe3 100644
--- a/docs/.vitepress/theme/components/theme/ThemeConfig.vue
+++ b/docs/.vitepress/theme/components/theme/ThemeConfig.vue
@@ -7,10 +7,11 @@ const sandboxData = inject('sandboxData') as SandboxData
 
 const themeConfig = useTheme()
 
-const availableComponents = [
-  'OAOperation',
-  'OASpec',
-  'OAIntroduction',
+const availablePagesTypes = [
+  'PagesByOperation',
+  'PagesBySpec',
+  'PagesByTag',
+  'Introduction',
 ]
 
 const availableSidebarItemsTypes = [
@@ -99,10 +100,10 @@ const availableSidebarItemsTypes = [
     </div>
 
     <div class="flex flex-col gap-2">
-      <h3>Preview Component</h3>
+      <h3>Pages</h3>
       <div class="grid grid-cols-2 gap-2">
         <label
-          v-for="component in availableComponents"
+          v-for="component in availablePagesTypes"
           :key="component"
           class="flex items-center gap-2"
         >
@@ -117,7 +118,7 @@ const availableSidebarItemsTypes = [
     </div>
 
     <div
-      v-if="sandboxData.previewComponent.value === 'OASpec'"
+      v-if="sandboxData.previewComponent.value === 'PagesBySpec'"
       class="flex flex-col gap-2"
     >
       <h3>Spec</h3>
diff --git a/docs/.vitepress/theme/sandboxData.ts b/docs/.vitepress/theme/sandboxData.ts
index f17bcb8a..2030b867 100644
--- a/docs/.vitepress/theme/sandboxData.ts
+++ b/docs/.vitepress/theme/sandboxData.ts
@@ -13,9 +13,10 @@ export interface SandboxData {
   sandboxView: Ref<'edit' | 'preview'>
   hideSandboxNav: Ref<boolean>
 
-  previewComponent: Ref<'OASpec' | 'OAOperation' | 'OAIntroduction'>
+  previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag' | 'Introduction' | string>
   previewHeaders: Ref<Array<any>>
   operationId: Ref<string | null>
+  tags: Ref<Array<string>>
 
   showSidebar: Ref<boolean>
   sidebarItemsType: Ref<'default' | 'itemsByPaths' | 'itemsByTags'>
@@ -25,6 +26,24 @@ export interface SandboxData {
   showAside: Ref<boolean>
 }
 
+function parsePreviewComponent(options: Partial<UnwrapRef<SandboxData>>) {
+  const previewComponent = options.previewComponent ?? 'PagesBySpec'
+
+  if (previewComponent === 'OASpec') {
+    return 'PagesBySpec'
+  }
+
+  if (previewComponent === 'OAOperation') {
+    return 'PagesByOperation'
+  }
+
+  if (previewComponent === 'OAIntroduction') {
+    return 'Introduction'
+  }
+
+  return previewComponent
+}
+
 export function initSandboxData(options: Partial<UnwrapRef<SandboxData>> = {}): SandboxData {
   return {
     loading: ref(false),
@@ -37,9 +56,10 @@ export function initSandboxData(options: Partial<UnwrapRef<SandboxData>> = {}):
     sandboxView: ref(options.sandboxView ?? 'edit'),
     hideSandboxNav: ref(options.hideSandboxNav ?? false),
 
-    previewComponent: ref(options.previewComponent ?? 'OASpec'),
+    previewComponent: ref(parsePreviewComponent(options)),
     previewHeaders: ref([]),
     operationId: ref(options.operationId ?? null),
+    tags: ref(typeof options.tags === 'string' ? [options.tags] : options.tags ?? []),
 
     showSidebar: ref(options.showSidebar ?? true),
     sidebarItemsType: ref(options.sidebarItemsType ?? 'default'),
diff --git a/docs/pages/by-operation.md b/docs/pages/by-operation.md
index dec5da1c..a8cc6e6b 100644
--- a/docs/pages/by-operation.md
+++ b/docs/pages/by-operation.md
@@ -6,6 +6,10 @@ outline: 2
 
 You can use the `OAOperation` component to render a specific operation.
 
+## Example
+
+<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'PagesByOperation', operationId: 'getAllArtists'}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
+
 ## Creating `operations` pages
 
 To generate pages for each operation, create a directory named `operations` in the `docs` directory. Inside the `operations` directory, create a file named `[operationId].md` and a file named `[operationId].paths.js`.
@@ -127,7 +131,3 @@ const operationId = route.data.params.operationId
 If you want to make use of search on your site, the default `local` search will not work due to https://github.com/vuejs/vitepress/issues/2939
 
 Consider using [vitepress-plugin-pagefind](https://www.npmjs.com/package/vitepress-plugin-pagefind), which works with dynamic routes.
-
-## Example
-
-<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'OAOperation', operationId: 'getAllArtists'}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
diff --git a/docs/pages/by-spec.md b/docs/pages/by-spec.md
index f28aac73..6f1deb3e 100644
--- a/docs/pages/by-spec.md
+++ b/docs/pages/by-spec.md
@@ -6,6 +6,12 @@ outline: 2
 
 You can use the `OASpec` component to render all operations in any Markdown file.
 
+## Example
+
+<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'PagesBySpec', showSidebar: false}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
+
+## Markdown File
+
 <ScopeConfigurationTabs>
 
 <template #global>
@@ -45,7 +51,3 @@ import spec from '../public/openapi.json'
 </template>
 
 </ScopeConfigurationTabs>
-
-## Example
-
-<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'OASpec', showSidebar: false}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
diff --git a/docs/pages/by-tag.md b/docs/pages/by-tag.md
index 4469f0b7..0b49aced 100644
--- a/docs/pages/by-tag.md
+++ b/docs/pages/by-tag.md
@@ -6,6 +6,10 @@ outline: 2
 
 You can use the `OASpec` component to render all operations that have a specific tag.
 
+## Example
+
+<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'PagesByTag', tags: 'Authentication', sidebarItemsType: 'itemsByTags'}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
+
 ## Creating `tags` pages
 
 To create tags pages, create a directory named `tags` in the `docs` directory. Inside the `tags` directory, create a file named `[tag].md` and a file named `[tag].paths.js`.
diff --git a/docs/pages/introduction.md b/docs/pages/introduction.md
index e019ba0d..3b7d6dc8 100644
--- a/docs/pages/introduction.md
+++ b/docs/pages/introduction.md
@@ -6,6 +6,12 @@ outline: 2
 
 You can use the `OAIntroduction` component to display the OpenAPI `info` and `servers` sections.
 
+## Example
+
+<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'Introduction', showSidebar: false}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
+
+## Markdown File
+
 <ScopeConfigurationTabs>
 
 <template #global>
@@ -34,10 +40,6 @@ import spec from '../public/openapi.json'
 
 </ScopeConfigurationTabs>
 
-## Example
-
-<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'OAIntroduction', showSidebar: false}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
-
 ## Info and Servers
 
 The `OAInfo` and `OAServers` components can be used separately to display the OpenAPI `info` and `servers` sections.
diff --git a/src/components/Feature/OAOperation.vue b/src/components/Feature/OAOperation.vue
index cfb632db..33ecaba9 100644
--- a/src/components/Feature/OAOperation.vue
+++ b/src/components/Feature/OAOperation.vue
@@ -57,6 +57,7 @@ const slots = defineSlots<Record<string, OperationSlot>>()
     <template #default="{ openapi }">
       <OAOperationContent
         v-bind="{
+          ...$props,
           ...$attrs,
           operationId: props.operationId,
           openapi,
diff --git a/src/components/Feature/OASpec.vue b/src/components/Feature/OASpec.vue
index 9e7424d5..60694261 100644
--- a/src/components/Feature/OASpec.vue
+++ b/src/components/Feature/OASpec.vue
@@ -69,6 +69,7 @@ const slots = defineSlots<Record<string, OperationSlot>>()
     <template #default="{ openapi }">
       <OASpecContent
         v-bind="{
+          ...$props,
           ...$attrs,
           openapi,
         }"
diff --git a/src/components/Feature/OASpecContent.vue b/src/components/Feature/OASpecContent.vue
index 0121d496..3b6b6135 100644
--- a/src/components/Feature/OASpecContent.vue
+++ b/src/components/Feature/OASpecContent.vue
@@ -73,19 +73,18 @@ const showServers = !props.hideServers && servers.length
 
 const groupByTags = computed(() => props.groupByTags ?? themeConfig.getSpecConfig()?.groupByTags?.value)
 
-const operationsTags = props.tags ?? props.openapi.getOperationsTags()
+const operationsTags = computed(() => props.tags ?? props.openapi.getOperationsTags())
 
 const specTags: OpenAPIV3.TagObject[] = props.openapi.getTags()
 
 const paths = props.openapi.getPaths()
 
-const pathsByTags = operationsTags.map((tag: string) => {
+const pathsByTags = computed(() => operationsTags.value.map((tag: string) => {
   return {
     tag,
     paths: props.openapi.getPathsByTags(tag),
   }
-})
-
+}))
 const pathsWithoutTags = props.openapi.getPathsWithoutTags()
 
 const groups = computed(() => {
@@ -102,7 +101,7 @@ const groups = computed(() => {
           ]
         : []),
 
-      ...pathsByTags.map((tag: { tag: string, paths: Record<string, any> }) => {
+      ...pathsByTags.value.map((tag: { tag: string, paths: Record<string, any> }) => {
         return {
           name: tag.tag,
           paths: tag.paths,


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 69bf30a3c2915b9a9bd1c0360e7bef1c2408bbaa and 22e4d5fb5cc33c5028de9621ce935af86bbf94e8.

</details>

<details>
<summary>📒 Files selected for processing (10)</summary>

* `docs/.vitepress/theme/components/sandbox/Sandbox.vue` (1 hunks)
* `docs/.vitepress/theme/components/sandbox/SandboxPreview.vue` (4 hunks)
* `docs/.vitepress/theme/components/theme/ThemeConfig.vue` (2 hunks)
* `docs/.vitepress/theme/sandboxData.ts` (2 hunks)
* `docs/pages/by-operation.md` (1 hunks)
* `docs/pages/by-spec.md` (1 hunks)
* `docs/pages/by-tag.md` (1 hunks)
* `docs/pages/introduction.md` (1 hunks)
* `src/components/Feature/OASpec.vue` (1 hunks)
* `src/components/Feature/OASpecContent.vue` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

<details>
<summary>docs/pages/by-operation.md</summary>

11-11: Inline HTML
Element: SandboxIframe

(MD033, no-inline-html)

</details>
<details>
<summary>docs/pages/by-spec.md</summary>

11-11: Inline HTML
Element: SandboxIframe

(MD033, no-inline-html)

---

13-13: Multiple consecutive blank lines
Expected: 1; Actual: 2

(MD012, no-multiple-blanks)

</details>

</details>
<details>
<summary>🪛 ESLint</summary>

<details>
<summary>docs/.vitepress/theme/components/sandbox/SandboxPreview.vue</summary>

[error] 21-22: Empty block statement.

(no-empty)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: test

</details>

<details>
<summary>🔇 Additional comments (16)</summary><blockquote>

<details>
<summary>docs/.vitepress/theme/components/theme/ThemeConfig.vue (2)</summary>

`10-15`: **Components naming update looks good.**

The update to more descriptive component names enhances clarity, and the addition of the new `PagesByTag` component aligns with the PR objectives.

---

`121-121`: **Conditional rendering update correctly matches the renamed component.**

The condition has been properly updated to check for the new component name.

</details>
<details>
<summary>docs/pages/by-tag.md (1)</summary>

`9-11`: **Good addition of example section.**

The new example section effectively demonstrates how to use the PagesByTag component with appropriate configuration for the tag "Artists" and sidebar items type.

</details>
<details>
<summary>docs/pages/by-operation.md (1)</summary>

`9-11`: **Effective example placement and configuration.**

The new example section clearly demonstrates how to use the PagesByOperation component with the specified operationId.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

11-11: Inline HTML
Element: SandboxIframe

(MD033, no-inline-html)

</details>

</details>

</details>
<details>
<summary>docs/pages/introduction.md (2)</summary>

`9-11`: **Example section is appropriately relocated and updated.**

Moving the example section closer to the component description and updating it to use the new component name provides better documentation flow.

---

`13-13`: **Good addition of the "Markdown File" heading.**

The new heading improves documentation structure by clearly separating the example from the implementation details.

</details>
<details>
<summary>docs/pages/by-spec.md (1)</summary>

`9-11`: **Good addition of the example section!**

Adding this iframe example at the beginning of the document helps users see the component in action before diving into implementation details. The use of `'PagesBySpec'` as the preview component aligns with the updated naming convention in this PR.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

11-11: Inline HTML
Element: SandboxIframe

(MD033, no-inline-html)

</details>

</details>

</details>
<details>
<summary>src/components/Feature/OASpec.vue (1)</summary>

`72-72`: **Improved prop forwarding for better component composition**

Adding `...$props` to the v-bind object ensures all defined props are properly passed down to the `OASpecContent` component. This is a best practice that eliminates the need to manually forward individual props and ensures that any prop additions in the future will automatically be passed down.

</details>
<details>
<summary>docs/.vitepress/theme/components/sandbox/Sandbox.vue (1)</summary>

`73-80`: **Well-structured handling of URL hash based on preview component type**

The switch statement elegantly handles different behaviors based on the preview component type:
- For `PagesByOperation`, it sets the operation ID from the hash
- For `PagesByTag`, it parses a comma-separated list of tags from the hash

This implementation supports the new tag-based navigation while maintaining backward compatibility with operation-based navigation.

</details>
<details>
<summary>src/components/Feature/OASpecContent.vue (3)</summary>

`76-76`: **Improved reactivity with computed property for operationsTags**

Converting `operationsTags` from a direct assignment to a computed property ensures that it will properly react to changes in `props.tags` or the result of `props.openapi.getOperationsTags()`. This is essential for the new tag-based functionality to work correctly.

---

`82-87`: **Enhanced reactivity for pathsByTags with computed property**

Converting `pathsByTags` to a computed property ensures that it reacts to changes in `operationsTags`. This improvement maintains the component's responsiveness when tags are updated through URL navigation or user interaction.

---

`104-104`: **Updated reference to pathsByTags in the groups computed property**

Correctly updating the reference to `pathsByTags.value` in the `groups` computed property ensures that reactive updates propagate through the component hierarchy. This change completes the reactivity chain from tags to UI rendering.

</details>
<details>
<summary>docs/.vitepress/theme/sandboxData.ts (2)</summary>

`19-19`: **LGTM! Good implementation of the tags property**

The new tags property and its initialization are well-implemented. The handling of both string and array inputs makes the API more flexible.



Also applies to: 44-44

---

`41-41`: **LGTM! Default value updated correctly**

The default value for previewComponent has been correctly updated to reflect the new naming convention.

</details>
<details>
<summary>docs/.vitepress/theme/components/sandbox/SandboxPreview.vue (2)</summary>

`63-81`: **LGTM! Well-implemented watcher for PagesByTag**

The watcher for PagesByTag is implemented correctly. It properly initializes the tags value when the preview component changes to PagesByTag and no tags are currently set.

---

`100-127`: **LGTM! Template correctly updated for all preview modes**

The template conditional rendering has been correctly updated to use the new component names and properly handle the new PagesByTag mode with appropriate props.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-26T17:44:36Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>♻️ Duplicate comments (1)</summary><blockquote>

<details>
<summary>docs/.vitepress/theme/sandboxData.ts (1)</summary><blockquote>

`16-16`: **Fix syntax error in type definition**

There's a syntax error in the union type definition. The types should be separated by `|` instead of a comma.

```diff
- previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag', 'Introduction' | string>
+ previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag' | 'Introduction' | string>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 22e4d5fb5cc33c5028de9621ce935af86bbf94e8 and d3392f2495bc0089aa62c42c9a51f353c11b83fd.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `docs/.vitepress/theme/sandboxData.ts` (3 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: test

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>docs/.vitepress/theme/sandboxData.ts (2)</summary>

`29-45`: **LGTM! Well-designed backward compatibility.**

This function elegantly handles the mapping from legacy component names to new ones, ensuring a smooth transition for existing code that might still use the old component names.

---

`19-19`: **LGTM! Adding tags support.**

Adding the tags property is a good enhancement that enables filtering by tags in the UI.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-26T17:49:45Z

Review comments:
diff_hunk: @@ -6,6 +6,10 @@ outline: 2
 
 You can use the `OASpec` component to render all operations that have a specific tag.
path: docs/pages/by-tag.md
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Documentation text needs to be updated.**

The text still references the old `OASpec` component name instead of the new `PagesByTag` component.

```diff
-You can use the `OASpec` component to render all operations that have a specific tag.
+You can use the `PagesByTag` component to render all operations that have a specific tag.

...

-In the `[tag].md` file, you can use the `OASpec` component to render the operations that have the tag.
+In the `[tag].md` file, you can use the `PagesByTag` component to render the operations that have the tag.
```


Also applies to: 50-51

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:44:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,6 +6,10 @@ outline: 2
 
 You can use the `OAOperation` component to render a specific operation.
path: docs/pages/by-operation.md
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Documentation text needs to be updated.**

The text still references the old `OAOperation` component name instead of the new `PagesByOperation` component.

```diff
-You can use the `OAOperation` component to render a specific operation.
+You can use the `PagesByOperation` component to render a specific operation.

...

-In the `[operationId].md` file, you can use the `OAOperation` component to render the operation.
+In the `[operationId].md` file, you can use the `PagesByOperation` component to render the operation.
```


Also applies to: 50-51

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:44:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,6 +6,12 @@ outline: 2
 
 You can use the `OAIntroduction` component to display the OpenAPI `info` and `servers` sections.
path: docs/pages/introduction.md
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Documentation text needs to be updated.**

The text still references the old `OAIntroduction` component name instead of the new `Introduction` component.

```diff
-You can use the `OAIntroduction` component to display the OpenAPI `info` and `servers` sections.
+You can use the `Introduction` component to display the OpenAPI `info` and `servers` sections.
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
You can use the `Introduction` component to display the OpenAPI `info` and `servers` sections.
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:44:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,6 +6,13 @@ outline: 2
 
 You can use the `OASpec` component to render all operations in any Markdown file.
 
+## Example
+
+<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'PagesBySpec', showSidebar: false}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
+
+
+## Markdown File
path: docs/pages/by-spec.md
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Improved document structure with clearer section heading**

Adding the "Markdown File" heading creates a logical separation between the live example and the implementation instructions.


Note: There's an extra blank line that could be removed to comply with markdown linting rules.

```diff
<SandboxIframe :sandbox-data="{sandboxView: 'preview', previewComponent: 'PagesBySpec', showSidebar: false}" :iframe-zoom="0.6" class="h-[70vh] max-h-[700px]" />
## Markdown File
```


> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

13-13: Multiple consecutive blank lines
Expected: 1; Actual: 2

(MD012, no-multiple-blanks)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:44:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -13,9 +13,10 @@ export interface SandboxData {
   sandboxView: Ref<'edit' | 'preview'>
   hideSandboxNav: Ref<boolean>
 
-  previewComponent: Ref<'OASpec' | 'OAOperation' | 'OAIntroduction'>
+  previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag', 'Introduction'>
path: docs/.vitepress/theme/sandboxData.ts
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix syntax error in type definition**

There's a syntax error in the union type definition. The types should be separated by `|` instead of a comma.


```diff
- previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag', 'Introduction'>
+ previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag' | 'Introduction'>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  previewComponent: Ref<'PagesByOperation' | 'PagesBySpec' | 'PagesByTag' | 'Introduction'>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:44:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,8 +18,8 @@ onMounted(() => {
 
 // Scroll into the operation when the operationId changes.
 watch(sandboxData.operationId, () => {
-  if (sandboxData.previewComponent.value === 'OAOperation') {
-  } else if (sandboxData.previewComponent.value === 'OASpec') {
+  if (sandboxData.previewComponent.value === 'PagesByOperation') {
+  } else if (sandboxData.previewComponent.value === 'PagesBySpec') {
path: docs/.vitepress/theme/components/sandbox/SandboxPreview.vue
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Avoid empty if blocks**

There's an empty if block here that triggers an ESLint error. Either add a comment explaining why no action is needed, or refactor to avoid the empty block.


```diff
- if (sandboxData.previewComponent.value === 'PagesByOperation') {
- } else if (sandboxData.previewComponent.value === 'PagesBySpec') {
+ // Only scroll to hash for PagesBySpec mode
+ if (sandboxData.previewComponent.value === 'PagesBySpec') {
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  // Only scroll to hash for PagesBySpec mode
  if (sandboxData.previewComponent.value === 'PagesBySpec') {
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 ESLint</summary>

[error] 21-22: Empty block statement.

(no-empty)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:44:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -37,9 +56,10 @@ export function initSandboxData(options: Partial<UnwrapRef<SandboxData>> = {}):
     sandboxView: ref(options.sandboxView ?? 'edit'),
     hideSandboxNav: ref(options.hideSandboxNav ?? false),
 
-    previewComponent: ref(options.previewComponent ?? 'OASpec'),
+    previewComponent: ref(parsePreviewComponent(options)),
     previewHeaders: ref([]),
     operationId: ref(options.operationId ?? null),
+    tags: ref(typeof options.tags === 'string' ? [options.tags] : options.tags ?? []),
path: docs/.vitepress/theme/sandboxData.ts
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Add validation for tags type.**

The current implementation handles string inputs but might not properly validate other data types. Consider adding an explicit check to ensure non-string inputs are arrays.

```diff
- tags: ref(typeof options.tags === 'string' ? [options.tags] : options.tags ?? []),
+ tags: ref(typeof options.tags === 'string' ? [options.tags] : Array.isArray(options.tags) ? options.tags : []),
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    tags: ref(
      typeof options.tags === 'string'
        ? [options.tags]
        : Array.isArray(options.tags)
        ? options.tags
        : []
    ),
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T17:49:44Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-26T17:41:49Z
body: [vc]: #eMsYsRF38141fVpSBhhe7MtdOG3gyDLyfGWy7Fcg8Ls=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ2aXRlcHJlc3Mtb3BlbmFwaSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9lbnpvLW5vdGFyaW9zLXByb2plY3RzL3ZpdGVwcmVzcy1vcGVuYXBpL0RhTnFWNkhMTnpYa1RiakdldVRhRFpiYVNQREUiLCJwcmV2aWV3VXJsIjoidml0ZXByZXNzLW9wZW5hcGktZ2l0LWZlYXR1cmUtc2FuZGJveC1lbnpvLW5vdGFyaW9zLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidml0ZXByZXNzLW9wZW5hcGktZ2l0LWZlYXR1cmUtc2FuZGJveC1lbnpvLW5vdGFyaW9zLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **vitepress-openapi** | ✅ Ready ([Inspect](https://vercel.com/enzo-notarios-projects/vitepress-openapi/DaNqV6HLNzXkTbjGeuTaDZbaSPDE)) | [Visit Preview](https://vitepress-openapi-git-feature-sandbox-enzo-notarios-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/vitepress-openapi-git-feature-sandbox-enzo-notarios-projects.vercel.app?via=pr-comment-feedback-link) | Apr 26, 2025 9:40pm |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-26T17:41:50Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This set of changes updates the sandbox preview system and related documentation for OpenAPI components. It introduces new preview component identifiers (`PagesByOperation`, `PagesBySpec`, `PagesByTag`, and `Introduction`) replacing previous ones, and extends the sandbox data model to support tag-based previews. Vue components and their watchers are refactored to accommodate these new modes, including logic for initializing and reacting to tags. Documentation files are updated to reflect the new preview modes, moving and revising example sections to use updated component names. Internal component logic is also improved for reactivity and prop forwarding.

## Changes

| File(s)                                                                                              | Change Summary                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
|----------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `docs/.vitepress/theme/components/sandbox/Sandbox.vue`                                             | Updated the hash watcher to use a switch on `previewComponent`, setting either `operationId` or `tags` in `sandboxData` based on the current preview mode.                                                                                                                                                                                                                                                                                                                                    |
| `docs/.vitepress/theme/components/sandbox/SandboxPreview.vue`                                      | Replaced old preview component names with new ones, added tag initialization logic for `'PagesByTag'`, updated scroll and rendering logic, and adjusted template conditionals to reflect new preview modes.                                                                                                                                                                                                                                                                                   |
| `docs/.vitepress/theme/components/theme/ThemeConfig.vue`                                           | Updated the list of available preview components to use the new identifiers and adjusted conditional rendering accordingly.                                                                                                                                                                                                                                                                                                                                                                    |
| `docs/.vitepress/theme/sandboxData.ts`                                                             | Changed the `previewComponent` type and default, added a `tags` property to the sandbox data model, and initialized it in `initSandboxData`. Added a helper to map legacy preview component names to new ones.                                                                                                                                                                                                                                                                                 |
| `docs/pages/by-operation.md`                                                                       | Moved example usage of the operation preview component near the start, replacing the old example with one using the new `PagesByOperation` component. Removed the previous example at the bottom.                                                                                                                                                                                                                                                                                               |
| `docs/pages/by-spec.md`                                                                            | Moved and updated the example usage of the spec preview component from the bottom to near the top, replacing `OASpec` with `PagesBySpec`. Added a new "Markdown File" heading above markdown usage instructions.                                                                                                                                                                                                                                                                               |
| `docs/pages/by-tag.md`                                                                             | Added a new example section demonstrating the `PagesByTag` preview component filtered by a specific tag, with styled iframe preview.                                                                                                                                                                                                                                                                                                                                                          |
| `docs/pages/introduction.md`                                                                       | Moved the example section for the introduction component near the top, replacing `OAIntroduction` with `Introduction`. Added a "Markdown File" heading above markdown usage instructions. Removed the duplicated example at the bottom.                                                                                                                                                                                                                                                     |
| `src/components/Feature/OASpec.vue`                                                                | Modified template to spread all props to `OASpecContent`, ensuring all declared props are forwarded along with attributes and slot props.                                                                                                                                                                                                                                                                                                                                                      |
| `src/components/Feature/OASpecContent.vue`                                                         | Refactored tag and path grouping logic to use Vue computed properties for improved reactivity, changing variables like `operationsTags` and `pathsByTags` to computed properties and updating dependent code accordingly.                                                                                                                                                                                                                                                                     |
| `src/components/Feature/OAOperation.vue`                                                           | Modified template to spread all props to `OAOperationContent`, forwarding all component props along with attributes and specific props.                                                                                                                                                                                                                                                                                                                                                       |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Sandbox
    participant SandboxPreview
    participant SandboxData
    participant OASpec
    participant OAOperation

    User->>Sandbox: Changes URL hash or selects preview mode
    Sandbox->>SandboxData: Update previewComponent, operationId, or tags
    SandboxData-->>SandboxPreview: Reactive update triggers watcher
    SandboxPreview->>SandboxData: Initialize tags if PagesByTag
    SandboxPreview->>OASpec: Render OASpec if PagesBySpec or PagesByTag
    SandboxPreview->>OAOperation: Render OAOperation if PagesByOperation
```

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 2e25433a40dcd7dad6173cfad0f2c7d6c84235f5 and eb6a87023855a9182c4c431b4d0b7f237cfd4361.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `docs/.vitepress/theme/components/theme/ThemeConfig.vue` (3 hunks)
* `docs/.vitepress/theme/sandboxData.ts` (3 hunks)
* `docs/pages/by-tag.md` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

<details>
<summary>docs/pages/by-tag.md</summary>

11-11: Inline HTML
Element: SandboxIframe

(MD033, no-inline-html)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: test

</details>

<details>
<summary>🔇 Additional comments (9)</summary><blockquote>

<details>
<summary>docs/pages/by-tag.md (1)</summary>

`9-11`: **Well implemented example section.**

The added example section with the `SandboxIframe` properly demonstrates the new `PagesByTag` component with appropriate configuration for filtering by the "Authentication" tag.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

11-11: Inline HTML
Element: SandboxIframe

(MD033, no-inline-html)

</details>

</details>

</details>
<details>
<summary>docs/.vitepress/theme/components/theme/ThemeConfig.vue (4)</summary>

`10-15`: **Well structured refactoring of component naming.**

The refactoring from `availableComponents` to `availablePagesTypes` and the corresponding updates to the component names are well implemented. The addition of `PagesByTag` aligns with the PR objectives.

---

`103-103`: **Clear and consistent heading update.**

The heading update from "Preview Component" to "Pages" is consistent with the component naming changes throughout the PR.

---

`106-106`: **Properly updated iteration variable.**

The iteration variable has been correctly updated to use `availablePagesTypes` instead of the previous `availableComponents`.

---

`121-121`: **Appropriate condition update.**

The condition has been updated to check for the new component name `PagesBySpec` instead of the old `OASpec`, maintaining consistency with the name changes.

</details>
<details>
<summary>docs/.vitepress/theme/sandboxData.ts (4)</summary>

`16-16`: **Well defined type for previewComponent.**

The updated type definition for `previewComponent` correctly includes all the new component types and maintains backward compatibility with the `string` type.

---

`19-19`: **Good addition of tags property.**

The addition of the `tags` property to the `SandboxData` interface is well implemented and necessary for supporting the new tag-based filtering functionality.

---

`29-45`: **Well implemented backward compatibility function.**

The `parsePreviewComponent` function provides an excellent way to handle backward compatibility with the old component names. This ensures that existing code using the old component names will continue to work.

---

`59-59`: **Good use of the parsePreviewComponent function.**

The use of the `parsePreviewComponent` function in the `initSandboxData` function ensures that the component names are properly mapped when initializing the sandbox data.

</details>

</blockquote></details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=enzonotario/vitepress-openapi&utm_content=211):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: pkg-pr-new[bot]
created_at: 2025-04-26T17:42:29Z
body: 
[Open in StackBlitz](https://pkg.pr.new/template/e9276042-42a1-45ea-9feb-e7bf9e78dc2e)


```
npm i https://pkg.pr.new/vitepress-openapi@211
```


_commit: <a href="https://github.com/enzonotario/vitepress-openapi/runs/41213255923"><code>eb6a870</code></a>_

author_association: NONE