Merge pull request #329 from ajay-dhangar/dev-1.1

adde new certificate content

blog/2024-03-15/prompt-engineering-guide.md

@@ -7,6 +7,8 @@ date: 2020-12-21 15:34:11
 
 Prompt Engineering is a process of creating a prompt that is used to guide the user through a series of steps to achieve a specific goal. It is a powerful tool that can help users complete complex tasks with ease and efficiency. In this guide, we will walk you through the process of creating an effective prompt that will help you achieve your desired outcome.
 
+<!-- truncate -->
+
 ## Step 1: Define the Goal
 
 The first step in creating an effective prompt is to define the goal you want to achieve. This could be anything from completing a task, learning a new skill, or solving a problem. By clearly defining the goal, you can create a prompt that guides the user towards that goal.

blog/debugging.md

@@ -9,6 +9,8 @@ draft: false
 
 Debugging tests in a React application can be challenging, but fear not! We've got you covered with this step-by-step guide to help you overcome the common hurdles and make your tests shine. Let's dive in:
 
+<!-- truncate -->
+
 **Step 1: Install Create React App**
 
 If you haven't already set up your Create React App project, start by installing it:

blog/fix-bug-in-vscode-extension/index.md

@@ -5,3 +5,43 @@ tags: [vsix, VS Code, extension]
 date: 2021-11-06 20:51:21
 description: How to fix a bug in any VS Code extension (.vsix) by rebuilding that extension
 ---
+
+If you are a developer who uses Visual Studio Code (VS Code) regularly, you might have encountered a bug in one of the extensions you use. While you can report the bug to the extension's maintainer, you might also want to fix the bug yourself if you are comfortable with the codebase. In this article, we will walk you through the process of fixing a bug in any VS Code extension by rebuilding that extension from the source code.
+
+<!-- truncate -->
+
+## Prerequisites
+
+Before we begin, make sure you have the following prerequisites:
+
+- [Visual Studio Code](https://code.visualstudio.com/) installed on your machine.
+- [Node.js](https://nodejs.org/) installed on your machine.
+- [npm](https://www.npmjs.com/) installed on your machine.
+- Basic knowledge of JavaScript and TypeScript.
+
+## Steps to Fix a Bug in a VS Code Extension
+
+Here are the steps to fix a bug in a VS Code extension:
+
+1. **Clone the Extension Repository**: The first step is to clone the repository of the extension you want to fix. You can find the repository link on the extension's marketplace page or GitHub repository.
+2. **Install Dependencies**: Navigate to the cloned repository directory and install the dependencies using npm. You can do this by running the following command:
+
+   ```bash
+   npm install
+   ```
+3. **Fix the Bug**: Identify the bug you want to fix and make the necessary changes to the codebase. You can use the debugging tools provided by VS Code to help you debug the issue.
+4. **Build the Extension**: Once you have fixed the bug, you need to build the extension to generate the `.vsix` file. You can do this by running the following command:
+
+   ```bash
+   npm run build
+   ```
+5. **Pack the Extension**: After building the extension, you can pack it to create the `.vsix` file. You can do this by running the following command:
+
+   ```bash
+    npm run vsce package
+    ```
+6. **Install the Extension**: Finally, you can install the fixed extension by opening VS Code, navigating to the Extensions view, clicking on the ellipsis (`...`) icon, and selecting "Install from VSIX...". Choose the `.vsix` file you generated in the previous step to install the fixed version of the extension.
+7. **Test the Extension**: Once the extension is installed, test it to ensure that the bug has been fixed successfully. You can also share the fixed version of the extension with the community or the extension maintainer.
+8. **Contribute Back**: If you have fixed a bug in an open-source extension, consider contributing back to the original repository by creating a pull request. This will help the community benefit from your fix and improve the extension for everyone.
+
+By following these steps, you can fix bugs in any VS Code extension and contribute to the improvement of the VS Code ecosystem. Happy coding! 🚀

blog/from-ftp-client-to-github-action.md

@@ -9,6 +9,8 @@ draft: false
 
 In the early days of web development, the most common way to deploy a website was to use an FTP client. This involved manually uploading files to a remote server, which was a time-consuming and error-prone process. As web development practices evolved, so did the tools and techniques for deploying websites. One of the most significant advancements in this area has been the introduction of continuous integration (CI) and continuous deployment (CD) pipelines, which automate the process of building and deploying web applications.
 
+<!-- truncate -->
+
 In this article, we'll take a look at the evolution of remote file management, from the use of FTP clients to the adoption of GitHub Actions for automated deployment.
 
 ## The FTP client era

blog/getting-started-with-vite/index.md

@@ -30,6 +30,8 @@ import './style.css';
 
 Vite is a modern build tool that offers faster development times and optimized builds. It aligns with modern web standards and provides out-of-the-box support for TypeScript, making it an excellent choice for React development. In this blog post, we will learn how to get started with React by creating a new app using Vite. We will follow the steps to set up our development environment and build our first React application.
 
+<!-- truncate -->
+
 ## Quick Start
 
 To get started with Vite, we need to have Node.js installed on our system. We can install Node.js by downloading the installer from the official website or using a package manager. Once we have Node.js installed, we can use npm to create a new Vite project with the React template.

blog/git-best-practicies.md

@@ -9,6 +9,8 @@ hide_table_of_contents: true
 
 Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. In this article, we'll take a look at some best practices for using Git, including how to structure your commits, how to manage branches, and how to collaborate with others. By following these best practices, you can make your development process more efficient and less error-prone.
 
+<!-- truncate -->
+
 ## Commit Often, Perfect Later, Publish Once
 
 One of the most important best practices for using Git is to commit your changes often. This means that you should make small, focused commits that capture a single logical change to your code. By committing often, you can keep a detailed history of your changes, which makes it easier to understand the evolution of your codebase and to track down bugs.

blog/install-mongodb-linux.md

@@ -9,6 +9,8 @@ draft: false
 
 MongoDB is a popular NoSQL database that is known for its flexibility and scalability. It is widely used in modern web applications and is a great choice for storing and managing large volumes of data. In this article, we will walk you through the process of installing MongoDB on a Linux system, specifically Debian Bullseye.
 
+<!-- truncate -->
+
 ## Step 1: Import the MongoDB GPG Key
 
 The first step is to import the MongoDB GPG key, which is used to verify the authenticity of the MongoDB packages. You can do this by running the following command in your terminal:

blog/install-mongodb-windows.md

@@ -9,6 +9,8 @@ draft: false
 
 MongoDB is a popular NoSQL database that is known for its flexibility and scalability. It is widely used in modern web applications and is a great choice for storing and managing large volumes of data. In this article, we will walk you through the process of installing MongoDB on a Windows system.
 
+<!-- truncate -->
+
 ## Step 1: Download the MongoDB Installer
 
 The first step is to download the MongoDB installer from the official MongoDB website. You can find the installer at the following URL: [https://www.mongodb.com/try/download/community](https://www.mongodb.com/try/download/community)

blog/nvs-one-node-version-per-terminal-in-windows.mdx

@@ -7,6 +7,34 @@ decription: Install and setup nvs to Windows for PowerShell and Git-Bash
 draft: false
 ---
 
-`nvs` is a cross-platform Node.js version manager that allows you to install and use multiple versions of Node.js on the same machine. It is similar to `nvm` for Unix-based systems. `nvs` is a simple and easy-to-use tool that allows you to switch between different versions of Node.js with a single command. 
+`nvs` is a cross-platform Node.js version manager that allows you to install and use multiple versions of Node.js on the same machine. It is similar to `nvm` for Unix-based systems. `nvs` is a simple and easy-to-use tool that allows you to switch between different versions of Node.js with a single command.
+
+<!-- truncate -->
 
 In this article, we will learn how to install and set up `nvs` on Windows for PowerShell and Git-Bash.
+
+## Install `nvs`
+
+To install `nvs` on Windows, you can use the following PowerShell command:
+
+
+
+## Set up `nvs` for PowerShell
+
+To set up `nvs` for PowerShell, you need to add the following line to your PowerShell profile (`$PROFILE`):
+
+```powershell
+nvs --use=8.17.0
+```
+
+## Set up `nvs` for Git-Bash
+
+To set up `nvs` for Git-Bash, you need to add the following line to your Git-Bash profile (`~/.bashrc`):
+
+```bash
+nvs --use=8.17.0
+```
+
+## Conclusion
+
+In this article, we learned how to install and set up `nvs` on Windows for PowerShell and Git-Bash. `nvs` is a powerful tool that allows you to manage multiple versions of Node.js on the same machine, making it easy to switch between different versions for different projects. If you are working on multiple Node.js projects with different version requirements, `nvs` is a great tool to have in your toolkit. Give it a try and see how it can simplify your Node.js development workflow.

blog/sed-normalize-md-file-with-regex.md

@@ -9,6 +9,8 @@ draft: false
 
 I have been using [web clipper](https://www.notion.so/web-clipper) to save articles and blog posts for a while now. It's a great tool to save content from the web and organize it in a clean and readable format. However, the markdown files generated by web clipper are not always consistent, and I often find myself manually editing them to make them more readable.
 
+<!-- truncate -->
+
 One of the common issues I encounter is inconsistent formatting of the front matter in the markdown files. The front matter is a block of metadata at the beginning of a markdown file that contains information such as the title, author, tags, date, and description of the content. Here's an example of what the front matter looks like:
 
 ```markdown

package.json

@@ -41,6 +41,7 @@
     "express": "^4.18.2",
     "framer-motion": "^11.3.21",
     "joi": "^17.12.1",
+    "lucide-react": "^0.468.0",
     "passport": "^0.7.0",
     "passport-github": "^1.1.0",
     "prism-react-renderer": "^2.3.1",

src/components/certificates/CertificateCard.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ExternalLink, Info } from 'lucide-react';
+import { Certificate } from '../../types/certificate';
+
+interface CertificateCardProps {
+  certificate: Certificate;
+}
+
+export const CertificateCard: React.FC<CertificateCardProps> = ({ certificate }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-[1.02] dark:bg-gray-800">
+      <img
+        src={certificate.imageUrl}
+        alt={certificate.title}
+        className="w-full h-48 object-cover object-center"
+      />
+      <div className="p-4">
+        <h3 className="text-lg mb-2">{certificate.title}</h3>
+        <p className="text-sm mb-4">{certificate.description}</p>
+
+        <div className="flex flex-wrap gap-2 mb-4">
+          {certificate.tags.map((tag) => (
+            <span
+              key={tag}
+              className="px-2 py-1 rounded-full text-xs font-medium bg-gray-200 dark:bg-gray-700 dark:text-gray-200"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        <div className="flex items-center justify-between mt-4">
+          <a
+            href={certificate.detailsUrl}
+            className="inline-flex items-center text-blue-600 hover:text-blue-700"
+          >
+            <Info className="h-4 w-4 mr-1" />
+            Details
+          </a>
+          <a
+            href={certificate.certificateUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center text-green-600 hover:text-green-700"
+          >
+            <ExternalLink className="h-4 w-4 mr-1" />
+            View Certificate
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};