Feat/fetch GitHub repo

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

CODE_OF_CONDUCT.md

@@ -20,28 +20,28 @@ If you see someone who is making an extra effort to ensure our community is welc
 
 The following behaviors are expected and requested of all community members:
 
- * Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
- * Exercise consideration and respect in your speech and actions.
- * Attempt collaboration before conflict.
- * Refrain from demeaning, discriminatory, or harassing behavior and speech.
- * Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
- * Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
+- Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
+- Exercise consideration and respect in your speech and actions.
+- Attempt collaboration before conflict.
+- Refrain from demeaning, discriminatory, or harassing behavior and speech.
+- Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
+- Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
 
 ## 4. Unacceptable Behavior
 
 The following behaviors are considered harassment and are unacceptable within our community:
 
- * Violence, threats of violence or violent language directed against another person.
- * Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
- * Posting or displaying sexually explicit or violent material.
- * Posting or threatening to post other people's personally identifying information ("doxing").
- * Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
- * Inappropriate photography or recording.
- * Inappropriate physical contact. You should have someone's consent before touching them.
- * Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
- * Deliberate intimidation, stalking or following (online or in person).
- * Advocating for, or encouraging, any of the above behavior.
- * Sustained disruption of community events, including talks and presentations.
+- Violence, threats of violence or violent language directed against another person.
+- Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
+- Posting or displaying sexually explicit or violent material.
+- Posting or threatening to post other people's personally identifying information ("doxing").
+- Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
+- Inappropriate photography or recording.
+- Inappropriate physical contact. You should have someone's consent before touching them.
+- Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
+- Deliberate intimidation, stalking or following (online or in person).
+- Advocating for, or encouraging, any of the above behavior.
+- Sustained disruption of community events, including talks and presentations.
 
 ## 5. Weapons Policy
 
@@ -59,15 +59,11 @@ If a community member engages in unacceptable behavior, the community organizers
 
 If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. [email protected].
 
-
-
 Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress.
 
 ## 8. Addressing Grievances
 
-If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify Pull-Request-Community with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies. 
-
-
+If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify Pull-Request-Community with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies.
 
 ## 9. Scope
 
@@ -81,7 +77,7 @@ [email protected]
 
 ## 11. License and attribution
 
-The Citizen Code of Conduct is distributed by [Stumptown Syndicate](http://stumptownsyndicate.org) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/). 
+The Citizen Code of Conduct is distributed by [Stumptown Syndicate](http://stumptownsyndicate.org) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/).
 
 Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy).
 

README.md

@@ -84,7 +84,6 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+# Contributing to the project:
 
-
-# Contributing to the project: 
 If you are interested in contributing to the project, please follow this [guide](https://github.com/Pull-Request-Community/pull-request-community-website/blob/master/docs/contributing.md).

components/layout/layout.tsx

@@ -36,7 +36,7 @@ const Layout = ({ children, descriptionText }: LayoutProps) => {
 
 interface LayoutProps {
   children: object;
-  descriptionText?: object;
+  descriptionText: object;
 }
 
 export default Layout;

components/layout/navbar/navbar.tsx

@@ -88,7 +88,7 @@ const Navbar = ({ DesHeight }) => {
         </div>
         <Link shallow href="/">
           <a className={className}>
-            <Img className="inner-logo" src="/images/logo-2.0.svg" />
+            <Img layout="fill" className="inner-logo" src="/images/logo-2.0.svg" />
           </a>
         </Link>
       </div>

components/projectPage/ProjectPage.model.tsx

@@ -0,0 +1,6 @@
+export default interface githubFullinfo {
+  stars: number;
+  license: string;
+  languages: object[];
+  projectname: string;
+}

components/projectPage/ProjectPage.module.scss

@@ -16,15 +16,15 @@
 .star {
   width: 51px;
   height: 51px;
-  background-image: url("../../public/Star\ 1.svg");
+  background-image: url("../../public/Star.svg");
   margin: -30px 0 0 -15px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .star::after {
-  content: "30K";
+  content: attr(data-stars);
   transform: rotate(30deg);
   font-size: 12px;
   color: black;

components/projectPage/projectPage.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import Technologies from './technologies/Technologies';
 import style from './ProjectPage.module.scss';
-
-function ProjectsPage() {
+import githubFullinfo from './ProjectPage.model';
+/**
+ *
+ * @param FullInfo
+ * @returns
+ */
+function ProjectsPage({ stars, license, languages, projectname }: githubFullinfo) {
   return (
     <div className={style.descriptionContainer}>
       <h3 className={style.title}>
-        <div className={style.star} />
-        Vest
+        <div data-stars={stars} className={style.star} />
+        {projectname}
       </h3>
       <p dir="auto" className={style.description}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -21,8 +26,8 @@ function ProjectsPage() {
       </p>
 
       <div className={style.infoContainer}>
-        <Technologies />
-        <div className={style.license}>Mozilla Public License 2.0</div>
+        <Technologies lang={languages} />
+        <div className={style.license}>{license}</div>
       </div>
     </div>
   );

components/projectPage/technologies/Technologies.model.tsx

@@ -0,0 +1,3 @@
+export default interface TechnologiesProps {
+  lang: object[];
+}

components/projectPage/technologies/Technologies.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+import TechnologiesProps from './Technologies.model';
 import style from './Technologies.module.scss';
 
-function Technologies() {
-  const technologies = ['HTML', 'CSS', 'JavaScript']; //in the future: API
+function Technologies(props: TechnologiesProps) {
+  const technologies = props.lang;
 
   return (
     <ul className={style.listContainer}>
       {technologies.map((technologie, index) => (
         <li key={index} className={style.technologies}>
-          {technologie}
+          {Object.keys(technologie)[0]}
         </li>
       ))}
     </ul>

docs/contributing.md

@@ -1,22 +1,25 @@
 # Contribution To The Pull Request Website
+
 Thank you, it is not obvious that you are devoting your time to contributing to our community.
 We appreciate it very much.❤️🙏🏻
 
 Before jumping into the deep water, it's essential to discuss a bit of communication.
 One of the biggest challenges on each project (especially on open-source projects) is communication.
 Good communication can lead to great achievements, effective teamwork, time efficiency and make the working process fun and easy.
-It is important to remember that all contributions are made voluntarily by people that devote their time and hard work. We are all part of a team, so *please be passionate and polite to each other*.
+It is important to remember that all contributions are made voluntarily by people that devote their time and hard work. We are all part of a team, so _please be passionate and polite to each other_.
 
 Please follow this guide to make your experience as pleasant and easy as possible.
 
 ## The Ways You Can Contribute To The Pull Request Website:
-* Opening a [new issue](https://github.com/Pull-Request-Community/pull-request-community-website/issues/new) with a bug or a feature proposal.
-* Add documentation for existing features.
-* Improvement of our tests.
-* Solving an issue or adding a new feature.
+
+- Opening a [new issue](https://github.com/Pull-Request-Community/pull-request-community-website/issues/new) with a bug or a feature proposal.
+- Add documentation for existing features.
+- Improvement of our tests.
+- Solving an issue or adding a new feature.
 
 ## The Preferred Way To Contribute:
-1. Pick an issue from the [issues list](https://github.com/Pull-Request-Community/pull-request-community-website/issues) or [open a new issue](https://github.com/Pull-Request-Community/pull-request-community-website/issues/new) and *ask*, by writing a new comment on the issue's page, to own the task.
+
+1. Pick an issue from the [issues list](https://github.com/Pull-Request-Community/pull-request-community-website/issues) or [open a new issue](https://github.com/Pull-Request-Community/pull-request-community-website/issues/new) and _ask_, by writing a new comment on the issue's page, to own the task.
 2. Wait for the maintainer's ownership approval. Keep in mind that they may not approve that. Like we said at the beggining, communication is everything.
 3. Fork the project. For more details, please read this article: [My first contribution to open source: Make a fork of the repo / Galen Corey](https://opensource.com/article/19/11/first-open-source-contribution-fork-clone).
 4. Clone the forked project to your local machine (see instructions below).
@@ -25,22 +28,27 @@ Please follow this guide to make your experience as pleasant and easy as possibl
 7. While working on an issue, feel free to ask any questions on the issue's page.
 8. Open pull request (make sure you open the pull requset on the original project and not on the forked project).
 9. Make sure all the tests are passing.
-10. Merge to the *main* branch.
+10. Merge to the _main_ branch.
 
-## Working On Issue: 
-Having a clear work flow of code development can be very useful. Therefore, please work on branches that are linked to a relevant issue. 
+## Working On Issue:
+
+Having a clear work flow of code development can be very useful. Therefore, please work on branches that are linked to a relevant issue.
 Don't you know how to connect a branch to an issue? no problem, follow this [guid](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-a-branch-for-an-issue).
- 
+
 ## Developing In A Branch:
+
 Please make sure you follow this list:
-1) Link your branch to the relevant issue.
-2) Use meaningful names for commits.
-3) Create small commits for each logic unit at a time.
-4) Use a [tasks list](https://docs.github.com/en/issues/tracking-your-work-with-issues/about-task-lists) to manage your work.
+
+1. Link your branch to the relevant issue.
+2. Use meaningful names for commits.
+3. Create small commits for each logic unit at a time.
+4. Use a [tasks list](https://docs.github.com/en/issues/tracking-your-work-with-issues/about-task-lists) to manage your work.
 
 ## TSX Specifications:
+
 Please follow this functional component pattern:
-```
+
+```tsx
 interface Props {
   prop: <type>
   ...
@@ -52,4 +60,35 @@ export const Component = (props: Props): ReactElement => {
 }
 ```
 
+## GitHub API
+
+In case you get an error from GitHub like this:
+
+```json
+{
+  "message": "API rate limit exceeded for xxx.xxx.xxx.xxx."
+}
+```
+
+you may need to add a github token to your local enviroment to increase your rate limit.
+
+### Use Locally:
+
+#### Setup
+
+- first, you need to create your own [personal token](https://docs.github.com/en/[email protected]/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+- create `.env.local` file in the project's root
+- add this line to the `.env.local` file: `GITHUB_API_KEY=<personal-token>`
+- restart your local server
+
+#### Usage
+
+```tsx
+import { getOctokit } from '<relative path>/services/github';
+
+const octokit = getOctokit();
+```
+
+> learn more about octokit [here](https://github.com/octokit/octokit.js#octokitrest-endpoint-methods).
+
 We hope you will have a great time contributing to this project.