Merge pull request #280 from kravetsone/use-shiki

Rejection of prism in favor of shiki

Author: SaltyAom

bun.lockb

@@ -20,12 +20,7 @@
                 </p>
             </div>
         </aside> -->
-        <img
-            :src="props.src"
-            :alt="props.alt"
-            class="w-full my-6"
-            :class="props.shadow ? 'shadow-xl' : 'border'"
-        />
+        <img :src="props.src" :alt="props.alt" class="w-full my-6" :class="props.shadow ? 'shadow-xl' : 'border'" />
         <main id="blog-content">
             <slot />
         </main>
@@ -64,14 +59,12 @@ onMounted(() => {
     mutated.forEach((selector) => {
         console.log(document.querySelector(selector))
 
-        // @ts-ignore
         document.querySelector(selector)?.classList.add('blog')
     })
 })
 
 onUnmounted(() => {
     mutated.forEach((selector) => {
-        // @ts-ignore
         document.querySelector(selector)?.classList.remove('blog')
     })
 })
@@ -97,26 +90,26 @@ onUnmounted(() => {
     @apply text-lg mt-0;
 }
 
-#blog > img {
+#blog>img {
     @apply rounded-lg;
 }
 
-#blog > h1 {
+#blog>h1 {
     @apply !text-3xl md:!text-4xl font-semibold;
 }
 
-#blog > h2 {
+#blog>h2 {
     @apply !text-2xl md:!text-3xl font-semibold;
 }
 
-#blog > h3 {
+#blog>h3 {
     @apply !text-xl md:!text-2xl font-semibold;
 }
 
-#blog-content > video,
-#blog-content > * > video,
-#blog-content > img,
-#blog-content > * > img {
+#blog-content>video,
+#blog-content>*>video,
+#blog-content>img,
+#blog-content>*>img {
     @apply rounded-xl my-4;
     /* box-shadow: 0 8px 25px rgba(0,0,0,.1) */
 }
@@ -127,7 +120,7 @@ onUnmounted(() => {
 }
 
 @media (min-width: 768px) {
-    #blog > h1 {
+    #blog>h1 {
         line-height: 3.25rem !important;
     }
 }

components/blog/Layout.vue

@@ -1,93 +1,38 @@
-<script setup lang="ts">
-import Prism from 'vue-prism-component'
-
-const server = `// server.ts
-import { Elysia, t } from 'elysia'
-
-const app = new Elysia()
-    .patch(
-        '/user/age',
-        ({ body }) => signIn(body), 
-        {
-            body: t.Object({
-                name: t.String(),
-                age: t.Number()
-            })
-        }
-    )
-    .listen(80)
-    
-export type App = typeof app`
-
-const client = `// client.ts
-import { edenTreaty } from '@elysiajs/eden'
-import type { App } from 'server'
-    
-const eden = edenTreaty<App>('http://localhost')
-
-await eden.user.age.patch({
-    name: 'saltyaom',
-    age: '21'
-})`
-</script>
-
 <template>
-    <section
-        class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto py-4"
-    >
+    <section class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto py-4">
         <!-- <h3 class="text-2xl mr-auto md:mx-auto font-medium text-gray-400">
             Introducing
         </h3> -->
         <h2
-            class="text-5xl md:text-6xl font-bold !leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6 mr-auto md:mx-auto"
-        >
+            class="text-5xl md:text-6xl font-bold !leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6 mr-auto md:mx-auto">
             End–to-End Type Safety
         </h2>
 
-        <p
-            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl"
-        >
+        <p class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl">
             Synchronize types across all applications.
             <br />
             Move fast and break nothing like tRPC.
         </p>
 
-        <a
-            class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6"
-            href="/eden/overview"
-        >
+        <a class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6"
+            href="/eden/overview">
             See how it works
         </a>
 
         <section class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8">
-            <div class="w-full">
-                <Prism
-                    class="!text-base !font-mono rounded-xl"
-                    language="typescript"
-                >
-                    {{ server }}
-                </Prism>
+            <div class="w-full !text-base !font-mono rounded-xl">
+                <slot name="server"></slot>
             </div>
-            <div class="relative w-full">
-                <Prism
-                    class="!text-base !font-mono rounded-xl"
-                    language="typescript"
-                >
-                    {{ client }}
-                </Prism>
-                <div
-                    class="absolute p-1 rounded bg-red-400/25"
-                    style="
-                        top: 13.5em;
-                        left: 6.375em;
-                        width: 2.5em;
+            <div class="relative w-full !text-base !font-mono rounded-xl">
+                <slot name="client"></slot>
+                <div class="absolute p-1 rounded bg-red-400/25" style="
+                        top: 13.2em;
+                        left: 5.9em;
+                        width: 2.2em;
                         height: 1.375em;
-                    "
-                />
-                <p
-                    class="absolute px-3 py-1.5 rounded bg-white dark:bg-gray-700 border dark:border-gray-600"
-                    style="top: 15.25em; left: 3.25em"
-                >
+                    " />
+                <p class="absolute px-3 py-1.5 rounded bg-white dark:bg-gray-700 border dark:border-gray-600"
+                    style="top: 15.25em; left: 3.25em">
                     Type 'string' is not assignable to type 'number'
                 </p>
             </div>