Reference docs added

Author: GokulnathP

package.json

@@ -3,6 +3,12 @@
 	"name": "git-co-commit-docs",
 	"version": "0.1.0",
 	"private": true,
+	"reactSnapshot": {
+		"include": [
+			"/get-started",
+			"/references"
+		]
+	},
 	"dependencies": {
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.3.2",

public/index.html

@@ -10,6 +10,7 @@
 			content="Git co commit: Git pairing with multiple co authors in simple way. Each co-author will be added to the commit message, so that they are also credited in the github contributions view!"
 		/>
 		<meta name="keywords" content="Git co commit, git-co-commit, gitpair, pair programming" />
+		<meta name="google-site-verification" content="dOIPFBjwYFaTDLhU9SiFTo1RAcPAG7SHxa0eSuRZDa8" />
 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 		<title>Git Co Commit</title>

src/pages/Docs/Doc7.js

@@ -9,7 +9,24 @@ const Doc7 = () => {
         <>
             <Buttons prevLink="/get-started/setup-git-co-commit-for-node-project" nextLink="/references/dependencies-used" />
             <div className={classes.Content}>
-                <h1>Co authered by in git commit</h1>
+                <h1 className={classes.Title}>Co authered by in git commit</h1>
+                <p className={classes.Para}>You can create a commit with more than one author by adding one or more Co-authored-by trailers to the commit's message. Co-authored commits are visible on GitHub and can be included in the profile contributions graph and the repository's statistics.</p>
+                <h3 className={classes.SubTitle}>Creating co-authored commits on the command line</h3>
+                <p className={classes.Para}>1. Collect the name and email address for each co-author.</p>
+                <p className={classes.Para}>2. Type your commit message and a short, meaningful description of your changes. After your commit description, instead of a closing quotation, add two empty lines.</p>
+                <code className={classes.Code}>
+                    git commit -m "Refactor usability tests <br />
+                    {'>'}<br />
+                    {'>'}<br />
+                </code>
+                <p className={classes.Para}>3. On the next line of the commit message, type <span className={classes.SpecialText}>{`Co-authored-by: name <[email protected]>`}</span> with specific information for each co-author. After the co-author information, add a closing quotation mark. If you're adding multiple co-authors, give each co-author their own line and <span className={classes.SpecialText}>Co-authored-by:</span> commit trailer.</p>
+                <code className={classes.Code}>
+                    git commit -m "Refactor usability tests <br />
+                    {'>'}<br />
+                    {'>'}<br />
+                    Co-authored-by: name {`<[email protected]>`}<br />
+                    Co-authored-by: another-name {'<[email protected]>'}"
+                </code>
             </div>
             <Buttons prevLink="/get-started/setup-git-co-commit-for-node-project" nextLink="/references/dependencies-used" />
         </>

src/pages/Docs/Doc8.js

@@ -9,7 +9,14 @@ const Doc8 = () => {
         <>
             <Buttons prevLink="/references/co-authered-by-in-git-commit" nextLink="/references/concept-of-git-co-commit" />
             <div className={classes.Content}>
-                <h1>Dependencies used</h1>
+                <h1 className={classes.Title}>Dependencies used</h1>
+                <p className={classes.Para}>Git co commit need two npm package and one external npm package which are,</p>
+                <p className={classes.List}>1. child_process</p>
+                <p className={classes.List}>2. os</p>
+                <p className={classes.List}>3. prompt-sync</p>
+                <p className={classes.Para}><b>child_process:</b> Used to execute the command on different terminals by using JavaScript programming. </p>
+                <p className={classes.Para}><b>os:</b> Used to check the operating system the program is running.</p>
+                <p className={classes.Para}><b>prompt-sync:</b>  Used to get the input from the user. It is the external npm package we need to install separately. </p>
             </div>
             <Buttons prevLink="/references/co-authered-by-in-git-commit" nextLink="/references/concept-of-git-co-commit" />
         </>

src/pages/Docs/Doc9.js

@@ -9,7 +9,19 @@ const Doc9 = () => {
         <>
             <Buttons prevLink="/references/dependencies-used" />
             <div className={classes.Content}>
-                <h1>Concept of git co commit</h1>
+                <h1 className={classes.Title}>Concept of git co commit</h1>
+                <p className={classes.Para}>1. Commit message and co-authors username are getting from the user by using the <b>prompt-sync</b> package. If more than one co-authors, the username must be separated by comma.</p>
+                <p className={classes.Para}>2. After fetching input from the user, emailId of co-authors are generated <span className={classes.SpecialText}>([email protected])</span>.</p>
+                <p className={classes.Para}>3. By using the <b>os</b> package,  the type of operating system the program is running is fetched.</p>
+                <p className={classes.Para}>4. Depends upon the operating system, the below git commit command is generated.</p>
+                <code className={classes.Code}>
+                    git commit -m "Refactor usability tests <br />
+                    {'>'}<br />
+                    {'>'}<br />
+                    Co-authored-by: name {`<[email protected]>`}<br />
+                    Co-authored-by: another-name {'<[email protected]>'}"
+                </code>
+                <p className={classes.Para}>5. By using the <b>child_process</b> package, the command is running in the bash or PowerShell based on the operating system.</p>
             </div>
             <Buttons prevLink="/references/dependencies-used" />
         </>

src/pages/Docs/Docs.module.css

@@ -15,7 +15,8 @@
 	padding: 10px;
 }
 
-.Para {
+.Para,
+.List {
 	font-size: 18px;
 	font-weight: lighter;
 	opacity: 0.95;
@@ -25,22 +26,32 @@
 	line-height: 28px;
 }
 
-.Image {
+.List {
+	text-indent: 30px;
+	padding: 5px;
+	line-height: 22px;
+}
+
+.SpecialText {
+	color: blue;
+}
+
+.Image,
+.LenImage,
+.CmdImage {
 	width: 90%;
 	max-width: 400px;
 	margin-left: 5px;
 }
 
-.LenImage {
+.LenImage,
+.CmdImage {
 	width: 100%;
 	max-width: 800px;
-	margin-left: 5px;
 }
 
 .CmdImage {
-	width: 100%;
 	max-width: 500px;
-	margin-left: 5px;
 }
 
 .ImageBorder {

src/pages/Home/Body1/Body1.js

@@ -12,7 +12,7 @@ const Body1 = () => {
                 <p className={classes.Para}>Install git-co-commit package to use just a single commit to add all the team members that worked in the project as co-authors.</p>
                 <div className={classes.Btns}>
                     <Link to='/get-started' className={[classes.Btn, classes.Start].join(' ')}>Get started</Link>
-                    <Link to='/' className={[classes.Btn, classes.Download].join(' ')}>Download</Link>
+                    <Link to='/get-started/installing-using-git-co-commit' className={[classes.Btn, classes.Download].join(' ')}>Download</Link>
                 </div>
             </div>
             <div className={classes.Image}>