updated ts package to v4 and documentation change

Author: sanjay-kv

docs/assets/blog-04-new-issue.png

@@ -19,8 +19,13 @@ This guide walks you through everything you need to write and publish a blog pos
 
 ## Step 1: Raise a New issue on GitHub
 
-Head to the the GitHub issue on this [repository](https://github.com/recodehive/recode-website/issues)
+Head to the the GitHub issue on this [repository](https://github.com/recodehive/recode-website/issues), raise an new issue under documentation update. 
     :::info
+    * Few things to remember, don't raise random generic topics.
+    * Write from real experience, try to include real dashboard pictures, no copy paste articles.
+    * You can generate AI pictures, but need to be edited any tools like Canva.
+    * Your article must teach something offical documentation doesnot. Means no Intro to X or What is X.
+    * Start working on Issue When its assigned to you by @sanjay-kv or any Maintainer. ref step 4.
 <Tabs>
   <TabItem value="Step 1" label="Step 1">
     <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
@@ -36,10 +41,17 @@ Head to the the GitHub issue on this [repository](https://github.com/recodehive/
   </TabItem>
 
   <TabItem value="Step 3" label="Step 3">
-      <BrowserWindow url="https://github.com/recodehive/recode-website/documentation" bodyStyle={{padding: 0}}>    
-     [![Github](assets\blog-03-new-issue.png)](https://github.com/recodehive/recode-website/documentations)
+      <BrowserWindow url="https://github.com/recodehive/recode-website/issues/1586" bodyStyle={{padding: 0}}>    
+     [![Github](assets\blog-03-new-issue.png)](https://github.com/recodehive/recode-website/issues/1577)
     </BrowserWindow>
     </TabItem>
+
+  <TabItem value="Step 4" label="Step 4">
+      <BrowserWindow url="https://github.com/recodehive/recode-website/issues/1577" bodyStyle={{padding: 0}}>    
+     [![Github](assets\blog-04-new-issue.png)](https://github.com/recodehive/recode-website/issues/1577)
+    </BrowserWindow>
+    </TabItem>
+  
 </Tabs>
 
 :::

docs/getting_started.md

@@ -45,7 +45,8 @@
     "@radix-ui/react-avatar": "^1.1.7",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-slot": "^1.2.3",
-    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/engine": "^4.0.5",
+    "@tsparticles/react": "^4.0.5",
     "@tsparticles/slim": "^4.0.5",
     "@vercel/analytics": "^1.5.0",
     "canvas-confetti": "^1.9.3",

package-lock.json

@@ -1,17 +1,11 @@
 import * as React from "react";
-import Particles, { initParticlesEngine } from "@tsparticles/react";
-import { useEffect, useMemo, useState } from "react";
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { useCallback, useMemo } from "react";
 import { loadSlim } from "@tsparticles/slim";
 
 const ParticlesComponent = (props) => {
-  const [init, setInit] = useState(false);
-
-  useEffect(() => {
-    initParticlesEngine(async (engine) => {
-      await loadSlim(engine);
-    }).then(() => {
-      setInit(true);
-    });
+  const particlesInit = useCallback(async (engine) => {
+    await loadSlim(engine);
   }, []);
 
   const particlesLoaded = (container) => {
@@ -96,19 +90,21 @@ const ParticlesComponent = (props) => {
   );
 
   return (
-    <div
-      style={{
-        position: "fixed",
-        width: "100vw",
-        height: "100vh",
-        top: 0,
-        left: 0,
-        zIndex: -1, // Critical: ensures it's in the background
-        pointerEvents: "none", // Ensures it doesn't block clicks
-      }}
-    >
-      <Particles id={props.id} options={options} />
-    </div>
+    <ParticlesProvider init={particlesInit}>
+      <div
+        style={{
+          position: "fixed",
+          width: "100vw",
+          height: "100vh",
+          top: 0,
+          left: 0,
+          zIndex: -1, // Critical: ensures it's in the background
+          pointerEvents: "none", // Ensures it doesn't block clicks
+        }}
+      >
+        <Particles id={props.id} options={options} particlesLoaded={particlesLoaded} />
+      </div>
+    </ParticlesProvider>
   );
 };