docs: fix layout

adrian-ub · Nov 7, 2024 · 603080b · 603080b
1 parent 582ccf1
commit 603080b
Show file tree

Hide file tree

Showing 21 changed files with 338 additions and 262 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -24,6 +24,8 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.2",
     "@astrojs/ts-plugin": "^1.10.4",
+    "@fontsource/geist-mono": "^5.1.0",
+    "@fontsource/geist-sans": "^5.1.0",
     "@ng-icons/core": "^29.5.0",
     "@ng-icons/lucide": "^29.5.0",
     "@ng-icons/radix-icons": "^29.5.0",

diff --git a/docs/public/fonts/GeistVariableVF.woff2 b/docs/public/fonts/GeistVariableVF.woff2
diff --git a/docs/src/components/Announcement.astro b/docs/src/components/Announcement.astro
@@ -0,0 +1,22 @@
+---
+
+---
+
+<a href="/docs/components/sonner" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
+  <span class="underline-offset-4 group-hover:underline"> New sonner component </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-arrow-right ml-1 h-4 w-4"
+  >
+    <path d="M5 12h14"></path>
+    <path d="m12 5 7 7-7 7"></path>
+  </svg>
+</a>
diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
diff --git a/docs/src/components/Logo.astro b/docs/src/components/Logo.astro
@@ -15,7 +15,8 @@ const { class: className, ...rest } = Astro.props
     stroke="url(#paint1_linear_1284_572)"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="16"></line>
+    stroke-width="32"></line>
+
   <line
     x1="192"
     y1="40"
@@ -25,7 +26,7 @@ const { class: className, ...rest } = Astro.props
     stroke="url(#paint3_linear_1284_572)"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="16"></line>
+    stroke-width="32"></line>
 
   <defs xmlns="http://www.w3.org/2000/svg">
     <linearGradient

diff --git a/docs/src/components/Navbar.astro → docs/src/components/MainNav.astro b/docs/src/components/Navbar.astro → docs/src/components/MainNav.astro
@@ -12,11 +12,11 @@ const { pathname } = Astro.props
 ---
 
 <div class="mr-4 hidden md:flex">
-  <a href="/" class="mr-6 flex items-center space-x-2">
+  <a href="/" class="mr-4 flex items-center space-x-2 lg:mr-6">
     <Logo class="h-6 w-6" />
     <span class="hidden font-bold sm:inline-block">{siteConfig.title}</span>
   </a>
-  <nav class="flex items-center space-x-6 text-sm font-medium">
+  <nav class="flex items-center gap-4 text-sm xl:gap-6">
     {
       docsConfig.mainNav.map((item) => (
         <a
@@ -27,7 +27,7 @@ const { pathname } = Astro.props
               (item.href === '/docs/components/accordion' && pathname.startsWith('/docs/components')) ||
               (item.href === '/examples/cards' && pathname.startsWith('/examples'))
               ? 'text-foreground'
-              : 'opacity-60',
+              : 'text-foreground/60',
           )}
         >
           {item.title}

diff --git a/docs/src/components/MobileNavbar.astro → docs/src/components/MobileNav.astro b/docs/src/components/MobileNavbar.astro → docs/src/components/MobileNav.astro
@@ -1,6 +1,4 @@
 ---
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/registry/new-york/ui/button'
 import Logo from './Logo.astro'
 import { siteConfig } from '@/config/site'
 import { docsConfig } from '@/config/docs'

diff --git a/docs/src/components/ModeToggle.astro → docs/src/components/ModeSwitcher.astro b/docs/src/components/ModeToggle.astro → docs/src/components/ModeSwitcher.astro
diff --git a/docs/src/components/PageNavigation.astro → docs/src/components/Pager.astro b/docs/src/components/PageNavigation.astro → docs/src/components/Pager.astro
@@ -36,36 +36,42 @@ const pager = getPagerForDoc(pathname)
 <div class="flex flex-row items-center justify-between">
   {
     pager.prev?.href ? (
-      <a class={buttonVariants({ variant: 'outline' })} href={pager.prev?.href}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" viewBox="0 0 24 24">
-          <path
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="m15 6l-6 6l6 6"
-          />
-          <title>Previous page</title>
+      <a class={buttonVariants({ variant: 'ghost' })} href={pager.prev?.href}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-chevron-left w-4 h-4"
+        >
+          <path d="m15 18-6-6 6-6" />
         </svg>
         {pager.prev.title}
       </a>
     ) : null
   }
   {
     pager.next?.href ? (
-      <a class={cn(buttonVariants({ variant: 'outline' }), 'ml-auto')} href={pager.next?.href}>
+      <a class={cn(buttonVariants({ variant: 'ghost' }), 'ml-auto')} href={pager.next?.href}>
         {pager.next.title}
-        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" viewBox="0 0 24 24">
-          <path
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="m9 6l6 6l-6 6"
-          />
-          <title>Next page</title>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-chevron-right w-4 h-4"
+        >
+          <path d="m9 18 6-6-6-6" />
         </svg>
       </a>
     ) : null

diff --git a/docs/src/components/Sidebar.astro → docs/src/components/SidebarNav.astro b/docs/src/components/Sidebar.astro → docs/src/components/SidebarNav.astro
@@ -10,52 +10,46 @@ const { pathname } = Astro.props
     docsConfig.sidebarNav.map((item) => (
       <div class="pb-4">
         <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">{item.title}</h4>
-        <div class="grid grid-flow-row auto-rows-max text-sm">
+        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
           {item.items.map((subItem) =>
-            subItem.disabled ? (
-              <span
+            subItem.href && !subItem.disabled ? (
+              <a
+                href={subItem.href}
                 class={cn(
-                  'flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline',
+                  'group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline',
                   subItem.disabled && 'cursor-not-allowed opacity-60',
+                  pathname === subItem.href ? 'underline' : '',
                 )}
               >
                 {subItem.title}
                 {subItem.label && (
                   <span
                     class={cn(
-                      'ml-2 rounded-md bg-lime-600/10 px-2 py-1 text-xs leading-none text-lime-600 no-underline ring-1 ring-inset ring-lime-600/20 group-hover:no-underline dark:bg-lime-500/10 dark:text-lime-500 dark:ring-lime-500/20',
-                      subItem.label === 'Soon' && 'bg-muted text-muted-foreground',
-                      subItem.label === 'Updated' &&
-                        'bg-blue-600/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20',
+                      'ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline',
                     )}
                   >
                     {subItem.label}
                   </span>
                 )}
-              </span>
+              </a>
             ) : (
-              <a
-                href={subItem.href}
+              <span
                 class={cn(
-                  'flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline',
+                  'flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline',
                   subItem.disabled && 'cursor-not-allowed opacity-60',
-                  pathname === subItem.href ? 'font-medium text-foreground' : 'text-muted-foreground',
                 )}
               >
                 {subItem.title}
                 {subItem.label && (
                   <span
                     class={cn(
-                      'ml-2 rounded-md bg-lime-600/10 px-2 py-1 text-xs leading-none text-lime-600 no-underline ring-1 ring-inset ring-lime-600/20 group-hover:no-underline dark:bg-lime-500/10 dark:text-lime-500 dark:ring-lime-500/20',
-                      subItem.label === 'Soon' && 'bg-muted text-muted-foreground',
-                      subItem.label === 'Updated' &&
-                        'bg-blue-600/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20',
+                      'ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline',
                     )}
                   >
                     {subItem.label}
                   </span>
                 )}
-              </a>
+              </span>
             ),
           )}
         </div>

diff --git a/docs/src/components/SiteFooter.astro b/docs/src/components/SiteFooter.astro
@@ -0,0 +1,35 @@
+---
+import { siteConfig } from '@/config/site'
+---
+
+<footer class="border-t border-border/40 py-6 dark:border-border md:px-8 md:py-0">
+  <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+    <p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
+      Built & designed by{' '}
+      <a
+        href={siteConfig.links.shadcn.twitter}
+        target="_blank"
+        rel="noreferrer"
+        class="font-medium underline underline-offset-4"
+      >
+        shadcn
+      </a>. Ported to Angular by{' '}
+      <a
+        href={siteConfig.links.twitter}
+        target="_blank"
+        rel="noreferrer"
+        class="font-medium underline underline-offset-4"
+      >
+        Adrián UB
+      </a>. The source code is available on{' '}
+      <a
+        href={siteConfig.links.github}
+        target="_blank"
+        rel="noreferrer"
+        class="font-medium underline underline-offset-4"
+      >
+        GitHub.
+      </a>
+    </p>
+  </div>
+</footer>
diff --git a/docs/src/components/Header.astro → docs/src/components/SiteHeader.astro b/docs/src/components/Header.astro → docs/src/components/SiteHeader.astro
@@ -2,30 +2,34 @@
 import { siteConfig } from '@/config/site'
 import { buttonVariants } from '@/registry/new-york/ui/button'
 
-import Navbar from './Navbar.astro'
-import MobileNavbar from './MobileNavbar.astro'
+import MainNav from './MainNav.astro'
+import MobileNav from './MobileNav.astro'
 import CommandMenu from './CommandMenu.astro'
-import ModeToggle from './ModeToggle.astro'
+import ModeSwitcher from './ModeSwitcher.astro'
+import { cn } from '@/lib/utils'
 
 const { pathname } = Astro.url
 ---
 
 <header
-  class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+  class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border"
 >
-  <div class="container md:px-8 px-4 flex h-14 max-w-screen-2xl items-center">
-    <Navbar pathname={pathname} />
-    <MobileNavbar pathname={pathname} />
-    <div class="flex flex-1 items-center justify-end space-x-2">
+  <div class="flex h-14 items-center px-4">
+    <MainNav pathname={pathname} />
+    <MobileNav pathname={pathname} />
+    <div class="flex flex-1 items-center justify-between gap-2 md:justify-end">
       <div class="w-full flex-1 md:w-auto md:flex-none">
         <CommandMenu />
       </div>
-      <div class="flex items-center">
+      <div class="flex items-center gap-0.5">
         <a
-          class={buttonVariants({
-            variant: 'ghost',
-            size: 'icon',
-          })}
+          class={cn(
+            buttonVariants({
+              variant: 'ghost',
+              size: 'icon',
+            }),
+            'h-8 w-8 px-0',
+          )}
           href={siteConfig.links.github}
           target="_blank"
           rel="noreferrer"
@@ -38,30 +42,8 @@ const { pathname } = Astro.url
           </svg>
           <span class="sr-only">GitHub</span>
         </a>
-        <a
-          class={buttonVariants({
-            variant: 'ghost',
-            size: 'icon',
-          })}
-          href={siteConfig.links.twitter}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <svg
-            class="h-3 w-3 fill-current"
-            height="23"
-            viewBox="0 0 1200 1227"
-            width="23"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
-            ></path>
-          </svg>
-          <span class="sr-only">Twitter</span>
-        </a>
       </div>
     </div>
-    <ModeToggle />
+    <ModeSwitcher />
   </div>
 </header>
diff --git a/docs/src/components/Toc.astro b/docs/src/components/Toc.astro
@@ -47,8 +47,14 @@ const { toc } = Astro.props
 </script>
 
 <aside class="space-y-2">
-  <p class="font-medium">On This Page</p>
-  <ul class="m-0 list-none">
-    <Tree tree={toc} />
-  </ul>
+  {
+    toc.items?.length && (
+      <>
+        <p class="font-medium">On This Page</p>
+        <ul class="m-0 list-none">
+          <Tree tree={toc} />
+        </ul>
+      </>
+    )
+  }
 </aside>
diff --git a/docs/src/components/page-header/PageHeader.astro b/docs/src/components/page-header/PageHeader.astro
@@ -3,7 +3,12 @@ import { cn } from '@/lib/utils'
 ---
 
 <section
-  class={cn('mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10', Astro.props.class)}
+  class={cn(
+    'flex flex-col items-start gap-2 border-b border-border/40 py-8 dark:border-border md:py-10 lg:py-12',
+    Astro.props.class,
+  )}
 >
-  <slot />
+  <div class="container">
+    <slot />
+  </div>
 </section>