fix(open-api): fix example rendering "value" key if summary or descri…

…ption not set

src/.vuepress/theme/client/components/global/OpenApiExample.vue

@@ -1,34 +1,28 @@
 <template>
   <template v-if="example">
     <strong class="inline-block text-sm">{{ title || 'Example' }}:</strong>&nbsp;
-    <p
+    <Markdown
       v-if="isExampleObject(example) && example.summary"
-      class="text-sm">
-      {{ example.summary }}
-    </p>
+      class="text-sm"
+      :content="example.summary" />
 
-    <div
+    <Markdown
       v-if="isExampleObject(example) && example.description"
       class="text-sm"
-      v-html="example.description" />
+      :content="example.description" />
+
+    <CodeBlock
+      v-if="formattedExample && isMultilineString"
+      :code="formattedExample" />
 
-    <template v-if="formattedExample">
-      <CodeBlock
-        v-if="isMultilineString"
-        :code="formattedExample"
-        language="json" />
-      <code
-        v-else
-        class="inline-block m-0 p-1 text-sm"
-        >{{ formattedExample }}</code
-      >
-    </template>
+    <code v-else>{{ formattedExample }}</code>
   </template>
 </template>
 
 <script setup lang="ts">
 import {computed} from 'vue';
 import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import Markdown from '@mptheme/client/components/global/Markdown.vue';
 import CodeBlock from './CodeBlock.vue';
 
 const props = defineProps<{
@@ -57,8 +51,6 @@ function formatExample(example: unknown): string {
 
 // Guard to check if example is an Example object
 const isExampleObject = (example: unknown): example is OpenApiType.ExampleObject => {
-  return (
-    !!example && typeof example === 'object' && 'summary' in example && 'description' in example && 'value' in example
-  );
+  return !!example && typeof example === 'object' && 'value' in example;
 };
 </script>

src/.vuepress/theme/client/components/global/OpenApiResponses.vue

@@ -29,32 +29,18 @@
             :key="`example${type}`"
             title="Example response"
             tag="strong">
-            <CodeGroup
-              :items="[
-                {
-                  title: type.toString(),
-                  code: JSON.stringify(item.example),
-                  language: 'json',
-                },
-              ]">
-            </CodeGroup>
+            <OpenApiExample :example="item.example" />
           </DetailsExpand>
 
           <DetailsExpand
             v-if="'examples' in item && item.examples"
             :key="`examples${type}`"
             title="Example responses"
             tag="strong">
-            <CodeGroup
-              v-if="'examples' in item && Object.entries(item.examples)?.length"
-              :items="
-                Object.entries(item.examples).map(([key, value]) => ({
-                  title: key,
-                  code: JSON.stringify(value),
-                  language: 'json',
-                }))
-              ">
-            </CodeGroup>
+            <OpenApiExample
+              v-for="(example, index) in item.examples"
+              :key="index"
+              :example="example" />
           </DetailsExpand>
         </template>
       </li>
@@ -67,6 +53,7 @@ import {computed, type ComputedRef} from 'vue';
 import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
 import {isReponseObject} from '@mptheme/client/utils/openApiGuards';
 import OpenApiSchema from './OpenApiSchema.vue';
+import OpenApiExample from './OpenApiExample.vue';
 import Http from './Http.vue';
 import DetailsExpand from './DetailsExpand.vue';
 import CodeGroup from './CodeGroup.vue';