pull-request-community/pull-request-community-website

Pull request community

Pull Request Community Pages

View it online: https://pullrequest.co.il/

Adding your profile

What to write?

First of all, please write in Hebrew. Share things that will help other people know what makes you unique: hobbies, talents, fun-facts, technologies that you love.

Here are some examples of things that can fit well:

✅ מדברת סינית שוטפת
✅ מתנדב במד"א
✅ חובבת מושבעת של בדיקות אוטומטיות וקוד מסודר
✅ אוהב לאפות עוגות וקינוחים
✅ לשעבר תלמיד ישיבה
✅ מנגנת בחליל פן
✅ גולש רוח וגלים וצולל בכל הזדמנות אפשרית
✅ מתנדבת בשיקודס
✅ בזמני הפנוי אוהב לתופף, להקליט ולהופיע עם הלהקה שלי

And these are examples of things that don't really add value, they may sound "smart" but when other people read it, it doesn't help them connect with you:

🚫 אוהב לקודד ולישון, לא בהכרח בסדר הזה
🚫 It's okay password, I'm insecure too
🚫 מחליף תחביבים כל שבוע, מוזמנים לשאול אותי מה הפעם.

The technical stuff

You can add / update your personal profile by creating a Pull Request to this repo:

1. Create a new JSON file in the people directory, and name it as your GitHub username.
   e.g. If you GitHub user is MichalPorag, MichalPorag.json.

   The JSON file should look something like:

   {
     "name": "השם שלך",
     "github": "Your GitHub Username (not link, just the username)",
     "facebook": "Link to your Facebook Profile (optional)",
     "twitter": "Link to your Twitter Profile (optional)",
     "linkedin": "Link to your LinkedIn page (optional)",
     "stackoverflow": "Link to your Stack Overflow page (optional)",
     "website": "Link to your personal blog / website (optional)",
     "mastodon": "Link to your personal Mastodon profile (optional)",
     "description": "פסקה או שתיים על עצמך: רקע מקצועי, עבודה, תחביבים ומה שחשוב לך שהחברים בקבוצה ידעו"
   }

   The name and description fields are required and need to be in Hebrew.
   All the other fields are optional.

   Use the description field to introduce yourself: technologies that you love, hobbies, fun-facts, and anything that you are passionate about. Are you an architect? Do you speak Chinese? Studied amusement park and roller coaster engineering? This is the place to brag!

2. By default, we'll use your GitHub photo. If you don't have a GitHub profile photo, or want to use a different one, add it under public/images/people in jpeg format. Use your GitHub username for the image, e.g. MichalPorag.jpg.

   Then, add "customImage": true to your profile JSON that you created in the previous step.

3. Create a pull request with new files.

Running a development environment

In the cloud

Open the project in CodeSandbox to start hacking in your browser.

Locally

First, make sure you have all the dependencies installed by running

npm install

Then, run the local development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Contributing to the project:

If you are interested in contributing to the project, please follow this guide.

pull-request-community-website's Issues

Adding CONTRIBUTING.md

This helps might help new developers to know how to start contributing.
What do you think about this? What should be in there?

Remove git add in lint-stage

WHAT THE PROBLEM

We get a warning from git when we run git commit, this I because we do git add twice in lint-staged

SUGGESTION

We should remove the git add from the lint-stage config in the package.json, here and here

Add issue & pull request template to the project

WHATS THE PROBLEM

Github has introduced a new API to set templates to PRs and issues.
I think we should implement this

refrance

• dockly issue tempalte
• dockly PR template

Use camelcase in file names

Align file names in the people directory to camelcase pattern
check if the file name is used anywhere to make sure the change won’t break anything

add community social media in the header

Telegram: https://t.me/joinchat/SNHcwLegH2-Pjx4B
Facebook: https://www.facebook.com/groups/PullRequest
Discord: https://discord.gg/FDXyR4KP
Newsletter: https://forms.gle/cc6tSYQQEGnsbeAb9

TSX standard

Add TSX specifications

Unknown File - hello.ts

File pages/api/hello.ts

See if the file needed in the project
if not: remove it from the project

Add custom profile image support

The README says:

2. By default, we'll use your GitHub photo. If you don't have a GitHub profile photo,
   or want to use a different one, add it under [public/images/people](public/images/people) in jpeg format.
   Use your GitHub username for the image, e.g. `MichalPorag.jpg`.

   Then, add `"customImage": true` to your profile JSON that you created in the previous step.

However, this is not implemented and currently confusing people (e.g. @strayblues), so I removed it from the README for now. But I think it's still useful, as some people don't have a GitHub profile photo and would still like to have their photo on the site.

Remove style tag from components and refactor the code accordingly

Add ESLint to the project

WHATS THE PROBLEM

We should add ESLint to the project

Resources

• docs: https://nextjs.org/docs/basic-features/eslint
• eslint bug vercel/next.js#30182

About page - design

• try

Update description container design

The description container should have the following structure

<DescriptionContainer>
{children}
< / DescriptionContainer>

where the children passed as props

Ui fixes:
children should be located at the middle
margin - 72 auto 114
Below 1280 - margin 72 24 114

Create menu

Add a gap between the social media icons

It should be:

display: flex;
gap: 48px;

Update package-lock.json to version 2

In npm version 7 the package-lock.json file has been updated to version 2.

`randomShuffle` is not working correctly

Scenario:

1. enter the home page
2. refresh the page and look at the cards order

ER: the order of the cards should change randomly on each refresh
CR: the cards order remains the same on each refresh

Create member modal

On "קרא עוד" clicked, open a modal showing the member card

Add filtering social networks option

The mission:
Add filtering social networks option to the members page.

Link to Figma: https://www.figma.com/file/R4hJBfn1ghnKjTV73j0shr/Pull_Req?node-id=0%3A1

Update husky to version 8

WHATS THE PROBLEM

• husky version 4 doesn't work with npm version 7, we should update our husky version 8 to fix this.

Add "ivrita" library

Use "ivrita" library to make our website pleasant to all genders!

Link to "ivrita" in gITHUB: https://github.com/AlefAlefAlef/ivrita

Add a search bar include AutoComplete

The mission:
Add search bar to the members page.

Link to Figma: https://www.figma.com/file/R4hJBfn1ghnKjTV73j0shr/Pull_Req?node-id=0%3A1

Add videos page

We have some great lectures from community members, such as:

• How I Helped Add an API to The DOM Specification / Benjamin Gruenbaum
• Git Bisect & rerere / Noa Barki
• git push --force / Noaa Barki
• Getting into Open Source - Bits from my Personal Story / Benjamin Gruenbaum

Let's create a page that gives them the stage they deserve :-)

Fix Bug - Logo Animation

The logo animation should follow the page's scrolling until the description is hidden.

Add (optional) Fediverse to member card.

Add Fediverse to member card under social media's.

What fediverse is? https://en.wikipedia.org/wiki/Fediverse

MainPageDescription form link doesnt work

Reproduce:
Click on the hand icon in the main page and nothing will happen

Expected Behaviour:
On hover: the mouse curser is supposed to change from default to pointer.
On click: open a google form in a new tab

Research Github API

what information we can git from Github API, and get a JSON from Github that include:

1. The name of the project.
2. The logo of the project.
3. Number of starts.
4. Type of license.
5. Discretion.
6. Issues, assigned, labels.
7. Contributors.

If Github API if not free, connect OZ, other wise, create a dynamic Json with all that details and add to it the videos and the name of the mentor.

Remove Members Page Description

** Dependent on finishing the about page **

Fix social media animation

Website needs to be manually deployed to reflect changes?

Looking at the GitHub Actions workflow, it looks like it is only targeting pull request reviews.
Does the website need to be manually deployed?

Remove colors.ts file

Discored link expired

Add new link: https://discord.gg/ZmChMVZxpU

Fix member card animation

Fix the "כווץ" animation

Screen.Recording.2021-03-15.at.7.15.43.mov

Fix members grid CSS

Right now, when open a "read more" in member card, the specific card is getting bigger but the other card in the line stay in the same size.
The goal of this issue, is that all the line will increase the height according to the open card.

Tip: you can get this result with CSS grid.

Project page

Create Footer

Adding ISSUE_TEMPLATE/

Offered issue templates can improve communication with community and also look pretty dope. Take a look at linuxserver.io's logo and structure on this issue template:
https://github.com/linuxserver/docker-code-server/issues/new?assignees=&labels=&template=issue.feature.md

Good templates can be:

• bug fix
• feature request
  • site related
  • code/repository related
• security issue

[Projects screen] Create a description component

width 100%
should use the search bar and labels container
under 680 - display the search bar and labels container in a column

Upgrade Next.js to 10.1 and enable Webpack 5

This should make the project run faster (in dev mode), speed up npm install and make node_modules smaller.

Background info: https://nextjs.org/blog/next-10-1

How to enable webpack 5: https://nextjs.org/docs/messages/webpack5

In a nutshell:

1. Update next.js version in package.json
2. Add a few lines to next.config.js, as explained here
3. Check that everything is working

Pixel Prefect Layout

Go over the page and make sure everything is pixel-perfect.
For more details see the Figma project: https://www.figma.com/file/Dxl1kxj1iQt6z9eLIvHWBe/pull-request-website?node-id=0%3A1

fix to more responsive CSS

The design looks awesome but I do not see any specs on the figma link provided in #37 to how this component should look on narrower screens. Should this navbar become a 🍔 menu ≡ ?

I would love to contribute this code fix myself, just help me with the UI/UX design 👍

Firefox for Android	Chrome for Android

Fix Bug - Dark Mode State

Steps for reproduction:

1. Clear the 'theme' key in your Local Storage.
2. Click on the moon icon in the top right corner of your screen.

The moon icon changed to the sun icon; however, the theme didn't change.

Desired result:
After cleaning the key in the Local Storage, show the sun icon and click change to the light theme.

Add a short description of the community and its goals to the top of the main page

Something along the lines of:

Pull Request עוזרת לכם להיכנס לפרוייקטי קוד פתוח ולתרום להם ע"י יצירת סביבה תומכת ובטוחה וחיבור עם מנטורים בעלי ניסיון שאכפת להם שתצליחו.

Add translation infrastructure

and move all texts to translation files.

Fix members labels

Remove all labels from "עוז יצחק".
Add "Admin" and "Mentor" labels to "מיכל פורג".
Add "Admin" label to ״שמואל שושתרי״ and to ״הילה פיש״.

Support disable javascript browser behavior for the site

Some functionality of this site breaks when the browser does not enable JavaScript.
Since this project is mostly rendered on server side, changing the כווץ/... קרא עוד functionality to CSS/HTML based can make this site accessible w/o running JavaScript

for example:

• css manipulated details/summary elements utilizing pseudo elements and the attribute selector details[open]{display:inline;}
• checkbox hack with general sibling selector for conditionally displaying/hiding content

I am not familiar with Next.js maybe there might be better solutions to resolve this kind of issues.

Add option to add image in the person json instead of using the user image from GitHub

Change "npm run dev" To "npm start" And Open Localhost

Suggestion: Adding Darkmode toggle

I personally love Darkmode on any website, so I suggest adding one

Fix Bug - Social Networking Menu

[Projects screen] Crate a search bar component

Use debounce