new posts + ui improve

Author: devvsakib

public/posts/getting-started-with-git-and-github.png

@@ -0,0 +1,83 @@
+![test](https://opengraph.githubassets.com/3bf2b12ea830ab581a1534e6b5c8cdef573e81607ea005103c03fe3c50212dae/maptime/getting-started-with-git-and-github)
+GitHub is a powerful tool for version control and collaboration, making it easier for developers to work on projects together. If you're new to GitHub, understanding how to set up your account and manage issues is crucial. In this guide, we'll walk you through the basics of setting up GitHub and using issues to track and manage tasks.
+
+### Setting Up GitHub
+
+**a. Create a GitHub Account**
+
+1. **Sign Up**: Go to [GitHub's Sign Up page](https://github.com/join) and create a free account by providing your email address, creating a username, and setting a password.
+
+2. **Verify Email**: GitHub will send you a verification email. Click the link in the email to verify your address.
+
+3. **Complete Setup**: Follow the prompts to complete the setup process, including choosing a plan (the free plan is often sufficient for beginners).
+
+**b. Install Git**
+
+1. **Download Git**: Go to the [Git website](https://git-scm.com/) and download the appropriate version for your operating system.
+
+2. **Install Git**: Follow the installation instructions. During installation, you can select default options if you're unsure.
+
+**c. Configure Git**
+
+1. **Open Terminal**: On Windows, you can use Git Bash; on macOS and Linux, use the terminal.
+
+2. **Set Up User Info**: Configure Git with your GitHub username and email:
+
+   ```bash
+   git config --global user.name "Your Name"
+   git config --global user.email "your.email@example.com"
+   ```
+
+**d. Create a Repository**
+
+1. **Create a New Repo**: On GitHub, click the "+" icon in the top-right corner and select "New repository."
+
+2. **Fill in Details**: Enter a repository name, description, and choose whether it should be public or private.
+
+3. **Initialize Repo**: Optionally, you can initialize the repository with a README file.
+
+4. **Clone Repo**: Copy the repository URL and use the following command in your terminal to clone it to your local machine:
+
+   ```bash
+   git clone https://github.com/your-username/your-repo.git
+   ```
+
+### Understanding GitHub Issues
+
+GitHub Issues is a feature that allows you to track tasks, bugs, and feature requests in your repository. Here’s how to use it effectively:
+
+**a. Creating an Issue**
+
+1. **Navigate to Issues**: Go to your repository on GitHub and click on the "Issues" tab.
+
+2. **New Issue**: Click the "New issue" button.
+
+3. **Fill in Details**: Provide a descriptive title and details for the issue. You can also add labels, assign it to users, and set milestones if needed.
+
+4. **Submit**: Click "Submit new issue" to create it.
+
+**b. Managing Issues**
+
+1. **View Issues**: You can view open and closed issues in the "Issues" tab.
+
+2. **Comment**: You can add comments to issues to provide updates or ask questions.
+
+3. **Close Issues**: When an issue is resolved, you can close it by clicking the "Close issue" button on the issue page.
+
+4. **Labels and Milestones**: Use labels to categorize issues (e.g., bug, enhancement) and milestones to track progress towards a goal.
+
+**c. Linking Issues to Pull Requests**
+
+1. **Reference Issues**: When creating a pull request, you can reference issues by including keywords like "Fixes #issue-number" in the pull request description. This will automatically close the issue when the pull request is merged.
+
+### Best Practices
+
+- **Descriptive Titles**: Use clear and descriptive titles for issues to make it easy to understand the problem or task.
+- **Detailed Descriptions**: Provide as much detail as possible, including steps to reproduce issues or specifics about the task.
+- **Use Labels**: Apply appropriate labels to categorize and prioritize issues.
+
+### Conclusion
+
+GitHub is an essential tool for modern software development, and mastering its basics will set you up for success. By setting up your GitHub account, understanding how to manage issues, and using best practices, you’ll be well on your way to effective project management and collaboration. Happy coding!
+
+> Written by **Sakib Ahmed** | [GitHub](https://github.com/devvsakib)

public/posts/getting_started_with_github_issues_and_setup.md

@@ -7,5 +7,8 @@
   },
   {
     "title": "git_hooks_automating_your_workflow"
+  },
+  {
+    "title": "getting_started_with_github_issues_and_setup"
   }
 ]

public/posts/index.json

@@ -82,7 +82,7 @@ const DocDetail = () => {
 
     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">
@@ -97,7 +97,7 @@ const DocDetail = () => {
                                 <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())}
+                                        onClick={() => setActiveSection(heading.title.replace(/\s+/g, '-')?.toLowerCase())}
                                     >
                                         {heading.title}
                                     </a>
@@ -127,13 +127,13 @@ const DocDetail = () => {
                                     );
                                 },
                                 h1({ node, children }) {
-                                    return <h1 className='text-xl font-normal mt-10 mb-3' id={children.toLowerCase().replace(/\s+/g, '-')}> {children}</h1>;
+                                    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={children.toLowerCase().replace(/\s+/g, '-')}>🌿 {children}</h2>;
+                                    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={children.toLowerCase().replace(/\s+/g, '-')}>🌿 {children}</h3>;
+                                    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>;
@@ -147,7 +147,14 @@ const DocDetail = () => {
                                 },
                                 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}