feat: add hyperlinks in Ways to Contribute home section (#302)

Author: anishfyi

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/user-event": "^7.1.2",
     "dayjs": "^1.9.3",
+    "html-react-parser": "^1.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native-hyperlink": "0.0.19",

src/Components/Home/index.js

@@ -5,6 +5,7 @@ import SectionSubheader from './../SectionSubheader';
 import { getHome } from './../../content/home';
 import { Box, Content, Description } from './styles';
 import ContributionSection from './contribution/ContributionSection';
+import HTMLReactParser from 'html-react-parser';
 
 function Home() {
   const content = getHome();
@@ -13,7 +14,9 @@ function Home() {
       <Content key={index}>
         <SectionSubheader title={section.title} />
         {section.content.map((content, indx) => {
-          return <Description key={indx}>{content.par}</Description>;
+          return (
+            <Description key={indx}>{HTMLReactParser(content.par)}</Description>
+          );
         })}
       </Content>
     );

src/content/home.js

@@ -24,10 +24,12 @@ const home = {
       },
       content: [
         {
-          par: 'You can start contributing to our various open source projects by- \n\n1) Creating issues on Github regarding the project \n2) Debugging the issues \n3) Creating pull requests, testing pull requests \n4) Create mockups for new applications or redesign the current features \n5) Research about UI/UX improvements and accessibility features. \n6) Create app walk through with documents or videos, UI testing once the PR is submitted for the UI issue',
+          par:
+            'You can start contributing to our various open source projects by- \n\n1) <a href = "https://github.com/anitab-org/anitab-org.github.io/issues" target="_blank">Creating issues on Github</a> regarding the project \n2) Debugging the issues \n3) Creating pull requests, testing pull requests \n4) Create mockups for new applications or redesign the current features \n5) Research about UI/UX improvements and accessibility features. \n6) Create app walk through with documents or videos, UI testing once the PR is submitted for the UI issue',
         },
         {
-          par: "Each active repository has a stream to direct questions. \nIssues labeled as 'First Timers Only' are meant for contributors who have not contributed to the project yet. Please choose other issues to contribute to, if you have already contributed to these type of issues. \nMake sure to follow the Commit Message Style Guide when submitting PRs which will require review by at least one maintainer to be merged to the main code.",
+          par:
+            'Each active repository has a stream to direct questions. \nIssues labeled as <a href = "https://github.com/anitab-org/anitab-org.github.io/issues?q=is%3Aopen+is%3Aissue+label%3A%22First+Timers+Only%22" target="_blank">First Timers Only</a> are meant for contributors who have not contributed to the project yet. Please choose other issues to contribute to, if you have already contributed to these type of issues. \nMake sure to follow the <a href = "https://github.com/anitab-org/mentorship-android/wiki/Commit-Message-Style-Guide" target="_blank">Commit Message Style Guide</a> when submitting PRs which will require review by at least one maintainer to be merged to the main code.',
         },
       ],
     },

src/test/__snapshots__/Home.test.js.snap

@@ -132,7 +132,14 @@ If you are subject to or witness unacceptable behavior, or have any other concer
           >
             You can start contributing to our various open source projects by- 
 
-1) Creating issues on Github regarding the project 
+1) 
+            <a
+              href="https://github.com/anitab-org/anitab-org.github.io/issues"
+              target="_blank"
+            >
+              Creating issues on Github
+            </a>
+             regarding the project 
 2) Debugging the issues 
 3) Creating pull requests, testing pull requests 
 4) Create mockups for new applications or redesign the current features 
@@ -145,8 +152,22 @@ If you are subject to or witness unacceptable behavior, or have any other concer
             style="font-size: 18px; font-weight: 200; text-align: left;"
           >
             Each active repository has a stream to direct questions. 
-Issues labeled as 'First Timers Only' are meant for contributors who have not contributed to the project yet. Please choose other issues to contribute to, if you have already contributed to these type of issues. 
-Make sure to follow the Commit Message Style Guide when submitting PRs which will require review by at least one maintainer to be merged to the main code.
+Issues labeled as 
+            <a
+              href="https://github.com/anitab-org/anitab-org.github.io/issues?q=is%3Aopen+is%3Aissue+label%3A%22First+Timers+Only%22"
+              target="_blank"
+            >
+              First Timers Only
+            </a>
+             are meant for contributors who have not contributed to the project yet. Please choose other issues to contribute to, if you have already contributed to these type of issues. 
+Make sure to follow the 
+            <a
+              href="https://github.com/anitab-org/mentorship-android/wiki/Commit-Message-Style-Guide"
+              target="_blank"
+            >
+              Commit Message Style Guide
+            </a>
+             when submitting PRs which will require review by at least one maintainer to be merged to the main code.
           </div>
         </div>
       </div>