chore(docs): improve home page UI #87
Conversation
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ✏️ Tip: You can disable in-progress messages and the fortune message in your review settings. Tip You can enable review details to help with troubleshooting, context usage and more.Enable the ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
3 similar comments
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ✏️ Tip: You can disable in-progress messages and the fortune message in your review settings. Tip You can enable review details to help with troubleshooting, context usage and more.Enable the ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ✏️ Tip: You can disable in-progress messages and the fortune message in your review settings. Tip You can enable review details to help with troubleshooting, context usage and more.Enable the ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ✏️ Tip: You can disable in-progress messages and the fortune message in your review settings. Tip You can enable review details to help with troubleshooting, context usage and more.Enable the ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
Caution Review failedFailed to post review comments 📝 WalkthroughWalkthroughThis pull request introduces a comprehensive redesign of the documentation site. It adds new dependencies for UI components, restructures the home page with multiple new feature sections, introduces shared UI components and utilities, updates the font configuration, and enhances styling with new CSS utilities. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@docs/src/components/header.tsx`:
- Around line 68-73: The two CTAs currently use placeholder links ("#"); update
the Link components inside the first Button (variant="ghost") to point to the
project's GitHub repo URL and the second Button (className="border-white/20
rounded-none", variant="outline") to point to the real docs route ("/docs");
locate the Link elements used asChild of the Button components in the header
component and replace the href="#" values accordingly so the GitHub CTA
navigates to the repo and the Get Started CTA navigates to /docs.
In `@docs/src/components/hero.tsx`:
- Around line 22-29: The CTA uses <Button asChild> wrapping a non-focusable
<span>, so it isn’t keyboard accessible; replace the <span> with a real
interactive element (a <button> or focusable <Link>) and wire a click handler
that performs the intended action (e.g., copy "npm install `@aura-stack/auth`" to
clipboard or navigate) instead of relying on asChild. Update the JSX inside the
Button (reference: Button, asChild, span) to render a native <button> or Link
and implement the copy-to-clipboard/click logic following the copy pattern used
in the site's home hero component.
In `@docs/src/components/ui/button.tsx`:
- Around line 10-11: The Tailwind class in the button variant is incorrect: the
variant key (e.g., in the button style object / buttonVariants) contains the
invalid arbitrary variant "[a]:hover:bg-primary/80"; replace that token with the
correct Tailwind hover class "hover:bg-primary/80" so the default variant reads
"bg-primary text-primary-foreground hover:bg-primary/80" (update the variant
property in the same object where "default" is defined).
In `@docs/src/ui/global.css`:
- Around line 53-65: The pseudo-element overlay .grainy-bg::before is
intercepting pointer events; update the .grainy-bg::before rule to add
pointer-events: none so it won’t block clicks or other interactions with
underlying content, keeping the existing positioning, opacity and
background-image intact.
In `@docs/src/ui/home/faq.tsx`:
- Around line 57-72: The accordion button and panel are missing ARIA attributes;
update the button (where setOpenIndex and openIndex are used) to include
aria-expanded={openIndex === index} and aria-controls={`faq-panel-${index}`} and
ensure the ChevronDown remains decorative (aria-hidden or role="img" with
hidden). Give the corresponding content div an id={`faq-panel-${index}`} plus
role="region" and aria-labelledby={`faq-button-${index}`}, and add an
id={`faq-button-${index}`} to the button so screen readers can map the button to
its panel; ensure these changes are applied in the button/ChevronDown and the
content div surrounding faq.question and answers.
🧹 Nitpick comments (5)
docs/src/app/layout.tsx (1)
3-19: Consider applying the font variables if you still rely on them.You configure
variablefor both fonts but only applyinter.className. If CSS uses--font-inter/--font-geist, those vars won’t be set unless their.variableclasses are attached.💡 Suggested adjustment
- <html lang="en" className={inter.className} suppressHydrationWarning> + <html + lang="en" + className={`${inter.className} ${inter.variable} ${geist.variable}`} + suppressHydrationWarning + >docs/src/ui/home/what-you-get.tsx (1)
1-1: Remove unused importZap.The
Zapicon is imported but not used in thefeaturesarray.🧹 Proposed fix
-import { Code2, Globe, Lock, Shield, Zap, Cookie } from "lucide-react" +import { Code2, Globe, Lock, Shield, Cookie } from "lucide-react"docs/src/ui/home/framework-agnostic.tsx (1)
3-53: Significant code duplication withruntime-support.tsx.The
runtimesarray (including inline SVG logos) is nearly identical to the one defined inruntime-support.tsx. Both files also render similar "Built on Web Standards" sections with overlapping content.Consider extracting the shared runtime data to a common location (e.g.,
docs/src/data/runtimes.tsor a shared constants file) to maintain consistency and reduce duplication.♻️ Example extraction
Create a shared file:
// docs/src/data/runtimes.tsx export const runtimes = [ { name: "Node.js", logo: <NodeLogo /> }, { name: "Deno", logo: <DenoLogo /> }, // ... ]Then import in both components:
import { runtimes } from "@/data/runtimes"docs/src/ui/home/contribute-oss.tsx (1)
24-30: Addtarget="_blank"andrel="noopener noreferrer"for external link.The GitHub link is an external URL but doesn't open in a new tab. For consistency with
header.tsx(which usestarget="_blank"for the GitHub link) and to prevent the external site from accessingwindow.opener, consider adding these attributes.♻️ Proposed fix
<Link href="https://github.com/aura-stack-ts/auth" + target="_blank" + rel="noopener noreferrer" className="px-8 py-4 inline-flex items-center gap-2 text-base font-medium text-white rounded-lg border border-white/20 transition-all duration-200 hover:bg-white/10" >docs/src/components/hero.tsx (1)
32-37: Remove commented-out gradient markup.Commented blocks tend to drift and add noise; delete if no longer needed.
🧹 Suggested cleanup
- {/* <div className="flex flex-col items-end absolute -right-60 -top-10 blur-xl z-0 "> - <div className="h-[10rem] rounded-full w-[60rem] z-1 bg-gradient-to-b blur-[6rem] from-purple-600 to-sky-600"></div> - <div className="h-[10rem] rounded-full w-[90rem] z-1 bg-gradient-to-b blur-[6rem] from-pink-900 to-yellow-400"></div> - <div className="h-[10rem] rounded-full w-[60rem] z-1 bg-gradient-to-b blur-[6rem] from-yellow-600 to-sky-500"></div> - </div> - <div className="absolute inset-0 z-0 bg-noise opacity-30"></div> */}
| <Button variant="ghost" size="sm" asChild> | ||
| <Link href="#">GitHub</Link> | ||
| </Button> | ||
| <Button className="border-white/20 rounded-none" variant="outline" size="lg" asChild> | ||
| <Link href="#">Get Started</Link> | ||
| </Button> |
There was a problem hiding this comment.
Replace placeholder CTA links.
Both CTAs point to #, so navigation is a no-op. Wire them to real destinations (the GitHub repo and /docs), similar to docs/src/ui/home/header.tsx lines 3-31.
🔗 Suggested fix
- <Button variant="ghost" size="sm" asChild>
- <Link href="#">GitHub</Link>
- </Button>
+ <Button variant="ghost" size="sm" asChild>
+ <Link href="https://github.com/aura-stack-ts/auth" target="_blank" rel="noopener noreferrer">
+ GitHub
+ </Link>
+ </Button>
<Button className="border-white/20 rounded-none" variant="outline" size="lg" asChild>
- <Link href="#">Get Started</Link>
+ <Link href="/docs">Get Started</Link>
</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button variant="ghost" size="sm" asChild> | |
| <Link href="#">GitHub</Link> | |
| </Button> | |
| <Button className="border-white/20 rounded-none" variant="outline" size="lg" asChild> | |
| <Link href="#">Get Started</Link> | |
| </Button> | |
| <Button variant="ghost" size="sm" asChild> | |
| <Link href="https://github.com/aura-stack-ts/auth" target="_blank" rel="noopener noreferrer"> | |
| GitHub | |
| </Link> | |
| </Button> | |
| <Button className="border-white/20 rounded-none" variant="outline" size="lg" asChild> | |
| <Link href="/docs">Get Started</Link> | |
| </Button> |
🤖 Prompt for AI Agents
In `@docs/src/components/header.tsx` around lines 68 - 73, The two CTAs currently
use placeholder links ("#"); update the Link components inside the first Button
(variant="ghost") to point to the project's GitHub repo URL and the second
Button (className="border-white/20 rounded-none", variant="outline") to point to
the real docs route ("/docs"); locate the Link elements used asChild of the
Button components in the header component and replace the href="#" values
accordingly so the GitHub CTA navigates to the repo and the Get Started CTA
navigates to /docs.
| <Button | ||
| className="relative z-10 text-white border-black bg-black" | ||
| variant="outline" | ||
| size="lg" | ||
| asChild | ||
| > | ||
| <span>npm install @aura-stack/auth</span> | ||
| </Button> |
There was a problem hiding this comment.
Make the install CTA an actual interactive element.
Button with asChild + <span> renders a non-focusable element, so keyboard users can't activate it. Use a real <button>/<Link> and wire a click handler if it’s meant to copy. If you want copy-to-clipboard behavior, the pattern in docs/src/ui/home/hero.tsx lines 7-62 can be reused.
🛠️ Suggested change
- <Button
- className="relative z-10 text-white border-black bg-black"
- variant="outline"
- size="lg"
- asChild
- >
- <span>npm install `@aura-stack/auth`</span>
- </Button>
+ <Button
+ className="relative z-10 text-white border-black bg-black"
+ variant="outline"
+ size="lg"
+ type="button"
+ >
+ npm install `@aura-stack/auth`
+ </Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button | |
| className="relative z-10 text-white border-black bg-black" | |
| variant="outline" | |
| size="lg" | |
| asChild | |
| > | |
| <span>npm install @aura-stack/auth</span> | |
| </Button> | |
| <Button | |
| className="relative z-10 text-white border-black bg-black" | |
| variant="outline" | |
| size="lg" | |
| type="button" | |
| > | |
| npm install `@aura-stack/auth` | |
| </Button> |
🤖 Prompt for AI Agents
In `@docs/src/components/hero.tsx` around lines 22 - 29, The CTA uses <Button
asChild> wrapping a non-focusable <span>, so it isn’t keyboard accessible;
replace the <span> with a real interactive element (a <button> or focusable
<Link>) and wire a click handler that performs the intended action (e.g., copy
"npm install `@aura-stack/auth`" to clipboard or navigate) instead of relying on
asChild. Update the JSX inside the Button (reference: Button, asChild, span) to
render a native <button> or Link and implement the copy-to-clipboard/click logic
following the copy pattern used in the site's home hero component.
| variant: { | ||
| default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", |
There was a problem hiding this comment.
Suspicious Tailwind class [a]:hover:bg-primary/80.
The [a]: prefix doesn't appear to be a valid Tailwind arbitrary variant. This looks like a typo or leftover from editing. It should likely just be hover:bg-primary/80.
🐛 Proposed fix
- default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+ default: "bg-primary text-primary-foreground hover:bg-primary/80",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| variant: { | |
| default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", | |
| variant: { | |
| default: "bg-primary text-primary-foreground hover:bg-primary/80", |
🤖 Prompt for AI Agents
In `@docs/src/components/ui/button.tsx` around lines 10 - 11, The Tailwind class
in the button variant is incorrect: the variant key (e.g., in the button style
object / buttonVariants) contains the invalid arbitrary variant
"[a]:hover:bg-primary/80"; replace that token with the correct Tailwind hover
class "hover:bg-primary/80" so the default variant reads "bg-primary
text-primary-foreground hover:bg-primary/80" (update the variant property in the
same object where "default" is defined).
| /* El truco es usar un filtro de ruido SVG como capa superior */ | ||
| .grainy-bg { | ||
| background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); | ||
| position: relative; | ||
| } | ||
|
|
||
| .grainy-bg::before { | ||
| content: ""; | ||
| position: absolute; | ||
| inset: 0; | ||
| opacity: 0.4; /* Controla la intensidad del ruido aquí */ | ||
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | ||
| } |
There was a problem hiding this comment.
Prevent the grain overlay from blocking interactions.
The ::before overlay can sit on top of content; add pointer-events: none so it doesn’t intercept clicks.
🛠️ Minimal fix
.grainy-bg::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.4; /* Controla la intensidad del ruido aquí */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+ pointer-events: none;
}🤖 Prompt for AI Agents
In `@docs/src/ui/global.css` around lines 53 - 65, The pseudo-element overlay
.grainy-bg::before is intercepting pointer events; update the .grainy-bg::before
rule to add pointer-events: none so it won’t block clicks or other interactions
with underlying content, keeping the existing positioning, opacity and
background-image intact.
| <button | ||
| onClick={() => setOpenIndex(openIndex === index ? null : index)} | ||
| className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-white/5 transition-colors" | ||
| > | ||
| <h3 className="text-lg font-semibold text-white pr-8">{faq.question}</h3> | ||
| <ChevronDown | ||
| className={`size-5 text-white/70 flex-shrink-0 transition-transform duration-300 ${ | ||
| openIndex === index ? "rotate-180" : "" | ||
| }`} | ||
| /> | ||
| </button> | ||
| <div | ||
| className={`overflow-hidden transition-all duration-300 ${ | ||
| openIndex === index ? "max-h-96" : "max-h-0" | ||
| }`} | ||
| > |
There was a problem hiding this comment.
Add ARIA attributes for accordion accessibility.
Expose expanded state and relationships so screen readers can interpret the accordion correctly.
♿ Suggested ARIA additions
- <button
+ <button
+ type="button"
onClick={() => setOpenIndex(openIndex === index ? null : index)}
+ aria-expanded={openIndex === index}
+ aria-controls={`faq-panel-${index}`}
+ id={`faq-button-${index}`}
className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-white/5 transition-colors"
>
@@
- <div
+ <div
+ id={`faq-panel-${index}`}
+ role="region"
+ aria-labelledby={`faq-button-${index}`}
className={`overflow-hidden transition-all duration-300 ${
openIndex === index ? "max-h-96" : "max-h-0"
}`}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| onClick={() => setOpenIndex(openIndex === index ? null : index)} | |
| className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-white/5 transition-colors" | |
| > | |
| <h3 className="text-lg font-semibold text-white pr-8">{faq.question}</h3> | |
| <ChevronDown | |
| className={`size-5 text-white/70 flex-shrink-0 transition-transform duration-300 ${ | |
| openIndex === index ? "rotate-180" : "" | |
| }`} | |
| /> | |
| </button> | |
| <div | |
| className={`overflow-hidden transition-all duration-300 ${ | |
| openIndex === index ? "max-h-96" : "max-h-0" | |
| }`} | |
| > | |
| <button | |
| type="button" | |
| onClick={() => setOpenIndex(openIndex === index ? null : index)} | |
| aria-expanded={openIndex === index} | |
| aria-controls={`faq-panel-${index}`} | |
| id={`faq-button-${index}`} | |
| className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-white/5 transition-colors" | |
| > | |
| <h3 className="text-lg font-semibold text-white pr-8">{faq.question}</h3> | |
| <ChevronDown | |
| className={`size-5 text-white/70 flex-shrink-0 transition-transform duration-300 ${ | |
| openIndex === index ? "rotate-180" : "" | |
| }`} | |
| /> | |
| </button> | |
| <div | |
| id={`faq-panel-${index}`} | |
| role="region" | |
| aria-labelledby={`faq-button-${index}`} | |
| className={`overflow-hidden transition-all duration-300 ${ | |
| openIndex === index ? "max-h-96" : "max-h-0" | |
| }`} | |
| > |
🤖 Prompt for AI Agents
In `@docs/src/ui/home/faq.tsx` around lines 57 - 72, The accordion button and
panel are missing ARIA attributes; update the button (where setOpenIndex and
openIndex are used) to include aria-expanded={openIndex === index} and
aria-controls={`faq-panel-${index}`} and ensure the ChevronDown remains
decorative (aria-hidden or role="img" with hidden). Give the corresponding
content div an id={`faq-panel-${index}`} plus role="region" and
aria-labelledby={`faq-button-${index}`}, and add an id={`faq-button-${index}`}
to the button so screen readers can map the button to its panel; ensure these
changes are applied in the button/ChevronDown and the content div surrounding
faq.question and answers.
1 participant
Description