House keeping (05-04-2023)

.github/workflows/e2e.yml

@@ -4,6 +4,9 @@ on:
     branches: [main, develop]
   pull_request:
     branches: [main, develop]
+env:
+  NEXT_PUBLIC_FORMSPREE_ID: ${{ secrets.NEXT_PUBLIC_FORMSPREE_ID }}
+  NEXT_PUBLIC_RECAPTCHA_SITE_KEY: ${{ secrets.NEXT_PUBLIC_RECAPTCHA_SITE_KEY }}
 jobs:
   e2e:
     timeout-minutes: 60
@@ -12,13 +15,13 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: '18.x'
       - name: Install dependencies
-        run: npm ci
+        run: npm install -g yarn && yarn install --frozen-lockfile
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: yarn playwright install --with-deps
       - name: Run Playwright tests
-        run: npm run test
+        run: yarn test
       - uses: actions/upload-artifact@v3
         if: always()
         with:

CONTRIBUTING.md

@@ -1,15 +1,19 @@
-# How to contribute
+# How to contribute to React Developers Kenya (Reactdevske) Website
 
 Please note we have a [code of conduct](https://github.com/reactdeveloperske/reactdevske-website/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
 
 ## Contributing procedure
 
-### Submit an issue
+### Find an issue to work on
+
+- You can contribute to this project by either creating an issue or by checking out the open issues available.
+
+#### 1. Submit an issue
 
 - Create a [new issue](https://github.com/reactdeveloperske/reactdevske-website/issues)
 - Comment on the issue (if you'd like to be assigned to it) - that way the issue can be assigned to you.
 
-### Open issues
+#### 2. Open issues
 
 - Go to [open issues](https://github.com/reactdeveloperske/reactdevske-website/issues)
 - select an issue of your choice that is `open` or `need help` or is `up-for-grabs` and is not assigned.
@@ -19,7 +23,7 @@ Please note we have a [code of conduct](https://github.com/reactdeveloperske/rea
 
 - If you're not sure, here's how to [fork the repo](https://help.github.com/en/articles/fork-a-repo)
 
-### Set up your local environment (optional)
+#### Set up your local environment (optional)
 
 If you're ready to contribute and create your PR, it will help to set up a local environment so you can see your changes.
 
@@ -34,38 +38,34 @@ If you're ready to contribute and create your PR, it will help to set up a local
 
 If this is your first time forking our repo, this is all you need to do for this step:
 
-```
-$ git clone [email protected]:[your_github_handle]/reactdevske-website.git && cd reactdevske-website
+```bash
+git clone [email protected]:[your_github_handle]/reactdevske-website.git && cd reactdevske-website
 ```
 
-Make sure you checkout the `develop` branch `git checkout develop`
+Make sure you checkout the `develop` branch by running the command `git checkout develop`
 
-If you've already forked the repo, you'll want to ensure your fork is configured and that it's up to date. This will save you the headache of potential merge conflicts.
+If you've already forked the repo and created the develop branch, you'll want to ensure your fork and your develop branch is configured and that it's up to date. This will save you the headache of potential merge conflicts.
 
 To [configure your fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork):
 
 ```
 $ git remote add upstream https://github.com/reactdeveloperske/reactdevske-website.git
 ```
 
-To [sync your fork with the latest changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork):
+To [sync your fork and branch with the latest changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork):
 
-```
-$ git checkout develop
-$ git fetch upstream
-$ git merge upstream/develop
+```bash
+git checkout develop
+git fetch upstream
+git merge upstream/develop
 ```
 
 3. Install dependencies
 
-```
-$ yarn install
-```
+We use [npm](https://www.npmjs.com/) to manage dependencies. To install all dependencies, run:
 
-or
-
-```
-$ npm install
+```bash
+npm install
 ```
 
 <br>
@@ -76,49 +76,67 @@ $ npm install
 
 1. Create new branch for your changes
 
-```
-$ git checkout -b new_branch_name
+```bash
+git checkout -b new_branch_name
 ```
 
 2. start development server
 
-```
-$ yarn run dev
-```
-
-or
-
-```
+```bash
 npm run dev
 ```
 
 <br>
 
-### Start developing!
+---
+
+##### :warning: RoadBlock: Missing environment variables
+
+You may have noticed some error about providing a form key. This is because we use [Formspree](https://formspree.io/) to handle our contact form. To get around this, you can:
+
+- Use your own [Formspree](https://formspree.io/) account and set the `FORMSPREE_KEY` environment variable to your key. (refer to the .env.example file for guidance on where to put your formspee key).
+
+You may have also noticed a second error about missing required parameters: sitekey. This is because we use [reCAPTCHA](https://www.google.com/recaptcha/about/) to prevent spam. To get around this, you can:
+
+- Use your own [reCAPTCHA](https://www.google.com/recaptcha/about/) account and set the `RECAPTCHA_SITE_KEY` environment variable to your keys. (refer to the .env.example file for guidance on where to put your recaptcha site key).
+
+Both of these changes will require you to create a `.env` file in the root directory of the project. You can copy the contents of the `.env.example` file and paste them into the `.env` file. Then, you can add your keys to the appropriate variables.
+
+---
 
 <br>
 
+3. Make changes to the codebase
+
 - Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser
 - Pro Tip: Explore scripts within `package.json` for more build options
+- Pro Tip: Use [Prettier](https://prettier.io/) to format your code before committing by running `npm run prettier:check` and `npm run prettier:format` to check and fix formatting issues
 
-1. Add changes made to the repo addressing an issue
-```
+4. Add changes made to the repo addressing an issue
+
+```bash
 git add [file_name]
 ```
-2. Commit and prepare for pull request (PR). In your PR commit message, reference the issue it resolves (see [how to link a commit message to an issue using a keyword](https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword).
 
-```
-$ git commit -m "brief description of changes [Fixes #1234]"
+5. Commit and prepare for pull request (PR). In your PR commit message, reference the issue it resolves (see [how to link a commit message to an issue using a keyword](https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword).
+
+```bash
+git commit -m "brief description of changes [Fixes #1234]"
 ```
 
-1. Push to your GitHub account
+6. Push to your GitHub account
 
-```
-$ git push -u origin [feature_branch]
+```bash
+git push -u origin [feature_branch]
 ```
 
 ### Submit your Pull Request (PR)🚀
 
 - After your changes are commited to your GitHub fork, submit a pull request (PR) to the `develop` branch of the `reactdeveloperske/reactdevske-website` repo
 - In your PR description, reference the issue it resolves (see [linking a pull request to an issue using a keyword](https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
   - ex. `Updates out of date content [Fixes #1234]`
+
+### Sit back, relax and wait for your PR to be reviewed/merged
+
+- We'll review your PR as soon as possible
+- We may suggest some changes or improvements or alternatives.

src/components/Events/Events.tsx

@@ -7,7 +7,8 @@ const events: EventData[] = [
     id: 1,
     title: 'Physical Meetups',
     description: 'Physical meetups where we share, learn and network.',
-    image_url: '/images/physical_meetup.jpg',
+    image_url:
+      'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/physical_meetup_fqkitv.jpg',
     target:
       'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
   },
@@ -16,15 +17,17 @@ const events: EventData[] = [
     title: 'Weekly Online Standups',
     description:
       'Weekly open calls in the community’s Telegram group discussing industry-related topics.',
-    image_url: 'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/weekly_standups_lg3rth.jpg',
+    image_url:
+      'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/weekly_standups_lg3rth.jpg',
     target: 'https://bit.ly/joinreactdevske',
   },
   {
     id: 3,
     title: 'Community Power Sessions',
     description:
       'Community members meet and share technical concepts with other members of the community.',
-    image_url: 'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/community_sessions_xsyd8d.jpg',
+    image_url:
+      'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/community_sessions_xsyd8d.jpg',
     target: 'https://www.youtube.com/channel/UC9_eVcPBk4T-DcZLHpQfy4w/videos',
   },
   {
@@ -40,7 +43,8 @@ const events: EventData[] = [
     title: 'Monthly Online Standups',
     description:
       'Monthly open calls on Google Meet  bringing together people from different communities.',
-    image_url: '/images/physical_meetup.jpg',
+    image_url:
+      'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/physical_meetup_fqkitv.jpg',
     target:
       'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
   },
@@ -49,7 +53,8 @@ const events: EventData[] = [
     title: 'Community Challenges',
     description:
       'We organize open source challenges to keep the community engaged.',
-    image_url: '/images/physical_meetup.jpg',
+    image_url:
+      'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/physical_meetup_fqkitv.jpg',
     target: 'https://github.com/reactdeveloperske/community-coding-challenges',
   },
 ];

src/components/MissionPillars/MissionPillars.tsx

@@ -15,7 +15,9 @@ export default function MissionPillars() {
           <div className="flex w-1/2 md:w-full">
             <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
               <Image
-                src={'/images/mentorship-image.jpg'}
+                src={
+                  'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/mentorship-image_tz0mor.jpg'
+                }
                 alt="Mentorship Image"
                 layout="fill"
               />
@@ -31,7 +33,9 @@ export default function MissionPillars() {
           <div className="flex w-1/2 md:w-full">
             <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
               <Image
-                src={'/images/learning-image.jpg'}
+                src={
+                  'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/learning-image_eylqwm.jpg'
+                }
                 alt="Learning Image"
                 layout="fill"
               />
@@ -47,7 +51,9 @@ export default function MissionPillars() {
           <div className="flex w-1/2 md:w-full">
             <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
               <Image
-                src={'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/community-image_pkeqwj.jpg'}
+                src={
+                  'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/community-image_pkeqwj.jpg'
+                }
                 alt="Community Image"
                 layout="fill"
               />