clients/docs: add initial docs structure

clients/apps/web/src/app/docs/MDXContentWrapper.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react'
+
+export const MDXContentWrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="prose dark:prose-invert [&:not(:first-child)]:prose-headings:mt-16 prose-headings:font-semibold prose-headings:text-black prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-h4:text-xl prose-h5:text-lg prose-h6:text-md dark:prose-headings:text-white dark:text-polar-200 max-w-4xl text-gray-800">
+      {children}
+    </div>
+  )
+}

clients/apps/web/src/app/docs/NavigationItem.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import Link, { LinkProps } from 'next/link'
+import { usePathname } from 'next/navigation'
+import { PropsWithChildren } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export const NaviagtionItem = ({
+  children,
+  icon,
+  className,
+  ...props
+}: PropsWithChildren<
+  LinkProps & { className?: string; icon?: JSX.Element }
+>) => {
+  const pathname = usePathname()
+  const active = pathname.includes(props.href as string)
+
+  return (
+    <Link
+      {...props}
+      className={twMerge(
+        'flex flex-row items-center gap-x-4 transition-colors hover:text-black dark:hover:text-white',
+        active
+          ? 'text-black dark:text-white'
+          : 'dark:text-polar-500 text-gray-500',
+        className,
+      )}
+    >
+      {icon}
+      {children}
+    </Link>
+  )
+}

clients/apps/web/src/app/docs/api/introduction/page.mdx

@@ -0,0 +1 @@
+# Yeah

clients/apps/web/src/app/docs/api/layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+import { MDXContentWrapper } from '../MDXContentWrapper'
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex flex-row items-start gap-x-12">
+      <div className="flex w-full flex-col">
+        <MDXContentWrapper>{children}</MDXContentWrapper>
+      </div>
+      <div className="flex w-80 flex-col">Test</div>
+    </div>
+  )
+}

clients/apps/web/src/app/docs/guides/layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+import { MDXContentWrapper } from '../MDXContentWrapper'
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex flex-row items-start gap-x-12">
+      <div className="flex w-full flex-col">
+        <MDXContentWrapper>{children}</MDXContentWrapper>
+      </div>
+      <div className="flex w-80 flex-col">Test</div>
+    </div>
+  )
+}

clients/apps/web/src/app/docs/layout.tsx

@@ -0,0 +1,80 @@
+import GithubLoginButton from '@/components/Auth/GithubLoginButton'
+import { BrandingMenu } from '@/components/Layout/Public/BrandingMenu'
+import {
+  ApiOutlined,
+  BookmarkOutlined,
+  DescriptionOutlined,
+} from '@mui/icons-material'
+import { UserSignupType } from '@polar-sh/sdk'
+import { Separator } from 'polarkit/components/ui/separator'
+import { PropsWithChildren } from 'react'
+import { NaviagtionItem } from './NavigationItem'
+
+export default async function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex w-full flex-col items-center gap-y-12">
+      <div className="flex h-fit w-full max-w-[100vw] flex-row justify-stretch gap-x-12 px-8 py-12 md:max-w-7xl md:px-12">
+        <div className="flex w-full flex-grow flex-col gap-y-12">
+          <DocumentationPageTopbar />
+          <Separator />
+          <div className="flex flex-row items-start">
+            <div className="flex w-80 flex-col">
+              <ul className="flex flex-col gap-y-2">
+                <li>
+                  <NaviagtionItem
+                    icon={<DescriptionOutlined fontSize="inherit" />}
+                    href="/docs/overview"
+                  >
+                    Overview
+                  </NaviagtionItem>
+                </li>
+                <li>
+                  <NaviagtionItem
+                    icon={<ApiOutlined fontSize="inherit" />}
+                    href="/docs/api"
+                  >
+                    API Reference
+                  </NaviagtionItem>
+                </li>
+                <li>
+                  <NaviagtionItem
+                    icon={<BookmarkOutlined fontSize="inherit" />}
+                    href="/docs/guides"
+                  >
+                    Guides
+                  </NaviagtionItem>
+                </li>
+              </ul>
+            </div>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const DocumentationPageTopbar = () => {
+  return (
+    <div className="relative flex flex-row items-center justify-between bg-transparent">
+      <h1 className="text-xl font-medium">Documentation</h1>
+      <BrandingMenu
+        className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 md:block"
+        logoClassName="dark:text-white"
+        size={50}
+      />
+      <BrandingMenu
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 md:hidden"
+        logoClassName="dark:text-white"
+        size={50}
+      />
+      <div className="flex flex-row items-center gap-x-6">
+        <GithubLoginButton
+          text="Create with Polar"
+          returnTo="/maintainer"
+          userSignupType={UserSignupType.MAINTAINER}
+        />
+      </div>
+    </div>
+  )
+}

clients/apps/web/src/app/docs/overview/introduction/page.mdx

@@ -0,0 +1,9 @@
+# Introduction
+
+Hey! Welcome to the documentation for Polar. :^)
+
+
+* [Issue Funding](/maintainers/issue-funding/)
+* [Posts and Newsletters](/maintainers/posts/)
+* [Pricing, Payment & Taxes](/payment/)
+* [API & GitHub Actions](/api/)

clients/apps/web/src/app/docs/overview/layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+import { MDXContentWrapper } from '../MDXContentWrapper'
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex flex-row items-start gap-x-12">
+      <div className="flex w-full flex-col">
+        <MDXContentWrapper>{children}</MDXContentWrapper>
+      </div>
+      <div className="flex w-80 flex-col">Test</div>
+    </div>
+  )
+}

clients/apps/web/src/components/Layout/Public/BrandingMenu.tsx

@@ -21,10 +21,14 @@ import { twMerge } from 'tailwind-merge'
 
 export const BrandingMenu = ({
   logoVariant = 'icon',
+  size,
   className,
+  logoClassName,
 }: {
   logoVariant?: 'icon' | 'logotype'
+  size?: number
   className?: string
+  logoClassName?: string
 }) => {
   const brandingMenuRef = useRef<HTMLDivElement>(null)
 
@@ -54,11 +58,17 @@ export const BrandingMenu = ({
         <DropdownMenuTrigger onContextMenu={handleTriggerClick}>
           <Link href="/">
             {logoVariant === 'logotype' ? (
-              <LogoType className="-ml-2 md:ml-0" width={100} />
+              <LogoType
+                className={twMerge('-ml-2 md:ml-0', logoClassName)}
+                width={size ?? 100}
+              />
             ) : (
               <LogoIcon
-                className="text-blue-500 dark:text-blue-400"
-                size={42}
+                className={twMerge(
+                  'text-blue-500 dark:text-blue-400',
+                  logoClassName,
+                )}
+                size={size ?? 42}
               />
             )}
           </Link>