Skip to content

Commit

Permalink
Merge pull request #119 from devvsakib/development
Browse files Browse the repository at this point in the history
doc page udpate
  • Loading branch information
devvsakib committed Feb 26, 2023
2 parents dd9142a + e481ec7 commit 88af53b
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 54 deletions.
65 changes: 19 additions & 46 deletions src/components/Doc/Doc.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Layout from '../Layout/Layout';
import DocItem from './DocItem';

import { gettingStarted, popular } from '../../data/Doc.json';
const Doc = () => {
return (
<Layout>
Expand All @@ -10,56 +10,29 @@ const Doc = () => {
<div>
<h4 className='mb-4'>Getting started</h4>
<div className="items grid grid-cols-1 gap-6">
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Set up Git'
content="Download git by just searching for git on google, you'll find a first link click on it and download it. After downloading, open the file click on install, make your preferences and Vola, git is on your PC."
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Connecting to Github with SSH'
content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.'
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Creating and managing repositories'
content="You can create as many repo's as you want, all you need is a github account and some internet connection. Create a github account, create a repo, you can see how to add files to the repo on our github repo readme file."
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Basic writing and formatting syntax'
content="You can use prettier a vscode extension, which format's your code in a perfect manner with all the indentation and colour matchings. This will help you understand the syntax that you have written and help you resolving an issue."
/>
{
gettingStarted.map((item, idx) => (
<DocItem
key={idx}
title={item.title}
content={item.description}
/>
))
}
</div>
</div>
<div>
<h4 className='mb-4'>Popular</h4>
<div className="items grid grid-cols-1 gap-6">
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='About pull request'
content="We have many repo's on GitHub. Suppose you want to make some changes to some repo then, you'll fork that repo and make all of your changes. Now, when you create a pull request, it compares what's the difference in your fork and the main project. If owner like's it, he'll approve it."
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Authentication'
content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.'
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Adding locally hosted code to Github'
content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.'
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Managing remote repositories'
content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.'
/>
{/* <div className="bg-gray w-full h-[1px] my-4" /> */}
<DocItem
title='Github pages documentation'
content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.'
/>
{
popular.map((item, idx) => (
<DocItem
key={idx}
title={item.title}
content={item.description}
/>
))
}
</div>
</div>
</div>
Expand Down
26 changes: 18 additions & 8 deletions src/components/Doc/DocItem.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
import React from 'react';
import { useState } from 'react';


const DocItem = ({ title, content }) => {
const changeColor = () => {
const colorArray = ["4024e0", "1a5ba5", "118d7c", "8d54e1", "40E4F0", "7e1aa5"]
let element;
const [readMore, setReadMore] = useState(false);

return element = colorArray[Math.floor(Math.random() * 6)];
}

// const value = content.match(/{(.*?)}/g);
// var regex = new RegExp(value, "gi");
// const b = "<b>"
return (
<div className={`p-4 rounded shadow-lg shadow-[#118d7c22] bg-white/5 backdrop-blur-[10px]`}>
<h6 className='font-semibold text-white text-opacity-80 mb-2'>{title}</h6>
<p className='text-sm text-white leading-tight'>{content}</p>
<p className={`text-sm text-gray line-clamp-11 leading-relaxed ${!readMore ? "none" : "hidden"}`}>
{
content.length > 100 ? content.substring(0, 100).replace(/`/g, '') : content.replace(/`/g, '')
}
</p>
<p className="text-sm text-gray line-clamp-11 leading-relaxed"
style={{ display: readMore ? 'block' : 'none' }}
>
{content.split("`").map((content, index) => (
<p key={index}>{content}</p>
))}
</p>
{content.length > 100 ? <button onClick={() => { setReadMore(!readMore) }}>{readMore ? 'Hide' : 'Read'} </button> : ''}
</div>
);
};
Expand Down
30 changes: 30 additions & 0 deletions src/data/Doc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"gettingStarted": [
{
"title": "Set up Git",
"description": "Download git by just searching for git on google, you'll find a first link click on it and download it. After downloading, open the file click on install, make your preferences and Vola, git is on your PC."
},
{
"title": "Creating and managing repositories",
"description": "You can create as many repo's as you want, all you need is a github account and some internet connection. Create a github account, create a repo, you can see how to add files to the repo on our github repo readme file."
},
{
"title": "Basic writing and formatting syntax",
"description": "You can use prettier a vscode extension, which format's your code in a perfect manner with all the indentation and colour matchings. This will help you understand the syntax that you have written and help you resolving an issue."
},
{
"title": "Adding locally hosted code to Github",
"description": "`1. Create a new repository on GitHub: Log in to your GitHub account and create a new repository by clicking on the \"+\" icon in the top-right corner of the screen and selecting \"New repository\". Give your repository a name, description, and choose any other desired settings.`2. Initialize a Git repository locally: Navigate to the directory on your local machine where your code is hosted, and initialize a Git repository using the git init command.`3. Add files to the local repository: Use the git add command to add the files you want to track to the local Git repository. For example, to add all files in the current directory and its subdirectories, use the following command: {git add .}`4. Commit changes to the local repository: Use the 'git commit' command to commit the changes you've made to the local repository. Make sure to include a meaningful commit message that describes the changes you've made. For example: {git commit -m \"Initial commit\"}.`5. Add the remote repository: Use the git remote command to add a reference to the remote repository on GitHub. For example, to add a remote called \"origin\" that points to the repository you created in step 1, use the following command: 'git remote add origin https://github.com/username/repo.git'.`6. Push changes to GitHub: Use the git push command to push the changes you've made in the local repository to the remote repository on GitHub. For example, to push the changes to the master branch of the remote repository, use the following command: 'git push -u origin master'.`That's it! Your locally hosted code should now be available on GitHub. Let me know if you have any further questions."
}
],
"popular": [
{
"title": "About pull request",
"description": "We have many repo's on GitHub. Suppose you want to make some changes to some repo then, you'll fork that repo and make all of your changes. Now, when you create a pull request, it compares what's the difference in your fork and the main project. If owner like's it, he'll approve it."
},
{
"title": "Adding locally hosted code to Github",
"description": "`1. Create a new repository on GitHub: Log in to your GitHub account and create a new repository by clicking on the \"+\" icon in the top-right corner of the screen and selecting \"New repository\". Give your repository a name, description, and choose any other desired settings.`2. Initialize a Git repository locally: Navigate to the directory on your local machine where your code is hosted, and initialize a Git repository using the git init command.`3. Add files to the local repository: Use the git add command to add the files you want to track to the local Git repository. For example, to add all files in the current directory and its subdirectories, use the following command: {git add .}`4. Commit changes to the local repository: Use the 'git commit' command to commit the changes you've made to the local repository. Make sure to include a meaningful commit message that describes the changes you've made. For example: 'git commit -m \"Initial commit\"'.`5. Add the remote repository: Use the git remote command to add a reference to the remote repository on GitHub. For example, to add a remote called \"origin\" that points to the repository you created in step 1, use the following command: 'git remote add origin https://github.com/username/repo.git'.`6. Push changes to GitHub: Use the git push command to push the changes you've made in the local repository to the remote repository on GitHub. For example, to push the changes to the master branch of the remote repository, use the following command: 'git push -u origin master'.`That's it! Your locally hosted code should now be available on GitHub. Let me know if you have any further questions."
}
]
}

1 comment on commit 88af53b

@vercel
Copy link

@vercel vercel bot commented on 88af53b Feb 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.