Upgrade Next.js and improve project structure#53
Merged
Conversation
…tional type definitions
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 15 minutes and 14 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughMigrates the blog MDX source to Fumadocs runtime, upgrades dependencies and pnpm workspace build allowlist, updates TypeScript/source/ESLint configs, refactors admin analytics loading/rendering, and applies widespread UI timing and styling changes. ChangesDependency Upgrade and MDX Source Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
Dependency ReviewThe following issues were found:
|
…roved user experience
- Adjusted indentation in pnpm-workspace.yaml for consistency. - Reformatted tsconfig.json for improved readability and structure. - Removed unnecessary line breaks and ensured proper alignment of properties.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/admin/analytics-dashboard-primitives.tsx`:
- Line 1: Remove the unnecessary 'use client' directive from
components/admin/analytics-dashboard-primitives.tsx: the module only contains
pure rendering/utility code (no client hooks or browser APIs) and its consumers
like the various analytics-dashboard-sections/*-card.tsx files are already 'use
client'; delete the top-line "'use client';" so this file can be imported from
Server Components without forcing a client boundary.
In `@components/article-engagement.tsx`:
- Line 590: Replace the invalid CSS class token "wra-break-word" in the
paragraph element's className with the correct Tailwind utility "break-words" so
long error messages wrap correctly; update the class string on the JSX element
containing "wra-break-word" (the <p> that currently has 'wra-break-word text-xs
text-destructive') to remove the typo and include "break-words" instead.
In `@eslint.config.mjs`:
- Around line 16-23: The override for scripts ('files': ['scripts/**/*.js']) is
being bypassed because globalIgnores explicitly lists
'scripts/generate-read-times.js'; remove that filename from the globalIgnores
array (or replace the specific ignore with a narrower pattern) so the override
block applying rules like '`@typescript-eslint/no-require-imports`' to
scripts/**/*.js can take effect for generate-read-times.js; locate the
globalIgnores definition and the override block in eslint.config.mjs to make
this change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9cca1707-fa50-415a-83b6-7fe9c1598a49
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
app/admin/page.tsxcomponents/admin/analytics-dashboard-primitives.tsxcomponents/article-engagement.tsxcomponents/article-share.tsxcomponents/cookie-banner.tsxcomponents/table-of-contents.tsxcomponents/tag-filter.tsxcomponents/theme-toggle.tsxcomponents/ui/drawer.tsxcomponents/ui/goey-toaster.tsxeslint.config.mjspnpm-workspace.yamltsconfig.json
🚧 Files skipped from review as they are similar to previous changes (2)
- pnpm-workspace.yaml
- tsconfig.json
…anner, and drawer components for consistency
…ling and presentation
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/about/page.tsx`:
- Line 106: The className string on the JSX element in the About page
concatenates the mask utility and pointer-events class without a space; open the
JSX element that has className='absolute top-0 left-0 z-0 w-full h-50
mask-[linear-gradient(to_top,transparent_25%,black_95%)]pointer-events-none' and
insert a space between the mask[...] token and pointer-events-none so the final
className contains "...black_95%] pointer-events-none". Ensure you update the
className attribute where that exact sequence appears.
In `@components/home/articles-grid-skeleton.tsx`:
- Line 10: The Tailwind aspect-ratio utility used is invalid: replace any
occurrences of the class string "aspect-16/10" (found in the
ArticlesGridSkeleton component in components/home/articles-grid-skeleton.tsx and
likewise in components/read-more-section.tsx and components/blog-card.tsx) with
the arbitrary-value syntax "aspect-[16/10]"; update the JSX className values
where the div uses aspect-16/10 to use aspect-[16/10], and run your linter/build
to confirm the classes are recognized.
In `@components/home/pagination.tsx`:
- Line 91: The pagination layout used an invalid Tailwind utility
`md:order-none`; locate the Pagination component's JSX (the div with className
including "order-3 w-full justify-center flex items-center gap-2 ...") and
replace `md:order-none` with the valid utility `md:order-0` so the element has
order:0 at medium screens (ensuring correct ordering at md breakpoint).
In `@components/site-nav.tsx`:
- Line 37: The Tailwind conditional class `supports-backdrop-filter:...` used in
components/site-nav.tsx and components/cookie-banner.tsx won’t generate CSS
because no `@custom-variant supports-backdrop-filter` is defined; either 1)
update the class usage in those components to use an arbitrary `@supports` variant
like `[`@supports`(backdrop-filter:blur(1px))]:...` for the backdrop-filter
conditional styles, or 2) add the custom variant declaration `@custom-variant
supports-backdrop-filter (`@supports` (backdrop-filter: blur(1px)));` to
app/globals.css so the existing `supports-backdrop-filter:` classes in SiteNav
and the cookie banner work as intended.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2ffd4b35-b64a-4841-a7d5-4dab4bb1bb80
📒 Files selected for processing (22)
app/about/page.tsxapp/blog/[slug]/page.tsxapp/privacy/page.tsxapp/sitemap.tscomponents/admin/analytics-dashboard-primitives.tsxcomponents/admin/analytics-dashboard-sections/top-posts-card.tsxcomponents/admin/analytics-dashboard-sections/views-card.tsxcomponents/article-engagement.tsxcomponents/blog-card.tsxcomponents/blog-post-assistant.tsxcomponents/cookie-banner.tsxcomponents/copy-header.tsxcomponents/home/articles-grid-skeleton.tsxcomponents/home/background-grid.tsxcomponents/home/featured-post.tsxcomponents/home/hero-section.tsxcomponents/home/pagination.tsxcomponents/promo-content.tsxcomponents/read-more-section.tsxcomponents/site-nav.tsxcomponents/ui/drawer.tsxeslint.config.mjs
✅ Files skipped from review due to trivial changes (5)
- components/home/background-grid.tsx
- components/promo-content.tsx
- components/blog-card.tsx
- components/admin/analytics-dashboard-sections/views-card.tsx
- components/copy-header.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- components/ui/drawer.tsx
- components/cookie-banner.tsx
- components/article-engagement.tsx
| {Array.from({ length: count }, (_, index) => ( | ||
| <article key={index} className='rounded-xl border border-border bg-background'> | ||
| <div className='aspect-[16/10] w-full animate-pulse bg-muted/50' /> | ||
| <div className='aspect-16/10 w-full animate-pulse bg-muted/50' /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for any other usages of the invalid aspect-16/10 pattern
rg -n 'aspect-\d+/\d+' --type=tsx --type=ts --type=jsx --type=js
# Search for correct arbitrary aspect-ratio usage
rg -n 'aspect-\[[\d.]+/[\d.]+\]' --type=tsx --type=ts --type=jsx --type=jsRepository: al-husayn/blog
Length of output: 114
🏁 Script executed:
rg -n 'aspect-[0-9]+/[0-9]+' -g'*.ts' -g'*.tsx' -g'*.js' -g'*.jsx'
rg -n 'aspect-\[[0-9.]+/[0-9.]+\]' -g'*.ts' -g'*.tsx' -g'*.js' -g'*.jsx'Repository: al-husayn/blog
Length of output: 501
Fix invalid Tailwind aspect-ratio utility (aspect-16/10)
aspect-16/10 isn’t valid Tailwind aspect-ratio syntax; use arbitrary value form aspect-[16/10]. rg finds this invalid class in:
components/home/articles-grid-skeleton.tsx(current snippet)components/read-more-section.tsxcomponents/blog-card.tsx
🔧 Proposed fix
- <div className='aspect-16/10 w-full animate-pulse bg-muted/50' />
+ <div className='aspect-[16/10] w-full animate-pulse bg-muted/50' />📝 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.
Suggested change
| <div className='aspect-16/10 w-full animate-pulse bg-muted/50' /> | |
| <div className='aspect-[16/10] w-full animate-pulse bg-muted/50' /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/home/articles-grid-skeleton.tsx` at line 10, The Tailwind
aspect-ratio utility used is invalid: replace any occurrences of the class
string "aspect-16/10" (found in the ArticlesGridSkeleton component in
components/home/articles-grid-skeleton.tsx and likewise in
components/read-more-section.tsx and components/blog-card.tsx) with the
arbitrary-value syntax "aspect-[16/10]"; update the JSX className values where
the div uses aspect-16/10 to use aspect-[16/10], and run your linter/build to
confirm the classes are recognized.
| </PaginationLink> | ||
|
|
||
| <div className='order-3 w-full justify-center flex items-center gap-2 md:order-none md:w-auto'> | ||
| <div className='order-3 w-full justify-center flex items-center gap-2 md:order-0 md:w-auto'> |
There was a problem hiding this comment.
Bug fix: Replaces invalid md:order-none with valid md:order-0.
This change fixes a bug where md:order-none (which is not a valid Tailwind utility) is replaced with md:order-0. The previous code was not applying any ordering at the medium breakpoint, likely causing layout issues. The new code correctly applies order: 0 at medium screens and above.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/home/pagination.tsx` at line 91, The pagination layout used an
invalid Tailwind utility `md:order-none`; locate the Pagination component's JSX
(the div with className including "order-3 w-full justify-center flex
items-center gap-2 ...") and replace `md:order-none` with the valid utility
`md:order-0` so the element has order:0 at medium screens (ensuring correct
ordering at md breakpoint).
al-husayn
added
enhancement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enhance project configuration by adding a workspace file, updating TypeScript settings for better JSX support, and migrating middleware logic for improved organization. Remove deprecated configuration and update dependencies to their latest versions.
Summary by CodeRabbit