diff --git a/.changeset/config.json b/.changeset/config.json index abe15f5fd5..18ab50bc76 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", - "changelog": ["@changesets/changelog-github", { "repo": "shadcn/ui" }], + "changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui" }], "commit": false, "fixed": [], "linked": [], diff --git a/.eslintrc.json b/.eslintrc.json index d58b7822f3..920b86f344 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,10 +16,17 @@ }, "settings": { "tailwindcss": { - "callees": ["cn"] + "callees": ["cn"], + "config": "tailwind.config.cjs" }, "next": { "rootDir": ["apps/*/"] } - } + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "parser": "@typescript-eslint/parser" + } + ] } diff --git a/README.md b/README.md index 66babcd5c7..28e10396fa 100644 --- a/README.md +++ b/README.md @@ -4,42 +4,9 @@ Accessible and customizable components that you can copy and paste into your app ![hero](apps/www/public/og.jpg) -## Roadmap +## Documentation -> **Warning** -> This is work in progress. I'm building this in public. You can follow the progress on Twitter [@shadcn](https://twitter.com/shadcn). - -- [ ] Toggle Group -- [ ] Toolbar -- [x] ~Toast~ -- [x] ~Toggle~ -- [x] ~Navigation Menu~ -- [x] ~Figma~ - -## Get Started - -Starting a new project? Check out the Next.js template. - -```bash -npx create-next-app -e https://github.com/shadcn/next-template -``` - -### Features - -- Radix UI Primitives -- Tailwind CSS -- Fonts with `@next/font` -- Icons from [Lucide](https://lucide.dev) -- Dark mode with `next-themes` -- Automatic import sorting with `@ianvs/prettier-plugin-sort-imports` - -### Tailwind CSS Features - -- Class merging with `tailwind-merge` -- Animation with `tailwindcss-animate` -- Conditional classes with `clsx` -- Variants with `class-variance-authority` -- Automatic class sorting with `eslint-plugin-tailwindcss` +Visit http://ui.shadcn.com/docs to view the documentation. ## License diff --git a/apps/www/.env.example b/apps/www/.env.example index 66fa366697..9ea50f4d73 100644 --- a/apps/www/.env.example +++ b/apps/www/.env.example @@ -1,4 +1,4 @@ # ----------------------------------------------------------------------------- # App # ----------------------------------------------------------------------------- -NEXT_PUBLIC_APP_URL=http://localhost:3000 \ No newline at end of file +NEXT_PUBLIC_APP_URL=http://localhost:3001 diff --git a/apps/www/app/docs/[[...slug]]/head.tsx b/apps/www/app/docs/[[...slug]]/head.tsx deleted file mode 100644 index 1516c7f9d0..0000000000 --- a/apps/www/app/docs/[[...slug]]/head.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { allDocs } from "contentlayer/generated" - -import MdxHead from "@/components/mdx-head" - -interface HeadProps { - params: { - slug: string[] - } -} - -export default function Head({ params }: HeadProps) { - const slug = params?.slug?.join("/") || "" - const doc = allDocs.find((doc) => doc.slugAsParams === slug) - - if (!doc) { - return null - } - - return ( - - ) -} diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx index c08aa2f256..8b18a02ef7 100644 --- a/apps/www/app/docs/[[...slug]]/page.tsx +++ b/apps/www/app/docs/[[...slug]]/page.tsx @@ -2,15 +2,20 @@ import { notFound } from "next/navigation" import { allDocs } from "contentlayer/generated" import "@/styles/mdx.css" +import type { Metadata } from "next" import Link from "next/link" +import { ChevronRight } from "lucide-react" +import Balancer from "react-wrap-balancer" +import { siteConfig } from "@/config/site" import { getTableOfContents } from "@/lib/toc" +import { absoluteUrl, cn } from "@/lib/utils" +import { badgeVariants } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" import { Icons } from "@/components/icons" -import { Mdx } from "@/components/mdx" -import { DocsPageHeader } from "@/components/page-header" +import { Mdx } from "@/components/mdx-components" import { DocsPager } from "@/components/pager" import { DashboardTableOfContents } from "@/components/toc" -import { Separator } from "@/components/ui/separator" interface DocPageProps { params: { @@ -18,6 +23,53 @@ interface DocPageProps { } } +async function getDocFromParams({ params }: DocPageProps) { + const slug = params.slug?.join("/") || "" + const doc = allDocs.find((doc) => doc.slugAsParams === slug) + + if (!doc) { + null + } + + return doc +} + +export async function generateMetadata({ + params, +}: DocPageProps): Promise { + const doc = await getDocFromParams({ params }) + + if (!doc) { + return {} + } + + return { + title: doc.title, + description: doc.description, + openGraph: { + title: doc.title, + description: doc.description, + type: "article", + url: absoluteUrl(doc.slug), + images: [ + { + url: siteConfig.ogImage, + width: 1200, + height: 630, + alt: siteConfig.name, + }, + ], + }, + twitter: { + card: "summary_large_image", + title: doc.title, + description: doc.description, + images: [siteConfig.ogImage], + creator: "@shadcn", + }, + } +} + export async function generateStaticParams(): Promise< DocPageProps["params"][] > { @@ -27,8 +79,7 @@ export async function generateStaticParams(): Promise< } export default async function DocPage({ params }: DocPageProps) { - const slug = params?.slug?.join("/") || "" - const doc = allDocs.find((doc) => doc.slugAsParams === slug) + const doc = await getDocFromParams({ params }) if (!doc) { notFound() @@ -37,41 +88,57 @@ export default async function DocPage({ params }: DocPageProps) { const toc = await getTableOfContents(doc.body.raw) return ( -
+
- - {doc.radix ? ( -
- {doc.radix?.link && ( - - - Radix UI - - )} - {doc.radix?.api && ( - - API Reference - - )} -
- ) : null} - +
+
+ Docs +
+ +
{doc.title}
+
+
+

+ {doc.title} +

+ {doc.description && ( +

+ {doc.description} +

+ )} +
+ {doc.radix ? ( +
+ {doc.radix?.link && ( + + + Radix UI + + )} + {doc.radix?.api && ( + + API Reference + + )} +
+ ) : null} +
-
+
diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx index f134972faa..5d5a5495a2 100644 --- a/apps/www/app/docs/layout.tsx +++ b/apps/www/app/docs/layout.tsx @@ -8,9 +8,9 @@ interface DocsLayoutProps { export default function DocsLayout({ children }: DocsLayoutProps) { return ( -
-