feat(server)!: rename .func() to .handler() (#60)

* refactor(server): Renamed .func() to .handler()

* feat(docs): Redesigned docs

Author: ahriannn

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <image align="center" src="./logo.png" width=400 />
+  <image align="center" src="./logo.webp" width=280 />
 </div>
 
 <h1></h1>

apps/content/app/(home)/page.tsx

@@ -4,6 +4,7 @@ import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui'
 import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock'
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 import { DocsBody } from 'fumadocs-ui/page'
+import Image from 'next/image'
 import Link from 'next/link'
 
 const mdxComponents = {
@@ -39,48 +40,37 @@ export default function HomePage() {
       <div className="mx-auto lg:col-span-6 lg:flex lg:items-center justify-center text-center">
         <div className="relative z-10 lg:h-auto pt-[90px] lg:pt-[90px] lg:min-h-[300px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
           <div className="flex flex-col items-center">
-            <h1 className="max-w-5xl text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-6xl">
-              <span className="block text-foreground">
-                End-to-End Typesafe API Builder for Developers
-              </span>
-              {/* <span className="block md:ml-0">Developer-first simplicity</span> */}
+            <Image src="/logo.webp" alt="oRPC" width={500} height={100} unoptimized />
+            <h1 className="max-w-4xl mt-5 text-#b4befe font-semibold text-4xl sm:text-5xl sm:leading-none lg:text-5xl">
+              Typesafe API's Made Simple 🪄
             </h1>
             <p className="max-w-2xl pt-2 text-foreground my-3 text-xs sm:mt-5 lg:mb-0 sm:text-sm lg:text-base">
-              <strong className="font-semibold">oRPC</strong>
-              {' '}
-              is an open-source toolkit that helps developers build robust TypeScript functions
-              and expose them to the internet using typesafe clients, OpenAPI standards, or even server actions.
-              Our focus is on
+              End-to-End Typesafe API's made easy in a toolkit that helps developers build robust TypeScript API's with a focus on
               {' '}
               <strong className="font-semibold">developer experience</strong>
               ,
               {' '}
-              <strong className="font-semibold">performance</strong>
-              , and
-              {' '}
               <strong className="font-semibold">reliability</strong>
               .
-              {/* <br className="hidden md:block" /> */}
             </p>
           </div>
-          <div className="flex items-center gap-2">
-            <a
-              data-size="medium"
+          <div className="flex items-center gap-5">
+            <Link
               type="button"
-              className="relative justify-center cursor-pointer inline-flex items-center space-x-2 text-center font-regular ease-out duration-200 rounded-md outline-none transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 border bg-brand-400 dark:bg-brand-500 hover:bg-brand/80 dark:hover:bg-brand/50 text-foreground border-brand-500/75 dark:border-brand/30 hover:border-brand-600 dark:hover:border-brand focus-visible:outline-brand-600 data-[state=open]:bg-brand-400/80 dark:data-[state=open]:bg-brand-500/80 data-[state=open]:outline-brand-600 text-sm px-4 py-2 h-[38px]"
-              href="https://github.com/unnoq/orpc"
-              rel="noreferrer noopener"
-              target="_blank"
+              className="bg-fd-primary/80 flex py-3 px-8 rounded-full cursor-pointer"
+              href="/docs"
+
             >
-              <span className="truncate">View on GitHub</span>
-            </a>
+              <span className="font-medium text-white/80">Quick start</span>
+            </Link>
             <Link
-              data-size="medium"
               type="button"
-              className="relative justify-center cursor-pointer inline-flex items-center space-x-2 text-center font-regular ease-out duration-200 rounded-md outline-none transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 border text-foreground bg-alternative dark:bg-muted hover:bg-selection border-strong hover:border-stronger focus-visible:outline-brand-600 data-[state=open]:bg-selection data-[state=open]:outline-brand-600 data-[state=open]:border-button-hover text-sm px-4 py-2 h-[38px]"
-              href="/docs"
+              className="bg-fd-primary/20 bg-opacity-20 flex py-3 px-8 rounded-full cursor-pointer"
+              href="https://github.com/unnoq/orpc"
+              rel="noreferrer noopener"
+              target="_blank"
             >
-              <span className="truncate">Quick start</span>
+              <span className="text-fd-primary font-medium">View on GitHub</span>
             </Link>
           </div>
         </div>

apps/content/app/layout.config.tsx

@@ -1,5 +1,6 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
 import { Bluesky, Discord, Twitter } from '@/components/icons'
+import NavbarLogo from '@/components/ui/NavbarLogo'
 
 /**
  * Shared layout configurations
@@ -11,7 +12,7 @@ import { Bluesky, Discord, Twitter } from '@/components/icons'
 export const baseOptions: BaseLayoutProps = {
   githubUrl: 'https://github.com/unnoq/orpc',
   nav: {
-    title: 'oRPC',
+    title: <NavbarLogo />,
   },
   links: [
     {

apps/content/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
-import { RootProvider } from 'fumadocs-ui/provider'
+import { Banner } from 'fumadocs-ui/components/banner'
 
+import { RootProvider } from 'fumadocs-ui/provider'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import './global.css'
@@ -24,6 +25,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       suppressHydrationWarning
     >
       <body className="flex flex-col min-h-screen">
+        <Banner>
+          oRPC is currently pre-stable, please report any issues on our
+          {' '}
+          {' '}
+          Discord or GitHub 🚧
+        </Banner>
         <RootProvider
           search={{
             options: {

apps/content/components/icons.tsx

@@ -19,7 +19,7 @@ export function Discord(props: React.ComponentProps<'svg'>) {
     >
       <path
         d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
-        fill="#5865F2"
+        fill="currentColor"
       />
     </svg>
   )
@@ -36,7 +36,7 @@ export function Bluesky(props: React.ComponentProps<'svg'>) {
       {...props}
     >
       <path
-        fill="#1185FE"
+        fill="currentColor"
         d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"
       />
     </svg>

apps/content/components/ui/NavbarLogo.tsx

@@ -0,0 +1,7 @@
+import Image from 'next/image'
+
+export default function NavbarLogo() {
+  return (
+    <Image src="/logo.webp" alt="oRPC" width={60} height={100} unoptimized />
+  )
+}

apps/content/content/docs/client/react-query.mdx

@@ -145,7 +145,7 @@ const router = {
   user: {
     list: os
       .input(z.object({ cursor: z.number(), limit: z.number() }))
-      .func((input) => ({
+      .handler((input) => ({
         nextCursor: input.cursor + input.limit,
         users: [], // Fetch your actual data here
       })),

apps/content/content/docs/client/react.mdx

@@ -92,7 +92,7 @@ const router = {
     user: {
         list: os
         .input(z.object({ cursor: z.number(), limit: z.number() }))
-        .func((input) => {
+        .handler((input) => {
             return {
                 nextCursor: input.cursor + input.limit,
                 users: []

apps/content/content/docs/client/vue-query.mdx

@@ -85,7 +85,7 @@ const router = {
   user: {
     list: os
       .input(z.object({ cursor: z.number(), limit: z.number() }))
-      .func((input) => ({
+      .handler((input) => ({
         nextCursor: input.cursor + input.limit,
         users: [], // Fetch your actual data here
       })),

apps/content/content/docs/contract-first.mdx

@@ -95,23 +95,23 @@ export const authed /** require authed */ = os
   .contract(contract)
 
 export const router = pub.router({
-  getting: pub.getting.func((input, context, meta) => {
+  getting: pub.getting.handler((input, context, meta) => {
     return {
       message: `Hello, ${input.name}!`,
     }
   }),
 
   post: {
     find: pub.post.find
-      .func((input, context, meta) => {
+      .handler((input, context, meta) => {
         return {
           id: 'example',
           title: 'example',
           description: 'example',
         }
       }),
 
-    create: authed.post.create.func((input, context, meta) => {
+    create: authed.post.create.handler((input, context, meta) => {
       return {
         id: 'example',
         title: input.title,