feat(seo/ux): add title on each page#154
Conversation
|
@anujsharma8d is attempting to deploy a commit to the Kunal Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR adds unique page-level ChangesPage Titles and Semantic Structure
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 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 |
🚀 PR Received SuccessfullyHello @anujsharma8d, Thank you for taking the initiative to contribute to this project. Please ensure that your PR follows all project guidelines properly before requesting review.
|
|
@anujsharma8d add screenshot of every sections of explore page and loom video or video via drive link to showcase what you have done |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
frontend/src/pages/AccountCenterPage.jsx (1)
356-368: ⚡ Quick winGitHub callback logic looks solid, but consider error handling.
The callback handling correctly reads query params, displays the success banner, refreshes the user session, and cleans the URL. However, the empty
catchblock on line 364 silently swallows any errors fromrefreshUser(). Consider logging the error for debugging purposes, even if it's non-critical.Additionally,
refreshUsershould be included in theuseEffectdependency array (line 368) to satisfy ESLint'sexhaustive-depsrule, even though it's likely stable due touseCallbackmemoization inAuthContext.🔍 Suggested improvements
if (status === "connected") { setBanner(`GitHub account @${username || "connected"} linked successfully!`); // Refresh user profile via /auth/me so the card shows the new GitHub identity // WITHOUT needing a full page refresh - refreshUser().catch(() => { }); + refreshUser().catch((err) => { + console.error("Failed to refresh user after GitHub connect:", err); + }); // Clean URL window.history.replaceState({}, "", "/account-center"); } - }, [searchParams]); + }, [searchParams, refreshUser]);🤖 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 `@frontend/src/pages/AccountCenterPage.jsx` around lines 356 - 368, The catch block swallowing errors from refreshUser() should log the error and refreshUser should be added to the useEffect dependency array; update the effect that reads githubStatus/githubUsername to call refreshUser().catch(err => console.error(...)) (or use the app logger) instead of an empty catch, and include refreshUser in the dependency list along with searchParams so ESLint exhaustive-deps is satisfied; keep the existing setBanner, window.history.replaceState, and searchParams logic unchanged.frontend/src/pages/PrivacyPage.jsx (1)
3-4: 💤 Low valueConsider using Fragment wrapper for clearer semantics.
React 19 will correctly hoist the
<title>regardless of placement, but placing it inside<main>in the JSX source can be semantically confusing. For clarity, consider:♻️ Optional refactor for semantic clarity
export default function PrivacyPage() { return( - <main> + <> <title>Privacy Policy - CodeLens</title> + <main> <section> <div className="m-20"> <p className="text-center text-black font-black text-2xl uppercase tracking-widest underline underline-offset-8 decoration-[3px]">Privacy Policy</p> <p className="text-center text-black mt-6"> This is placeholder text. Replace with actual policies later. </p> </div> </section> </main> + </> ); }This places
<title>outside the<main>landmark in the JSX tree, making the semantic structure clearer to developers while maintaining identical runtime behavior.Also applies to: 13-13
🤖 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 `@frontend/src/pages/PrivacyPage.jsx` around lines 3 - 4, The <title> element is currently inside the <main> landmark which is semantically confusing; in the PrivacyPage component, move the <title> out of the <main> and wrap the returned JSX with a React fragment (<>...</>) so the <title> sits at the top-level sibling of <main>, preserving runtime behavior while making the JSX semantics clearer.
🤖 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 `@frontend/src/pages/CodeforcesPage.jsx`:
- Line 363: Update the page title string in the CodeforcesPage component: change
the <title> content from "Codeforces - Codelens" to "Codeforces - CodeLens"
(capital L) so the branding matches other pages; locate the <title> element in
CodeforcesPage.jsx and replace the typo accordingly.
In `@frontend/src/pages/ContestCodeChefPage.jsx`:
- Line 38: The page title string in ContestCodeChefPage.jsx is misspelled as
"CodeChef Constests"; update the title element (the <title> string in the
component) to read "CodeChef Contests" so the page metadata displays the correct
spelling.
---
Nitpick comments:
In `@frontend/src/pages/AccountCenterPage.jsx`:
- Around line 356-368: The catch block swallowing errors from refreshUser()
should log the error and refreshUser should be added to the useEffect dependency
array; update the effect that reads githubStatus/githubUsername to call
refreshUser().catch(err => console.error(...)) (or use the app logger) instead
of an empty catch, and include refreshUser in the dependency list along with
searchParams so ESLint exhaustive-deps is satisfied; keep the existing
setBanner, window.history.replaceState, and searchParams logic unchanged.
In `@frontend/src/pages/PrivacyPage.jsx`:
- Around line 3-4: The <title> element is currently inside the <main> landmark
which is semantically confusing; in the PrivacyPage component, move the <title>
out of the <main> and wrap the returned JSX with a React fragment (<>...</>) so
the <title> sits at the top-level sibling of <main>, preserving runtime behavior
while making the JSX semantics clearer.
🪄 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: 74046722-8131-4400-9172-d2b6be3fc7b1
📒 Files selected for processing (20)
frontend/src/pages/AccountCenterPage.jsxfrontend/src/pages/AlgoVersePage.jsxfrontend/src/pages/ApexAIPage.jsxfrontend/src/pages/ApexWorkspacePage.jsxfrontend/src/pages/BugReportsPage.jsxfrontend/src/pages/CodeforcesPage.jsxfrontend/src/pages/ContestAtCoderPage.jsxfrontend/src/pages/ContestCodeChefPage.jsxfrontend/src/pages/ContestCodeforcesPage.jsxfrontend/src/pages/ContestLeetCodePage.jsxfrontend/src/pages/DashboardPage.jsxfrontend/src/pages/ExplorePage.jsxfrontend/src/pages/GitHubIntelligencePage.jsxfrontend/src/pages/LandingPage.jsxfrontend/src/pages/LoginPage.jsxfrontend/src/pages/NotFoundPage.jsxfrontend/src/pages/PracticePage.jsxfrontend/src/pages/PrivacyPage.jsxfrontend/src/pages/SignupPage.jsxfrontend/src/pages/TermsPage.jsx
|
Hey @kunalverma2512 |
|
@anujsharma8d attach loom video or via drive link also showcase from landing page when not sign up or login and also visite worked pages and then login or sign up and then again visit every worked page and please try to add voice to showcase |
|
@kunalverma2512 The login system is not working. |
you mean that |
|
@kunalverma2512 |
|
@kunalverma2512 |
Its not a right way to contribute but its okay since tasks were independent but again I will never prefer this as contributions because it will only going to increase the count but not your thinking Thanks |
|
@kunalverma2512 |
|
@kunalverma2512 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/pages/GitHubIntelligencePage.jsx (1)
245-247:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winEnsure
<title>is rendered in all return paths (loading/error included).
<title>is currently only rendered in the connected and not-connected branches. The loading branch (Line 221) and generic error branch (Line 223) can leave a stale tab title from the previous route, which breaks the page-title objective.💡 Suggested fix
export default function GitHubIntelligencePage() { + const pageTitle = <title>GitHub Intelligence - CodeLens</title>; const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ - if (loading && !data) return <Skeleton />; + if (loading && !data) return <>{pageTitle}<Skeleton /></>; if (error?.toLowerCase().includes("not connected")) return <NotConnected />; if (error) return ( - <div className="w-full flex-1 flex items-center justify-center p-10"> + <> + {pageTitle} + <div className="w-full flex-1 flex items-center justify-center p-10"> ... - </div> + </div> + </> ); @@ return ( <main> - <title>GitHub Intelligence - CodeLens</title> + {pageTitle} <div className="w-full flex-1 bg-white px-4 sm:px-6 md:px-8 py-12 sm:py-16 relative">🤖 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 `@frontend/src/pages/GitHubIntelligencePage.jsx` around lines 245 - 247, The page title element is only included in some conditional return branches, causing stale tab titles when the component renders loading or error states; update the GitHubIntelligencePage component so the <title> element is present for every return path — either by moving the <title> to a top-level common wrapper rendered before any conditional returns in the component or by adding the same <title> into the loading and generic error branches (the branches around the loading/error checks in GitHubIntelligencePage.jsx), ensuring the title string remains consistent across connected, not-connected, loading, and error states.
🤖 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.
Outside diff comments:
In `@frontend/src/pages/GitHubIntelligencePage.jsx`:
- Around line 245-247: The page title element is only included in some
conditional return branches, causing stale tab titles when the component renders
loading or error states; update the GitHubIntelligencePage component so the
<title> element is present for every return path — either by moving the <title>
to a top-level common wrapper rendered before any conditional returns in the
component or by adding the same <title> into the loading and generic error
branches (the branches around the loading/error checks in
GitHubIntelligencePage.jsx), ensuring the title string remains consistent across
connected, not-connected, loading, and error states.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a5637d01-f5cc-4d72-85c0-9d4db03f082e
📒 Files selected for processing (4)
frontend/src/pages/CodeforcesPage.jsxfrontend/src/pages/ContestCodeChefPage.jsxfrontend/src/pages/GitHubIntelligencePage.jsxfrontend/src/pages/PracticePage.jsx
🚧 Files skipped from review as they are similar to previous changes (3)
- frontend/src/pages/CodeforcesPage.jsx
- frontend/src/pages/PracticePage.jsx
- frontend/src/pages/ContestCodeChefPage.jsx
|
Hey @kunalverma2512 |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/pages/GitHubIntelligencePage.jsx (1)
222-237: ⚡ Quick winUse
<main>in loading and generic error branches for landmark consistency.These two branches still return fragments, while the normal and not-connected states use
<main>. Wrapping them in<main>keeps semantics/accessibility consistent across all render paths.Suggested patch
- if (loading && !data) return <>{pageTitle}<Skeleton />;</> + if (loading && !data) return <main>{pageTitle}<Skeleton /></main>; if (error?.toLowerCase().includes("not connected")) return <NotConnected />; if (error) return ( - <> - {pageTitle} - <div className="w-full flex-1 flex items-center justify-center p-10"> - <div className="border-[4px] border-black p-8 max-w-md text-center"> - <p className="font-black uppercase tracking-widest text-sm mb-3">Failed to load GitHub data</p> - <p className="text-xs font-bold uppercase tracking-widest text-gray-600">{error}</p> - <button onClick={() => window.location.reload()} - className="mt-6 px-6 py-3 border-[3px] border-black font-black uppercase tracking-widest text-sm hover:bg-black hover:text-white transition-colors"> - Retry - </button> + <main> + {pageTitle} + <div className="w-full flex-1 flex items-center justify-center p-10"> + <div className="border-[4px] border-black p-8 max-w-md text-center"> + <p className="font-black uppercase tracking-widest text-sm mb-3">Failed to load GitHub data</p> + <p className="text-xs font-bold uppercase tracking-widest text-gray-600">{error}</p> + <button onClick={() => window.location.reload()} + className="mt-6 px-6 py-3 border-[3px] border-black font-black uppercase tracking-widest text-sm hover:bg-black hover:text-white transition-colors"> + Retry + </button> + </div> </div> - </div> - </> + </main> );🤖 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 `@frontend/src/pages/GitHubIntelligencePage.jsx` around lines 222 - 237, The loading and generic error render paths in GitHubIntelligencePage (the branches that return <>...</> containing pageTitle + Skeleton and the big error UI) should use a <main> landmark like the other branches; replace the fragment wrappers in the loading branch (where pageTitle and Skeleton are returned) and the generic error branch (the block that shows error, error text, and Retry button) with a <main> element so semantics match the normal and NotConnected paths (refer to pageTitle, Skeleton, NotConnected and the error UI returned in GitHubIntelligencePage.jsx).
🤖 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.
Nitpick comments:
In `@frontend/src/pages/GitHubIntelligencePage.jsx`:
- Around line 222-237: The loading and generic error render paths in
GitHubIntelligencePage (the branches that return <>...</> containing pageTitle +
Skeleton and the big error UI) should use a <main> landmark like the other
branches; replace the fragment wrappers in the loading branch (where pageTitle
and Skeleton are returned) and the generic error branch (the block that shows
error, error text, and Retry button) with a <main> element so semantics match
the normal and NotConnected paths (refer to pageTitle, Skeleton, NotConnected
and the error UI returned in GitHubIntelligencePage.jsx).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c7e23c0e-7128-4f58-8beb-0f53a0f7990c
📒 Files selected for processing (3)
frontend/src/pages/CodeforcesPage.jsxfrontend/src/pages/GitHubIntelligencePage.jsxfrontend/src/pages/PracticePage.jsx
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/pages/CodeforcesPage.jsx
- frontend/src/pages/PracticePage.jsx
|
Hey @kunalverma2512 |
2 participants
📌 Pull Request Summary
🔗 Related Issue
Closes #152
📝 Description
This PR adds title tags on each page.
Changes Made
Motivation
Every page in the CodeLens frontend currently shows "CodeLens" as the browser tab title so with this change each page will have a unique title
🚀 Type of Change
Select all that apply:
Video
Recording.2026-06-03.151449.mp4
Images
Initial - Every page have same title i.e. CodeLens
Initial.pdf
Final - Every page have their own title
Before Login :
Final - Before Login.pdf
After Login :
Final - After Login.pdf
🧪 Testing
Verification
✅ Checklist
Summary by CodeRabbit
New Features
Chores
<main>elements) and browser tab titles for improved accessibility and navigation.