Merge pull request #46 from gaurangrshah/adds-skip-nav

#SHA-14 - Adds skip nav

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

src/app/components/page.tsx

@@ -10,7 +10,10 @@ export const metadata: Metadata = {
 
 export default function ComponentsPage() {
   return (
-    <main className="mx-auto max-w-6xl w-full flex-1 pt-20 space-y-2">
+    <main
+      id="main-content"
+      className="mx-auto max-w-6xl w-full flex-1 pt-20 space-y-2"
+    >
       <div className="px-4 space-y-6 w-full">
         <div className="">
           <h1 className="text-base text-foreground sm:text-2xl font-semibold ">

src/app/docs/[[...slug]]/page.tsx

@@ -63,7 +63,10 @@ export default async function CurrentSlugPage({ params }: DocsPageProps) {
   const toc = await getTableOfContents(doc.body.raw);
 
   return (
-    <main className="grid grid-cols-1 md:grid-cols-3 gap-2 pt-2 pb-3 h-full">
+    <main
+      id="main-content"
+      className="grid grid-cols-1 md:grid-cols-3 gap-2 pt-2 pb-3 h-full"
+    >
       <article className="col-span-1 md:col-span-3 lg:col-span-2 space-y-10">
         <div className="space-y-2 not-prose">
           <DocsBreadcrumb slug={params.slug} />

src/app/layout.tsx

@@ -7,6 +7,9 @@ import { SiteHeader } from "@/components/layouts/site-header";
 import { CSPostHogProvider } from "@/components/analytics";
 import { siteConfig } from "@/config/site-config";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { SkipNav } from "@/components/skip-nav";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -54,6 +57,7 @@ export default function RootLayout({
           "flex flex-col min-h-screen supports-[min-h-[100dvh]]:min-h-[100dvh] scroll-smooth"
         )}
       >
+        <SkipNav />
         <CSPostHogProvider>
           <Provider>
             <SiteHeader />

src/app/page.tsx

@@ -8,7 +8,7 @@ import Balancer from "react-wrap-balancer";
 
 export default async function Home() {
   return (
-    <main className="max-w-2xl mx-auto flex-1 flex flex-col">
+    <main id="main-content" className="max-w-2xl mx-auto flex-1 flex flex-col">
       <section className="flex-1 flex flex-col items-center justify-center gap-4 ">
         <h1
           className="text-center animate-fade-up text-4xl font-extrabold tracking-tight opacity-0 sm:text-5xl md:text-6xl lg:text-7xl"

src/components/skip-nav.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+import { buttonVariants } from "./ui/button";
+import { cn } from "@/lib/utils";
+export const SkipNav = () => {
+  return (
+    <Link
+      className={cn(
+        "absolute left-0 p-3 m-3 transition -translate-y-16 focus:translate-y-0 z-20",
+        buttonVariants({ variant: "ghost" })
+      )}
+      href="#main-content"
+    >
+      Skip Navigation
+    </Link>
+  );
+};