From 4697710a6292605d196989850fd59f1f3dbcc247 Mon Sep 17 00:00:00 2001
From: Freek van Rijt <freek.vanrijt@myparcel.nl>
Date: Mon, 15 Apr 2024 14:45:03 +0200
Subject: [PATCH] fix(open-api): fix example rendering "value" key if summary
 or description not set

---
 .../components/global/OpenApiExample.vue      | 32 +++++++------------
 .../components/global/OpenApiResponses.vue    | 25 ++++-----------
 2 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/src/.vuepress/theme/client/components/global/OpenApiExample.vue b/src/.vuepress/theme/client/components/global/OpenApiExample.vue
index 36e40aa2..0086ba2b 100644
--- a/src/.vuepress/theme/client/components/global/OpenApiExample.vue
+++ b/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>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiResponses.vue b/src/.vuepress/theme/client/components/global/OpenApiResponses.vue
index d7efaa44..0570c252 100644
--- a/src/.vuepress/theme/client/components/global/OpenApiResponses.vue
+++ b/src/.vuepress/theme/client/components/global/OpenApiResponses.vue
@@ -29,15 +29,7 @@
             :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
@@ -45,16 +37,10 @@
             :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';