230 blogs route

package.json

@@ -16,6 +16,7 @@
     "axios": "^1.2.2",
     "classnames": "^2.5.1",
     "framer-motion": "^10.8.3",
+    "frontmatter": "^0.0.3",
     "lodash": "^4.17.21",
     "prettier": "^3.3.3",
     "react": "^18.2.0",

public/blogposts/How_to_Contribute_to_Open_Source_on_GitHub_Forking_and_Making_Your_First_Pull_Request.md

@@ -0,0 +1,88 @@
+---
+title: How to Contribute to Open Source on GitHub forking and Making Your First Pull Request
+tags: [GitHub, Open Source, Contribution]
+author: John Doe
+date: 2024-08-04
+---
+
+## Introduction
+
+Contributing to open-source projects is a great way to improve your coding skills, collaborate with others, and give back to the community. If you're new to this process, it might seem a bit daunting, but it's actually quite straightforward. In this guide, we'll walk you through the steps of forking a repository, making changes, and submitting a pull request.
+
+## Step 1: Fork the Repository
+
+1. **Find a Project to Contribute To**: Browse GitHub to find a project you'd like to contribute to. Look for repositories with issues labeled "good first issue" or "help wanted".
+
+2. **Fork the Repository**: Once you've found a repository, click the "Fork" button at the top right corner of the repository page. This creates a copy of the repository in your GitHub account.
+
+![Fork Repository](https://guides.github.com/activities/forking/fork-button.png)
+
+## Step 2: Clone Your Fork
+
+1. **Clone the Forked Repository**: On your GitHub account, navigate to your forked repository. Click the "Code" button and copy the URL.
+
+2. **Open Your Terminal**: Use Git to clone the repository to your local machine. Run the following command, replacing `URL` with the URL you copied:
+
+    ```sh
+    git clone URL
+    ```
+
+3. **Navigate to the Repository**: Change into the repository directory:
+
+    ```sh
+    cd repository-name
+    ```
+
+## Step 3: Create a Branch
+
+1. **Create a New Branch**: It's a good practice to create a new branch for your changes. Run the following command, replacing `branch-name` with a descriptive name for your branch:
+
+    ```sh
+    git checkout -b branch-name
+    ```
+
+## Step 4: Make Changes
+
+1. **Make Your Changes**: Open the project in your favorite code editor and make your changes. This could be fixing a bug, adding a feature, or updating documentation.
+
+2. **Stage and Commit Your Changes**: After making changes, stage them with:
+
+    ```sh
+    git add .
+    ```
+
+    Then commit your changes with a descriptive message:
+
+    ```sh
+    git commit -m "Describe your changes"
+    ```
+
+## Step 5: Push Your Changes
+
+1. **Push Your Branch to GitHub**: Push your changes to your forked repository on GitHub:
+
+    ```sh
+    git push origin branch-name
+    ```
+
+## Step 6: Create a Pull Request
+
+1. **Navigate to the Original Repository**: Go to the original repository you forked from on GitHub.
+
+2. **Open a Pull Request**: Click the "Pull requests" tab, then click the "New pull request" button.
+
+3. **Compare Changes**: Make sure the base repository is the original repository and the base branch is the branch you want to merge your changes into (usually `main` or `master`). The head repository should be your forked repository, and the compare branch should be the branch you made your changes on.
+
+4. **Create Pull Request**: Click the "Create pull request" button. Provide a title and description for your pull request, explaining what changes you made and why.
+
+![Create Pull Request](https://guides.github.com/activities/forking/pr-button.png)
+
+## Step 7: Collaborate and Iterate
+
+1. **Review and Discuss**: The project maintainers will review your pull request. They may ask questions or request changes. Engage in the discussion and make any necessary updates.
+
+2. **Update Your Pull Request**: If you need to make changes, commit them to your branch and push to your fork. Your pull request will automatically update.
+
+## Conclusion
+
+Congratulations! You've made your first contribution to an open-source project. This process might seem complex at first, but it becomes second nature with practice. Open source is all about collaboration and continuous learning, so don't hesitate to reach out for help and keep contributing. Happy coding!

public/blogposts/index.json

@@ -0,0 +1,5 @@
+[
+  {
+    "title": "How_to_Contribute_to_Open_Source_on_GitHub_Forking_and_Making_Your_First_Pull_Request"
+  }
+]

src/components/Header/Header.jsx

@@ -7,6 +7,7 @@ import {
   MdStore,
 } from "react-icons/md";
 import { AiFillGithub } from "react-icons/ai";
+import { FaBlogger } from "react-icons/fa";
 import { Link } from "react-router-dom";
 
 import { HiMoon, HiSun } from "react-icons/hi";
@@ -31,6 +32,11 @@ function Header({notice }) {
       link: "/",
       icon: <MdHome size="1.2rem" />,
     },
+    {
+      name: "Blogs",
+      link: "/blogs",
+      icon: <FaBlogger size="1.2em"/>
+    },
     {
       name: "Doc",
       link: "/doc",

src/main.jsx

@@ -12,6 +12,8 @@ import NotFound from "./pages/NotFound";
 import DocList from "./pages/Doc";
 import DocDetail from "./pages/Doc/single doc";
 import Resources from "./pages/Resources";
+import BlogsList from "./pages/blogs";
+import BlogDetail from "./pages/blogs/blog";
 import DevArea from "./pages/DevArea";
 import DevTools from "./pages/DevArea/DevTools";
 
@@ -25,6 +27,14 @@ const router = createBrowserRouter(
       path: '/doc',
       element: <DocList />
     },
+    {
+      path: '/blogs',
+      element:<BlogsList/>
+    },
+    {
+      path: '/blogs/:slug',
+      element:<BlogDetail />
+    },
     {
       path: '/doc/:slug',
       element: <DocDetail />

src/pages/blogs/blog/index.jsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Spin, Alert } from 'antd';
+import Layout from '../../../components/Layout/Layout';
+import * as matter from 'frontmatter'
+const Table = ({ children }) => {
+    return <table className="min-w-full mt-4 border border-gray-300">{children}</table>;
+};
+
+const TableRow = ({ children }) => {
+    return <tr className="border-b border-gray-300">{children}</tr>;
+};
+
+const TableCell = ({ children }) => {
+    return <td className="px-4 py-2">{children}</td>;
+};
+
+const TableHeader = ({ children }) => {
+    return <th className="px-4 py-2 bg-gray-100 font-bold">{children}</th>;
+};
+
+const BlogDetail = () => {
+    const { slug } = useParams();
+    const [content, setContent] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [activeSection, setActiveSection] = useState(null);
+    const [headings, setHeadings] = useState([]);
+    const [frontmatter, setFrontmatter] = useState({});
+
+    useEffect(() => {
+        const fetchContent = async () => {
+            try {
+                const response = await fetch(`/blogposts/${slug}.md`);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch content: ${response.statusText}`);
+                }
+                const text = await response.text(); // Ensure you're reading text
+                const { content, data } = matter(text);
+                setContent(content);
+                setFrontmatter(data);
+            } catch (error) {
+                setError(error.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchContent();
+    }, [slug]);
+
+    const extractHeadings = (markdown) => {
+        const headings = [];
+        const regex = /^#{1,6}\s+(.*)$/gm;
+        let match;
+        while ((match = regex.exec(markdown)) !== null) {
+            const level = match[0].split(' ')[0].length;
+            const title = match[1];
+            if (level > 3) continue;
+            headings.push({ level, title });
+        }
+        setHeadings(headings);
+    };
+
+    useEffect(() => {
+        if (content) {
+            extractHeadings(content);
+        }
+    }, [content]);
+
+    useEffect(() => {
+        const hash = window.location.hash;
+        if (hash) {
+            const id = hash.substring(1);
+            const element = document.getElementById(id);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+    }, [content]);
+
+    if (loading) return <div className="flex justify-center items-center h-screen"><Spin size="large" /></div>;
+    if (error) return <Alert message="Error" description={error} type="error" />;
+    const headingToId = (children) => String(children).toLowerCase().replace(/\s+/g, '-');
+    return (
+        <Layout>
+            <section className="container mx-auto p-4 min-h-screen">
+                {/* Title Section */}
+                <div className="text-center my-10">
+                    <h3 className="text-2xl md:text-3xl font-semibold capitalize">{frontmatter.title || slug.replace(/_/g, ' ')}</h3>
+                    <p className="text-lg text-gray-500">   {frontmatter.date ? new Date(frontmatter.date).toLocaleDateString() : 'Date not available'}</p>
+                </div>
+                <div className="mb-6 text-center">
+                    <p className="text-md font-semibold">
+                        Author: <span className="font-normal">{frontmatter.author || 'Unknown'}</span>
+                    </p>
+                    <p className="text-md font-semibold">
+                        Tags:
+                        {frontmatter.tags && frontmatter.tags.length > 0 ? (
+
+                            <span className="font-normal">
+                                {frontmatter.tags.map((tag, index) => (
+                                    <span key={index} className="bg-blue-200 text-blue-800 py-1 px-2 rounded-md text-sm mr-2">
+                                        {tag}
+                                    </span>
+                                ))}
+                            </span>
+                        ) : (
+                            <span className="font-normal">None</span>
+                        )}
+                    </p>
+                </div>
+
+                <div className="flex">
+                    <aside className="sticky top-20 w-1/4 p-4 h-0">
+                        <h2 className="text-xl font-bold mb-2">Table of Contents</h2>
+                        <ul className='grid gap-2'>
+                            {headings.map((heading, index) => (
+                                <li key={index} className={`ml-${heading.level} ${activeSection === heading.title.replace(/\s+/g, '-').toLowerCase() && 'text-green-500 font-semibold'}`}>
+                                    <a href={`#${heading.title.replace(/\s+/g, '-').toLowerCase()}`}
+
+                                        onClick={() => setActiveSection(heading.title.replace(/\s+/g, '-')?.toLowerCase())}
+                                    >
+                                        {heading.title}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </aside>
+                    <div className="prose lg:prose-xl w-3/4">
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                                code({ node, inline, className, children, ...props }) {
+                                    const match = /language-(\w+)/.exec(className || '');
+                                    return !inline && match ? (
+                                        <SyntaxHighlighter
+                                            style={a11yDark}
+                                            language={match[1]}
+                                            PreTag="div"
+                                            {...props}
+                                        >
+                                            {String(children).replace(/\n$/, '')}
+                                        </SyntaxHighlighter>
+                                    ) : (
+                                        <code className={className} {...props}>
+                                            {children}
+                                        </code>
+                                    );
+                                },
+                                h1({ node, children }) {
+                                    return <h1 className='text-xl font-normal mt-10 mb-3' id={headingToId(children)}> {children}</h1>;
+                                },
+                                h2({ node, children }) {
+                                    return <h2 className='text-xl font-normal mt-10 mb-3' id={headingToId(children)}>🌿 {children}</h2>;
+                                },
+                                h3({ node, children }) {
+                                    return <h3 className='text-xl font-normal mt-10 mb-3' id={headingToId(children)}>🌿 {children}</h3>;
+                                },
+                                blockquote({ node, children }) {
+                                    return <span className='bg-gray-100 p-4 pl-0 text-sm my-4 block text-gray'>{children}</span>;
+                                },
+                                table: Table,
+                                tr: TableRow,
+                                td: TableCell,
+                                th: TableHeader,
+                                li({ node, children }) {
+                                    return <li className='list-disc ml-4'>{children}</li>;
+                                },
+                                ul({ node, children }) {
+                                    return <ul className='list-disc ml-4 mb-2'>{children}</ul>;
+                                },
+                                ol({ node, children }) {
+                                    return <ul className='list-disc ml-4 mb-2'>{children}</ul>;
+                                },
+                                img({ node, src, alt }) {
+                                    return <img src={src} alt={alt} className='mb-4 rounded-md' />;
+                                }
+
+                            }}
+                        >
+                            {content}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            </section>
+        </Layout>
+    );
+};
+
+export default BlogDetail;