Merge pull request recodehive#1602 from recodehive/blog/contributions

Blog/contributions

Author: sanjay-kv

.github/workflows/lint.yml

@@ -9,5 +9,5 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - run: npm ci || npm install
+      - run: npm ci --legacy-peer-deps || npm install --legacy-peer-deps
       - run: npm run lint

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

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

@@ -17,42 +17,46 @@ This guide walks you through everything you need to write and publish a blog pos
 :::
 ---
 
-## Step 1: Raise a New issue 
-
-Head to the the GitHub issue on this [repository](https://github.com/recodehive/recode-website/issues)
-     <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
+## Step 1: Raise a New issue on GitHub
+
+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}}>    
      [![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)
+    </BrowserWindow>
 
-## Step 1: Fork and Clone the Repository
-
-1. Go to [https://github.com/recodehive/recode-website](https://github.com/recodehive/recode-website) and click **Fork** (top-right corner).
-
-2. Clone your fork to your local machine:
-
-   ```bash
-   git clone https://github.com/your-username/recode-website.git
-   cd recode-website
-   ```
-
-3. Add the upstream remote so you can stay in sync:
-
-   ```bash
-   git remote add upstream https://github.com/recodehive/recode-website.git
-   ```
-
----
-
-## Step 2: Install Dependencies and Run Locally
+  </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)
+    </BrowserWindow>
+    </TabItem>
 
-```bash
-npm install
-npm start
-```
+  <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>
 
-This starts a local development server. Open [http://localhost:3000](http://localhost:3000) in your browser to preview the site live. Changes you make to files will hot-reload automatically.
+:::
 
+#### Just follow the steps on forking the repositories and installing the dependencies on your local repository, if you dont know refer the steps 2 to 6 on [welcome page](https://www.recodehive.com/docs/).
 ---
 
 ## Step 3: Create a New Branch

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

@@ -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",

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

@@ -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>
   );
 };