feat(everything): add GitHub code link to home tab #371#413
feat(everything): add GitHub code link to home tab #371#413TheCodingAyush wants to merge 3 commits intoalpic-ai:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a clickable GitHub link to the home tab of the "everything" example app, allowing users to view the full code implementation. The changes follow reviewer feedback to use the useOpenExternal hook for better platform compatibility and add the GitHub domain to the CSP configuration.
Changes:
- Updated HomeTab component to use
useOpenExternalhook for opening the GitHub repository link - Added
https://github.comto the CSPredirectDomainsconfiguration - Changed link text from full URL to shortened "Github"
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| examples/everything/web/src/widgets/tabs/home-tab.tsx | Implements clickable GitHub link using useOpenExternal hook with onClick handler |
| examples/everything/server/src/server.ts | Adds GitHub domain to CSP redirectDomains whitelist to allow external navigation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| style={{ cursor: "pointer" }} | ||
| > | ||
| github.com/alpic-ai/skybridge/tree/main/examples/everything | ||
| Github |
There was a problem hiding this comment.
The link text should be "GitHub" (with capital H) instead of "Github" to match the official brand capitalization. Throughout the codebase, "GitHub" is consistently used (e.g., in CONTRIBUTING.md, README.md, and packages/core/src/commands/dev.tsx).
| Github | |
| GitHub |
| <a | ||
| href="https://github.com/alpic-ai/skybridge/tree/main/examples/everything" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| href="#" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| openExternal( | ||
| "https://github.com/alpic-ai/skybridge/tree/main/examples/everything" | ||
| ); | ||
| }} | ||
| style={{ cursor: "pointer" }} | ||
| > | ||
| github.com/alpic-ai/skybridge/tree/main/examples/everything | ||
| Github | ||
| </a> |
There was a problem hiding this comment.
For better accessibility, consider adding role="button" to this anchor element since it behaves as a button rather than a traditional link. When using href="#" with onClick, it's best practice to indicate to assistive technologies that this is a button-like interaction. Additionally, the link should be keyboard accessible - consider adding onKeyDown handler to support Enter/Space key presses.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| "https://github.com/alpic-ai/skybridge/tree/main/examples/everything" | ||
| ); | ||
| }} | ||
| style={{ cursor: "pointer" }} |
There was a problem hiding this comment.
Redundant style - anchor tags already have cursor: pointer by default
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: examples/everything/web/src/widgets/tabs/home-tab.tsx
Line: 26:26
Comment:
Redundant style - anchor tags already have `cursor: pointer` by default
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.- Capitalize GitHub properly - Add role=button for accessibility - Remove redundant cursor style
| @@ -12,11 +16,16 @@ export function HomeTab() { | |||
| <p className="description"> | |||
| Read the full code implementation on{" "} | |||
| <a | |||
There was a problem hiding this comment.
you can use
- i don't think href="#" is necessary ?
There was a problem hiding this comment.
Good point! I'll switch to a element instead that would be cleaner as compared to using an anchor tag with href="#"
| href="#" | ||
| role="button" | ||
| onClick={(e) => { | ||
| e.preventDefault(); |
There was a problem hiding this comment.
why do you need to prevent default ?
There was a problem hiding this comment.
You're right with a this won't be needed. Switching to a button element now.
- Replace <a href='#'> with <button> per reviewer feedback - Remove unnecessary preventDefault and role='button' - Add link-button CSS class for styling
3 participants
Fixes #371
Changes based on reviewer feedback:
useOpenExternalhook instead of plain anchor taghttps://github.comto CSP redirectDomainsGreptile Overview
Greptile Summary
Added a clickable GitHub link to the home tab that opens the repository in an external browser. The implementation properly uses the
useOpenExternalhook instead of a plain anchor tag, and adds the necessary CSP configuration to allow redirects tohttps://github.com.Key changes:
https://github.comto the CSPredirectDomainsarray inexamples/everything/server/src/server.ts:20useOpenExternalhook with proper event handling inexamples/everything/web/src/widgets/tabs/home-tab.tsx:22-24Confidence Score: 4/5
(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!