Fix React key warnings in Blogs and resolve zoom plugin dependencies

[Payel-Manna]

Fix React key warnings and replace private zoom plugin with public package

Description

This pull request addresses two issues:

1. React key warnings in the Blogs component

   • Added unique key props for mapped elements, including the authors list.
   • Ensures proper rendering without React warnings.

2. Netlify build failure due to private zoom plugin

   • The project previously depended on a private GitHub repo (plugin-image-zoom) via SSH.
   • Replaced it with the publicly available npm package docusaurus-plugin-image-zoom.
   • Updated docusaurus.config.js to reference the plugin by its full name.
   • Updated package.json and yarn.lock accordingly.

Solution

# Remove the private dependency
yarn remove plugin-image-zoom

# Add the public plugin
yarn add docusaurus-plugin-image-zoom

[netlify]

✅ Deploy Preview for kmesh-net ready!

Name	Link
🔨 Latest commit	e897579
🔍 Latest deploy log	https://app.netlify.com/projects/kmesh-net/deploys/68e9f7449c07b700088d0fe7
😎 Deploy Preview	https://deploy-preview-249--kmesh-net.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kmesh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign lizhencheng9527 for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[kmesh-bot]

Welcome @Payel-Manna! It looks like this is your first PR to kmesh-net/website 🎉

[gemini-code-assist]

Summary of Changes

Hello @Payel-Manna, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request primarily focuses on improving the stability and maintainability of the project by resolving React key warnings in the Blogs component and migrating the image zoom plugin from a private repository to its public npm package, which also fixes Netlify build issues. Additionally, it includes a significant update to Docusaurus and other project dependencies, bringing the project up to date with newer versions and potentially enabling new features.

Highlights

• React Key Warnings Resolved: Addressed React key warnings in the Blogs component by using stable, unique identifiers (item.metadata.permalink and item.name) for list items instead of array indices.
• Image Zoom Plugin Migration: Replaced a private GitHub-hosted plugin-image-zoom dependency with the publicly available docusaurus-plugin-image-zoom npm package, resolving Netlify build failures.
• Dependency Updates: Upgraded Docusaurus core and related plugins from version 3.7.0 to 3.9.1, and introduced several new dependencies, indicating a broader update to the project's ecosystem.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully addresses the React key warnings and resolves the private zoom plugin dependency. The changes in src/components/Blogs/index.js correctly use unique identifiers for keys, which is great. However, I found a critical issue where a non-JSX comment was added, which will break the build. I've also suggested an improvement for variable naming and key selection for better code clarity and robustness. Additionally, the changes in package.json include updates to many dependencies beyond what was mentioned in the PR description. While this might be intentional, it significantly expands the scope of the change and potential for unintended side effects. It would be good to acknowledge these wider dependency updates in the description.

[gemini-code-assist]

An invalid C-style comment (/* ... */) has been added within the JSX. This will cause a syntax error and break the React application. Comments inside JSX should be enclosed in curly braces and asterisks like {/* this is a comment */}. Since this comment just explains a standard React practice, it's better to remove it entirely for cleaner code.

Suggested change

	<div key={item.metadata.permalink} className="viewBlogContainer">/* Better to use unique identifer than index as key */
	<div key={item.metadata.permalink} className="viewBlogContainer">

[gemini-code-assist]

There are a couple of improvements that can be made here for clarity and robustness:

1. The variable item is being reused in the inner map function, which shadows the item variable from the outer map. This can make the code harder to read. It's better to use a more descriptive name like author.
2. Using item.name as a key is good, but author names might not be unique within a single post. The item.url is more likely to be a unique identifier. Using a guaranteed unique value for the key is a React best practice.

Suggested change

	{(item.metadata?.authors || []).map((item) => (
	<a href={item.url} target="_blank">
	<a key={item.name} href={item.url} target="_blank" rel="noreferrer">
	{item.name}
	</a>
	))}
	{(item.metadata?.authors || []).map((author) => (
	<a key={author.url} href={author.url} target="_blank" rel="noreferrer">
	{author.name}
	</a>
	))}

[Payel-Manna]

@jayesh9747 @kevin-wangzefeng
PR Update:

• Fixed React key warnings (item.metadata.permalink for posts, item.url for authors).
• Replaced private zoom plugin with public docusaurus-plugin-image-zoom.
• Removed invalid JSX comment to prevent build errors.
• Updated Docusaurus dependencies v3.7 → v3.9.

✅ Ready for review.