📘 feat: use shiki in openapi block

Author: kravetsone

components/midori/index.vue

@@ -55,7 +55,9 @@ const isDark = useDark()
                 <TypeStrict>
                     <slot name="typestrict"></slot>
                 </TypeStrict>
-                <OpenAPI />
+                <OpenAPI>
+                    <slot name="openapi"></slot>
+                </OpenAPI>
             </section>
             <E2ETypeSafety />
             <Plugins />
@@ -80,7 +82,7 @@ const isDark = useDark()
     width: -moz-fit-content;
     width: fit-content;
     min-width: 100%;
-    line-height: var(--vp-code-line-height);
+    line-height: 1.5rem;
     font-size: var(--vp-code-font-size);
     color: var(--vp-code-block-color);
     transition: color 0.5s;

components/midori/openapi.vue

@@ -1,41 +1,18 @@
-<script setup lang="ts">
-import Prism from 'vue-prism-component'
-
-const code = `import { Elysia, t } from 'elysia'
-import { swagger } from '@elysiajs/swagger'
-import { users, feed } from './controllers'
-
-new Elysia()
-    .use(swagger())
-    .use(users)
-    .use(feed)
-    .listen(3000)`
-</script>
-
 <template>
-    <article
-        class="flex flex-col-reverse md:flex-row justify-between items-center gap-4 md:gap-12 w-full max-w-6xl"
-    >
-        <section class="w-full">
-            <Prism class="!text-base !font-mono rounded-xl" language="typescript">
-                {{ code }}
-            </Prism>
+    <article class="flex flex-col-reverse md:flex-row justify-between items-center gap-4 md:gap-12 w-full max-w-6xl">
+        <section class="w-full !text-base !font-mono rounded-xl">
+            <slot></slot>
         </section>
         <header class="flex flex-col gap-3 w-full">
             <h3
-                class="text-5xl leading-tight font-bold text-transparent bg-clip-text bg-gradient-to-br from-teal-300 to-blue-300"
-            >
+                class="text-5xl leading-tight font-bold text-transparent bg-clip-text bg-gradient-to-br from-teal-300 to-blue-300">
                 OpenAPI / Swagger
             </h3>
-            <p
-                class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4"
-            >
+            <p class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4">
                 Elysia generates OpenAPI 3.0 specs automatically to integrate
                 with various tools across multiple languages
             </p>
-            <p
-                class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4"
-            >
+            <p class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4">
                 Thanks to OpenAPI compliance, Elysia can generate Swagger in one
                 line with the Swagger plugin.
             </p>

docs/index.md

@@ -54,6 +54,21 @@ new Elysia()
     )
     .listen(3000)
 
+```
+  </template>
+
+  <template v-slot:openapi>
+
+```ts
+import { Elysia, t } from 'elysia'
+import { swagger } from '@elysiajs/swagger'
+import { users, feed } from './controllers'
+
+new Elysia()
+    .use(swagger())
+    .use(users)
+    .use(feed)
+    .listen(3000)
 ```
   </template>
 </Landing>