feat(www): site updates (#6854)

* feat(www): site updates * fix: lint * docs: add tailwind notice
2026-06-29 07:34:11 +00:00 · 2025-03-04 16:51:58 +04:00
parent 26dc03b545
commit a7b3dbf121
15 changed files with 106 additions and 91 deletions
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -94,7 +94,9 @@ export default async function DocPage({ params }: DocPageProps) {
    <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
      <div className="mx-auto w-full min-w-0 max-w-2xl">
        <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
-          <div className="truncate">Docs</div>
+          <Link href="/docs" className="truncate">
+            Docs
+          </Link>
          <ChevronRight className="h-3.5 w-3.5" />
          <div className="text-foreground">{doc.title}</div>
        </div>
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -49,10 +49,10 @@ export default function IndexPage() {
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
-          <Button asChild size="sm">
+          <Button asChild size="sm" className="rounded-md">
            <Link href="/docs/installation">Get Started</Link>
          </Button>
-          <Button asChild size="sm" variant="ghost">
+          <Button asChild size="sm" variant="ghost" className="rounded-md">
            <Link href="/blocks">Browse Blocks</Link>
          </Button>
        </PageActions>
--- a/apps/www/components/announcement.tsx
+++ b/apps/www/components/announcement.tsx
@@ -17,7 +17,7 @@ export function Announcement() {
        <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
      </svg>
      <span className="underline-offset-4 group-hover:underline">
-        An update on Tailwind v4
+        Get Started with Tailwind v4
      </span>
      <ArrowRight className="ml-1 h-4 w-4" />
    </Link>
--- a/apps/www/components/docs-nav.tsx
+++ b/apps/www/components/docs-nav.tsx
@@ -16,7 +16,7 @@ export function DocsNav({ config }: { config: DocsConfig }) {
    <div className="flex flex-col gap-6">
      {items.map((item, index) => (
        <div key={index} className="flex flex-col gap-1">
-          <h4 className="rounded-md px-2 py-1 text-sm font-semibold">
+          <h4 className="rounded-md px-2 py-1 text-sm font-medium">
            {item.title}{" "}
            {item.label && (
              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-normal leading-none text-[#000000] no-underline group-hover:no-underline">
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -62,7 +62,7 @@ const components = {
  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h2
      className={cn(
-        "font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
+        "font-heading mt-16 scroll-m-20 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0",
        className
      )}
      {...props}
@@ -71,7 +71,7 @@ const components = {
  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h3
      className={cn(
-        "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
+        "font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
        className
      )}
      {...props}
@@ -112,10 +112,13 @@ const components = {
  ),
  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
    <p
-      className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
+      className={cn("leading-[1.65rem] [&:not(:first-child)]:mt-6", className)}
      {...props}
    />
  ),
+  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <strong className={cn("font-semibold", className)} {...props} />
+  ),
  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
    <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
  ),
@@ -260,7 +263,7 @@ const components = {
  ),
  Steps: ({ ...props }) => (
    <div
-      className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+      className="[&>h3]:step steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8"
      {...props}
    />
  ),
--- a/apps/www/components/mobile-nav.tsx
+++ b/apps/www/components/mobile-nav.tsx
@@ -31,7 +31,7 @@ export function MobileNav() {
      <DrawerTrigger asChild>
        <Button
          variant="ghost"
-          className="-ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="h-8 w-full gap-4 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
@@ -48,9 +48,12 @@ export function MobileNav() {
            />
          </svg>
          <span className="sr-only">Toggle Menu</span>
+          <span className="flex h-8 flex-1 items-center justify-between rounded-md border bg-muted/50 px-2 text-sm font-normal text-muted-foreground shadow-none">
+            Search documentation...
+          </span>
        </Button>
      </DrawerTrigger>
-      <DrawerContent className="max-h-[60svh] p-0">
+      <DrawerContent className="max-h-[80svh] p-0">
        <div className="overflow-auto p-6">
          <div className="flex flex-col space-y-3">
            {docsConfig.mainNav?.map(
@@ -68,8 +71,8 @@ export function MobileNav() {
          </div>
          <div className="flex flex-col space-y-2">
            {docsConfig.sidebarNav.map((item, index) => (
-              <div key={index} className="flex flex-col space-y-3 pt-6">
-                <h4 className="font-medium">{item.title}</h4>
+              <div key={index} className="flex flex-col gap-4 pt-6">
+                <h4 className="text-xl font-medium">{item.title}</h4>
                {item?.items?.length &&
                  item.items.map((item) => (
                    <React.Fragment key={item.href}>
@@ -78,7 +81,7 @@ export function MobileNav() {
                          <MobileLink
                            href={item.href}
                            onOpenChange={setOpen}
-                            className="text-muted-foreground"
+                            className="opacity-80"
                          >
                            {item.title}
                            {item.label && (
@@ -122,7 +125,7 @@ function MobileLink({
        router.push(href.toString())
        onOpenChange?.(false)
      }}
-      className={cn("text-base", className)}
+      className={cn("text-[1.15rem]", className)}
      {...props}
    >
      {children}
--- a/apps/www/components/page-header.tsx
+++ b/apps/www/components/page-header.tsx
@@ -23,7 +23,7 @@ function PageHeaderHeading({
  return (
    <h1
      className={cn(
-        "text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
+        "text-2xl font-bold leading-tight tracking-tighter sm:text-3xl md:text-4xl lg:leading-[1.1]",
        className
      )}
      {...props}
@@ -38,7 +38,7 @@ function PageHeaderDescription({
  return (
    <p
      className={cn(
-        "max-w-2xl text-balance text-lg font-light text-foreground",
+        "max-w-2xl text-balance text-base font-light text-foreground sm:text-lg",
        className
      )}
      {...props}
--- a/apps/www/components/site-header.tsx
+++ b/apps/www/components/site-header.tsx
@@ -12,11 +12,11 @@ export function SiteHeader() {
  return (
    <header className="border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container-wrapper">
-        <div className="container flex h-14 items-center">
+        <div className="container flex h-14 items-center gap-2 md:gap-4">
          <MainNav />
          <MobileNav />
-          <div className="flex flex-1 items-center justify-between gap-2 md:justify-end">
-            <div className="w-full flex-1 md:w-auto md:flex-none">
+          <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
+            <div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
              <CommandMenu />
            </div>
            <nav className="flex items-center gap-0.5">
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -28,7 +28,7 @@ shadcn/ui hands you the actual component code. You have full control to customiz
 _In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly._

 <Accordion collapsible>
-  <AccordionItem value="faq-1">
+  <AccordionItem value="faq-1" className="border-none">
    <AccordionTrigger>
      How do I pull upstream updates in an Open Code approach?
    </AccordionTrigger>
--- a/apps/www/content/docs/tailwind-v4.mdx
+++ b/apps/www/content/docs/tailwind-v4.mdx
@@ -148,6 +148,13 @@ You can test Tailwind v4 + React 19 today using the `canary` release of the CLI.

 ## Upgrade Your Project

+<Callout className="bg-blue-50 mt-6 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Important:** Before upgrading, please read the [Tailwind v4 Compatibility
+  Docs](https://tailwindcss.com/docs/compatibility) and make sure your project
+  is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and
+  is designed for modern browsers.
+</Callout>
+
 One of the major advantages of using `shadcn/ui` is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.

 This means when a dependency has a new release, you can just follow the official upgrade paths.
--- a/apps/www/hooks/use-themes-config.ts
+++ b/apps/www/hooks/use-themes-config.ts
@@ -7,7 +7,7 @@ type ThemesConfig = {
  activeTheme: Theme
 }

-const configAtom = atomWithStorage<ThemesConfig>("themes:config", {
+const configAtom = atomWithStorage<ThemesConfig>("themes:config2", {
  activeTheme: THEMES[0],
 })

--- a/apps/www/lib/themes.ts
+++ b/apps/www/lib/themes.ts
@@ -1,6 +1,73 @@
 import { themeColorsToCssVariables } from "@/lib/charts"

 const _THEMES = [
+  {
+    name: "Sapphire",
+    id: "default-sapphire",
+    colors: {
+      background: "0 0% 100%",
+      foreground: "222.2 84% 4.9%",
+      card: "0 0% 100%",
+      cardForeground: "222.2 84% 4.9%",
+      popover: "0 0% 100%",
+      popoverForeground: "222.2 84% 4.9%",
+      primary: "221.2 83.2% 53.3%",
+      primaryForeground: "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      secondaryForeground: "222.2 47.4% 11.2%",
+      muted: "210 40% 96.1%",
+      mutedForeground: "215.4 16.3% 44%",
+      accent: "210 40% 96.1%",
+      accentForeground: "222.2 47.4% 11.2%",
+      destructive: "0 72% 51%",
+      destructiveForeground: "210 40% 98%",
+      border: "214.3 31.8% 91.4%",
+      input: "214.3 31.8% 91.4%",
+      ring: "221.2 83.2% 53.3%",
+      "chart-1": "221.2 83.2% 53.3%",
+      "chart-2": "212 95% 68%",
+      "chart-3": "216 92% 60%",
+      "chart-4": "210 98% 78%",
+      "chart-5": "212 97% 87%",
+    },
+    colorsDark: {
+      background: "240 10% 3.9%",
+      foreground: "0 0% 98%",
+      card: "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      popover: "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      primary: "221.2 83.2% 53.3%",
+      primaryForeground: "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      secondaryForeground: "222.2 47.4% 11.2%",
+      muted: "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      accent: "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      destructive: "0 72% 51%",
+      destructiveForeground: "210 40% 98%",
+      border: "240 3.7% 15.9%",
+      input: "240 3.7% 15.9%",
+      ring: "221.2 83.2% 53.3%",
+      "chart-1": "221.2 83.2% 53.3%",
+      "chart-2": "212 95% 68%",
+      "chart-3": "216 92% 60%",
+      "chart-4": "210 98% 78%",
+      "chart-5": "212 97% 87%",
+    },
+    fontFamily: {
+      heading: {
+        name: "Inter",
+        type: "sans-serif",
+      },
+      body: {
+        name: "Inter",
+        type: "sans-serif",
+      },
+    },
+    radius: 0.5,
+  },
  {
    name: "Default",
    id: "default-shadcn",
@@ -135,73 +202,6 @@ const _THEMES = [
    },
    radius: 0.5,
  },
-  {
-    name: "Sapphire",
-    id: "default-sapphire",
-    colors: {
-      background: "0 0% 100%",
-      foreground: "222.2 84% 4.9%",
-      card: "0 0% 100%",
-      cardForeground: "222.2 84% 4.9%",
-      popover: "0 0% 100%",
-      popoverForeground: "222.2 84% 4.9%",
-      primary: "221.2 83.2% 53.3%",
-      primaryForeground: "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      secondaryForeground: "222.2 47.4% 11.2%",
-      muted: "210 40% 96.1%",
-      mutedForeground: "215.4 16.3% 44%",
-      accent: "210 40% 96.1%",
-      accentForeground: "222.2 47.4% 11.2%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "210 40% 98%",
-      border: "214.3 31.8% 91.4%",
-      input: "214.3 31.8% 91.4%",
-      ring: "221.2 83.2% 53.3%",
-      "chart-1": "221.2 83.2% 53.3%",
-      "chart-2": "212 95% 68%",
-      "chart-3": "216 92% 60%",
-      "chart-4": "210 98% 78%",
-      "chart-5": "212 97% 87%",
-    },
-    colorsDark: {
-      background: "240 10% 3.9%",
-      foreground: "0 0% 98%",
-      card: "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      popover: "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      primary: "221.2 83.2% 53.3%",
-      primaryForeground: "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      secondaryForeground: "222.2 47.4% 11.2%",
-      muted: "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      accent: "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "210 40% 98%",
-      border: "240 3.7% 15.9%",
-      input: "240 3.7% 15.9%",
-      ring: "221.2 83.2% 53.3%",
-      "chart-1": "221.2 83.2% 53.3%",
-      "chart-2": "212 95% 68%",
-      "chart-3": "216 92% 60%",
-      "chart-4": "210 98% 78%",
-      "chart-5": "212 97% 87%",
-    },
-    fontFamily: {
-      heading: {
-        name: "Inter",
-        type: "sans-serif",
-      },
-      body: {
-        name: "Inter",
-        type: "sans-serif",
-      },
-    },
-    radius: 0.5,
-  },
  {
    name: "Ruby",
    id: "default-ruby",
--- a/apps/www/public/examples/cards-dark.png
+++ b/apps/www/public/examples/cards-dark.png
--- a/apps/www/public/examples/cards-light.png
+++ b/apps/www/public/examples/cards-light.png
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -118,8 +118,8 @@
  }

  .step:before {
-    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-    @apply ml-[-50px] mt-[-4px];
+    @apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
+    @apply md:ml-[-50px] md:mt-[-4px];
    content: counter(step);
  }