Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

doc page udpate #119

Merged
merged 1 commit into from
Feb 26, 2023
Merged

doc page udpate #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 19 additions & 46 deletions src/components/Doc/Doc.jsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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."
}
]
}