diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 690055cd..60620e9b 100644 --- a/.github/workflows/lint.yml +++ b/.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 diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..521a9f7c --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/docs/assets/blog-01-new-issue.png b/docs/assets/blog-01-new-issue.png index 022cbf4c..e575bf37 100644 Binary files a/docs/assets/blog-01-new-issue.png and b/docs/assets/blog-01-new-issue.png differ diff --git a/docs/assets/blog-02-new-issue.png b/docs/assets/blog-02-new-issue.png new file mode 100644 index 00000000..f5d0ac0c Binary files /dev/null and b/docs/assets/blog-02-new-issue.png differ diff --git a/docs/assets/blog-03-new-issue.png b/docs/assets/blog-03-new-issue.png new file mode 100644 index 00000000..22f9e350 Binary files /dev/null and b/docs/assets/blog-03-new-issue.png differ diff --git a/docs/assets/blog-04-new-issue.png b/docs/assets/blog-04-new-issue.png new file mode 100644 index 00000000..9b44a8f2 Binary files /dev/null and b/docs/assets/blog-04-new-issue.png differ diff --git a/docs/getting_started.md b/docs/getting_started.md index dd834d79..183d2367 100644 --- a/docs/getting_started.md +++ b/docs/getting_started.md @@ -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) - +## 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. + + + [![Github](assets\blog-01-new-issue.png)](https://github.com/recodehive/recode-website/issues) + + + + [![Github](assets\blog-02-new-issue.png)](https://github.com/recodehive/recode-website/documentations) + -## 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 + + + + + [![Github](assets\blog-03-new-issue.png)](https://github.com/recodehive/recode-website/issues/1577) + + -```bash -npm install -npm start -``` + + + [![Github](assets\blog-04-new-issue.png)](https://github.com/recodehive/recode-website/issues/1577) + + + + -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 diff --git a/package-lock.json b/package-lock.json index 7e2fcd2f..0db50c65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,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", @@ -8074,27 +8075,6 @@ "@tsparticles/updater-size": "4.0.5" } }, - "node_modules/@tsparticles/basic/node_modules/@tsparticles/engine": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-4.0.5.tgz", - "integrity": "sha512-ovFQNzz18Ef0ww7wPqykHWU06K1EhTkMPZhoIZQQaRbFmKKoE+5LyTGGTZGzGjQ4GjHLZq7l9kGl1oInpzoK4Q==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/matteobruni" - }, - { - "type": "github", - "url": "https://github.com/sponsors/tsparticles" - }, - { - "type": "buymeacoffee", - "url": "https://www.buymeacoffee.com/matteobruni" - } - ], - "hasInstallScript": true, - "license": "MIT" - }, "node_modules/@tsparticles/basic/node_modules/@tsparticles/plugin-blend": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@tsparticles/plugin-blend/-/plugin-blend-4.0.5.tgz", @@ -8228,9 +8208,9 @@ } }, "node_modules/@tsparticles/engine": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz", - "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-4.0.5.tgz", + "integrity": "sha512-ovFQNzz18Ef0ww7wPqykHWU06K1EhTkMPZhoIZQQaRbFmKKoE+5LyTGGTZGzGjQ4GjHLZq7l9kGl1oInpzoK4Q==", "funding": [ { "type": "github", @@ -8246,15 +8226,15 @@ } ], "hasInstallScript": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@tsparticles/react": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz", - "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-4.0.5.tgz", + "integrity": "sha512-3XJmucy/gOgPzQ+i5ZAt3LD8840xdxLPfbNMuRk8D/fHhxI07SHx/8GhODcqnHHHme1zEf0/zUdFee73PuH+NA==", + "license": "MIT", "peerDependencies": { - "@tsparticles/engine": "^3.0.2", + "@tsparticles/engine": "workspace:^", "react": ">=16.8.0", "react-dom": ">=16.8.0" } @@ -8332,27 +8312,6 @@ "@tsparticles/engine": "4.0.5" } }, - "node_modules/@tsparticles/slim/node_modules/@tsparticles/engine": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-4.0.5.tgz", - "integrity": "sha512-ovFQNzz18Ef0ww7wPqykHWU06K1EhTkMPZhoIZQQaRbFmKKoE+5LyTGGTZGzGjQ4GjHLZq7l9kGl1oInpzoK4Q==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/matteobruni" - }, - { - "type": "github", - "url": "https://github.com/sponsors/tsparticles" - }, - { - "type": "buymeacoffee", - "url": "https://www.buymeacoffee.com/matteobruni" - } - ], - "hasInstallScript": true, - "license": "MIT" - }, "node_modules/@tsparticles/slim/node_modules/@tsparticles/interaction-external-attract": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-4.0.5.tgz", @@ -9160,7 +9119,7 @@ "version": "19.2.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.1.tgz", "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==", - "devOptional": true, + "dev": true, "license": "MIT", "peerDependencies": { "@types/react": "^19.2.0" @@ -20355,30 +20314,6 @@ "pathe": "^2.0.1" } }, - "node_modules/monaco-editor": { - "version": "0.55.1", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", - "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", - "license": "MIT", - "peer": true, - "dependencies": { - "dompurify": "3.2.7", - "marked": "14.0.0" - } - }, - "node_modules/monaco-editor/node_modules/marked": { - "version": "14.0.0", - "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", - "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", - "license": "MIT", - "peer": true, - "bin": { - "marked": "bin/marked.js" - }, - "engines": { - "node": ">= 18" - } - }, "node_modules/motion-dom": { "version": "12.39.0", "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.39.0.tgz", @@ -24304,13 +24239,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/search-insights": { - "version": "2.17.3", - "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.3.tgz", - "integrity": "sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==", - "license": "MIT", - "peer": true - }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", @@ -26035,7 +25963,7 @@ "version": "5.3.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index d0e598c1..755841c0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/particle.tsx b/src/components/particle.tsx index ceef1aef..513c26ad 100644 --- a/src/components/particle.tsx +++ b/src/components/particle.tsx @@ -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 ( -
- -
+ +
+ +
+ ); };