docs: Add tabs in docs for dev, ui, guides

VitNode · Jul 9, 2024 · 8731d8d · 8731d8d
1 parent 7dc36cf
commit 8731d8d
Show file tree

Hide file tree

Showing 31 changed files with 449 additions and 225 deletions.
diff --git a/apps/docs-new/README.md b/apps/docs-new/README.md
diff --git a/apps/docs-new/app/(home)/docs/page.tsx b/apps/docs-new/app/(home)/docs/page.tsx
@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <div>
+      <h1>Page</h1>
+      <p>This is a page.</p>
+    </div>
+  );
+}
diff --git a/apps/docs-new/app/(home)/layout.tsx b/apps/docs-new/app/(home)/layout.tsx
@@ -0,0 +1,7 @@
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: Props) {
+  return <div>{children}</div>;
+}
diff --git a/apps/docs-new/app/docs/[[...slug]]/page.tsx → apps/docs-new/app/docs/[...slug]/page.tsx b/apps/docs-new/app/docs/[[...slug]]/page.tsx → apps/docs-new/app/docs/[...slug]/page.tsx
@@ -2,13 +2,16 @@ import { getPage, getPages } from '@/app/source';
 import type { Metadata } from 'next';
 import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 import { notFound } from 'next/navigation';
+import { utils } from '@/utils/source';
 
 export default async function Page({
   params,
 }: {
   params: { slug?: string[] };
 }) {
-  const page = getPage(params.slug);
+  const page = utils.getPage(params.slug);
+
+  if (!page) notFound();
 
   if (page == null) {
     notFound();

diff --git a/apps/docs-new/app/global.css b/apps/docs-new/app/global.css
@@ -11,11 +11,6 @@
     @apply bg-background text-foreground;
   }
 
-  a {
-    @apply text-primary;
-    @apply cursor-pointer;
-  }
-
   :root {
     --background: 220 40% 98%;
     --foreground: 213deg 5% 8%;
@@ -39,30 +34,38 @@
     --radius: 0.5rem;
     --cover: 220 80% 67%;
     --cover-foreground: 210 40% 98%;
+
+    --dev-color: 220 74% 50%;
+    --ui-color: 141 74% 31%;
+    --guides-color: 20 74% 50%;
   }
 
   .dark {
-    --background: 216 32% 7%;
+    --background: 210 32% 7%;
     --foreground: 0 0% 98%;
-    --card: 216 32% 10%;
+    --card: 210 32% 10%;
     --card-foreground: 0 0% 98%;
     /* --popover: var(--card); */
     /* --popover-foreground: var(--card-foreground); */
-    --primary: 216 84% 59%;
-    --primary-foreground: 216 40% 98%;
+    --primary: 210 84% 59%;
+    --primary-foreground: 210 40% 98%;
     --secondary: 222 25% 18%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 216 32% 11%;
-    --muted-foreground: 216 18% 64%;
-    --accent: 216 32% 14%;
+    --muted: 210 32% 11%;
+    --muted-foreground: 210 18% 64%;
+    --accent: 210 32% 14%;
     --accent-foreground: 0 0% 98%;
     --destructive: 359 78% 55%;
     --destructive-foreground: 210 40% 98%;
-    --border: 216 25% 16%;
+    --border: 210 25% 16%;
     /* --input: var(--border); */
     /* --ring: var(--primary); */
-    --cover: 216 64% 39%;
+    --cover: 210 64% 39%;
     --cover-foreground: 210 40% 98%;
+
+    --dev-color: 210 74% 50%;
+    --ui-color: 141 74% 38%;
+    --guides-color: 20 74% 50%;
   }
 }
 
@@ -80,3 +83,15 @@
     }
   }
 }
+
+.dev {
+  --primary: var(--dev-color);
+}
+
+.ui {
+  --primary: var(--ui-color);
+}
+
+.guides {
+  --primary: var(--guides-color);
+}
diff --git a/apps/docs-new/app/layout.client.tsx b/apps/docs-new/app/layout.client.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { cn } from '@/utils/classnames';
+import { useParams } from 'next/navigation';
+import { ReactNode } from 'react';
+
+export function useMode(): string | undefined {
+  const { slug } = useParams();
+  return Array.isArray(slug) && slug.length > 0 ? slug[0] : undefined;
+}
+
+export function Body({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  const mode = useMode();
+
+  return (
+    <body className={cn(mode, 'flex min-h-screen flex-col')}>{children}</body>
+  );
+}
diff --git a/apps/docs-new/app/layout.config.tsx b/apps/docs-new/app/layout.config.tsx
@@ -1,7 +1,7 @@
 import { type BaseLayoutProps, type DocsLayoutProps } from 'fumadocs-ui/layout';
 import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
 import { pageTree } from '@/app/source';
-import { modes } from './utils/modes';
+import { modes } from '../utils/modes';
 
 // shared configuration
 export const baseOptions: BaseLayoutProps = {

diff --git a/apps/docs-new/app/layout.tsx b/apps/docs-new/app/layout.tsx
@@ -1,14 +1,15 @@
 import { RootProvider } from 'fumadocs-ui/provider';
 import { GeistSans } from 'geist/font/sans';
 import type { ReactNode } from 'react';
+import { Body } from '@/app/layout.client';
 import './global.css';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.className} suppressHydrationWarning>
-      <body>
+      <Body>
         <RootProvider>{children}</RootProvider>
-      </body>
+      </Body>
     </html>
   );
 }
diff --git a/apps/docs-new/components/ui/icon.tsx b/apps/docs-new/components/ui/icon.tsx
@@ -0,0 +1,14 @@
+import type { LucideIcon } from 'lucide-react';
+import { TerminalIcon } from 'lucide-react';
+
+export function create({
+  icon: Icon,
+}: {
+  icon?: LucideIcon;
+}): React.ReactElement {
+  return (
+    <div className="from-secondary rounded-md border bg-gradient-to-b p-1 shadow-sm">
+      {Icon ? <Icon /> : <TerminalIcon />}
+    </div>
+  );
+}
diff --git a/apps/docs-new/content/docs/dev/authorization.mdx b/apps/docs-new/content/docs/dev/authorization.mdx
@@ -0,0 +1,113 @@
+---
+title: Authorization
+description: How to protect routes with authorization.
+---
+
+## Backend
+
+We're implementing a custom authorization system, which gives us more flexibility and control over the authorization process. Our system use [Guards](https://docs.nestjs.com/guards) from NestJS to protect routes.
+
+### Portected route
+
+To protect a route _(required sign in user)_, you need to add the `@UseGuards(AuthGuards)` decorator to the route.
+
+```ts title="show.resolver.ts"
+import { Args, Query, Resolver } from '@nestjs/graphql';
+import { UseGuards } from '@nestjs/common';
+import { AuthGuards } from 'vitnode-backend'; // [!code highlight]
+
+import { ShowCoreMembersService } from './show.service';
+import { ShowCoreMembersObj } from './dto/show.obj';
+
+@Resolver()
+export class ShowCoreMembersResolver {
+  constructor(private readonly service: ShowCoreMembersService) {}
+
+  @UseGuards(AuthGuards) // [!code highlight]
+  @Query(() => ShowCoreMembersObj)
+  async core_members__show(): Promise<ShowCoreMembersObj> {
+    return this.service.show();
+  }
+}
+```
+
+#### Admin protected route
+
+To protect a route with `admin` permissions, you need to use the `@UseGuards(AdminAuthGuards)` decorator.
+
+```ts title="show.resolver.ts"
+import { Args, Query, Resolver } from '@nestjs/graphql';
+import { UseGuards } from '@nestjs/common';
+import { AdminAuthGuards } from 'vitnode-backend'; // [!code highlight]
+
+import { ShowCoreMembersService } from './show.service';
+import { ShowCoreMembersObj } from './dto/show.obj';
+
+@Resolver()
+export class ShowCoreMembersResolver {
+  constructor(private readonly service: ShowCoreMembersService) {}
+
+  @UseGuards(AdminAuthGuards) // [!code highlight]
+  @Query(() => ShowCoreMembersObj)
+  async core_members__show(): Promise<ShowCoreMembersObj> {
+    return this.service.show();
+  }
+}
+```
+
+### Current user data
+
+Whan you are using `@UseGuards(AuthGuards)` or `@UseGuards(AdminAuthGuards)` you can access to the current user in the resolver by using the `@CurrentUser()` decorator as param route.
+
+```ts title="show.resolver.ts"
+import { Args, Query, Resolver } from '@nestjs/graphql';
+import { UseGuards } from '@nestjs/common';
+import { AuthGuards, CurrentUser, User } from 'vitnode-backend'; // [!code highlight]
+
+import { ShowCoreMembersService } from './show.service';
+import { ShowCoreMembersObj } from './dto/show.obj';
+
+@Resolver()
+export class ShowCoreMembersResolver {
+  constructor(private readonly service: ShowCoreMembersService) {}
+
+  @UseGuards(AuthGuards)
+  @Query(() => ShowCoreMembersObj)
+  async core_members__show(
+    @CurrentUser() user: User, // [!code highlight]
+  ): Promise<ShowCoreMembersObj> {
+    return this.service.show(user);
+  }
+}
+```
+
+### Current user data without protected route
+
+If you need to access to the current user in a route you need use the `@OptionalAuth()` decorator in route. You need change `@CurrentUser()` decorator to optional param route.
+
+```ts title="show.resolver.ts"
+import { Args, Query, Resolver } from '@nestjs/graphql';
+import { UseGuards } from '@nestjs/common';
+import { AuthGuards, CurrentUser, User, OptionalAuth } from 'vitnode-backend'; // [!code highlight]
+
+import { ShowCoreMembersService } from './show.service';
+import { ShowCoreMembersObj } from './dto/show.obj';
+
+@Resolver()
+export class ShowCoreMembersResolver {
+  constructor(private readonly service: ShowCoreMembersService) {}
+
+  @OptionalAuth() // [!code highlight]
+  @UseGuards(AuthGuards)
+  @Query(() => ShowCoreMembersObj)
+  async core_members__show(
+    @CurrentUser() user: User,
+  ): Promise<ShowCoreMembersObj> {
+    return this.service.show(user);
+  }
+}
+```
+
+## Frontend
+
+TODO: Add frontend authorization docs