vercel fix

Author: sanjay-kv

docs/getting_started.md

@@ -29,26 +29,26 @@ Head to the the GitHub issue on this [repository](https://github.com/recodehive/
 <Tabs>
   <TabItem value="Step 1" label="Step 1">
     <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](assets\blog-01-new-issue.png)](https://github.com/recodehive/recode-website/issues)
+     [![Github](assets/blog-01-new-issue.png)](https://github.com/recodehive/recode-website/issues)
     </BrowserWindow>
   </TabItem>
 
 <TabItem value="Step 2" label="Step 2">
      <BrowserWindow url="https://github.com/recodehive/recode-website/documentation" bodyStyle={{padding: 0}}>    
-     [![Github](assets\blog-02-new-issue.png)](https://github.com/recodehive/recode-website/documentations)
+     [![Github](assets/blog-02-new-issue.png)](https://github.com/recodehive/recode-website/documentations)
     </BrowserWindow>
 
   </TabItem>
 
   <TabItem value="Step 3" label="Step 3">
       <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)
+     [![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)
+     [![Github](assets/blog-04-new-issue.png)](https://github.com/recodehive/recode-website/issues/1577)
     </BrowserWindow>
     </TabItem>
 
@@ -61,7 +61,7 @@ Head to the the GitHub issue on this [repository](https://github.com/recodehive/
 
 ## Step 3: Create a New Branch
 
-Never commit directly to `main`. Create a dedicated branch for your blog post:
+Never commit directly to `main`. Create a dedicated branch for your blog post: test
 
 ```bash
 git checkout -b blog/your-blog-title

src/components/particle.tsx

@@ -2,12 +2,9 @@ import * as React from "react";
 import Particles, { ParticlesProvider } from "@tsparticles/react";
 import { useCallback, useMemo } from "react";
 import { loadSlim } from "@tsparticles/slim";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
-const initParticles = async (engine: Engine) => {
-  await loadSlim(engine);
-};
-
-const ParticlesComponent = (props) => {
+const ParticlesInner = (props) => {
   const particlesInit = useCallback(async (engine) => {
     await loadSlim(engine);
   }, []);
@@ -89,10 +86,6 @@ const ParticlesComponent = (props) => {
     [],
   );
 
-  if (!init) {
-    return null;
-  }
-
   return (
     <ParticlesProvider init={particlesInit}>
       <div
@@ -102,14 +95,18 @@ const ParticlesComponent = (props) => {
           height: "100vh",
           top: 0,
           left: 0,
-          zIndex: -1, // Critical: ensures it's in the background
-          pointerEvents: "none", // Ensures it doesn't block clicks
+          zIndex: -1,
+          pointerEvents: "none",
         }}
       >
-        <Particles id={props.id} options={options} particlesLoaded={particlesLoaded} />
+        <Particles id={props.id} options={options} />
       </div>
     </ParticlesProvider>
   );
 };
 
+const ParticlesComponent = (props) => (
+  <BrowserOnly>{() => <ParticlesInner {...props} />}</BrowserOnly>
+);
+
 export default ParticlesComponent;