docs: fix layout

adrian-ub · Sep 28, 2024 · 2e5ec63 · 2e5ec63
1 parent 4883b4f
commit 2e5ec63
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 55 deletions.
diff --git a/docs/src/components/mdx/a.astro b/docs/src/components/mdx/a.astro
@@ -1,5 +1,7 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<a class="font-medium underline underline-offset-4" {...props}><slot /></a>
+<a class={cn('font-medium underline underline-offset-4', className)} {...props}><slot /></a>
diff --git a/docs/src/components/mdx/blockquote.astro b/docs/src/components/mdx/blockquote.astro
@@ -0,0 +1,9 @@
+---
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
+---
+
+<blockquote class={cn('mt-6 border-l-2 pl-6 italic', className)} {...props}>
+    <slot />
+</blockquote>
diff --git a/docs/src/components/mdx/h1.astro b/docs/src/components/mdx/h1.astro
@@ -1,7 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<h1 class="font-heading mt-2 scroll-m-20 text-4xl font-bold" {...props}>
+<h1 class={cn('font-heading mt-2 scroll-m-20 text-4xl font-bold', className)} {...props}>
     <slot />
 </h1>
diff --git a/docs/src/components/mdx/h2.astro b/docs/src/components/mdx/h2.astro
@@ -1,10 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<h2
-  class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
-  {...props}
->
+<h2 class={cn('font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0', className)} {...props}>
     <slot />
 </h2>
diff --git a/docs/src/components/mdx/h3.astro b/docs/src/components/mdx/h3.astro
@@ -1,10 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<h3
-  class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-  {...props}
->
+<h3 class={cn('font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight', className)} {...props}>
     <slot />
 </h3>
diff --git a/docs/src/components/mdx/h4.astro b/docs/src/components/mdx/h4.astro
@@ -1,10 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<h4
-  class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-  {...props}
->
+<h4 class={cn('font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight', className)} {...props}>
     <slot />
 </h4>
diff --git a/docs/src/components/mdx/h5.astro b/docs/src/components/mdx/h5.astro
@@ -1,10 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<h5
-  class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-  {...props}
->
+<h5 class={cn('mt-8 scroll-m-20 text-lg font-semibold tracking-tight', className)} {...props}>
     <slot />
 </h5>
diff --git a/docs/src/components/mdx/h6.astro b/docs/src/components/mdx/h6.astro
@@ -1,10 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<h6
-  class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-  {...props}
->
+<h6 class={cn('mt-8 scroll-m-20 text-base font-semibold tracking-tight', className)} {...props}>
     <slot />
 </h6>
diff --git a/docs/src/components/mdx/hr.astro b/docs/src/components/mdx/hr.astro
@@ -0,0 +1,5 @@
+---
+const props = Astro.props
+---
+
+<hr class="my-4 md:my-8" {...props} />
diff --git a/docs/src/components/mdx/img.astro b/docs/src/components/mdx/img.astro
@@ -0,0 +1,7 @@
+---
+import { cn } from '@/lib/utils'
+
+const { class: className, alt, ...props } = Astro.props
+---
+
+<img class={cn('rounded-md', className)} alt={alt} {...props} />
diff --git a/docs/src/components/mdx/index.ts b/docs/src/components/mdx/index.ts
@@ -2,18 +2,20 @@ import ComponentPreview from '../component-preview/ComponentPreview.astro'
 import ComponentSource from '../component-preview/ComponentSource.astro'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs'
 import a from './a.astro'
+import blockquote from './blockquote.astro'
 import Callout from './Callout.astro'
 import h1 from './h1.astro'
 import h2 from './h2.astro'
 import h3 from './h3.astro'
 import h4 from './h4.astro'
 import h5 from './h5.astro'
 import h6 from './h6.astro'
+import hr from './hr.astro'
+import img from './img.astro'
 import li from './li.astro'
 import LinkedCard from './linked-card.astro'
 import ol from './ol.astro'
 import p from './p.astro'
-
 import pre from './pre.astro'
 import Step from './Step.astro'
 import Steps from './Steps.astro'
@@ -32,6 +34,9 @@ export const components = {
   ul,
   li,
   ol,
+  img,
+  hr,
+  blockquote,
   Steps,
   Step,
   LinkedCard,

diff --git a/docs/src/components/mdx/li.astro b/docs/src/components/mdx/li.astro
@@ -1,7 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<li class="mt-2" {...props}>
+<li class={cn('mt-2', className)} {...props}>
     <slot />
 </li>
diff --git a/docs/src/components/mdx/linked-card.astro b/docs/src/components/mdx/linked-card.astro
@@ -1,10 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<a
-  class="flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10"
-  {...props}
->
+<a class={cn('flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10', className)} {...props}>
     <slot />
 </a>
diff --git a/docs/src/components/mdx/ol.astro b/docs/src/components/mdx/ol.astro
@@ -1,7 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<ol class="my-6 ml-6 list-decimal" {...props}>
+<ol class={cn('my-6 ml-6 list-decimal', className)} {...props}>
     <slot />
 </ol>
diff --git a/docs/src/components/mdx/p.astro b/docs/src/components/mdx/p.astro
@@ -1,7 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<p class="break-words leading-7 [&:not(:first-child)]:mt-6" {...props}>
+<p class={cn('leading-7 [&:not(:first-child)]:mt-6', className)} {...props}>
     <slot />
 </p>
diff --git a/docs/src/components/mdx/ul.astro b/docs/src/components/mdx/ul.astro
@@ -1,7 +1,9 @@
 ---
-const props = Astro.props;
+import { cn } from '@/lib/utils'
+
+const { class: className, ...props } = Astro.props
 ---
 
-<ul class="my-6 ml-6 list-disc" {...props}>
+<ul class={cn('my-6 ml-6 list-disc', className)} {...props}>
     <slot />
 </ul>
diff --git a/docs/src/layouts/DocsLayout.astro b/docs/src/layouts/DocsLayout.astro
@@ -29,23 +29,26 @@ const { pathname } = Astro.url
             </aside>
             <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
                 <div class="mx-auto w-full min-w-0">
-                    <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
-                        <div class="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="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"></path>
+                    <div class="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
+                        <div class="truncate">Docs</div>
+                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5">
+                            <path
+                              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                              clip-rule="evenodd"
+                            ></path>
                         </svg>
-                        <div class="font-medium text-foreground">
-                            {entry.data.title}
-                        </div>
+                        <div class="text-foreground">{entry.data.title}</div>
                     </div>
                     <div class="space-y-2">
-                        <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+                        <h1 class="scroll-m-20 text-3xl font-bold tracking-tight">
                             {entry.data.title}
                         </h1>
                         {
                             entry.data.description
 ? (
-                                <p class="text-lg text-muted-foreground">
+                                <p class="text-base text-muted-foreground">
                                     <span class="text-balance">{entry.data.description}</span>
                                 </p>
                             )
@@ -66,7 +69,7 @@ const { pathname } = Astro.url
                                             variant: 'secondary',
                                         })}
                                     >
-                                        Docs{' '}
+                                        Docs
                                         <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-3 w-3" viewBox="0 0 24 24">
                                             <path
                                               fill="none"
@@ -108,15 +111,17 @@ const { pathname } = Astro.url
                         )
 : null
                     }
-                    <div class="max-w-full pb-12">
+                    <div class="pb-12 pt-8">
                         <slot />
                     </div>
                     <PageNavigation />
                 </div>
 
                 <div class="hidden text-sm xl:block">
                     <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
-                        <Toc data={headings} />
+                        <div class="h-full pb-10">
+                            <Toc data={headings} />
+                        </div>
                     </div>
                 </div>
             </main>