📘 doc: elysia icon

Author: SaltyAom

components/midori/hero.vue

@@ -19,8 +19,8 @@
         <img
             src="/assets/elysia_v.webp"
             alt="Curved text logo saying 'Elysia JS'"
-            class="max-w-[52ch] w-full object-contain object-left md:object-center mr-auto md:mr-0"
-            style="aspect-ratio: 2 / 1"
+            class="max-w-[40ch] w-full object-contain object-left md:object-center mr-auto md:mr-0"
+            style="aspect-ratio: 1.5 / 1"
         />
         <h2
             class="relative text-5xl md:text-6xl md:leading-tight font-bold md:text-center leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6"
@@ -112,7 +112,7 @@
                     bun create elysia app
                 </code>
                 <button
-                    class="p-3 rounded-2xl active:rounded-full hover:bg-blue-200/25 focus:bg-blue-200/25 active:bg-blue-200/50 hover:dark:bg-blue-500/20 focus:dark:bg-blue-500/20 active:dark:bg-blue-500/20 transition-all"
+                    class="hidden sm:inline-flex p-3 rounded-2xl active:rounded-full hover:bg-blue-200/25 focus:bg-blue-200/25 active:bg-blue-200/50 hover:dark:bg-blue-500/20 focus:dark:bg-blue-500/20 active:dark:bg-blue-500/20 transition-all"
                     @click="copied = true"
                 >
                     <svg

docs/.vitepress/theme/custom.css

@@ -27,6 +27,7 @@ html, body {
     --vp-custom-block-tip-border: #dcfce7;
     --vp-custom-block-tip-text: #15803d;
     --vp-c-brand-nav-active: color-mix(in srgb, var(--vp-c-brand-light) 15%, transparent 100%);
+    --vp-nav-logo-height: 28px;
 }
 
 .dark {
@@ -63,6 +64,14 @@ button.copy::after {
     border: 0;
 }
 
+/* .VPNavBarTitle > a > span {
+    @apply hidden;
+}
+
+.logo {
+    @apply hidden;
+} */
+
 #embedded-editor {
     @apply my-6 h-[720px] w-full rounded-lg border-0;
 }

docs/.vitepress/theme/header.vue

@@ -0,0 +1,7 @@
+<template>
+    <!-- <img
+        src="/assets/elysia_v.webp"
+        alt="Curved text logo saying 'Elysia JS'"
+        class="h-[64px]"
+    /> -->
+</template>

docs/.vitepress/theme/index.ts

@@ -1,6 +1,9 @@
 // https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
+
 import Layout from './layout.vue'
+import Header from './header.vue'
 
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import '@shikijs/vitepress-twoslash/style.css'
@@ -12,7 +15,11 @@ import type { Theme } from 'vitepress'
 
 export default {
     extends: DefaultTheme,
-    Layout,
+    Layout() {
+        return h(DefaultTheme.Layout, null, {
+            'nav-bar-title-after': () => h(Header)
+        })
+    },
     enhanceApp({ app }: EnhanceAppContext) {
         app.use(TwoslashFloatingVue)
     }