Add hyperlink to Zulip in Contribute Page (#373)

* Create contributeIntro.js and replace it with contributeIntro.json in the index file

* Update the snapshot test for the conribute page

Author: zainabnazar

src/Components/Contribute/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import SectionHeader from '../SectionHeader';
-import content from '../../content/contributeIntro.json';
+import content from '../../content/contributeIntro';
 import ImageContent from './../ImageContent';
 import { MainContainer, Box, Content, Description } from './style';
 import Hyperlink from 'react-native-hyperlink';
+import HTMLReactParser from 'html-react-parser';
 
 function Contribute() {
   const renderContent = () => {
@@ -19,7 +20,7 @@ function Contribute() {
                     linkStyle={{ color: '#2980b9' }}
                     onPress={(url) => window.open(url, '_blank')}
                   >
-                    <Description key={index}>{content.par}</Description>
+                    <Description key={index}>{HTMLReactParser(content.par)}</Description>
                   </Hyperlink>
                 );
               })}

src/content/contributeIntro.js

@@ -0,0 +1,26 @@
+const contributeIntro = {
+  sections: [
+    {
+      title: "New to Open Source?",
+      content: [
+        {
+          par: "Contributing to open source for the first time can be a little scary and overwhelming. AnitaB.org Open Source is here to help you get started on learning how to contribute to open source. "
+        },
+        {
+          par: "AnitaB.org Open Source has a variety of open source projects on GitHub (https://github.com/anitab-org) for everyone to contribute. If you have never contributed to an open source project, check out each repository and try out 'First Timers Only' issues."
+        },
+        {
+          par: "We encourage contributions of ALL kinds (content, design, coding, documentation, testing, etc) from community members. Each member has the opportunity to gain global collaboration experience working on projects with social impact and improve hard & soft skills while participating as a volunteer, mentor, writer, coder, designer, app tester, and more!"
+        },
+        {
+          par: "Here are some list of contributions to any of the AnitaB.org Open Source projects, for example: create GitHub issues regarding an open source project, work on/ debug a project issue, update project documentation, create organization content, create/test a pull request, produce mockups for websites/ applications/ organization promotional material, research on UI/UX improvements and accessibilty features, etc."
+        },
+        {
+          par:
+            'Each active repository has an individual stream on <a href ="https://anitab-org.zulipchat.com" style="color:#2980b9; text-decoration:none">Zulip</a>. If you have any questions and not sure how to get started, please ping us on <a href ="https://anitab-org.zulipchat.com" style="color:#2980b9; text-decoration:none">Zulip</a> and we are happy to help!'
+        }
+      ]
+    }
+  ]
+}
+export default contributeIntro;

src/test/__snapshots__/Contribute.test.js.snap

@@ -156,7 +156,21 @@ exports[`should take a snapshot 1`] = `
                 dir="auto"
                 style="font-size: 18px; font-weight: 200; margin-top: 26px; text-align: left;"
               >
-                Each active repository has an individual stream on Zulip. If you have any questions and not sure how to get started, please ping us on Zulip and we are happy to help!
+                Each active repository has an individual stream on 
+                <a
+                  href="https://anitab-org.zulipchat.com"
+                  style="color: rgb(41, 128, 185); text-decoration: none;"
+                >
+                  Zulip
+                </a>
+                . If you have any questions and not sure how to get started, please ping us on 
+                <a
+                  href="https://anitab-org.zulipchat.com"
+                  style="color: rgb(41, 128, 185); text-decoration: none;"
+                >
+                  Zulip
+                </a>
+                 and we are happy to help!
               </div>
             </div>
           </div>