Conversation
- Implemented a new documentation section with routes for security and deployment guides. - Created a user-friendly index page for documentation navigation. - Enhanced the 404 Not Found page with navigation links and a visually appealing layout. - Updated security documentation to reflect the latest architecture and threat model.
- Updated the main documentation index with a new hero section and feature grid. - Added a new Local Setup page with detailed instructions for local development. - Enhanced the Security documentation with a clearer overview and updated threat model. - Introduced a new utility file for document configuration and structured links. - Improved styling for documentation pages and added utility classes for better readability. - Updated landing page links to point to the correct GitHub repository.
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughThis PR significantly expands the documentation infrastructure by introducing a comprehensive docs site under Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant DocsLayout
participant Sidebar
participant DocPage
participant NotFound
User->>Router: Navigate to /docs/security
Router->>DocsLayout: Load docs route
DocsLayout->>Sidebar: Render with DOC_GROUPS
Sidebar->>Sidebar: Search filter docs
Sidebar->>DocsLayout: Active link detected
DocsLayout->>DocPage: Render Outlet
DocPage->>User: Display security docs
User->>Router: Navigate to /docs/invalid
Router->>NotFound: Route not found
NotFound->>User: Display 404 with back link
sequenceDiagram
participant Client
participant RootRoute
participant NotFoundComponent
participant SITE_CONFIG
participant Head
Client->>RootRoute: Request page
RootRoute->>SITE_CONFIG: Load metadata
SITE_CONFIG->>Head: Inject SEO tags
Head->>Head: Add og/twitter meta, canonical, JSON-LD
Client->>RootRoute: 404 triggered
RootRoute->>NotFoundComponent: Render notFoundComponent
NotFoundComponent->>Client: Display custom 404 UI
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
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)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| const handleCopy = () => { | ||
| navigator.clipboard.writeText(code); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); |
There was a problem hiding this comment.
🟡 Clipboard write not awaited - shows success even on failure
The handleCopy function in DocsCodeBlock does not await the Promise returned by navigator.clipboard.writeText() and sets copied to true unconditionally. This means the UI will show "copied" feedback even if the clipboard operation fails.
Click to expand
Problem
The code immediately sets copied(true) without waiting for the clipboard operation to complete:
const handleCopy = () => {
navigator.clipboard.writeText(code);
setCopied(true); // Called immediately, not after promise resolves
setTimeout(() => setCopied(false), 2000);
};Comparison with existing patterns
Other clipboard usages in the codebase properly await and handle errors:
src/components/share-dialog.tsx:210usesawait navigator.clipboard.writeText(shareUrl)src/components/environment-variables/useVariableActions.ts:66usesawaitwith try-catch
Impact
Users may see the "copied" checkmark icon even when:
- Clipboard permissions are denied
- The browser doesn't support the Clipboard API
- The operation fails for any other reason
This could lead to user frustration when they paste and find nothing was copied.
Recommendation: Change the function to be async and await the clipboard operation with error handling:
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy:", err);
}
};
Was this helpful? React with 👍 or 👎 to provide feedback.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/routes/d.tsx (2)
75-94:⚠️ Potential issue | 🟡 MinorMissing
titleattributes on Button components.These buttons lack
titleattributes for accessibility.🛠️ Proposed fix
<Button variant="outline" className="w-full gap-2" + title="Sign out of your account" onClick={() => signOut(() => { window.location.href = "/"; }) } > <LogOut className="h-4 w-4" /> Sign Out </Button> <Button variant="link" className="w-full text-muted-foreground" + title="Return to landing page" onClick={() => (window.location.href = "/")} > Return to Landing Page </Button>As per coding guidelines: "Add title attribute to Button components from
@/components/ui/button".
144-144:⚠️ Potential issue | 🟡 MinorMissing
titleattribute on Button.🛠️ Proposed fix
- <Button onClick={() => (window.location.href = "/")}>Go back to Home</Button> + <Button title="Go back to home page" onClick={() => (window.location.href = "/")}>Go back to Home</Button>As per coding guidelines: "Add title attribute to Button components from
@/components/ui/button".
🤖 Fix all issues with AI agents
In `@src/components/docs-components.tsx`:
- Around line 32-39: The Button used for copy in the Docs component is missing
an accessible title; update the Button component instance that uses
onClick={handleCopy} (the one rendering {copied ? <Check .../> : <Copy .../>})
to include a descriptive title attribute (e.g., "Copy code" / "Copied") to
satisfy the guideline for Button components from '@/components/ui/button' and
improve accessibility.
- Around line 15-19: The handleCopy function must handle failures from
navigator.clipboard.writeText: change it to await or use .then/.catch around
navigator.clipboard.writeText(code) and only call setCopied(true) when the
promise resolves; on rejection log or surface the error (e.g., console.error or
show a UI error) and ensure any timeout cleanup (the setTimeout that clears
setCopied) is not scheduled on failure; update the handleCopy implementation
accordingly so navigator.clipboard.writeText, setCopied, and the clear timeout
are coordinated and errors are handled.
In `@src/components/not-found.tsx`:
- Around line 45-65: The Button components rendered in not-found.tsx (the Button
from '@/components/ui/button' used for the back link, Dashboard and Read Docs)
are missing title attributes; add a descriptive title prop to each Button: for
the back link use title={backText || 'Back'} (or similar), for the Dashboard
button use title="Dashboard", and for the Read Docs button use title="Read Docs"
to satisfy accessibility/tooltip requirements.
In `@src/routes/docs.tsx`:
- Around line 184-186: The prose-invert class is applied unconditionally in the
docs layout, causing light-on-light readability issues in light mode; update the
JSX that renders the div containing Outlet (the element with className "prose
prose-invert max-w-none") to use Tailwind's dark variant so the invert only
applies in dark mode (replace the unconditional prose-invert with the
dark:prose-invert variant) ensuring the rest of the className and the Outlet
usage remain unchanged.
In `@src/routes/docs/deployment.tsx`:
- Around line 99-103: The documentation string in the JSX fragment that includes
the span with text "*.vercel.app" and the following anchor text contains typos
and awkward phrasing: change "convex" to "Convex", replace "setup your records"
with "set up your records", change the comma-spliced sentence into two sentences
or use a semicolon (e.g., "domains; you must use your own domain and set up your
records."), and correct "offical" to "official"; apply the same fixes to the
duplicate occurrences referenced around lines 163-165 so all instances use
proper capitalization, "set up", and "official" with clear punctuation.
- Around line 289-292: The GitHub Issues Button (the Button component used with
ExternalLink in the docs deployment UI) is missing an accessible title; update
the Button element in the render block that contains ExternalLink so it includes
a descriptive title attribute (e.g., title="Open GitHub Issues" or similar) to
satisfy the "@/components/ui/button" guideline and improve accessibility.
- Around line 154-158: The external anchor element using target="_blank" (the
<a> tag in deployment.tsx linking to
"https://dashboard.convex.dev/deployment/settings") should include a rel
attribute to prevent tabnabbing; update that anchor to add rel="noopener
noreferrer" (or at least rel="noopener") alongside target="_blank" so the link
opens in a new tab safely.
In `@src/routes/docs/index.tsx`:
- Around line 30-43: The Button components used as CTAs (the Button elements
inside the Link wrappers for "Get Started Locally", "Explore Security", and
"Deployment Guide" and the other Buttons around lines 127-130) are missing
required title attributes; update each Button (component symbol: Button from
"@/components/ui/button") to include a descriptive title prop (e.g., title="Get
Started Locally", title="Explore Security", title="Deployment Guide") matching
the visible label so they meet accessibility/guideline requirements.
In `@src/routes/docs/local-setup.tsx`:
- Around line 100-116: Fix several typos and awkward phrasing in the docs copy
inside src/routes/docs/local-setup.tsx: change "you dashboard" to "your
dashboard", change "NextJS" to "Next.js" and make the sentence "Update the
framework from NextJS to TanStack Start, and update them in your .env.local
file." read clearly (e.g., "Update the framework from Next.js to TanStack Start
and update it in your .env.local file."), and change "For detail guide, check
offical" to "For a detailed guide, check the official". Update the same
corrections in the repeated block referenced around lines 200-203; look for the
<p className="doc-p-tag"> blocks and the anchor text around the Clerk "API Keys"
link to make these wording fixes.
- Around line 102-106: The external anchor element in local-setup.tsx that sets
target="_blank" (the JSX <a> with
href="https://dashboard.clerk.com/last-active?path=api-keys") is missing a rel
attribute; update that anchor to include rel="noopener noreferrer" to prevent
reverse tabnabbing and improve security when opening external links in a new
tab.
In `@src/routes/docs/security.tsx`:
- Around line 255-260: The Button components in this file (the Button JSX that
includes the ExternalLink icon and the other Button around lines noted) are
missing title attributes required by our UI guidelines; update each usage of the
Button component in src/routes/docs/security.tsx (the Button that renders "Open
Security Policy" and the other Button referenced at 268-272) to include a
descriptive title string (e.g., title="Open Security Policy") so screen readers
and tooltips have accessible text; ensure the title values clearly describe the
button actions and add them directly on the Button elements.
In `@src/routes/index.tsx`:
- Around line 143-151: The Docs CTA Link contains a Button (the Button component
from '@/components/ui/button') missing the required title attribute; update the
Button instance inside the Link to include a descriptive title (e.g.,
title="Read Documentation" or similar) so the Button element has a title prop
for accessibility and compliance with the Button component contract.
In `@src/styles.css`:
- Around line 215-229: The CSS uses Tailwind directives (e.g., the `@utility` rule
and Tailwind-specific constructs) but the Biome CSS parser isn't configured to
accept tailwind directives; update the Biome config by adding the
"tailwindDirectives": true option under the "css.parser" section of biome.json
(alongside existing keys like "cssModules") so the parser accepts Tailwind
directives and the linter won't error on rules such as `@utility` and
counter-reset/increment usage.
In `@TODO.md`:
- Line 31: Update the TODO list entry in TODO.md to mark the task as completed:
replace the unchecked item "- [ ] update /docs and not found page." with a
completed checkbox "- [x] update /docs and not found page." (or remove the line
entirely) so the docs/NotFound work is reflected as done.
🧹 Nitpick comments (3)
src/utilities/doc-config.ts (1)
3-43: Consider adding explicit type definitions for better type safety.The
DOC_GROUPSconfiguration lacks explicit TypeScript types. Adding interfaces would improve maintainability and catch errors earlier, especially as the docs system grows.♻️ Proposed type definitions
import { Laptop, Layout, Rocket, Shield } from "lucide-react"; +import type { LucideIcon } from "lucide-react"; + +interface DocLink { + title: string; + description: string; + to: string; + icon: LucideIcon; +} + +interface DocGroup { + name: string; + links: DocLink[]; +} -export const DOC_GROUPS = [ +export const DOC_GROUPS: DocGroup[] = [As per coding guidelines: "Define shared types in
src/lib/types.ts" — alternatively, these types could be placed there if reused elsewhere.src/routes/docs.tsx (2)
69-86: Addtitleattributes to Button components.Multiple Button components are missing the required
titleattribute. As per coding guidelines, Button components from@/components/ui/buttonshould include atitleattribute for accessibility.♻️ Proposed fix
<Button variant="outline" className="h-8 w-8 border-none dark:bg-transparent" onClick={handleToggleTheme} + title="Toggle theme" > <Lightbulb className="h-4 w-4 fill-primary" /> <span className="sr-only">Toggle Dark Mode</span> </Button> <Link to="/d/dashboard"> - <Button variant="ghost" size="sm" className="hidden sm:flex text-sm font-medium"> + <Button variant="ghost" size="sm" className="hidden sm:flex text-sm font-medium" title="Go to Dashboard"> Dashboard </Button> </Link> <Link to="/"> - <Button size="sm" className="shadow-lg shadow-primary/20"> + <Button size="sm" className="shadow-lg shadow-primary/20" title="Back to Home"> Back to Home </Button> </Link>
164-168: Addtitleattribute to the GitHub Repository button.♻️ Proposed fix
- <Button variant="outline" size="sm" className="w-full text-[10px] h-7 rounded-lg"> + <Button variant="outline" size="sm" className="w-full text-[10px] h-7 rounded-lg" title="View GitHub Repository"> GitHub Repository </Button>
| const handleCopy = () => { | ||
| navigator.clipboard.writeText(code); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }; |
There was a problem hiding this comment.
Add error handling for clipboard operations.
navigator.clipboard.writeText() can fail (e.g., permissions denied, non-secure context). The promise rejection is currently unhandled.
🛠️ Proposed fix
const handleCopy = () => {
- navigator.clipboard.writeText(code);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
+ navigator.clipboard.writeText(code)
+ .then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ })
+ .catch((err) => {
+ console.error("Failed to copy:", err);
+ });
};📝 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.
| const handleCopy = () => { | |
| navigator.clipboard.writeText(code); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }; | |
| const handleCopy = () => { | |
| navigator.clipboard.writeText(code) | |
| .then(() => { | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }) | |
| .catch((err) => { | |
| console.error("Failed to copy:", err); | |
| }); | |
| }; |
🤖 Prompt for AI Agents
In `@src/components/docs-components.tsx` around lines 15 - 19, The handleCopy
function must handle failures from navigator.clipboard.writeText: change it to
await or use .then/.catch around navigator.clipboard.writeText(code) and only
call setCopied(true) when the promise resolves; on rejection log or surface the
error (e.g., console.error or show a UI error) and ensure any timeout cleanup
(the setTimeout that clears setCopied) is not scheduled on failure; update the
handleCopy implementation accordingly so navigator.clipboard.writeText,
setCopied, and the clear timeout are coordinated and errors are handled.
| <Button | ||
| variant="ghost" | ||
| size="icon-sm" | ||
| className="h-6 w-6 text-muted-foreground transition-all hover:bg-primary/10 hover:text-primary" | ||
| onClick={handleCopy} | ||
| > | ||
| {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />} | ||
| </Button> |
There was a problem hiding this comment.
Missing title attribute on copy Button.
🛠️ Proposed fix
<Button
variant="ghost"
size="icon-sm"
className="h-6 w-6 text-muted-foreground transition-all hover:bg-primary/10 hover:text-primary"
onClick={handleCopy}
+ title="Copy code to clipboard"
>
{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
</Button>As per coding guidelines: "Add title attribute to Button components from @/components/ui/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="icon-sm" | |
| className="h-6 w-6 text-muted-foreground transition-all hover:bg-primary/10 hover:text-primary" | |
| onClick={handleCopy} | |
| > | |
| {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />} | |
| </Button> | |
| <Button | |
| variant="ghost" | |
| size="icon-sm" | |
| className="h-6 w-6 text-muted-foreground transition-all hover:bg-primary/10 hover:text-primary" | |
| onClick={handleCopy} | |
| title="Copy code to clipboard" | |
| > | |
| {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />} | |
| </Button> |
🤖 Prompt for AI Agents
In `@src/components/docs-components.tsx` around lines 32 - 39, The Button used for
copy in the Docs component is missing an accessible title; update the Button
component instance that uses onClick={handleCopy} (the one rendering {copied ?
<Check .../> : <Copy .../>}) to include a descriptive title attribute (e.g.,
"Copy code" / "Copied") to satisfy the guideline for Button components from
'@/components/ui/button' and improve accessibility.
| <Button | ||
| size="lg" | ||
| className="rounded-xl gap-2 shadow-xl shadow-primary/20 font-semibold group" | ||
| > | ||
| <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" /> | ||
| {backText} | ||
| </Button> | ||
| </Link> | ||
| <Link to="/"> | ||
| <Button variant="outline" size="lg" className="rounded-xl gap-2 font-semibold"> | ||
| <Home className="h-4 w-4" /> | ||
| Dashboard | ||
| </Button> | ||
| </Link> | ||
| {!isDocs && ( | ||
| <Link to="/docs"> | ||
| <Button variant="ghost" size="lg" className="rounded-xl gap-2 font-semibold"> | ||
| <FileText className="h-4 w-4" /> | ||
| Read Docs | ||
| </Button> | ||
| </Link> |
There was a problem hiding this comment.
Missing title attributes on Button components.
Button components should include title attributes for accessibility and tooltip support.
🛠️ Proposed fix
<Link to={backLink}>
<Button
size="lg"
className="rounded-xl gap-2 shadow-xl shadow-primary/20 font-semibold group"
+ title={backText}
>
<ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
{backText}
</Button>
</Link>
<Link to="/">
- <Button variant="outline" size="lg" className="rounded-xl gap-2 font-semibold">
+ <Button variant="outline" size="lg" className="rounded-xl gap-2 font-semibold" title="Go to Dashboard">
<Home className="h-4 w-4" />
Dashboard
</Button>
</Link>
{!isDocs && (
<Link to="/docs">
- <Button variant="ghost" size="lg" className="rounded-xl gap-2 font-semibold">
+ <Button variant="ghost" size="lg" className="rounded-xl gap-2 font-semibold" title="Read documentation">
<FileText className="h-4 w-4" />
Read Docs
</Button>
</Link>
)}As per coding guidelines: "Add title attribute to Button components from @/components/ui/button".
🤖 Prompt for AI Agents
In `@src/components/not-found.tsx` around lines 45 - 65, The Button components
rendered in not-found.tsx (the Button from '@/components/ui/button' used for the
back link, Dashboard and Read Docs) are missing title attributes; add a
descriptive title prop to each Button: for the back link use title={backText ||
'Back'} (or similar), for the Dashboard button use title="Dashboard", and for
the Read Docs button use title="Read Docs" to satisfy accessibility/tooltip
requirements.
| <div className="prose prose-invert max-w-none"> | ||
| <Outlet /> | ||
| </div> |
There was a problem hiding this comment.
prose-invert applies unconditionally, causing readability issues in light mode.
The prose-invert class renders light text on dark backgrounds. Since the layout supports theme toggling between light and dark modes, this will make text difficult to read in light mode. Use Tailwind's dark mode variant instead.
🐛 Proposed fix
- <div className="prose prose-invert max-w-none">
+ <div className="prose dark:prose-invert max-w-none">
<Outlet />
</div>📝 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.
| <div className="prose prose-invert max-w-none"> | |
| <Outlet /> | |
| </div> | |
| <div className="prose dark:prose-invert max-w-none"> | |
| <Outlet /> | |
| </div> |
🤖 Prompt for AI Agents
In `@src/routes/docs.tsx` around lines 184 - 186, The prose-invert class is
applied unconditionally in the docs layout, causing light-on-light readability
issues in light mode; update the JSX that renders the div containing Outlet (the
element with className "prose prose-invert max-w-none") to use Tailwind's dark
variant so the invert only applies in dark mode (replace the unconditional
prose-invert with the dark:prose-invert variant) ensuring the rest of the
className and the Outlet usage remain unchanged.
| Generate your production keys, and since convex doesn't support{" "} | ||
| <span className="rounded-[5px] bg-muted-foreground/20 px-1 py-0.5">*.vercel.app</span>{" "} | ||
| domains, you have to use your own domain, setup your records, for detailed guide, | ||
| check the offical{" "} | ||
| <a |
There was a problem hiding this comment.
Tighten typos in the docs copy and code comment.
These small typos leak into the published docs.
✍️ Suggested fix
- domains, you have to use your own domain, setup your records, for detailed guide,
- check the offical{" "}
+ domains, you have to use your own domain and set up your records. For a detailed
+ guide, check the official{" "}- code={`# Once logged in, deloy schema to convex
+ code={`# Once logged in, deploy schema to ConvexAlso applies to: 163-165
🤖 Prompt for AI Agents
In `@src/routes/docs/deployment.tsx` around lines 99 - 103, The documentation
string in the JSX fragment that includes the span with text "*.vercel.app" and
the following anchor text contains typos and awkward phrasing: change "convex"
to "Convex", replace "setup your records" with "set up your records", change the
comma-spliced sentence into two sentences or use a semicolon (e.g., "domains;
you must use your own domain and set up your records."), and correct "offical"
to "official"; apply the same fixes to the duplicate occurrences referenced
around lines 163-165 so all instances use proper capitalization, "set up", and
"official" with clear punctuation.
| @utility doc-p-tag { | ||
| @apply text-sm text-muted-foreground font-medium; | ||
| } | ||
|
|
||
| .docs-page-container { | ||
| counter-reset: step-counter; | ||
| } | ||
|
|
||
| .docs-step-header { | ||
| counter-increment: step-counter; | ||
| } | ||
|
|
||
| .docs-step-number::before { | ||
| content: counter(step-counter); | ||
| } No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Step 1: Check if src/styles.css exists and verify the content at lines 215-229
if [ -f src/styles.css ]; then
echo "=== CSS File Found ==="
sed -n '215,229p' src/styles.css
fiRepository: pantharshit007/tijori
Length of output: 342
🏁 Script executed:
# Step 2: Find Biome config files
echo "=== Searching for Biome config files ==="
fd -a 'biome\.jsonc?' . 2>/dev/null || echo "No biome config found with fd"
find . -maxdepth 3 -name "biome.json*" 2>/dev/nullRepository: pantharshit007/tijori
Length of output: 148
🏁 Script executed:
# Step 3: Check for tailwindDirectives in Biome config
echo "=== Checking tailwindDirectives setting ==="
for config in $(find . -maxdepth 3 -name "biome.json*" 2>/dev/null); do
echo "File: $config"
cat "$config" 2>/dev/null | head -100
doneRepository: pantharshit007/tijori
Length of output: 1903
Add tailwindDirectives: true to the Biome CSS parser config.
The code uses Tailwind directives (@utility) which require the tailwindDirectives option in the CSS parser. Without it, Biome's CSS linter will report errors. Update biome.json to include:
"css": {
"linter": {
"enabled": true
},
"parser": {
"cssModules": true,
"tailwindDirectives": true
}
}🧰 Tools
🪛 Biome (2.3.13)
[error] 215-217: Tailwind-specific syntax is disabled.
Enable tailwindDirectives in the css parser options, or remove this if you are not using Tailwind CSS.
(parse)
🤖 Prompt for AI Agents
In `@src/styles.css` around lines 215 - 229, The CSS uses Tailwind directives
(e.g., the `@utility` rule and Tailwind-specific constructs) but the Biome CSS
parser isn't configured to accept tailwind directives; update the Biome config
by adding the "tailwindDirectives": true option under the "css.parser" section
of biome.json (alongside existing keys like "cssModules") so the parser accepts
Tailwind directives and the linter won't error on rules such as `@utility` and
counter-reset/increment usage.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/routes/docs/security.tsx`:
- Around line 264-286: The Buttons are wrapped by interactive anchors/Links
which is invalid; update both instances to use the Button's asChild prop so the
anchor/Link becomes the rendered element. Specifically, replace the <a
href={SITE_CONFIG.links.githubSecurity} ...> wrapping the Button by making the
Button include asChild and place the <a href=... target="_blank"
rel="noreferrer"> as its child (move the href/target/rel to that child), and
likewise replace the <Link to="/d/dashboard"> wrapper by using Button asChild
with the <Link to="/d/dashboard"> as the child; keep existing Button props
(size/variant/className/title) and the ExternalLink/icon content unchanged.
🧹 Nitpick comments (2)
src/routes/sitemap.xml.ts (1)
4-4: Consider deriving routes from a shared source to prevent drift.The
routesarray is hardcoded here. If new documentation pages are added, this file must be manually updated. Consider extracting the routes list to a shared configuration (e.g., alongsideDOC_GROUPSindoc-config.ts) to ensure the sitemap stays in sync with actual routes.src/routes/docs/security.tsx (1)
87-103: Verify crypto parameters and header values match production config.
These values are hardcoded in docs; if they drift from actual implementation, the security page becomes misleading. Consider sourcing them from a shared config/constants file to keep them aligned.Also applies to: 240-248
| export const Route = createFileRoute("/robots/txt")({ | ||
| loader: () => { | ||
| const baseUrl = SITE_CONFIG.siteUrl.replace(/\/$/, ""); | ||
| const body = `User-agent: *\nAllow: /\nDisallow: /d/\n\nSitemap: ${baseUrl}/sitemap.xml\n`; |
There was a problem hiding this comment.
🔴 robots.txt and sitemap.xml routes serve incorrect paths due to filename parsing
The routes /robots.txt and /sitemap.xml are registered at incorrect paths because TanStack Router interprets the . in filenames as a path separator.
Click to expand
Issue
In src/routeTree.gen.ts:64-78, we can see the generated route paths:
const SitemapXmlRoute = SitemapXmlRouteImport.update({
id: '/sitemap/xml',
path: '/sitemap/xml', // Expected: /sitemap.xml
...
})
const RobotsTxtRoute = RobotsTxtRouteImport.update({
id: '/robots/txt',
path: '/robots/txt', // Expected: /robots.txt
...
})This means:
- Accessing
/robots.txtwill return a 404 - Accessing
/sitemap.xmlwill return a 404 - The routes are only accessible at
/robots/txtand/sitemap/xml
Additionally, robots.txt.ts:7 generates content referencing the wrong sitemap URL:
const body = `...\nSitemap: ${baseUrl}/sitemap.xml\n`;This references /sitemap.xml but the actual route is /sitemap/xml, so search engines following the sitemap link will get a 404.
Impact
SEO functionality is completely broken - search engines won't find the robots.txt or sitemap.xml at their standard locations.
Recommendation: Rename the files to use a different naming convention that TanStack Router supports for literal dots in paths, or use the server.handlers pattern in a differently-named file to serve these as API routes at the correct paths.
Was this helpful? React with 👍 or 👎 to provide feedback.
| loader: () => { | ||
| const baseUrl = SITE_CONFIG.siteUrl.replace(/\/$/, ""); | ||
| const lastmod = new Date().toISOString(); | ||
|
|
||
| const urlEntries = routes | ||
| .map((path) => { | ||
| const loc = `${baseUrl}${path}`; | ||
| const priority = path === "/" ? "1.0" : path.startsWith("/docs") ? "0.7" : "0.5"; | ||
| const changefreq = path === "/" ? "weekly" : "monthly"; | ||
|
|
||
| return ` <url>\n <loc>${loc}</loc>\n <lastmod>${lastmod}</lastmod>\n <changefreq>${changefreq}</changefreq>\n <priority>${priority}</priority>\n </url>`; | ||
| }) | ||
| .join("\n"); | ||
|
|
||
| const body = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urlEntries}\n</urlset>`; | ||
|
|
||
| return { | ||
| body, | ||
| contentType: "application/xml; charset=utf-8", | ||
| }; | ||
| }, |
There was a problem hiding this comment.
🔴 robots.txt and sitemap.xml loaders return data objects instead of raw HTTP responses
The loader function returns an object with body, contentType, and status properties, but this pattern doesn't serve raw HTTP responses in TanStack Router.
Click to expand
Issue
In src/routes/robots.txt.ts:5-13 and src/routes/sitemap.xml.ts:7-27, the loaders return:
loader: () => {
return {
body,
contentType: "text/plain; charset=utf-8",
status: 200,
};
}However, TanStack Router's loader is designed to load data for components to render, not to serve raw HTTP responses. The correct pattern for API routes is shown in src/routes/demo/api.names.ts:
export const Route = createFileRoute('/demo/api/names')({
server: {
handlers: {
GET: () => json(['Alice', 'Bob', 'Charlie']),
},
},
})Actual vs Expected Behavior
- Actual: Navigating to these routes will likely render an empty page or show the raw data object in a React component context
- Expected: Should return raw
text/plainfor robots.txt andapplication/xmlfor sitemap.xml with appropriate content
Recommendation: Use the server.handlers pattern with appropriate response helpers to serve raw content with correct Content-Type headers, similar to the demo/api.names.ts example.
Was this helpful? React with 👍 or 👎 to provide feedback.
| const handleCopy = () => { | ||
| navigator.clipboard.writeText(code); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); |
There was a problem hiding this comment.
🟡 DocsCodeBlock clipboard copy sets success state even when clipboard API fails
The clipboard copy handler doesn't handle errors, causing the UI to show a success state even when the copy operation fails.
Click to expand
Issue
In src/components/docs-components.tsx:15-18:
const handleCopy = () => {
navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};navigator.clipboard.writeText() returns a Promise that can reject in several scenarios:
- Non-secure contexts (HTTP instead of HTTPS)
- User denies clipboard permission
- Browser doesn't support the Clipboard API
Since the Promise isn't awaited or caught, the code immediately sets copied to true regardless of whether the operation succeeded.
Actual vs Expected Behavior
- Actual: User sees checkmark indicating success even when copy fails
- Expected: Should only show success indicator when copy actually succeeds, or show an error state on failure
Recommendation: Add async/await with try-catch to handle clipboard errors: const handleCopy = async () => { try { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch { /* optionally show error */ } };
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Summary by CodeRabbit
Release Notes
New Features
Chores
Checklist
Additional Information