feat(v3): Starlight #65
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughMigrates the docs site from Next.js/Nextra to Astro/Starlight. Removes Next-specific pages, configs, and React components; adds Astro config, Starlight integration, overrides, and MDX content under src/content/docs. Updates tooling (tsconfig, scripts, .gitignore), introduces VS Code configs, custom head/sidebar, and replaces/rewrites documentation. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant S as Astro/Starlight
participant C as Content (src/content/docs)
participant O as Overrides (Footer, SocialIcons)
participant CFG as Config (head, sidebar)
U->>S: Request /docs page
S->>CFG: Load head + sidebar config
S->>C: Resolve MDX content via docs collection
S->>O: Render layout with overrides
O-->>S: Footer + Social icons markup
S-->>U: HTML with head/meta, content, overrides
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
README.md (2)
19-19: Docs now use Astro/Starlight, not Nextra/NextJS. Update wording.This line is outdated after the migration.
Apply this diff:
-The documentation uses Nextra from Vercel, so it's based on NextJS. You can check the [documentation](https://nextra.site) for more information. +The documentation uses Astro with Starlight. See the [Astro docs](https://docs.astro.build) and [Starlight docs](https://starlight.astro.build) for more information.
33-35: Fix broken demo URL.The link misses a dot before “com”.
Apply this diff:
-2. Go to [start-ui [web]](https://demo.start-ui/com), and then go the page you want to screen +2. Go to [start-ui [web]](https://demo.start-ui.com), and then go the page you want to screenpackage.json (1)
15-20: Repository links point to the wrong repo (missing “s”).URLs should be start-ui-web-docs.
Apply this diff:
- "url": "git+https://github.com/bearstudio/start-ui-web-doc" + "url": "git+https://github.com/BearStudio/start-ui-web-docs" @@ - "bugs": { - "url": "https://github.com/bearstudio/start-ui-web-doc/issues" - }, + "bugs": { + "url": "https://github.com/BearStudio/start-ui-web-docs/issues" + },
🧹 Nitpick comments (12)
.vscode/launch.json (1)
5-9: Prefer running via your package script (more portable).Calling the local binary directly can be brittle on Windows. Use the package script to respect the selected package manager and PATH.
Apply this diff:
- "command": "./node_modules/.bin/astro dev", + "command": "pnpm dev",Optionally add "packageManager" to package.json to lock pnpm usage. Want a PR tweak for that too?
package.json (2)
23-26: Move Astro/Starlight/Sharp to devDependencies.They’re build-time only; keeping them in dependencies bloats prod installs.
Apply this diff:
"dependencies": { - "@astrojs/starlight": "^0.36.0", - "astro": "^5.6.1", - "sharp": "^0.34.2" - } + }, + "devDependencies": { + "@astrojs/starlight": "^0.36.0", + "astro": "^5.6.1", + "sharp": "^0.34.2" + }
5-11: Declare packageManager and Node engine
Add packageManager andengines.nodeto lock toolchain to pnpm 9 and Node ≥18.20.8 (Astro v5.8’s minimum LTS support):"description": "Start-UI documentation", "type": "module", + "packageManager": "pnpm@9", + "engines": { + "node": ">=18.20.8" + }, "scripts": {.gitignore (1)
1-22: LGTM with optional hosting ignores.Solid baseline. Optionally add common hosting folders.
Apply this diff if relevant:
# macOS-specific files .DS_Store + +# hosting providers +.vercel/ +.netlify/astro.config.mjs (1)
11-12: Optional: set site URL for canonical links and sitemaps.Recommended by Astro for correct canonical URLs and integrations (sitemap, RSS).
export default defineConfig({ + site: "https://docs.start-ui.com", integrations: [Based on learnings
src/content/docs/tutorials/create-your-first-crud.mdx (1)
5-7: Import path works; consider an alias to reduce brittle relatives.Optional: configure an alias (e.g.,
~or@) and import~/components/WorkInProgress.astro.src/styles/app.css (1)
1-5: Wrap overrides in Starlight’s CSS layer to stabilize cascade.Prevents theme updates from unexpectedly overriding these rules.
+.@layer starlight.theme { .right-sidebar-panel, .right-sidebar-container, .right-sidebar { max-width: 15rem; } @@ .hero > .stack { grid-column: 1 / -1; } +}Please confirm the
.right-sidebar*class names match current Starlight markup across breakpoints.Also applies to: 19-21
src/components/overrides/Footer.astro (1)
1-8: Use dynamic year instead of hard‑coding 2025.Prevents yearly maintenance.
--- +const year = new Date().getFullYear(); import EditLink from "@astrojs/starlight/components/EditLink.astro"; import Pagination from "@astrojs/starlight/components/Pagination.astro"; import config from "virtual:starlight/user-config"; import { Icon } from "@astrojs/starlight/components"; --- @@ - 2025 🚀 Start UI [web] From + {year} 🚀 Start UI [web] FromAlso applies to: 19-27
src/content/docs/features.mdx (1)
33-36: Gate “TODO” placeholders behind a condition or add alt text-ready image stubs.To avoid shipping “TODO …” in production, consider using a compile-time flag or replace with lightweight image placeholders that include meaningful alt text for accessibility. When ready, prefer Astro’s
or
with explicit sizes for CLS-free loading. Also applies to: 43-46, 57-60, 99-102
src/content/docs/technologies.mdx (1)
5-108: Reduce repetition with a small MDX component for “GitHub · License” rows.You repeat the same pattern across sections. Extracting a tiny MDX/ Astro component (e.g., ) will simplify maintenance and make formatting consistent.
src/sidebar.ts (1)
3-22: Prefersatisfiesfor stronger literal typing and safer config.This preserves literal types (e.g., badge variants) without widening and still validates against Starlight’s sidebar type.
Apply this diff:
-export const sidebar: StarlightUserConfig["sidebar"] = [ +export const sidebar = [ @@ -]; +] satisfies StarlightUserConfig["sidebar"];src/content/links.ts (1)
14-17: Optional: add a small type to prevent shape drift.Define and use simple types for extra links (and socials if kept) to catch typos at compile time.
Example:
type ExtraLink = { label: string; href: string }; export const extraLinks: ReadonlyArray<ExtraLink> = [ { label: "Contact", href: "https://twitter.com/startui_" }, ];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (27)
.github/assets/thumbnail.pngis excluded by!**/*.png.github/screenshot.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/images/screenshots/account-management/account-creation-desktop.pngis excluded by!**/*.pngpublic/images/screenshots/account-management/account-creation-mobile.pngis excluded by!**/*.pngpublic/images/screenshots/account-management/account-management-desktop.pngis excluded by!**/*.pngpublic/images/screenshots/account-management/account-management-logout-mobile.pngis excluded by!**/*.pngpublic/images/screenshots/account-management/account-management-mobile.pngis excluded by!**/*.pngpublic/images/screenshots/admin-users-management/user-management-desktop-darkmode.pngis excluded by!**/*.pngpublic/images/screenshots/admin-users-management/user-management-desktop.pngis excluded by!**/*.pngpublic/images/screenshots/admin-users-management/user-management-mobile-darkmode.pngis excluded by!**/*.pngpublic/images/screenshots/admin-users-management/user-management-mobile.pngis excluded by!**/*.pngpublic/images/screenshots/repositories-mobile.pngis excluded by!**/*.pngpublic/images/tech-logos.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/congrats.gifis excluded by!**/*.gifpublic/images/tutorials/create-your-first-entity/db-seed-result.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/db-ui-01.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/db-ui-02.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/db-ui-03.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/display-datalist.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/project-create.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/project-delete.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/project-update.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/project-view.pngis excluded by!**/*.pngpublic/images/tutorials/create-your-first-entity/projects-list.pngis excluded by!**/*.pngpublic/logo-dark.svgis excluded by!**/*.svgpublic/logo-light.svgis excluded by!**/*.svg
📒 Files selected for processing (52)
.gitignore(1 hunks).vscode/extensions.json(1 hunks).vscode/launch.json(1 hunks)LICENSE(0 hunks)README.md(1 hunks)astro.config.mjs(1 hunks)components/FileTree.tsx(0 hunks)components/ImageTabs.tsx(0 hunks)components/ResponsiveStack.tsx(0 hunks)components/Stack.tsx(0 hunks)components/WorkInProgress.tsx(0 hunks)next-env.d.ts(0 hunks)next-sitemap.config.js(0 hunks)next.config.js(0 hunks)package.json(2 hunks)pages/_app.tsx(0 hunks)pages/_meta.json(0 hunks)pages/about.mdx(0 hunks)pages/folders-architecture.mdx(0 hunks)pages/getting-started.mdx(0 hunks)pages/guides/_meta.json(0 hunks)pages/guides/add-new-language.mdx(0 hunks)pages/guides/add-or-update-env-variables.mdx(0 hunks)pages/guides/create-a-new-field.mdx(0 hunks)pages/guides/create-a-new-page.mdx(0 hunks)pages/guides/document-component-on-storybook.mdx(0 hunks)pages/guides/email-development.mdx(0 hunks)pages/guides/env-hint.mdx(0 hunks)pages/guides/generate-icons.mdx(0 hunks)pages/guides/translations-management.mdx(0 hunks)pages/guides/update-color-mode-key.mdx(0 hunks)pages/guides/update-theme-typing.mdx(0 hunks)pages/technologies.mdx(0 hunks)pages/tutorials/create-your-first-crud.mdx(0 hunks)src/components/FileTreeItem.astro(1 hunks)src/components/FileTreeTitle.astro(1 hunks)src/components/WorkInProgress.astro(1 hunks)src/components/overrides/Footer.astro(1 hunks)src/components/overrides/SocialIcons.astro(1 hunks)src/content.config.ts(1 hunks)src/content/docs/features.mdx(4 hunks)src/content/docs/folders-architecture.mdx(1 hunks)src/content/docs/getting-started.mdx(1 hunks)src/content/docs/guides/example.mdx(1 hunks)src/content/docs/index.mdx(1 hunks)src/content/docs/technologies.mdx(1 hunks)src/content/docs/tutorials/create-your-first-crud.mdx(1 hunks)src/content/links.ts(1 hunks)src/sidebar.ts(1 hunks)src/styles/app.css(1 hunks)theme.config.tsx(0 hunks)tsconfig.json(1 hunks)
💤 Files with no reviewable changes (29)
- pages/_app.tsx
- pages/technologies.mdx
- pages/guides/translations-management.mdx
- pages/guides/env-hint.mdx
- next-env.d.ts
- pages/guides/generate-icons.mdx
- pages/guides/add-or-update-env-variables.mdx
- pages/guides/update-color-mode-key.mdx
- pages/guides/create-a-new-page.mdx
- components/ResponsiveStack.tsx
- components/FileTree.tsx
- components/WorkInProgress.tsx
- LICENSE
- pages/guides/document-component-on-storybook.mdx
- pages/getting-started.mdx
- pages/guides/add-new-language.mdx
- theme.config.tsx
- pages/_meta.json
- next.config.js
- pages/guides/email-development.mdx
- pages/tutorials/create-your-first-crud.mdx
- components/ImageTabs.tsx
- next-sitemap.config.js
- components/Stack.tsx
- pages/about.mdx
- pages/guides/_meta.json
- pages/folders-architecture.mdx
- pages/guides/update-theme-typing.mdx
- pages/guides/create-a-new-field.mdx
🧰 Additional context used
🧬 Code graph analysis (1)
astro.config.mjs (2)
src/content/links.ts (1)
socials(1-12)src/sidebar.ts (1)
sidebar(3-22)
🔇 Additional comments (9)
.vscode/extensions.json (1)
2-3: LGTM — right extension for Astro.Good recommendation; no issues.
README.md (1)
47-47: LGTM — aligns with Starlight migration.Clear note on WorkInProgress using Starlight Aside.
src/content/docs/guides/example.mdx (1)
5-7: LGTM — component import and usage are correct.Relative path resolves to src/components; good example placeholder.
If you add an alias (e.g., @ to src in tsconfig/astro), prefer
@/components/WorkInProgress.astrofor readability.src/content.config.ts (1)
1-7: LGTM: docs collection via docsLoader + docsSchema is correct.Based on learnings
src/components/overrides/Footer.astro (1)
10-31: Footer override reads well and uses Starlight primitives correctly.astro.config.mjs (1)
22-25: Override file paths verified: both src/components/overrides/SocialIcons.astro and src/components/overrides/Footer.astro exist.src/content/docs/index.mdx (1)
1-4: Frontmatter looks good; hero image exists.public/images/tech-logos.pngis present at the expected path.src/sidebar.ts (1)
4-11: All referenced slugs exist; no missing documentation files detected.src/content/links.ts (1)
1-12: Update GitHub link and confirm prop shape
- Replace
https://github.com/withastro/starlightwith your Start UI repo URL (e.g.https://github.com/BearStudio/start-ui) if that’s the intended target.- No change needed for property names—the override correctly consumes
href(notlink).
astro.config.mjs
Outdated
| import logoLight from "./public/logo-light.svg"; | ||
| import logoDark from "./public/logo-dark.svg"; |
There was a problem hiding this comment.
Do not import SVGs in astro.config; pass public paths instead.
astro.config runs in Node, not Vite; importing .svg will fail. Reference public URLs.
Apply:
-import logoLight from "./public/logo-light.svg";
-import logoDark from "./public/logo-dark.svg";
@@
- logo: {
- dark: logoDark,
- light: logoLight,
+ logo: {
+ dark: "/logo-dark.svg",
+ light: "/logo-light.svg",
alt: "Start UI",
replacesTitle: true,
},Based on learnings
Also applies to: 15-20
🤖 Prompt for AI Agents
In astro.config.mjs around lines 5-6 (and also lines 15-20), do not import SVG
files because astro.config runs in Node and Vite imports will fail; remove the
import statements for "./public/logo-light.svg" and "./public/logo-dark.svg" and
instead reference their public URL paths (e.g. "/logo-light.svg" and
"/logo-dark.svg") wherever those variables are used; update any code in those
later lines that expects the imported variables to use string paths pointing to
the public folder.
| editLink: { | ||
| baseUrl: "https://github.com/BearStudio/start-ui-web-docs/blob/main", | ||
| }, |
There was a problem hiding this comment.
Edit link should use /edit/main, not /blob/main.
Current link opens the viewer, not the editor.
- editLink: {
- baseUrl: "https://github.com/BearStudio/start-ui-web-docs/blob/main",
- },
+ editLink: {
+ baseUrl: "https://github.com/BearStudio/start-ui-web-docs/edit/main",
+ },Based on learnings
📝 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.
| editLink: { | |
| baseUrl: "https://github.com/BearStudio/start-ui-web-docs/blob/main", | |
| }, | |
| editLink: { | |
| baseUrl: "https://github.com/BearStudio/start-ui-web-docs/edit/main", | |
| }, |
🤖 Prompt for AI Agents
In astro.config.mjs around lines 26 to 28, the editLink.baseUrl currently points
to the repository viewer URL (/blob/main) which opens the file viewer instead of
the editor; change the baseUrl to use the editor path (/edit/main) so edit links
open GitHub's editor (e.g., replace "/blob/main" with "/edit/main") and keep the
same repo path and branch.
| customCss: ["./src/styles/app.css"], | ||
| social: socials, | ||
| sidebar: sidebar, | ||
| }), |
There was a problem hiding this comment.
🧩 Analysis chain
Verify socials target repo URL.
social: socials currently points GitHub to withastro/starlight (per src/content/links.ts). Likely should be a Start UI repo.
Based on learnings
🏁 Script executed:
#!/bin/bash
# Inspect socials
rg -nC2 'export const socials' --type=ts
rg -n 'https://github.com/withastro/starlight' --type=tsLength of output: 192
🏁 Script executed:
#!/bin/bash
# Extract repository/homepage fields from package.json
rg -n '"repository"' -n '"homepage"' -g 'package.json'
# Find any GitHub URLs in README.md
rg -n 'github\.com' -g 'README.md'Length of output: 50
🏁 Script executed:
#!/bin/bash
# Locate package.json and extract repository field
pkg=$(find . -maxdepth 2 -type f -name 'package.json' | head -n1)
if [ -n "$pkg" ]; then
echo "Found package.json at $pkg"
grep -E '"repository"' -C1 "$pkg"
else
echo "package.json not found"
fiLength of output: 78
🏁 Script executed:
#!/bin/bash
# Show repository.url in package.json
grep -R '"url"' -n package.jsonLength of output: 136
Use correct GitHub URL for Start UI in socials
In src/content/links.ts, replace
href: "https://github.com/withastro/starlight"
with
href: "https://github.com/bearstudio/start-ui-web-doc"
🤖 Prompt for AI Agents
In src/content/links.ts around the Start UI social link (approx lines 1-120),
the GitHub href currently points to "https://github.com/withastro/starlight";
update that href value to "https://github.com/bearstudio/start-ui-web-doc" so
the Start UI social link points to the correct repository, keeping the existing
object structure and string quoting style unchanged.
src/components/FileTreeItem.astro
Outdated
| const { label, folder, parent } = Astro.props; | ||
| const href = `#${parent}${label}`.toLowerCase().replaceAll(".", ""); | ||
| --- |
There was a problem hiding this comment.
Avoid “undefined” in anchor and generate a safer slug.
If parent is undefined, href becomes “#undefined…”. Also consider slugging spaces.
Apply this diff:
-const { label, folder, parent } = Astro.props;
-
-const href = `#${parent}${label}`.toLowerCase().replaceAll(".", "");
+const { label, folder = false, parent = "" } = Astro.props as Props;
+const slug = `${parent}${label}`
+ .toLowerCase()
+ .replaceAll(".", "")
+ .replace(/\s+/g, "-");
+const href = `#${slug}`;📝 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 { label, folder, parent } = Astro.props; | |
| const href = `#${parent}${label}`.toLowerCase().replaceAll(".", ""); | |
| --- | |
| const { label, folder = false, parent = "" } = Astro.props as Props; | |
| const slug = `${parent}${label}` | |
| .toLowerCase() | |
| .replaceAll(".", "") | |
| .replace(/\s+/g, "-"); | |
| const href = `#${slug}`; |
🤖 Prompt for AI Agents
In src/components/FileTreeItem.astro around lines 8 to 11, the href construction
can produce “undefined” when parent is missing and doesn’t slug spaces; change
it to first default parent to an empty string (e.g. const parentSafe = parent ??
""), then build a slug from parentSafe and label by trimming, concatenating with
a separator (like a dash) if parent exists, converting to lower case, replacing
dots and whitespace with safe characters (e.g. remove dots and replace spaces
with hyphens), and finally use that slug prefixed with “#”; this prevents
“undefined” anchors and produces a safer, space-friendly slug.
| @@ -0,0 +1,25 @@ | |||
| --- | |||
| import { Icon, Code } from "@astrojs/starlight/components"; | |||
There was a problem hiding this comment.
Fix invalid icon name and remove unused import.
document isn’t a valid Iconify key; and Code is unused.
Apply this diff:
-import { Icon, Code } from "@astrojs/starlight/components";
+import { Icon } from "@astrojs/starlight/components";
@@
- {folder ? <Icon name="seti:folder" /> : <Icon name="document" />}
+ {folder
+ ? <Icon name="seti:folder" aria-hidden="true" />
+ : <Icon name="ph:file" aria-hidden="true" />}
- <code>/<slot /></code>
+ <code>/<slot /></code>Also applies to: 12-15
🤖 Prompt for AI Agents
In src/components/FileTreeTitle.astro around line 2 (and also applies to lines
12-15), remove the unused Code import and only import Icon from
"@astrojs/starlight/components", and replace the invalid Iconify key "document"
wherever used with a valid Iconify key consistent with the project (for example
use a valid key like "mdi:file-document" or the project's chosen file/document
icon); ensure all occurrences are updated and the Code import removed.
| <FileTreeTitle folder>src/hooks</FileTreeTitle> | ||
|
|
||
| React generic hooks that can be use accross the application. | ||
|
|
There was a problem hiding this comment.
Fix typos in the hooks description.
“use accross” hurts readability of the docs. Please adjust the sentence to “used across the application.”
-React generic hooks that can be use accross the application.
+React generic hooks that can be used across the application.📝 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.
| <FileTreeTitle folder>src/hooks</FileTreeTitle> | |
| React generic hooks that can be use accross the application. | |
| <FileTreeTitle folder>src/hooks</FileTreeTitle> | |
| React generic hooks that can be used across the application. |
🤖 Prompt for AI Agents
In src/content/docs/folders-architecture.mdx around lines 91 to 94, the
description for the src/hooks folder contains typos ("use accross"). Update the
sentence to read "React generic hooks that can be used across the application."
replacing the incorrect phrase and keep surrounding markup unchanged.
| ```bash | ||
| cp .env.example .env # Setup your env variables | ||
| cp .vscode/settings.example.json .vscode/settings.json # (Optionnal) Setup your VS Code | ||
| pnpm install # Install dependencies | ||
| pnpm dk:init # Init docker | ||
| pnpm db:init # Init the db | ||
| ``` |
There was a problem hiding this comment.
Typo: “Optionnal” → “Optional”.
-cp .vscode/settings.example.json .vscode/settings.json # (Optionnal) Setup your VS Code
+cp .vscode/settings.example.json .vscode/settings.json # (Optional) Setup your VS Code📝 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.
| ```bash | |
| cp .env.example .env # Setup your env variables | |
| cp .vscode/settings.example.json .vscode/settings.json # (Optionnal) Setup your VS Code | |
| pnpm install # Install dependencies | |
| pnpm dk:init # Init docker | |
| pnpm db:init # Init the db | |
| ``` |
🤖 Prompt for AI Agents
In src/content/docs/getting-started.mdx around lines 23 to 29, there's a typo in
the comment "Optionnal" — change it to "Optional" so the VS Code setup comment
reads "(Optional) Setup your VS Code". Ensure only the comment text is corrected
and surrounding code/commands remain unchanged.
|
|
||
| [Tailwind CSS](https://tailwindcss.com/) is a utility‑first CSS framework that enables rapid UI development with composable classes and an extensible design system. | ||
|
|
||
| [GitHub](https://github.com/tailwindlabs/tailwindcss) · [License MIT](https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE) |
There was a problem hiding this comment.
Fix Tailwind license URL (likely wrong branch).
Tailwind’s default branch is “main”; the current link points to “master” and may 404.
Apply this diff:
-[GitHub](https://github.com/tailwindlabs/tailwindcss) · [License MIT](https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE)
+[GitHub](https://github.com/tailwindlabs/tailwindcss) · [License MIT](https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE)📝 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.
| [GitHub](https://github.com/tailwindlabs/tailwindcss) · [License MIT](https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE) | |
| [GitHub](https://github.com/tailwindlabs/tailwindcss) · [License MIT](https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE) |
🤖 Prompt for AI Agents
In src/content/docs/technologies.mdx around line 41, the Tailwind license link
points to the "master" branch which may 404; update the URL to the "main" branch
by replacing "blob/master/LICENSE" with "blob/main/LICENSE" (or use the
repository's canonical /LICENSE path) so the License MIT link resolves
correctly.
| .main-pane { | ||
| flex: 2; | ||
| width: 100%; | ||
|
|
||
| .content-panel { | ||
| .sl-container { | ||
| width: 100%; | ||
| margin-inline: auto; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Avoid nested CSS unless you’re explicitly enabling CSS Nesting.
Flatten to ensure broad compatibility.
-.main-pane {
- flex: 2;
- width: 100%;
-
- .content-panel {
- .sl-container {
- width: 100%;
- margin-inline: auto;
- }
- }
-}
+.main-pane {
+ flex: 2;
+ width: 100%;
+}
+
+.main-pane .content-panel .sl-container {
+ width: 100%;
+ margin-inline: auto;
+}🤖 Prompt for AI Agents
In src/styles/app.css around lines 7 to 17, the CSS uses nested rules
('.content-panel' and '.sl-container' inside '.main-pane'), which relies on CSS
Nesting support; flatten these by creating top-level selectors that preserve the
original specificity and cascade — keep '.main-pane { flex: 2; width: 100%; }',
then add a separate rule '.main-pane .content-panel { /* moved styles from
nested .content-panel */ }' and another '.main-pane .content-panel .sl-container
{ width: 100%; margin-inline: auto; }' (or move the selectors to the appropriate
global scope) so there is no nesting and compatibility is ensured.
| "extends": "astro/tsconfigs/strict", | ||
| "include": [".astro/types.d.ts", "**/*"], | ||
| "compilerOptions": {}, | ||
| "exclude": ["dist"] |
There was a problem hiding this comment.
Exclude node_modules to avoid massive type-checking and perf issues.
Defining exclude overrides TS’s default implicit excludes; with include: ["**/*"], node_modules will be type-checked unless explicitly excluded.
Apply this diff:
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"compilerOptions": {},
- "exclude": ["dist"]
+ "exclude": ["dist", "node_modules"]
}📝 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.
| "extends": "astro/tsconfigs/strict", | |
| "include": [".astro/types.d.ts", "**/*"], | |
| "compilerOptions": {}, | |
| "exclude": ["dist"] | |
| "extends": "astro/tsconfigs/strict", | |
| "include": [".astro/types.d.ts", "**/*"], | |
| "compilerOptions": {}, | |
| "exclude": ["dist", "node_modules"] |
🤖 Prompt for AI Agents
In tsconfig.json around lines 2 to 5, the config sets "include": ["**/*"] and
overrides the default implicit excludes by providing an "exclude" array that
only contains "dist", which will cause node_modules to be type-checked and harm
performance; update the "exclude" array to include "node_modules" (and
optionally other default excludes like "bower_components" and "jspm_packages")
so node_modules is not type-checked.
| "@astrojs/starlight": "^0.36.0", | ||
| "astro": "^5.6.1", | ||
| "sharp": "^0.34.2" |
There was a problem hiding this comment.
| "@astrojs/starlight": "^0.36.0", | |
| "astro": "^5.6.1", | |
| "sharp": "^0.34.2" | |
| "@astrojs/starlight": "0.36.0", | |
| "astro": "5.6.1", | |
| "sharp": "0.34.2" |
| }, | ||
| "homepage": "https://docs.web.start-ui.com", | ||
| "dependencies": { | ||
| "@vercel/analytics": "1.1.1", |
There was a problem hiding this comment.
We need to check to setup analytics back (we should have some example with Fork It! Community website or else it's in Astro docs)
src/content/links.ts
Outdated
| { | ||
| icon: "github", | ||
| label: "GitHub", | ||
| href: "https://github.com/withastro/starlight", |
There was a problem hiding this comment.
| href: "https://github.com/withastro/starlight", | |
| href: "https://github.com/BearStudio/start-ui-web-docs", |
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
src/components/FileTreeTitle.astro (1)
2-2: Past review comment remains unresolved.The issues flagged in the previous review are still present:
Codeimport is unused and should be removed."document"is not a valid Iconify icon name.- Icons should include
aria-hidden="true"for accessibility.Also applies to: 12-15
src/content/docs/folders-architecture.mdx (1)
93-93: Past review comment remains unresolved.The typo flagged in the previous review is still present: "use accross" should be "used across".
🧹 Nitpick comments (1)
src/content/docs/folders-architecture.mdx (1)
5-5: Remove unused Icon importThe Icon component is imported on line 5 of src/content/docs/folders-architecture.mdx but never used. Remove it to clean up dead code.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
astro.config.mjs(1 hunks)src/components/FileTreeItem.astro(1 hunks)src/components/FileTreeTitle.astro(1 hunks)src/content/docs/folders-architecture.mdx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- astro.config.mjs
- src/components/FileTreeItem.astro
| - <FileTreeItem folder parent="src" label="tests" /> | ||
| - <FileTreeItem folder parent="src" label="types" /> | ||
| - <FileTreeItem label="providers.tsx" /> | ||
| - <FileTreeItem label="routeTree.gen.ts" /> |
There was a problem hiding this comment.
Add missing parent attribute for consistency.
Line 34 appears to be nested under src (based on indentation and context), but lacks the parent="src" attribute present on adjacent items (lines 33, 35). This inconsistency may cause incorrect link generation.
Apply this diff:
- - <FileTreeItem label="routeTree.gen.ts" />
+ - <FileTreeItem parent="src" label="routeTree.gen.ts" />📝 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.
| - <FileTreeItem label="routeTree.gen.ts" /> | |
| - <FileTreeItem parent="src" label="routeTree.gen.ts" /> |
🤖 Prompt for AI Agents
In src/content/docs/folders-architecture.mdx around line 34, the FileTreeItem
for "routeTree.gen.ts" is missing the parent="src" attribute which breaks
consistency with adjacent items; update that line to include parent="src" so it
matches surrounding entries and ensures correct link generation.
|
|
||
| <FileTreeTitle folder label="src/types"/> | ||
|
|
||
| Global TypeScript types available accross all the code base without imports. |
There was a problem hiding this comment.
Fix typo in types description.
"accross" should be "across".
Apply this diff:
-Global TypeScript types available accross all the code base without imports.
+Global TypeScript types available across all the code base without imports.📝 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.
| Global TypeScript types available accross all the code base without imports. | |
| Global TypeScript types available across all the code base without imports. |
🤖 Prompt for AI Agents
In src/content/docs/folders-architecture.mdx around line 125, fix the typo in
the sentence "Global TypeScript types available accross all the code base
without imports." by changing "accross" to "across" so it reads "Global
TypeScript types available across all the code base without imports."; update
the file at that line only and ensure spelling is corrected.
|
|
||
| Global TypeScript types available accross all the code base without imports. | ||
|
|
||
| <FileTreeTitle folder label="src/providers.tsx"/> |
There was a problem hiding this comment.
Remove incorrect folder attribute from file paths.
Lines 127, 131, and 135 use the folder attribute for file paths (src/providers.tsx, src/routeTree.gen.ts, src/router.ts). The folder attribute should only be used for directories, causing these to render with incorrect folder icons.
Apply this diff:
-<FileTreeTitle folder label="src/providers.tsx"/>
+<FileTreeTitle label="src/providers.tsx"/>-<FileTreeTitle folder label="src/routeTree.gen.ts"/>
+<FileTreeTitle label="src/routeTree.gen.ts"/>-<FileTreeTitle folder label="src/router.ts"/>
+<FileTreeTitle label="src/router.ts"/>Also applies to: 131-131, 135-135
🤖 Prompt for AI Agents
In src/content/docs/folders-architecture.mdx around lines 127, 131, and 135, the
FileTreeTitle components incorrectly use the folder attribute for file paths;
remove the folder attribute from the FileTreeTitle entries for
"src/providers.tsx" (line 127), "src/routeTree.gen.ts" (line 131), and
"src/router.ts" (line 135) so they render as files (leave the label prop
unchanged) — simply delete the folder=... from those tags.
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
astro.config.mjs(1 hunks)src/config/head.ts(1 hunks)src/config/sidebar.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- astro.config.mjs
🔇 Additional comments (4)
src/config/sidebar.ts (2)
1-2: LGTM!The import statement correctly references the Starlight configuration types.
3-22: Verified autogenerated directories exist. Bothsrc/content/docs/tutorialsandsrc/content/docs/guidescontain content files.src/config/head.ts (2)
1-2: LGTM!The import statement correctly references the Starlight configuration types.
74-77: LGTM!The favicon link is correctly configured.
| { | ||
| tag: "meta", | ||
| attrs: { name: "msapplication-TileColor", content: "#000000" }, | ||
| }, | ||
| { tag: "meta", attrs: { name: "theme-color", content: "#000000" } }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "viewport", | ||
| content: "width=device-width, initial-scale=1.0", | ||
| }, | ||
| }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { "http-equiv": "Content-Language", content: "en" }, | ||
| }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "description", | ||
| content: | ||
| "Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Fix Open Graph meta tag attribute.
The Open Graph protocol requires the property attribute instead of name for OG tags. However, the standard description meta tag (lines 20-27) correctly uses name.
Note: Line 31 (og:description) also needs the same fix - see separate comment below.
🤖 Prompt for AI Agents
In src/config/head.ts around lines 4 to 27 (and also address line 31 for
og:description), update any Open Graph meta entries so they use the "property"
attribute instead of "name": locate meta objects whose attrs currently have name
values starting with "og:" and replace the attrs key "name" with "property"
while keeping the same value and other attributes untouched; leave the standard
meta description (name="description") as-is and apply the same "name"→"property"
change to the og:description entry at line 31.
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "og:description", | ||
| content: | ||
| "Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Use property attribute for Open Graph tags.
Open Graph meta tags must use the property attribute, not name.
Apply this diff:
{
tag: "meta",
attrs: {
- name: "og:description",
+ property: "og:description",
content:
"Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team",
},
},📝 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.
| { | |
| tag: "meta", | |
| attrs: { | |
| name: "og:description", | |
| content: | |
| "Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team", | |
| }, | |
| }, | |
| { | |
| tag: "meta", | |
| attrs: { | |
| property: "og:description", | |
| content: | |
| "Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team", | |
| }, | |
| }, |
🤖 Prompt for AI Agents
In src/config/head.ts around lines 28 to 35, the Open Graph meta tag is using
the name attribute ("og:description") instead of the required property
attribute; update the attrs to use property: "og:description" (remove or replace
the name key) so the meta tag is rendered as an Open Graph tag, keeping the
content value unchanged and preserving surrounding object structure.
| { | ||
| tag: "meta", | ||
| attrs: { name: "twitter:card", content: "summary_large_image" }, | ||
| }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "twitter:image", | ||
| content: | ||
| "https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png", | ||
| }, | ||
| }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "twitter:site:domain", | ||
| content: "https://github.com/bearstudio/start-ui-web-doc", | ||
| }, | ||
| }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "twitter:url", | ||
| content: "https://github.com/bearstudio/start-ui-web-doc", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Review Twitter Card meta tags for correctness.
The Twitter Card tags have potential issues:
twitter:site:domainandtwitter:url(lines 48-61) contain identical URLs, which may be redundant.- Standard Twitter Card meta names are:
twitter:card,twitter:image,twitter:title,twitter:description,twitter:site(for @username), andtwitter:creator. The tagstwitter:site:domainandtwitter:urlare non-standard.
🌐 Web query:
What are the correct Twitter Card meta tag names and attributes according to the official Twitter documentation?
💡 Result:
Here are the official Twitter Card meta tag names and their common attributes (as defined in Twitter’s developer docs). Use them as HTML meta tags with name="…" and content="…".
Core (used by all card types)
- twitter:card — card type (summary, summary_large_image, app, player). [1][2]
- twitter:site — @username for the site (or use twitter:site:id). [1][2]
- twitter:site:id — numeric Twitter user ID for the site. [1][2]
- twitter:creator — @username of content creator (or use twitter:creator:id). [1][2]
- twitter:creator:id — numeric Twitter user ID of content creator. [1][2]
- twitter:title — concise title for the content. [1][2]
- twitter:description — short description (<= ~200 chars). [1][2]
- twitter:image — URL to the image representing the page. [1][2]
- twitter:url — canonical URL of the page. [1]
Summary / Summary Large Image
- (use the core tags above; summary_large_image uses a larger twitter:image). [1][2]
App Card (additional app-specific tags)
- twitter:app:country — ISO country code for app store lookup. [0][1]
- twitter:app:name:iphone, twitter:app:id:iphone, twitter:app:url:iphone
- twitter:app:name:ipad, twitter:app:id:ipad, twitter:app:url:ipad
- twitter:app:name:googleplay, twitter:app:id:googleplay, twitter:app:url:googleplay. [0][1]
Player Card (media playback)
- twitter:player — URL of iframe/player to render. [1]
- twitter:player:width — player width. [1]
- twitter:player:height — player height. [1]
- twitter:player:stream — media stream URL (when used). [1]
Other / markup reference notes
- Twitter’s parser accepts meta tags using name+content; it will fall back to Open Graph (og:*) when appropriate. [1][2]
- For complete tag lists, platform-specific options, and required vs. optional properties per card type consult the official reference. [1][2]
Sources:
[1] Twitter (X) — Cards markup / Tag reference (official docs).
[2] Twitter (X) — Getting started with Cards / Summary Card examples (official docs).
Use official Twitter Card tags and correct non-standard entries
- Replace non-standard
twitter:site:domainwithtwitter:site(your @username) - Keep
twitter:url(canonical page URL) as it’s a valid core tag - Add
twitter:titleandtwitter:descriptionfor summary_large_image cards
🤖 Prompt for AI Agents
In src/config/head.ts around lines 36 to 61, the Twitter Card meta tags contain
a non-standard tag and are missing core tags; replace the non-standard meta name
"twitter:site:domain" with "twitter:site" and set its content to your Twitter
handle (e.g. "@bearstudio"), keep the existing "twitter:url" as the canonical
page URL, and add new meta entries for "twitter:title" and "twitter:description"
with appropriate site/page title and summary strings; ensure the existing
"twitter:image" and "twitter:card" entries remain unchanged.
| { | ||
| tag: "meta", | ||
| attrs: { name: "og:title", content: "Start UI [web] documentation" }, | ||
| }, | ||
| { | ||
| tag: "meta", | ||
| attrs: { | ||
| name: "og:image", | ||
| content: | ||
| "https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Use property attribute for Open Graph tags.
Both og:title and og:image must use the property attribute instead of name per the Open Graph protocol specification.
Apply this diff:
{
tag: "meta",
attrs: {
- name: "og:title",
+ property: "og:title",
content: "Start UI [web] documentation"
},
},
{
tag: "meta",
attrs: {
- name: "og:image",
+ property: "og:image",
content:
"https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png",
},
},📝 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.
| { | |
| tag: "meta", | |
| attrs: { name: "og:title", content: "Start UI [web] documentation" }, | |
| }, | |
| { | |
| tag: "meta", | |
| attrs: { | |
| name: "og:image", | |
| content: | |
| "https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png", | |
| }, | |
| }, | |
| { | |
| tag: "meta", | |
| attrs: { property: "og:title", content: "Start UI [web] documentation" }, | |
| }, | |
| { | |
| tag: "meta", | |
| attrs: { | |
| property: "og:image", | |
| content: | |
| "https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png", | |
| }, | |
| }, |
🤖 Prompt for AI Agents
In src/config/head.ts around lines 62 to 73, the Open Graph meta tags use the
name attribute instead of property; change each meta object's attrs to use
property: "og:title" and property: "og:image" (remove the name keys) while
keeping the same content values and other attributes intact so the tags conform
to the Open Graph spec.
| ```ts {1, 5-6} filename="prisma/seed/project.ts" showLineNumbers | ||
| import { prisma } from "prisma/seed/utils"; | ||
|
|
||
| export async function createProjects() { | ||
| console.log(`⏳ Seeding projects`); | ||
|
|
||
| const existingProjects = await db.project.findMany(); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Fix inconsistent client usage in seed snippet.
The snippet imports prisma but uses db, so the sample won’t compile as written. Align the import and usage with the final version (import db and call db.project...) to avoid confusing readers.
Apply this diff to keep the snippet consistent:
-import { prisma } from "prisma/seed/utils";
+import { db } from "@/server/db";
export async function createProjects() {
console.log(`⏳ Seeding projects`);
- const existingProjects = await db.project.findMany();
+ const existingProjects = await db.project.findMany();
}📝 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.
| ```ts {1, 5-6} filename="prisma/seed/project.ts" showLineNumbers | |
| import { prisma } from "prisma/seed/utils"; | |
| export async function createProjects() { | |
| console.log(`⏳ Seeding projects`); | |
| const existingProjects = await db.project.findMany(); | |
| } | |
| ``` | |
| import { db } from "@/server/db"; | |
| export async function createProjects() { | |
| console.log(`⏳ Seeding projects`); | |
| const existingProjects = await db.project.findMany(); | |
| } |
🤖 Prompt for AI Agents
In src/content/docs/tutorials/create-your-first-crud.mdx around lines 74 to 82,
the seed snippet imports `prisma` but then calls `db.project.findMany()` which
is inconsistent; update the snippet so the import and usage match the final
convention by importing `db` (not `prisma`) and ensuring all client calls use
`db` (e.g., `const existingProjects = await db.project.findMany()`), keeping the
surrounding text and formatting unchanged.
| return await context.db.project.findMany({ | ||
| // Get an extra item at the end which we'll use as next cursor | ||
| take: input.limit + 1, | ||
| cursor: input.cursor ? { id: input.cursor } : undefined, | ||
| }); | ||
| }), |
There was a problem hiding this comment.
Document required ordering for cursor pagination.
Prisma requires an orderBy whenever a cursor is used; without it the sample throws Error: Argument cursor for data type ... needs an orderBy. Add the orderBy clause (e.g. orderBy: { createdAt: "desc" }) so the documented handler actually works.
Apply this diff to the snippet:
return await context.db.project.findMany({
// Get an extra item at the end which we'll use as next cursor
take: input.limit + 1,
cursor: input.cursor ? { id: input.cursor } : undefined,
+ orderBy: { createdAt: "desc" },
});📝 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.
| return await context.db.project.findMany({ | |
| // Get an extra item at the end which we'll use as next cursor | |
| take: input.limit + 1, | |
| cursor: input.cursor ? { id: input.cursor } : undefined, | |
| }); | |
| }), | |
| return await context.db.project.findMany({ | |
| // Get an extra item at the end which we'll use as next cursor | |
| take: input.limit + 1, | |
| cursor: input.cursor ? { id: input.cursor } : undefined, | |
| orderBy: { createdAt: "desc" }, | |
| }); | |
| }), |
🤖 Prompt for AI Agents
In src/content/docs/tutorials/create-your-first-crud.mdx around lines 448 to
453, the Prisma query uses a cursor but omits orderBy which causes "Argument
cursor ... needs an orderBy" errors; add a deterministic orderBy (for example
orderBy: { createdAt: "desc" }) to the findMany call so cursor pagination works,
ensuring the ordered field(s) are appropriate for your cursor and pagination
direction.
| const [total, items] = await context.db.$transaction([ | ||
| context.db.project.count({ where }), | ||
| context.db.project.findMany({ | ||
| // Get an extra item at the end which we'll use as next cursor | ||
| take: input.limit + 1, | ||
| cursor: input.cursor ? { id: input.cursor } : undefined, | ||
| }), | ||
| ]); |
There was a problem hiding this comment.
Propagate search filter to findMany and guard undefined search term.
where is never passed into findMany, so search doesn’t work. Also contains: undefined will crash Prisma when no search term is provided. Build where conditionally and supply it to both queries.
Consider revising the snippet like this:
- const where = {
- name: {
- contains: input.searchTerm,
- mode: "insensitive",
- },
- } satisfies Prisma.ProjectWhereInput;
+ const where: Prisma.ProjectWhereInput = input.searchTerm
+ ? {
+ name: {
+ contains: input.searchTerm,
+ mode: "insensitive",
+ },
+ }
+ : {};
const [total, items] = await context.db.$transaction([
- context.db.project.count({ where }),
+ context.db.project.count({ where }),
context.db.project.findMany({
// Get an extra item at the end which we'll use as next cursor
take: input.limit + 1,
cursor: input.cursor ? { id: input.cursor } : undefined,
+ where,
+ orderBy: { createdAt: "desc" },
}),
]);📝 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 [total, items] = await context.db.$transaction([ | |
| context.db.project.count({ where }), | |
| context.db.project.findMany({ | |
| // Get an extra item at the end which we'll use as next cursor | |
| take: input.limit + 1, | |
| cursor: input.cursor ? { id: input.cursor } : undefined, | |
| }), | |
| ]); | |
| const where: Prisma.ProjectWhereInput = input.searchTerm | |
| ? { | |
| name: { | |
| contains: input.searchTerm, | |
| mode: "insensitive", | |
| }, | |
| } | |
| : {}; | |
| const [total, items] = await context.db.$transaction([ | |
| context.db.project.count({ where }), | |
| context.db.project.findMany({ | |
| // Get an extra item at the end which we'll use as next cursor | |
| take: input.limit + 1, | |
| cursor: input.cursor ? { id: input.cursor } : undefined, | |
| where, | |
| orderBy: { createdAt: "desc" }, | |
| }), | |
| ]); |
🤖 Prompt for AI Agents
In src/content/docs/tutorials/create-your-first-crud.mdx around lines 644 to
651, the snippet calls count and findMany but never passes the constructed where
to findMany and also may pass contains: undefined to Prisma; update the code to
build the where filter only when a search term exists (e.g., set where = search
? { OR: [...] , title: { contains: search }, ... } : undefined or empty object)
and then pass that same where into both context.db.project.count(...) and
context.db.project.findMany(...), ensuring any contains/filters are only
included when the search term is defined to avoid Prisma errors.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/components/overrides/SocialIcons.astro (1)
16-16: Correct therelattribute to avoid reverse tabnabbing.
noopenneris misspelled, sonoopeneris never applied and the_blanklinks remain vulnerable to reverse tabnabbing. Please spell it correctly (and keepnoreferrer).- rel="noopenner noreferrer" + rel="noopener noreferrer"</review_comment_end>
🧹 Nitpick comments (2)
src/content/links.tsx (1)
16-17: Consider clarifying the label.The link is labeled "Contact" but points to a Twitter account. Consider using a more descriptive label like "Twitter" or "Contact us on Twitter" for clarity.
</review_comment_end>
src/components/overrides/SocialIcons.astro (1)
29-33: Consider addingtarget="_blank"for social links.Social links point to external URLs but don't include
target="_blank", which means they'll navigate away from the current page. For consistency withextraLinksand better UX, consider opening social links in a new tab as well.Apply this diff if you want social links to open in new tabs:
- <a {href} rel="me" class={"sl-flex"}> + <a {href} target="_blank" rel="me noopener noreferrer" class={"sl-flex"}> <span class="sr-only">{label}</span> <Icon name={icon} size="1.5em" /> </a></review_comment_end>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
astro.config.mjs(1 hunks)src/components/overrides/SocialIcons.astro(1 hunks)src/content/docs/about.mdx(1 hunks)src/content/docs/index.mdx(1 hunks)src/content/links.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- astro.config.mjs
- src/content/docs/index.mdx
| <a | ||
| {href} | ||
| target="_blank" | ||
| rel="noopenner noreferrer" | ||
| class={`sl-flex link ${isExternal ? "external-link" : ""}`} |
There was a problem hiding this comment.
Apply target="_blank" conditionally based on isExternal.
Currently, target="_blank" is applied to all extraLinks regardless of the isExternal property. The "About" link in src/content/links.tsx (line 20) is a relative path with isExternal: false (implicitly, since it's not set), but it will still open in a new tab. This creates inconsistent navigation behavior.
Apply this diff to conditionally set the target attribute:
<a
{href}
- target="_blank"
+ {...(isExternal && { target: "_blank" })}
rel="noopenner noreferrer"
class={`sl-flex link ${isExternal ? "external-link" : ""}`}
>Or alternatively:
<a
{href}
- target="_blank"
+ target={isExternal ? "_blank" : undefined}
rel="noopenner noreferrer"
class={`sl-flex link ${isExternal ? "external-link" : ""}`}
></review_comment_end>
📝 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.
| <a | |
| {href} | |
| target="_blank" | |
| rel="noopenner noreferrer" | |
| class={`sl-flex link ${isExternal ? "external-link" : ""}`} | |
| <a | |
| {href} | |
| target={isExternal ? "_blank" : undefined} | |
| rel="noopenner noreferrer" | |
| class={`sl-flex link ${isExternal ? "external-link" : ""}`} | |
| > |
🤖 Prompt for AI Agents
In src/components/overrides/SocialIcons.astro around lines 13-17, the anchor
unconditionally includes target="_blank" (and has a typo in rel="noopenner")
causing internal links to open in new tabs; change the markup so target="_blank"
is only set when isExternal is true and ensure rel is set to "noopener
noreferrer" only for external links (fixing the rel typo), e.g. conditionally
add the target and rel attributes based on isExternal so internal/relative links
behave normally.
| } | ||
|
|
||
| .link { | ||
| underline: none; |
There was a problem hiding this comment.
Fix invalid CSS property.
underline: none; is not a valid CSS property. The correct property is text-decoration: none;.
Apply this diff to fix the CSS:
.link {
- underline: none;
+ text-decoration: none;
}</review_comment_end>
📝 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.
| underline: none; | |
| .link { | |
| text-decoration: none; | |
| } |
🤖 Prompt for AI Agents
In src/components/overrides/SocialIcons.astro around line 51, the CSS uses the
invalid property "underline: none;"; replace it with the correct property
"text-decoration: none;" to remove underlines from text, ensuring the selector's
style rule uses text-decoration instead of underline.
| href: "https://twitter.com/startui_", | ||
| isExternal: true, | ||
| }, | ||
| { label: "About", href: "about" }, |
There was a problem hiding this comment.
Inconsistent path format may cause navigation issues.
The "About" link uses a relative path ("about"), while other links use absolute URLs. Additionally, in SocialIcons.astro, target="_blank" is unconditionally applied to all extraLinks (line 15), which will cause the relative "About" link to open in a new tab inappropriately.
Consider either:
- Making "About" an absolute URL like the other links, or
- Adjusting
SocialIcons.astroto conditionally applytarget="_blank"based on theisExternalproperty
</review_comment_end>
🤖 Prompt for AI Agents
In src/content/links.tsx around line 20, the "About" link uses a relative path
("about") while other links are absolute, causing inconsistent navigation and
unintended new-tab behavior; change the "About" href to an absolute or
root-relative path (e.g., "/about") to match format, and update
SocialIcons.astro to only set target="_blank" (and rel="noopener noreferrer")
when the link is external by checking an isExternal property so internal links
do not open in a new tab.
2 participants
Summary by CodeRabbit
New Features
Documentation
Style
Chores