Improved accessibility and Fixed main nav active states (#110)

Co-authored-by: Julius Marminge <julius0216@outlook.com>
t3-oss · Aug 17, 2023 · 32222dc · 32222dc · vercel · Aug 17, 2023
1 parent 8738a6d
commit 32222dc
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 70 deletions.
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -20,7 +20,7 @@ export default withMdx({
         rehypePrettyCode,
         /** @type {import("rehype-pretty-code").Options} */
         ({
-          theme: { dark: "one-dark-pro", light: "github-light" },
+          theme: { dark: "one-dark-pro", light: "min-light" },
           getHighlighter,
           onVisitLine(node) {
             // Prevent lines from collapsing in `display: grid` mode, and allow empty

diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 export default function DocsLayout(props: { children: ReactNode }) {
   return (
     <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[256px_minmax(0,1fr)] lg:gap-10">
-      <aside className="fixed top-14 z-30 -ml-2 -mr-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
+      <aside className="fixed top-[4.0625rem] z-30 -ml-2 -mr-2 hidden h-[calc(100vh-4.0625rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
         <ScrollArea className="py-6 pr-4 lg:py-8">
           <DocsSidebarNav items={siteConfig.sidebarNav} />
         </ScrollArea>

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -43,10 +43,23 @@ export const metadata: Metadata = {
     apple: "/apple-touch-icon.png",
   },
   openGraph: {
-    images: [{ url: "/opengraph-image.png" }],
+    type: "website",
+    locale: "en_US",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [
+      {
+        url: "/opengraph-image.png",
+        width: 910,
+        height: 455,
+        alt: siteConfig.name,
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
     images: [{ url: "/opengraph-image.png" }],
   },
 };

diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -7,7 +7,7 @@ import { Icons } from "@/components/icons";
 
 export default function IndexPage() {
   return (
-    <section className="container flex flex-col justify-center overflow-hidden items-center min-h-[calc(100vh-4rem)] gap-6 pb-8 pt-6 md:py-10">
+    <section className="container flex flex-col justify-center overflow-hidden items-center min-h-[calc(100vh-4.0625rem)] gap-6 pb-8 pt-6 md:py-10">
       <div className="max-w-5xl space-y-8">
         <h1
           className="font-cal animate-fade-up bg-gradient-to-br from-indigo-700 via-accent-foreground to-fuchsia-500 bg-clip-text text-center text-5xl/[3rem] font-bold text-transparent opacity-0 drop-shadow-sm md:text-7xl/[5rem]"
@@ -22,7 +22,7 @@ export default function IndexPage() {
           </Balancer>
         </h1>
         <p
-          className="animate-fade-up text-center text-muted-foreground/80 opacity-0 md:text-xl"
+          className="animate-fade-up text-center dark:text-muted-foreground/80 text-muted-foreground opacity-0 md:text-xl"
           style={{ animationDelay: "0.30s", animationFillMode: "forwards" }}
         >
           <Balancer>{siteConfig.description}</Balancer>
@@ -44,7 +44,7 @@ export default function IndexPage() {
             className={buttonVariants({ variant: "outline", size: "lg" })}
           >
             <Icons.gitHub className="mr-1 h-4 w-4" />
-            GitHub
+            <span>GitHub</span>
           </Link>
         </div>
       </div>

diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 import { cn } from "@/lib/cn";
 import { Icons } from "@/components/icons";
-import { usePathname } from "next/navigation";
+import { useSelectedLayoutSegment } from "next/navigation";
 
 export interface NavItem {
   title: string;
@@ -17,30 +17,31 @@ export interface NavItem {
 }
 
 export function MainNav(props: { items: NavItem[] }) {
-  const pathname = usePathname();
+  const segment = useSelectedLayoutSegment();
+
+  const isActive = (href: string) => {
+    if (!segment) return false;
+    return href.startsWith(`/${segment}`);
+  };
 
   return (
-    <div className="flex gap-6 md:gap-10">
-      {props.items?.length ? (
-        <nav className="hidden gap-6 md:flex">
-          {props.items?.map(
-            (item, index) =>
-              item.href && (
-                <Link
-                  key={index}
-                  href={item.href}
-                  className={cn(
-                    "text-muted-foreground flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background hover:bg-accent hover:text-accent-foreground h-9 px-3",
-                    item.disabled && "cursor-not-allowed opacity-80",
-                    item.href === pathname && "text-foreground"
-                  )}
-                >
-                  {item.title}
-                </Link>
-              )
-          )}
-        </nav>
-      ) : null}
-    </div>
+    <nav className="hidden md:flex md:items-center md:space-x-6">
+      {props.items?.map(
+        (item) =>
+          item.href && (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "text-foreground/60 text-sm font-medium transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background rounded-md",
+                item.disabled && "cursor-not-allowed opacity-80",
+                isActive(item.href) && "text-foreground"
+              )}
+            >
+              {item.title}
+            </Link>
+          )
+      )}
+    </nav>
   );
 }
diff --git a/docs/src/components/mobile-nav.tsx b/docs/src/components/mobile-nav.tsx
@@ -34,12 +34,14 @@ export function MobileDropdown(props: {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="mr-2 px-0 hamburger space-x-2 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          size="icon"
+          className="hamburger focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <Icons.menu className={cn("h-6 w-6", isOpen && "open")} />
+          <span className="sr-only">Menu</span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="z-40 mt-2 h-[calc(100vh-4rem)] w-screen bg-background animate-none rounded-none border-none transition-transform md:hidden">
+      <PopoverContent className="z-40 mt-2 h-[calc(100vh-4.0625rem)] w-screen bg-background animate-none rounded-none border-none transition-transform md:hidden">
         <ScrollArea className="pb-8">
           {props.items.docs.map((item, index) => (
             <div key={index} className="flex flex-col space-y-3 pt-6">

diff --git a/docs/src/components/site-header.tsx b/docs/src/components/site-header.tsx
@@ -9,50 +9,52 @@ import { MobileDropdown } from "@/components/mobile-nav";
 
 export function SiteHeader() {
   return (
-    <header className="bg-background sticky top-0 z-50 w-full border-b">
-      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-        <Link href="/" className="items-center space-x-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring ring-offset-background flex h-9 mr-3 px-3">
-          <Icons.logo className="h-6 w-6" />
-          <span className="font-bold text-lg">
-            {siteConfig.name}
-          </span>
-        </Link>
-
-        <MainNav items={siteConfig.mainNav} />
-        <div className="flex flex-1 items-center justify-end space-x-4">
-          <nav className="flex items-center space-x-1">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-              className={buttonVariants({
-                size: "sm",
-                variant: "ghost",
-              })}
-            >
-              <Icons.gitHub className="h-5 w-5" />
-              <span className="sr-only">GitHub</span>
-            </Link>
-            {/* <Link
+    <header className="bg-background/90 sticky top-0 z-50 w-full border-b backdrop-blur">
+      <div className="container h-16 flex items-center justify-between">
+        <div className="flex items-center space-x-6">
+          <Link
+            href="/"
+            className="flex items-center space-x-2 rounded-md h-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring ring-offset-background"
+          >
+            <Icons.logo className="h-6 w-6" />
+            <span className="font-medium text-2xl leading-none">
+              {siteConfig.name}
+            </span>
+          </Link>
+          <MainNav items={siteConfig.mainNav} />
+        </div>
+        <div className="flex items-center space-x-2 md:space-x-4">
+          <Link
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+            className={buttonVariants({
+              size: "icon",
+              variant: "ghost",
+            })}
+          >
+            <Icons.gitHub className="h-6 w-6" />
+            <span className="sr-only">GitHub</span>
+          </Link>
+          {/* <Link
               href={siteConfig.links.twitter}
               target="_blank"
               rel="noreferrer"
             >
               <div
                 className={buttonVariants({
-                  size: "sm",
+                  size: "icon",
                   variant: "ghost",
                 })}
               >
-                <Icons.twitter className="h-5 w-5 fill-current" />
+                <Icons.twitter className="h-6 w-6 fill-current" />
                 <span className="sr-only">Twitter</span>
               </div>
             </Link> */}
-            <ThemeToggle />
-            <MobileDropdown
-              items={{ main: siteConfig.mainNav, docs: siteConfig.sidebarNav }}
-            />
-          </nav>
+          <ThemeToggle />
+          <MobileDropdown
+            items={{ main: siteConfig.mainNav, docs: siteConfig.sidebarNav }}
+          />
         </div>
       </div>
     </header>

diff --git a/docs/src/components/theme-toggle.tsx b/docs/src/components/theme-toggle.tsx
@@ -12,11 +12,11 @@ export function ThemeToggle() {
   return (
     <Button
       variant="ghost"
-      size="sm"
+      size="icon"
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
     >
-      <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <Icons.sun className="rotate-0 scale-100 w-6 h-6 transition-all dark:-rotate-90 dark:scale-0" />
+      <Icons.moon className="absolute rotate-90 w-6 h-6 scale-0 transition-all dark:rotate-0 dark:scale-100" />
       <span className="sr-only">Toggle theme</span>
     </Button>
   );

diff --git a/docs/src/components/ui/button.tsx b/docs/src/components/ui/button.tsx
@@ -19,9 +19,10 @@ const buttonVariants = cva(
         link: "underline-offset-4 hover:underline text-primary",
       },
       size: {
+        lg: "h-11 px-8 rounded-md",
         default: "h-10 py-2 px-4",
         sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {

diff --git a/docs/src/styles/globals.css b/docs/src/styles/globals.css
@@ -7,8 +7,8 @@
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 270 20% 98%;
+    --muted-foreground: 252 5% 40.7%;
 
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;

diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
@@ -105,5 +105,8 @@ export default {
       },
     },
   },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [require("tailwindcss-animate")],
 } satisfies Config;