refactor: replace legacy programmatic routing with semantic Link components#311
refactor: replace legacy programmatic routing with semantic Link components#311itvi-1234 wants to merge 1 commit into
Conversation
✅ Deploy Preview for kmesh-net ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Welcome @itvi-1234! It looks like this is your first PR to kmesh-net/website 🎉 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces useHistory with the Docusaurus Link component across the Blogs and Slider components, adds safety checks for blog data, and introduces security attributes to the GitHub Stars iframe. Review feedback identifies a bug in the slider's key generation logic that would cause duplicate keys and notes that the iframe's sandbox attribute requires additional permissions to allow the GitHub widget to function correctly.
There was a problem hiding this comment.
Pull request overview
Replaces programmatic routing (useHistory) and bare <a onClick> handlers in the homepage slider and Blogs section with declarative @docusaurus/Link components, improves keyboard/SEO accessibility, hardens the GitHub-star iframe and external author links, and adds defensive handling for missing blog plugin data.
Changes:
- Migrate
useHistory().push(...)click handlers to<Link to={...}>in bothsliderandBlogscomponents, and wrap blog titles inside the<Link>so the title text itself is the clickable target. - Add
loading="lazy"andsandbox="allow-scripts allow-same-origin"to the GitHub stars iframe, and addrel="noopener noreferrer"to external author links. - Replace
key={index}with derived keys and guard against missingblogGlobalData.blogPosts(earlyreturn nullwhen empty).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/slider/index.js | Swaps useHistory for <Link>, hardens the GitHub stars iframe, and replaces index-based keys with a derived keyString. |
| src/components/Blogs/index.js | Swaps useHistory for <Link> (wrapping titles), adds null-safety around plugin data, and adds rel="noopener noreferrer" to external author links. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
itvi-1234
force-pushed
the
fix/migrate-usehistory-to-usenavigate
branch
from
ad3231d to
8ba5440
Compare
…onents Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
itvi-1234
force-pushed
the
fix/migrate-usehistory-to-usenavigate
branch
from
8ba5440 to
5a98947
Compare
|
/cc @yashisrani |
|
@itvi-1234: GitHub didn't allow me to request PR reviews from the following users: Jayesh0167. Note that only kmesh-net members and repo collaborators can review this PR, and authors cannot review their own PRs. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: yashisrani The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
/lgtm |
Description
This PR refactors the website's programmatic routing to use standard semantic
<Link>components from@docusaurus/Linkinstead ofuseHistoryor legacy<a>tags with customonClickclick-handlers. Aligned with Docusaurus Core Link Best Practices to leverage build-time broken link detection and smart client-side prefetching instead of fragile programmatic handlersThe Problems Solved:
<a>anchors used as buttons (e.g. "View All" buttons) lackedhrefattributes. These links were not focusable via keyboard (Tabnavigation) and invisible to screen readers.hrefattributes. The click handlers on the homepage blog title cards and navigation links were invisible to SEO indexing.useHistorydeprecation). Moving to declarative semantic<Link>wraps completely avoids runtime hook dependencies.Changes:
src/components/slider/index.js:<a onClick={() => history.push(...)}>button wrap with a proper<Link to={...}>component.sandboxand deferredloading="lazy"attributes to the GitHub Star button Iframe to eliminate initial render blockage.key={index}anti-pattern to stable strings.src/components/Blogs/index.js:<Link to="/blog">.<h3>heading blog card elements so that the title string itself is safely wrapped inside a<Link>tag (restores native browser clickable behavior).