Richer HTTP logging, context tree, and startup banner

.changeset/rich-logging-banner.md

@@ -0,0 +1,7 @@
+---
+'logixlysia': minor
+---
+
+- Add `formatLogOutput` with optional multi-line context tree; keep `formatLine` as a deprecated alias returning the main line only.
+- New config: `service`, `slowThreshold`, `verySlowThreshold`, `showContextTree`, `contextDepth`; default format includes `{icon}`, `{service}`, `{statusText}`, and `{speed}` tokens.
+- Startup banner shows URL and optional logixlysia package version in a boxed layout.

apps/docs/app/(home)/components/demo.tsx

@@ -2,29 +2,30 @@ import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock'
 import { cn } from '@/lib/utils'
 
 const code = `import { Elysia } from 'elysia'
-import logixlysia from 'logixlysia' // or import { logixlysia } from 'logixlysia'
+import logixlysia from 'logixlysia'
 
-const app = new Elysia({
-    name: "Elysia with Logixlysia"
-})
+const app = new Elysia({ name: 'Elysia with Logixlysia' })
   .use(
     logixlysia({
       config: {
+        service: 'api-server',
         showStartupMessage: true,
-        startupMessageFormat: 'simple',
+        startupMessageFormat: 'banner',
+        showContextTree: true,
+        contextDepth: 2,
+        slowThreshold: 500,
+        verySlowThreshold: 1000,
         timestamp: {
           translateTime: 'yyyy-mm-dd HH:MM:ss.SSS'
         },
-        logFilePath: './logs/example.log',
-        ip: true,
-        customLogFormat:
-          '🦊 {now} {level} {duration} {method} {pathname} {status} {message} {ip}'
-        }
-    }))
-    .get('/', () => {
+        ip: true
+      }
+    })
+  )
+  .get('/', () => {
         return { message: 'Welcome to Basic Elysia with Logixlysia' }
     })
-        
+
 app.listen(3000)`
 
 export const Demo = () => (

apps/docs/app/(home)/components/playground/background.tsx

@@ -4,7 +4,14 @@ import Image from 'next/image'
 import backgroundImage from './background.png'
 
 export const Background = () => (
-  <div className="absolute inset-0">
-    <Image alt="Background" className="object-cover" src={backgroundImage} />
+  <div aria-hidden className="pointer-events-none absolute inset-0">
+    <Image
+      alt=""
+      className="object-cover opacity-40 saturate-125 dark:opacity-50"
+      fill
+      priority={false}
+      sizes="100vw"
+      src={backgroundImage}
+    />
   </div>
 )