\n
\n \n {page.title}\n
\n {page.description && (\n{page.description}
\n )}\n\n
\n
\n
\n \n
\n
\n \n
\n \n \n {children}\n
\n )\n}\n"
},
{
"path": "app/(docs)/guides/[...slug]/page.tsx",
"content": "import Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { allGuides } from \"contentlayer/generated\"\n\nimport { getTableOfContents } from \"@/lib/toc\"\nimport { Icons } from \"@/components/icons\"\nimport { Mdx } from \"@/components/mdx-components\"\nimport { DocsPageHeader } from \"@/components/page-header\"\nimport { DashboardTableOfContents } from \"@/components/toc\"\n\nimport \"@/styles/mdx.css\"\nimport { Metadata } from \"next\"\n\nimport { env } from \"@/env.mjs\"\nimport { absoluteUrl, cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ninterface GuidePageProps {\n params: {\n slug: string[]\n }\n}\n\nasync function getGuideFromParams(params) {\n const slug = params?.slug?.join(\"/\")\n const guide = allGuides.find((guide) => guide.slugAsParams === slug)\n\n if (!guide) {\n null\n }\n\n return guide\n}\n\nexport async function generateMetadata({\n params,\n}: GuidePageProps): Promise\n
\n
\n \n
\n \n
\n \n
\n \n
\n {children}
\n}\n"
},
{
"path": "app/(docs)/guides/page.tsx",
"content": "import Link from \"next/link\"\nimport { allGuides } from \"contentlayer/generated\"\nimport { compareDesc } from \"date-fns\"\n\nimport { formatDate } from \"@/lib/utils\"\nimport { DocsPageHeader } from \"@/components/page-header\"\n\nexport const metadata = {\n title: \"Guides\",\n description:\n \"This section includes end-to-end guides for developing Next.js 13 apps.\",\n}\n\nexport default function GuidesPage() {\n const guides = allGuides\n .filter((guide) => guide.published)\n .sort((a, b) => {\n return compareDesc(new Date(a.date), new Date(b.date))\n })\n\n return (\n \n
\n )\n}\n"
},
{
"path": "app/(docs)/layout.tsx",
"content": "import Link from \"next/link\"\n\nimport { docsConfig } from \"@/config/docs\"\nimport { siteConfig } from \"@/config/site\"\nimport { Icons } from \"@/components/icons\"\nimport { MainNav } from \"@/components/main-nav\"\nimport { DocsSearch } from \"@/components/search\"\nimport { DocsSidebarNav } from \"@/components/sidebar-nav\"\nimport { SiteFooter } from \"@/components/site-footer\"\n\ninterface DocsLayoutProps {\n children: React.ReactNode\n}\n\nexport default function DocsLayout({ children }: DocsLayoutProps) {\n return (\n \n {guides.map((guide) => (\n \n {guide.featured && (\n \n Featured\n \n )}\n
\n ) : (\n \n
\n \n View\n \n \n ))}\n \n
\n {guide.date && (\n \n {guide.title}\n
\n {guide.description && (\n{guide.description}
\n )}\n\n {formatDate(guide.date)}\n
\n )}\nNo guides published.
\n )}\n\n \n \n
\n )\n}\n"
},
{
"path": "app/(editor)/editor/[postId]/loading.tsx",
"content": "import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport default function Loading() {\n return (\n \n \n \n
\n \n
\n \n
\n \n {children}
\n \n
\n )\n}\n"
},
{
"path": "app/(editor)/editor/[postId]/not-found.tsx",
"content": "import Link from \"next/link\"\n\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { EmptyPlaceholder } from \"@/components/empty-placeholder\"\n\nexport default function NotFound() {\n return (\n \n
\n \n
\n \n {children}\n
\n )\n}\n"
},
{
"path": "app/(marketing)/[...slug]/page.tsx",
"content": "import { notFound } from \"next/navigation\"\nimport { allPages } from \"contentlayer/generated\"\n\nimport { Mdx } from \"@/components/mdx-components\"\n\nimport \"@/styles/mdx.css\"\nimport { Metadata } from \"next\"\n\nimport { env } from \"@/env.mjs\"\nimport { siteConfig } from \"@/config/site\"\nimport { absoluteUrl } from \"@/lib/utils\"\n\ninterface PageProps {\n params: {\n slug: string[]\n }\n}\n\nasync function getPageFromParams(params) {\n const slug = params?.slug?.join(\"/\")\n const page = allPages.find((page) => page.slugAsParams === slug)\n\n if (!page) {\n null\n }\n\n return page\n}\n\nexport async function generateMetadata({\n params,\n}: PageProps): Promise\n
\n {post.date && (\n \n Published on {formatDate(post.date)}\n \n )}\n
\n {post.image && (\n \n {post.title}\n
\n {authors?.length ? (\n\n {authors.map((author) =>\n author ? (\n \n
\n ) : null}\n \n
\n \n ) : null\n )}\n {author.title}
\n\n @{author.twitter}\n
\n\n
\n \n
\n \n
\n {posts?.length ? (\n
\n )\n}\n"
},
{
"path": "app/(marketing)/layout.tsx",
"content": "import Link from \"next/link\"\n\nimport { marketingConfig } from \"@/config/marketing\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { MainNav } from \"@/components/main-nav\"\nimport { SiteFooter } from \"@/components/site-footer\"\n\ninterface MarketingLayoutProps {\n children: React.ReactNode\n}\n\nexport default async function MarketingLayout({\n children,\n}: MarketingLayoutProps) {\n return (\n \n
\n \n
\n \n Blog\n
\n\n A blog built using Contentlayer. Posts are written in MDX.\n
\n\n {posts?.length ? (\n
\n {posts.map((post, index) => (\n \n {post.image && (\n
\n ) : (\n {post.title}
\n {post.description && (\n{post.description}
\n )}\n {post.date && (\n\n {formatDate(post.date)}\n
\n )}\n \n View Article\n \n \n ))}\nNo posts published.
\n )}\n\n \n \n {children} \n
\n )\n}\n"
},
{
"path": "app/(marketing)/page.tsx",
"content": "import Link from \"next/link\"\n\nimport { env } from \"@/env.mjs\"\nimport { siteConfig } from \"@/config/site\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nasync function getGitHubStars(): Promise\n
\n \n \n Follow along on Twitter\n \n
\n \n An example app built using Next.js 13 server components.\n
\n\n I'm building a web app with Next.js 13 and open sourcing\n everything. Follow along as we figure this out together.\n
\n\n \n Get Started\n \n \n GitHub\n \n
\n \n
\n \n Features\n
\n\n This project is an experiment to see how a modern app, with features\n like auth, subscriptions, API routes, and static pages would work in\n Next.js 13 app dir.\n
\n\n
\n \n
\n \n \n
\n \n
\n Next.js 13
\n\n App dir, Routing, Layouts, Loading UI and API routes.\n
\n\n
\n \n \n
\n \n
\n React 18
\n\n Server and Client Components. Use hook.\n
\n\n
\n \n \n
\n \n
\n Database
\n\n ORM using Prisma and deployed on PlanetScale.\n
\n\n
\n \n \n
\n \n
\n Components
\n\n UI components built using Radix UI and styled with Tailwind\n CSS.\n
\n\n
\n \n \n
\n \n
\n Authentication
\n\n Authentication using NextAuth.js and middlewares.\n
\n\n
\n \n \n
\n \n
\n Subscriptions
\n\n Free and paid subscriptions using Stripe.\n
\n\n
\n \n \n Taxonomy also includes a blog and a full-featured documentation site\n built using Contentlayer and MDX.\n
\n\n \n
\n \n Proudly Open Source\n
\n\n Taxonomy is open source and powered by open source software.
{\" \"}\n The code is available on{\" \"}\n
\n \n
\n \n \n
\n \n )}\n \n {stars} stars on GitHub\n
\n \n
\n \n Simple, transparent pricing\n
\n\n Unlock all features including unlimited posts for your blog.\n
\n\n
\n \n
\n \n What's included in the PRO plan\n
\n- \n
- \n
Unlimited Posts\n \n - \n
Unlimited Users\n \n\n - \n
Custom domain\n \n - \n
Dashboard Analytics\n \n - \n
Access to Discord\n \n - \n
Premium Support\n \n
\n
\n \n
\n \n Get Started\n \n $19
\n\n Billed Monthly\n
\n\n
\n \n Taxonomy is a demo app.{\" \"}\n You can test the upgrade and won't be charged.\n
\n\n \n {values.type}\n
\n \n \n tx.shadcn.com\n
\n github.com/shadcn/taxonomy
\n \n \n \n ),\n {\n width: 1200,\n height: 630,\n fonts: [\n {\n name: \"Inter\",\n data: fontRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"Cal Sans\",\n data: fontBold,\n weight: 700,\n style: \"normal\",\n },\n ],\n }\n )\n } catch (error) {\n return new Response(`Failed to generate image`, {\n status: 500,\n })\n }\n}\n"
},
{
"path": "app/api/posts/[postId]/route.ts",
"content": "import { getServerSession } from \"next-auth\"\nimport * as z from \"zod\"\n\nimport { authOptions } from \"@/lib/auth\"\nimport { db } from \"@/lib/db\"\nimport { postPatchSchema } from \"@/lib/validations/post\"\n\nconst routeContextSchema = z.object({\n params: z.object({\n postId: z.string(),\n }),\n})\n\nexport async function DELETE(\n req: Request,\n context: z.infer{children}
\n \n )\n}\n"
},
{
"path": "components/card-skeleton.tsx",
"content": "import { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function CardSkeleton() {\n return (\n \n {children}\n
\n \n )\n}\n\ninterface EmptyPlaceholderIconProps\n extends Partial\n
\n )\n}\n\ninterface EmptyPlacholderTitleProps\n extends React.HTMLAttributes\n
\n )\n}\n"
},
{
"path": "components/icons.tsx",
"content": "import {\n AlertTriangle,\n ArrowRight,\n Check,\n ChevronLeft,\n ChevronRight,\n Command,\n CreditCard,\n File,\n FileText,\n HelpCircle,\n Image,\n Laptop,\n Loader2,\n LucideProps,\n Moon,\n MoreVertical,\n Pizza,\n Plus,\n Settings,\n SunMedium,\n Trash,\n Twitter,\n User,\n X,\n type Icon as LucideIcon,\n} from \"lucide-react\"\n\nexport type Icon = LucideIcon\n\nexport const Icons = {\n logo: Command,\n close: X,\n spinner: Loader2,\n chevronLeft: ChevronLeft,\n chevronRight: ChevronRight,\n trash: Trash,\n post: FileText,\n page: File,\n media: Image,\n settings: Settings,\n billing: CreditCard,\n ellipsis: MoreVertical,\n add: Plus,\n warning: AlertTriangle,\n user: User,\n arrowRight: ArrowRight,\n help: HelpCircle,\n pizza: Pizza,\n sun: SunMedium,\n moon: Moon,\n laptop: Laptop,\n gitHub: ({ ...props }: LucideProps) => (\n \n
\n {children}\n {heading}
\n {text &&{text}
}\n\n \n setShowMobileMenu(!showMobileMenu)}\n >\n {showMobileMenu ? {children} \n )}\n
\n )\n}\n"
},
{
"path": "components/mdx-card.tsx",
"content": "import Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface CardProps extends React.HTMLAttributes\n
\n {href && (\n \n View\n \n )}\n \n )\n}\n"
},
{
"path": "components/mdx-components.tsx",
"content": "import * as React from \"react\"\nimport Image from \"next/image\"\nimport { useMDXComponent } from \"next-contentlayer/hooks\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Callout } from \"@/components/callout\"\nimport { MdxCard } from \"@/components/mdx-card\"\n\nconst components = {\n h1: ({ className, ...props }) => (\n h3]:!mt-0 [&>h4]:!mt-0 [&>p]:text-muted-foreground\">\n {children}\n
\n ,\n table: ({ className, ...props }: React.HTMLAttributes
\n
\n
\n ),\n tr: ({ className, ...props }: React.HTMLAttributes\n
\n )\n}\n"
},
{
"path": "components/mobile-nav.tsx",
"content": "import * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { MainNavItem } from \"types\"\nimport { siteConfig } from \"@/config/site\"\nimport { cn } from \"@/lib/utils\"\nimport { useLockBody } from \"@/hooks/use-lock-body\"\nimport { Icons } from \"@/components/icons\"\n\ninterface MobileNavProps {\n items: MainNavItem[]\n children?: React.ReactNode\n}\n\nexport function MobileNav({ items, children }: MobileNavProps) {\n useLockBody()\n\n return (\n \n \n
\n \n )\n}\n"
},
{
"path": "components/mode-toggle.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Icons } from \"@/components/icons\"\n\nexport function ModeToggle() {\n const { setTheme } = useTheme()\n\n return (\n \n
\n \n {heading}\n
\n {text &&{text}
}\n\n \n )\n}\n" }, { "path": "components/pager.tsx", "content": "import Link from \"next/link\"\nimport { Doc } from \"contentlayer/generated\"\n\nimport { docsConfig } from \"@/config/docs\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { Icons } from \"@/components/icons\"\n\ninterface DocsPagerProps {\n doc: Doc\n}\n\nexport function DocsPager({ doc }: DocsPagerProps) {\n const pager = getPagerForDoc(doc)\n\n if (!pager) {\n return null\n }\n\n return (\n
\n {pager?.prev && (\n \n \n {pager.next.title}\n
\n )\n}\n\nexport function getPagerForDoc(doc: Doc) {\n const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]\n const activeIndex = flattenedLinks.findIndex(\n (link) => doc.slug === link?.href\n )\n const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null\n const next =\n activeIndex !== flattenedLinks.length - 1\n ? flattenedLinks[activeIndex + 1]\n : null\n return {\n prev,\n next,\n }\n}\n\nexport function flatten(links: { items? }[]) {\n return links.reduce((flat, link) => {\n return flat.concat(link.items ? flatten(link.items) : link)\n }, [])\n}\n"
},
{
"path": "components/post-create-button.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useRouter } from \"next/navigation\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/components/ui/button\"\nimport { toast } from \"@/components/ui/use-toast\"\nimport { Icons } from \"@/components/icons\"\n\ninterface PostCreateButtonProps extends ButtonProps {}\n\nexport function PostCreateButton({\n className,\n variant,\n ...props\n}: PostCreateButtonProps) {\n const router = useRouter()\n const [isLoading, setIsLoading] = React.useState\n
\n )\n}\n\nPostItem.Skeleton = function PostItemSkeleton() {\n return (\n \n \n {post.title}\n \n
\n \n
\n \n {formatDate(post.createdAt?.toDateString())}\n
\n\n
\n )\n}\n"
},
{
"path": "components/post-operations.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { useRouter } from \"next/navigation\"\nimport { Post } from \"@prisma/client\"\n\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { toast } from \"@/components/ui/use-toast\"\nimport { Icons } from \"@/components/icons\"\n\nasync function deletePost(postId: string) {\n const response = await fetch(`/api/posts/${postId}`, {\n method: \"DELETE\",\n })\n\n if (!response?.ok) {\n toast({\n title: \"Something went wrong.\",\n description: \"Your post was not deleted. Please try again.\",\n variant: \"destructive\",\n })\n }\n\n return true\n}\n\ninterface PostOperationsProps {\n post: Pick\n
\n \n {children}\n
\n )\n}\n"
},
{
"path": "components/sidebar-nav.tsx",
"content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\n\nimport { SidebarNavItem } from \"types\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DocsSidebarNavProps {\n items: SidebarNavItem[]\n}\n\nexport function DocsSidebarNav({ items }: DocsSidebarNavProps) {\n const pathname = usePathname()\n\n return items.length ? (\n \n {items.map((item, index) => (\n
\n ) : null\n}\n\ninterface DocsSidebarNavItemsProps {\n items: SidebarNavItem[]\n pathname: string | null\n}\n\nexport function DocsSidebarNavItems({\n items,\n pathname,\n}: DocsSidebarNavItemsProps) {\n return items?.length ? (\n \n
\n ))}\n \n {item.title}\n
\n {item.items ? (\n\n {items.map((item, index) =>\n !item.disabled && item.href ? (\n \n {item.title}\n \n ) : (\n \n {item.title}\n \n )\n )}\n
\n ) : null\n}\n"
},
{
"path": "components/site-footer.tsx",
"content": "import * as React from \"react\"\n\nimport { siteConfig } from \"@/config/site\"\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport { ModeToggle } from \"@/components/mode-toggle\"\n\nexport function SiteFooter({ className }: React.HTMLAttributes\n
\n )\n}\n"
},
{
"path": "components/theme-provider.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\nimport { ThemeProviderProps } from \"next-themes/dist/types\"\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n return xs
\n \n sm\n
\n md
\n lg
\n xl
\n 2xl
\n \n
\n ) : null\n}\n\nfunction useActiveItem(itemIds: (string | undefined)[]) {\n const [activeId, setActiveId] = React.useStateOn This Page
\n- \n {tree.items.map((item, index) => {\n return (\n
- \n
\n ) : null}\n \n )\n })}\n
{children}
\n \n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
},
{
"path": "components/ui/alert-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n className,\n children,\n ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n \n {children}\n
\n \n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef\n {children}\n
\n \n
\n))\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef{children}
\n