From bed277c54d9f31c6289cfd4477bbdb0f20481b41 Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 6 Nov 2024 17:03:28 +0400 Subject: [PATCH 01/12] feat( www): minor updates (#5749) * feat(www): update mode switcher * feat(www): update layout * feat(www): update theme-color handling * fix(www): docs pages --- apps/www/app/(app)/blocks/layout.tsx | 10 +- apps/www/app/(app)/charts/layout.tsx | 10 +- apps/www/app/(app)/colors/layout.tsx | 10 +- apps/www/app/(app)/docs/[[...slug]]/page.tsx | 4 +- apps/www/app/(app)/docs/layout.tsx | 16 +- apps/www/app/(app)/examples/layout.tsx | 19 +- apps/www/app/(app)/layout.tsx | 10 +- apps/www/app/(app)/page.tsx | 44 ++-- apps/www/app/(app)/themes/layout.tsx | 52 +++++ apps/www/app/(app)/themes/page.tsx | 43 +--- apps/www/app/(app)/themes/tabs.tsx | 65 +----- apps/www/app/layout.tsx | 22 +- apps/www/components/announcement.tsx | 8 +- apps/www/components/mobile-nav.tsx | 48 ++--- apps/www/components/mode-switcher.tsx | 35 ++++ apps/www/components/page-header.tsx | 4 +- apps/www/components/site-footer.tsx | 2 +- apps/www/components/site-header.tsx | 51 ++--- apps/www/components/theme-customizer.tsx | 207 ++++--------------- apps/www/config/docs.ts | 4 + apps/www/config/site.ts | 5 + apps/www/hooks/use-meta-color.ts | 25 +++ apps/www/package.json | 2 +- apps/www/styles/globals.css | 18 +- pnpm-lock.yaml | 18 +- 25 files changed, 321 insertions(+), 411 deletions(-) create mode 100644 apps/www/app/(app)/themes/layout.tsx create mode 100644 apps/www/components/mode-switcher.tsx create mode 100644 apps/www/hooks/use-meta-color.ts diff --git a/apps/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx index 8b35b010986..ec60c527fd3 100644 --- a/apps/www/app/(app)/blocks/layout.tsx +++ b/apps/www/app/(app)/blocks/layout.tsx @@ -21,7 +21,7 @@ export default function BlocksLayout({ children: React.ReactNode }) { return ( -
+
Building Blocks for the Web @@ -42,9 +42,11 @@ export default function BlocksLayout({ -
- {children} -
+
+
+ {children} +
+
) } diff --git a/apps/www/app/(app)/charts/layout.tsx b/apps/www/app/(app)/charts/layout.tsx index bf41aa3da8f..e3ad0a62cb9 100644 --- a/apps/www/app/(app)/charts/layout.tsx +++ b/apps/www/app/(app)/charts/layout.tsx @@ -22,7 +22,7 @@ export default function ChartsLayout({ children: React.ReactNode }) { return ( -
+
Beautiful Charts @@ -38,9 +38,11 @@ export default function ChartsLayout({ -
- {children} -
+
+
+ {children} +
+
) } diff --git a/apps/www/app/(app)/colors/layout.tsx b/apps/www/app/(app)/colors/layout.tsx index 12211f05d5a..f3fb9731952 100644 --- a/apps/www/app/(app)/colors/layout.tsx +++ b/apps/www/app/(app)/colors/layout.tsx @@ -21,7 +21,7 @@ export default function ColorsLayout({ children: React.ReactNode }) { return ( -
+
Tailwind Colors @@ -37,9 +37,11 @@ export default function ColorsLayout({ -
- {children} -
+
+
+ {children} +
+
) } diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index ed95548fe0f..ddc585bb1da 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx @@ -138,10 +138,10 @@ export default async function DocPage({ params }: DocPageProps) {
- +
{doc.toc && } - +
diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx index 234ab4fbe1f..9f2e411fae6 100644 --- a/apps/www/app/(app)/docs/layout.tsx +++ b/apps/www/app/(app)/docs/layout.tsx @@ -8,15 +8,13 @@ interface DocsLayoutProps { export default function DocsLayout({ children }: DocsLayoutProps) { return ( -
-
- - {children} -
+
+ + {children}
) } diff --git a/apps/www/app/(app)/examples/layout.tsx b/apps/www/app/(app)/examples/layout.tsx index 1988b8b6f4b..d1fa73afc6d 100644 --- a/apps/www/app/(app)/examples/layout.tsx +++ b/apps/www/app/(app)/examples/layout.tsx @@ -1,7 +1,6 @@ import { Metadata } from "next" import Link from "next/link" -import { cn } from "@/lib/utils" import { Announcement } from "@/components/announcement" import { ExamplesNav } from "@/components/examples-nav" import { @@ -10,7 +9,7 @@ import { PageHeaderDescription, PageHeaderHeading, } from "@/components/page-header" -import { Button, buttonVariants } from "@/registry/new-york/ui/button" +import { Button } from "@/registry/new-york/ui/button" export const metadata: Metadata = { title: "Examples", @@ -23,7 +22,7 @@ interface ExamplesLayoutProps { export default function ExamplesLayout({ children }: ExamplesLayoutProps) { return ( -
+
@@ -43,12 +42,14 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) { -
- -
- {children} -
-
+
+
+ +
+ {children} +
+
+
) } diff --git a/apps/www/app/(app)/layout.tsx b/apps/www/app/(app)/layout.tsx index c8400c0cfd7..844aee65a1f 100644 --- a/apps/www/app/(app)/layout.tsx +++ b/apps/www/app/(app)/layout.tsx @@ -7,10 +7,12 @@ interface AppLayoutProps { export default function AppLayout({ children }: AppLayoutProps) { return ( -
- -
{children}
- +
+
+ +
{children}
+ +
) } diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx index 1233e49201c..586bbd547da 100644 --- a/apps/www/app/(app)/page.tsx +++ b/apps/www/app/(app)/page.tsx @@ -15,7 +15,7 @@ import { Button } from "@/registry/new-york/ui/button" export default function IndexPage() { return ( -
+
Build your component library @@ -38,26 +38,28 @@ export default function IndexPage() { - -
- Cards - Cards -
-
- -
+
+ +
+ Cards + Cards +
+
+ +
+
) } diff --git a/apps/www/app/(app)/themes/layout.tsx b/apps/www/app/(app)/themes/layout.tsx new file mode 100644 index 00000000000..ed57d2c8f33 --- /dev/null +++ b/apps/www/app/(app)/themes/layout.tsx @@ -0,0 +1,52 @@ +import { Metadata } from "next" + +import { Announcement } from "@/components/announcement" +import { + PageActions, + PageHeader, + PageHeaderDescription, + PageHeaderHeading, +} from "@/components/page-header" +import { ThemeCustomizer } from "@/components/theme-customizer" +import { ThemeWrapper } from "@/components/theme-wrapper" + +export const metadata: Metadata = { + title: "Themes", + description: "Hand-picked themes that you can copy and paste into your apps.", +} + +export default function ThemesLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( +
+ + + + + Add colors. Make it yours. + + + Make it yours + + + Hand-picked themes that you can copy and paste into your apps. + + + + + + +
+
+ {children} +
+
+
+ ) +} diff --git a/apps/www/app/(app)/themes/page.tsx b/apps/www/app/(app)/themes/page.tsx index 39d3436da29..6ff9965a3ad 100644 --- a/apps/www/app/(app)/themes/page.tsx +++ b/apps/www/app/(app)/themes/page.tsx @@ -1,46 +1,7 @@ -import { Metadata } from "next" - -import "public/registry/themes.css" -import { Announcement } from "@/components/announcement" -import { - PageActions, - PageHeader, - PageHeaderDescription, - PageHeaderHeading, -} from "@/components/page-header" -import { ThemeCustomizer } from "@/components/theme-customizer" -import { ThemeWrapper } from "@/components/theme-wrapper" import { ThemesTabs } from "@/app/(app)/themes/tabs" -export const metadata: Metadata = { - title: "Themes", - description: "Hand-picked themes that you can copy and paste into your apps.", -} +import "public/registry/themes.css" export default function ThemesPage() { - return ( -
- - - - - Add colors. Make it yours. - - - Make it yours - - - Hand-picked themes that you can copy and paste into your apps. - - - - - - - -
- ) + return } diff --git a/apps/www/app/(app)/themes/tabs.tsx b/apps/www/app/(app)/themes/tabs.tsx index 3a6fbd684ae..1ec6c5cc7cd 100644 --- a/apps/www/app/(app)/themes/tabs.tsx +++ b/apps/www/app/(app)/themes/tabs.tsx @@ -1,73 +1,14 @@ -"use client" - import * as React from "react" -import { useConfig } from "@/hooks/use-config" import { ThemeWrapper } from "@/components/theme-wrapper" -import CardsDefault from "@/registry/default/example/cards" -import { Skeleton } from "@/registry/default/ui/skeleton" import CardsNewYork from "@/registry/new-york/example/cards" export function ThemesTabs() { - const [mounted, setMounted] = React.useState(false) - const [config] = useConfig() - - React.useEffect(() => { - setMounted(true) - }, []) - return (
- {!mounted ? ( -
-
- -
- -
- -
-
- -
-
-
-
- - - -
-
- - -
- -
-
-
-
-
-
- -
- -
-
- -
-
-
- -
- -
-
- ) : ( - - {config.style === "new-york" && } - {config.style === "default" && } - - )} + + +
) } diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index c3f046e9656..bf15a207050 100644 --- a/apps/www/app/layout.tsx +++ b/apps/www/app/layout.tsx @@ -1,7 +1,7 @@ import "@/styles/globals.css" import { Metadata, Viewport } from "next" -import { siteConfig } from "@/config/site" +import { META_THEME_COLORS, siteConfig } from "@/config/site" import { fontSans } from "@/lib/fonts" import { cn } from "@/lib/utils" import { Analytics } from "@/components/analytics" @@ -65,10 +65,7 @@ export const metadata: Metadata = { } export const viewport: Viewport = { - themeColor: [ - { media: "(prefers-color-scheme: light)", color: "white" }, - { media: "(prefers-color-scheme: dark)", color: "black" }, - ], + themeColor: META_THEME_COLORS.light, } interface RootLayoutProps { @@ -79,7 +76,19 @@ export default function RootLayout({ children }: RootLayoutProps) { return ( <> - + +