Merge branch 'main' into fix-elysia-06-typos

Author: OscarRG

components/midori/e2e-type-safety.vue

@@ -39,7 +39,7 @@ await eden.user.age.patch({
             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 mt-2 mb-4"
+            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 mt-2 mb-4 mr-auto md:mx-auto"
         >
             End–to-End Type Safety
         </h2>
@@ -52,9 +52,14 @@ await eden.user.age.patch({
             Move fast and break nothing like tRPC.
         </p>
 
-        <section
-            class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8"
+        <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-3 py-1.5 rounded-lg mt-4"
+            href="/patterns/end-to-end-type-safety"
         >
+            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"

components/midori/editor.vue

@@ -176,7 +176,7 @@ onMounted(() => {
         <p
             class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl"
         >
-            Being WinterCG compliance, Elysia can run in your browser!
+            Being WinterCG compliant, Elysia can run in your browser!
             <br />
             Edit the code and see live update immediately.
         </p>
@@ -205,7 +205,7 @@ onMounted(() => {
             </section>
             <div class="w-full mockup-browser h-96 shadow-xl border dark:border-gray-600 bg-white dark:bg-gray-700 max-w-full">
                 <div class="mockup-browser-toolbar">
-                    <form class="input font-medium dark:!bg-gray-600" @submit.prevent="execute">
+                    <form class="input font-medium !bg-gray-100 dark:!bg-gray-600" @submit.prevent="execute">
                         <span class="text-gray-400 dark:text-gray-300">localhost</span>
                         <input
                             class="absolute"

components/midori/hero.vue

@@ -3,74 +3,7 @@
         id="splash"
         class="pointer-events-none absolute top-[-70vh] max-w-full flex justify-center w-full h-screen opacity-50"
     >
-        <svg
-            v-if="!isDark"
-            class="filter blur-3xl"
-            xmlns="http://www.w3.org/2000/svg"
-            version="1.1"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            xmlns:svgjs="http://svgjs.dev/svgjs"
-            width="1100"
-            height="1100"
-            viewBox="0 0 1100 1100"
-        >
-            <defs>
-                <radialGradient id="ffflux-gradient">
-                    <stop offset="0%" stop-color="hsl(236, 100%, 72%)"></stop>
-                    <stop offset="100%" stop-color="hsl(0, 0%, 100%)"></stop>
-                </radialGradient>
-                <filter
-                    id="ffflux-filter"
-                    x="-20%"
-                    y="-20%"
-                    width="140%"
-                    height="140%"
-                    filterUnits="objectBoundingBox"
-                    primitiveUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feTurbulence
-                        type="fractalNoise"
-                        baseFrequency="0.005 0.003"
-                        numOctaves="1"
-                        seed="2"
-                        stitchTiles="stitch"
-                        x="0%"
-                        y="0%"
-                        width="100%"
-                        height="100%"
-                        result="turbulence"
-                    ></feTurbulence>
-                    <feGaussianBlur
-                        stdDeviation="23 14"
-                        x="0%"
-                        y="0%"
-                        width="100%"
-                        height="100%"
-                        in="turbulence"
-                        edgeMode="duplicate"
-                        result="blur"
-                    ></feGaussianBlur>
-                    <feBlend
-                        mode="color-dodge"
-                        x="0%"
-                        y="0%"
-                        width="100%"
-                        height="100%"
-                        in="SourceGraphic"
-                        in2="blur"
-                        result="blend"
-                    ></feBlend>
-                </filter>
-            </defs>
-            <rect
-                width="1100"
-                height="1100"
-                fill="url(#ffflux-gradient)"
-                filter="url(#ffflux-filter)"
-            ></rect>
-        </svg>
-        <div v-else class="block dark-light" />
+        <div :class="(isDark ? 'block gradient -dark' : 'block gradient -light')" />
     </div>
     <header
         class="relative flex flex-col justify-center items-center font-sans w-full px-6 pt-20 mb-16 md:mb-8 overflow-hidden"
@@ -154,7 +87,7 @@
             >, unified type system and outstanding developer experience
         </h3>
         <section
-            class="flex flex-col sm:flex-row items-start gap-4 mt-10 mb-12"
+            class="flex flex-col sm:flex-row items-start w-full md:w-auto gap-4 mt-10 mb-12"
         >
             <a
                 class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full"
@@ -165,7 +98,7 @@
             <code
                 class="text-blue-500 font-mono font-medium text-lg bg-blue-200/25 dark:bg-blue-500/20 px-6 py-2.5 rounded-full"
             >
-                bun create elysia new-app
+                bun create elysia app
             </code>
         </section>
         <p class="flex justify-center items-center gap-2 text-gray-400">
@@ -193,7 +126,7 @@
 import { onMounted, ref } from 'vue'
 
 const isDark = ref(false)
-
+const safari =
 onMounted(() => {
     // @ts-ignore
     isDark.value = document.documentElement.classList.contains('dark')

components/midori/index.vue

@@ -96,6 +96,15 @@ onMounted(() => {
             <Plugins />
             <Editor />
             <Community />
+            <figure
+                class="max-w-6xl w-full mx-auto rounded-2xl overflow-hidden my-12 shadow-xl bg-gray-50 dark:bg-gray-800"
+            >
+                <img
+                    class="w-full object-cover object-center"
+                    src="/assets/feature-sheet.webp"
+                    alt="Elysia Feature Sheet"
+                />
+            </figure>
             <QuickStart />
             <BuiltWithLove />
         </article>

components/midori/midori.css

@@ -1,5 +1,12 @@
-.dark-light {
+.gradient {
     width: 1100px;
     height: 1100px;
+}
+
+.gradient.-light {
+    background: radial-gradient(ellipse at center, #d7e0ff 0%, #eaecff 35%, transparent 70%);
+}
+
+.gradient.-dark {
     background: radial-gradient(ellipse at center, #797ee199 0%, transparent 70%);
 }

components/midori/openapi.vue

@@ -3,7 +3,7 @@ import Prism from 'vue-prism-component'
 
 const code = `import { Elysia, t } from 'elysia'
 import { swagger } from '@elysiajs/swagger'
-import { user, feed } from './controllers'
+import { users, feed } from './controllers'
 
 new Elysia()
     .use(swagger())

components/midori/plugins.vue

@@ -12,10 +12,9 @@ const plugins = [
         'https://github.com/wobsoriano/elysia-clerk'
     ],
     [
-        'OAuth',
-        '/assets/lock.svg',
-        'https://github.com/bogeychan/elysia-oauth2',
-        '/assets/lock-dark.svg'
+        'Lucia Auth',
+        '/assets/lucia.svg',
+        'https://github.com/pilcrowOnPaper/lucia'
     ],
     [
         'Logger',

components/midori/quickstart.vue

@@ -3,20 +3,20 @@
         class="flex flex-col justify-center items-center gap-3 w-full my-24 overflow-hidden"
     >
         <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"
+            class="relative text-5xl md:text-6xl md:leading-tight font-bold text-center leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400"
         >
             Start in minutes
         </h2>
         <h3
-            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-3xl"
+            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-center w-full max-w-3xl"
         >
             Scaffold your project, and run server in no time
         </h3>
         <section class="flex flex-col justify-center items-center gap-6 my-6">
             <code
                 class="text-blue-500 font-mono font-medium text-lg bg-blue-200/25 dark:bg-blue-500/20 px-6 py-2.5 rounded-full"
             >
-                bun create elysia new-app
+                bun create elysia app
             </code>
             <aside class="flex gap-4">
                 <a

components/midori/simple.vue

@@ -31,7 +31,7 @@
                     everyone
                 </p>
                 <p class="text-xl text-gray-400 w-full max-w-lg">
-                    From built-in strict-type validaiton to a unified type
+                    From built-in strict-type validation to a unified type
                     system, and documentation generation, making an ideal
                     framework for building servers with TypeScript.
                 </p>

docs/blog/elysia-06.md

@@ -146,7 +146,7 @@ By default, this declaration is used by:
 - Netlify Edge Function
 - Remix Function Handler
 
-Which means you can run all of the above code to interact with Elysia all in a single server, or reused and existing function all in one deployment, no need to set up a Reverse Proxy for handling multiple server.
+Which means you can run all of the above code to interlop with Elysia all in a single server, or re-used and existing function all in one deployment, no need to setting up Reverse Proxy for handling multiple server.
 
 If the framework also support a **.mount** function, you can deeply nested a framework that support it infinitely.
 ```ts
@@ -163,7 +163,7 @@ const main = new Elysia()
     .listen(3000)
 ```
 
-You can even reused multiple existing Elysia project in your server.
+You can even re-used multiple existing Elysia project in your server.
 
 ```ts
 import A from 'project-a/elysia'