📘 feat: use shiki in type-strict block

Author: kravetsone

components/midori/index.vue

@@ -52,7 +52,9 @@ const isDark = useDark()
                 <JustReturn>
                     <slot name="justreturn"></slot>
                 </JustReturn>
-                <TypeStrict />
+                <TypeStrict>
+                    <slot name="typestrict"></slot>
+                </TypeStrict>
                 <OpenAPI />
             </section>
             <E2ETypeSafety />

components/midori/type-strict.vue

@@ -1,49 +1,18 @@
-<script setup lang="ts">
-import Prism from 'vue-prism-component'
-
-const code = `import { Elysia, t } from 'elysia'
-
-new Elysia()
-    .post(
-        '/profile',
-        ({ body }) => body,
-        {
-            body: t.Object({
-                username: t.String()
-            })
-        }
-    )
-    .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">
                 Type Safety
             </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">
                 Powered by TypeBox, Elysia enforces type-strict validation to
                 ensure type integrity by default
             </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">
                 Elysia infers types to TypeScript automatically to create
                 unified type system like statically typed language
             </p>

docs/.vitepress/config.ts

@@ -16,13 +16,13 @@ export default defineConfig({
         }
     },
     // ![INFO] uncomment for support hot reload on WSL - https://github.com/vitejs/vite/issues/1153#issuecomment-785467271
-    // vite: {
-    //     server: {
-    //         watch: {
-    //             usePolling: true
-    //         }
-    //     }
-    // },
+    vite: {
+        server: {
+            watch: {
+                usePolling: true
+            }
+        }
+    },
     head: [
         ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
         [

docs/index.md

@@ -32,8 +32,29 @@ new Elysia()
         hello: 'world'
     }))
     .listen(3000)
+
 ```
 
   </template>
+
+  <template v-slot:typestrict>
+
+```typescript
+import { Elysia, t } from 'elysia'
+
+new Elysia()
+    .post(
+        '/profile',
+        ({ body }) => body,
+        {
+            body: t.Object({
+                username: t.String()
+            })
+        }
+    )
+    .listen(3000)
+
+```
+  </template>
 </Landing>
 ```

package.json

@@ -1,46 +1,46 @@
 {
-  "name": "elysia-docs",
-  "version": "1.0.0",
-  "description": "",
-  "type": "module",
-  "main": "index.js",
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@iconify/json": "^2.2.145",
-    "@saltyaom/gq": "^1.1.9",
-    "@saltyaom/gql-local-cache": "^1.3.0",
-    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
-    "autoprefixer": "^10.4.16",
-    "daisyui": "^4.4.2",
-    "dayjs": "^1.11.10",
-    "elysia": "^0.7.29",
-    "openai": "^4.19.1",
-    "postcss": "^8.4.31",
-    "postcss-nesting": "^12.0.1",
-    "postcss-preset-env": "^9.3.0",
-    "prismjs": "^1.29.0",
-    "tailwindcss": "^3.3.5",
-    "vite": "^5.0.2",
-    "vite-plugin-icons": "^0.6.5",
-    "vue-prism-component": "^2.0.0",
-    "windicss": "^3.5.6"
-  },
-  "devDependencies": {
-    "@types/bun": "^1.0.8",
-    "@types/node": "^20.9.4",
-    "cheerio": "1.0.0-rc.12",
-    "flexsearch": "^0.7.31",
-    "markdown-it": "^13.0.2",
-    "view-transitions-api-types": "^0.1.1",
-    "vitepress": "1.0.0-rc.29",
-    "vue": "^3.3.8"
-  },
-  "scripts": {
-    "dev": "vitepress dev docs",
-    "build": "vitepress build docs",
-    "serve": "vitepress serve docs"
-  }
+    "name": "elysia-docs",
+    "version": "1.0.0",
+    "description": "",
+    "type": "module",
+    "main": "index.js",
+    "keywords": [],
+    "author": "",
+    "license": "MIT",
+    "dependencies": {
+        "@iconify/json": "^2.2.145",
+        "@saltyaom/gq": "^1.1.9",
+        "@saltyaom/gql-local-cache": "^1.3.0",
+        "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+        "@tailwindcss/postcss7-compat": "^2.2.17",
+        "autoprefixer": "^10.4.16",
+        "daisyui": "^4.4.2",
+        "dayjs": "^1.11.10",
+        "elysia": "^0.7.29",
+        "openai": "^4.19.1",
+        "postcss": "^8.4.31",
+        "postcss-nesting": "^12.0.1",
+        "postcss-preset-env": "^9.3.0",
+        "prismjs": "^1.29.0",
+        "tailwindcss": "^3.3.5",
+        "vite": "^5.0.2",
+        "vite-plugin-icons": "^0.6.5",
+        "vue-prism-component": "^2.0.0",
+        "windicss": "^3.5.6"
+    },
+    "devDependencies": {
+        "@types/bun": "^1.0.8",
+        "@types/node": "^20.9.4",
+        "cheerio": "1.0.0-rc.12",
+        "flexsearch": "^0.7.31",
+        "markdown-it": "^13.0.2",
+        "view-transitions-api-types": "^0.1.1",
+        "vitepress": "1.0.0-rc.29",
+        "vue": "^3.3.8"
+    },
+    "scripts": {
+        "dev": "vitepress dev docs",
+        "build": "vitepress build docs",
+        "serve": "vitepress serve docs"
+    }
 }