Fix React key warnings in Blogs and resolve zoom plugin dependencies

Author: Payel-Manna

docusaurus.config.js

@@ -16,7 +16,7 @@ const config = {
   baseUrl: "/",
 
   onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+  onBrokenMarkdownLinks: "warn", 
 
   i18n: {
     defaultLocale: "en",
@@ -60,6 +60,7 @@ const config = {
           onInlineTags: "warn",
           onInlineAuthors: "warn",
           onUntruncatedBlogPosts: "warn",
+          
         },
         theme: {
           customCss: "./src/css/custom.css",
@@ -148,7 +149,7 @@ const config = {
   plugins: [
     [require.resolve("./src/plugins/blogGlobalData/index.js"), {}],
     "docusaurus-plugin-sass",
-    "plugin-image-zoom",
+    "docusaurus-plugin-image-zoom",
     [
       "docusaurus-lunr-search",
       {

package.json

@@ -15,25 +15,54 @@
     "lint": "markdownlint-cli2 --config .markdownlint.jsonc --fix \"**/*.md\" \"#node_modules\""
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/plugin-content-blog": "^3.7.0",
-    "@docusaurus/plugin-google-gtag": "^3.7.0",
-    "@docusaurus/preset-classic": "3.7.0",
+    "@ai-sdk/gateway": "1.0.39",
+    "@ai-sdk/react": "2.0.68",
+    "@algolia/autocomplete-core": "1.19.2",
+    "@algolia/autocomplete-plugin-algolia-insights": "1.19.2",
+    "@docsearch/css": "4.2.0",
+    "@docsearch/react": "4.2.0",
+    "@docusaurus/core": "3.9.1",
+    "@docusaurus/plugin-content-blog": "^3.9.1",
+    "@docusaurus/plugin-css-cascade-layers": "3.9.1",
+    "@docusaurus/plugin-debug": "3.9.1",
+    "@docusaurus/plugin-google-analytics": "3.9.1",
+    "@docusaurus/plugin-google-gtag": "3.9.1",
+    "@docusaurus/plugin-google-tag-manager": "3.9.1",
+    "@docusaurus/plugin-sitemap": "3.9.1",
+    "@docusaurus/plugin-svgr": "3.9.1",
+    "@docusaurus/preset-classic": "3.9.1",
+    "@docusaurus/theme-classic": "3.9.1",
+    "@docusaurus/theme-search-algolia": "3.9.1",
     "@mdx-js/react": "^3.0.0",
     "@node-rs/jieba": "^2.0.1",
+    "@opentelemetry/api": "1.9.0",
+    "@standard-schema/spec": "1.0.0",
+    "@vercel/oidc": "3.0.2",
+    "ai": "5.0.68",
+    "algoliasearch": "5.40.0",
+    "algoliasearch-helper": "3.26.0",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.6.0",
+    "docusaurus-plugin-image-zoom": "^3.0.1",
     "docusaurus-plugin-sass": "^0.2.6",
-    "plugin-image-zoom": "flexanalytics/plugin-image-zoom",
+    "eventsource-parser": "3.0.6",
+    "json-schema": "0.4.0",
+    "marked": "16.4.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-json-view-lite": "2.5.0",
     "react-slick": "^0.30.3",
+    "reading-time": "^1.5.0",
     "sass": "^1.84.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "swr": "2.3.6",
+    "throttleit": "2.1.0",
+    "use-sync-external-store": "1.6.0",
+    "zod": "4.1.12"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/module-type-aliases": "3.9.1",
     "@docusaurus/types": "3.7.0",
     "markdownlint-cli2": "^0.18.1"
   },

src/components/Blogs/index.js

@@ -25,7 +25,7 @@ export default function Blogs() {
         </div>
         <div className="right">
           {blogPosts.slice(0, 3).map((item, index) => (
-            <div key={index} className="viewBlogContainer">
+            <div key={item.metadata.permalink} className="viewBlogContainer">/* Better to use unique identifer than index as key */
               <h3 onClick={() => history.push(item.metadata.permalink)}>
                 {item.metadata.title}
               </h3>
@@ -35,7 +35,7 @@ export default function Blogs() {
               <div className="info">
                 <div className="author">
                   {(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>
                   ))}