feat: Add actual project repository links - #738
Conversation
|
Warning Review limit reached
Next review available in: 41 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
WalkthroughThe projects view now reads shared project metadata, displays repository badges, opens single repositories directly, and shows an animated repository selector for projects with multiple repositories. English and Hindi translations support the new repository actions. ChangesProject repository links
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested labels: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 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: 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 `@src/components/Projects.tsx`:
- Around line 354-425: Update the selectedProject modal in the Projects
component to use role="dialog", aria-modal="true", and an accessible name tied
to its heading. Move focus into the dialog when it opens, trap focus within it,
restore focus to the triggering control on close, and close selectedProject when
Escape is pressed; reuse existing close behavior and ensure inactive background
content is not reachable while open.
In `@src/data/projects.ts`:
- Line 1: Use type-only imports for ProjectItem in src/data/projects.ts lines
1-1 and src/components/Projects.tsx lines 7-7 by changing each import
declaration to import type; no other changes are needed.
- Around line 22-28: Update the affected project entries in the projects data to
replace organization-level GitHub URLs with concrete repository URLs used by
ProjectCard. For DIT, Djed Alliance, FATE, Open Skills, Stability Nexus, and
Truth-n-Trust, add one or more ProjectRepo entries with project-specific names,
URLs, and descriptions, while preserving the existing repository structure.
In `@src/types/project.ts`:
- Around line 1-14: Externalize project categories, repository descriptions, and
accessible labels into the translation catalogs. In src/types/project.ts lines
1-14, model category and repository description values as translation keys;
update src/data/projects.ts lines 3-108 to use those keys. Add matching English
entries in src/messages/en.json lines 28-30 and Hindi entries in
src/messages/hi.json lines 28-30, including close and interpolated
repository-action labels. In src/components/Projects.tsx lines 62 and 384-412,
resolve category and description keys through translations, use distinct
translated labels for direct navigation versus repository selection, and
translate the modal close label.
🪄 Autofix
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: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: b872f6d4-84be-4059-a787-cc4af51288ce
📒 Files selected for processing (5)
src/components/Projects.tsxsrc/data/projects.tssrc/messages/en.jsonsrc/messages/hi.jsonsrc/types/project.ts
| {/* Multi-Repository Popover / Modal Selector */} | ||
| <AnimatePresence> | ||
| {selectedProject && ( | ||
| <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"> | ||
| <motion.div | ||
| initial={{ opacity: 0, scale: 0.95 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.95 }} | ||
| className="relative w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-2xl flex flex-col gap-5 z-50" | ||
| > | ||
| <div className="flex items-center justify-between border-b border-border pb-4"> | ||
| <div className="flex items-center gap-3"> | ||
| <div className="w-10 h-10 rounded-xl border border-border bg-background flex items-center justify-center p-2"> | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img | ||
| src={selectedProject.src} | ||
| alt={selectedProject.name} | ||
| className={`w-full h-full object-contain ${ | ||
| selectedProject.id === "resonate" ? "theme-icon-invert" : "" | ||
| }`} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <h3 className="text-lg font-semibold text-foreground leading-tight"> | ||
| {selectedProject.name} | ||
| </h3> | ||
| <p className="text-xs text-foreground-secondary">{selectedProject.category}</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <button | ||
| onClick={() => setSelectedProject(null)} | ||
| className="w-8 h-8 rounded-full border border-border bg-background-secondary hover:bg-hover flex items-center justify-center text-foreground transition-colors cursor-pointer" | ||
| aria-label="Close modal" | ||
| > | ||
| ✕ | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-3"> | ||
| <p className="text-xs font-semibold text-foreground-muted uppercase tracking-wider"> | ||
| {t("repositories")} | ||
| </p> | ||
|
|
||
| {selectedProject.repositories.map((repo, index) => ( | ||
| <a | ||
| key={index} | ||
| href={repo.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="flex items-center justify-between p-3 rounded-xl border border-border bg-background-secondary hover:bg-hover transition-all group" | ||
| > | ||
| <div className="flex flex-col gap-0.5 max-w-[85%]"> | ||
| <span className="text-sm font-medium text-foreground group-hover:text-heading-highlight transition-colors flex items-center gap-1.5"> | ||
| {repo.name} | ||
| </span> | ||
| {repo.description && ( | ||
| <span className="text-xs text-foreground-secondary line-clamp-1"> | ||
| {repo.description} | ||
| </span> | ||
| )} | ||
| </div> | ||
| <span className="text-xs text-foreground-muted group-hover:text-foreground transition-colors"> | ||
| ↗ | ||
| </span> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </motion.div> | ||
| </div> | ||
| )} | ||
| </AnimatePresence> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Make the repository selector an accessible dialog.
The selector does not declare dialog semantics. It does not move focus into the modal, trap focus, restore focus on close, or close on Escape. Screen-reader users are not informed that a dialog opened and can navigate to inactive background content.
Add role="dialog", aria-modal="true", an accessible dialog name, focus management, and Escape handling.
🧰 Tools
🪛 React Doctor (0.9.3)
[warning] 384-384: Your users can submit the form by accident because a <button> with no type defaults to submit.
Set an explicit button type so plain buttons do not submit forms by accident: type="button", "submit", or "reset".
(button-has-type)
[warning] 400-400: Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
(no-array-index-as-key)
🤖 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 `@src/components/Projects.tsx` around lines 354 - 425, Update the
selectedProject modal in the Projects component to use role="dialog",
aria-modal="true", and an accessible name tied to its heading. Move focus into
the dialog when it opens, trap focus within it, restore focus to the triggering
control on close, and close selectedProject when Escape is pressed; reuse
existing close behavior and ensure inactive background content is not reachable
while open.
| repositories: [ | ||
| { | ||
| name: "AOSSIE-Org", | ||
| url: "https://github.com/AOSSIE-Org", | ||
| description: "Decentralized trust and verification framework", | ||
| }, | ||
| ], |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find catalog URLs that identify a GitHub account but no repository.
rg -nP 'url:\s*"https://github\.com/[^/"]+"\s*,?$' src/data/projects.ts
# List candidate public repositories for the account URLs that need mapping.
for owner in AOSSIE-Org DjedAlliance StabilityNexus; do
gh repo list "$owner" --limit 100 --json name,url,description
doneRepository: AOSSIE-Org/Website
Length of output: 26507
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect catalog structure and the ProjectCard rendering path around the repository link.
wc -l src/data/projects.ts src/components/Projects.tsx
sed -n '1,130p' src/data/projects.ts
echo '--- Projects.tsx outline ---'
ast-grep outline src/components/Projects.tsx || true
echo '--- repository-related sections ---'
rg -n "repositories|repository|ProjectRepo|name:|url:|onClick|link|href" src/components/Projects.tsx src/data/projects.ts -C 3Repository: AOSSIE-Org/Website
Length of output: 11992
Replace GitHub organization URLs with project repository URLs.
ProjectCard opens the single repository directly, so DIT, Djed Alliance, FATE, Open Skills, Stability Nexus, and Truth-n-Trust send users to github.com/<Org> instead of the intended project repository. Add one or more concrete ProjectRepo entries with project-specific names, URLs, and descriptions for each affected project.
🤖 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 `@src/data/projects.ts` around lines 22 - 28, Update the affected project
entries in the projects data to replace organization-level GitHub URLs with
concrete repository URLs used by ProjectCard. For DIT, Djed Alliance, FATE, Open
Skills, Stability Nexus, and Truth-n-Trust, add one or more ProjectRepo entries
with project-specific names, URLs, and descriptions, while preserving the
existing repository structure.
| export interface ProjectRepo { | ||
| name: string; | ||
| url: string; | ||
| description?: string; | ||
| } | ||
|
|
||
| export interface ProjectItem { | ||
| id: string; | ||
| name: string; | ||
| category: string; | ||
| src: string; | ||
| description?: string; | ||
| repositories: ProjectRepo[]; | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Move new project text into the message catalogs.
The modal renders categories and repository descriptions from English literals in PROJECTS. It also uses hard-coded accessible labels. Hindi users therefore receive mixed-language project content. The card label also says “Repository” when it opens a repository selector.
src/types/project.ts#L1-L14: Model categories and repository descriptions as translation keys.src/data/projects.ts#L3-L108: Replace user-visible category and description literals with those keys.src/messages/en.json#L28-L30: Add English category, description, dialog-close, and interpolated repository-action keys.src/messages/hi.json#L28-L30: Add equivalent Hindi keys.src/components/Projects.tsx#L62-L62: Use a translated label that differs for direct repository navigation and repository selection.src/components/Projects.tsx#L384-L412: Translate the close label and resolve category and description keys before rendering.
As per path instructions, user-visible strings must be externalized to resource files.
📍 Affects 5 files
src/types/project.ts#L1-L14(this comment)src/data/projects.ts#L3-L108src/messages/en.json#L28-L30src/messages/hi.json#L28-L30src/components/Projects.tsx#L62-L62src/components/Projects.tsx#L384-L412
🤖 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 `@src/types/project.ts` around lines 1 - 14, Externalize project categories,
repository descriptions, and accessible labels into the translation catalogs. In
src/types/project.ts lines 1-14, model category and repository description
values as translation keys; update src/data/projects.ts lines 3-108 to use those
keys. Add matching English entries in src/messages/en.json lines 28-30 and Hindi
entries in src/messages/hi.json lines 28-30, including close and interpolated
repository-action labels. In src/components/Projects.tsx lines 62 and 384-412,
resolve category and description keys through translations, use distinct
translated labels for direct navigation versus repository selection, and
translate the modal close label.
Source: Path instructions
1 participant
Addressed Issues:
Closes #733
Screenshots/Recordings:
Added repository links to the Projects section so that new contributors can easily discover and access the actual project repositories.
Additional Notes:
This PR improves the discoverability of AOSSIE projects by adding direct repository access from the Projects section.
Changes made:
Testing performed:
npm run buildsuccessfully.AI Usage Disclosure:
I have used the following AI models and tools:
Checklist
Summary by CodeRabbit