Merge branch 'source' into add_matplotlib_project

firstcontributions · Dec 22, 2024 · ff797f9 · ff797f9
2 parents 2fb4579 + 81d5438
commit ff797f9
Show file tree

Hide file tree

Showing 21 changed files with 8,060 additions and 9,216 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "devDependencies": {
     "enzyme": "^3.0.0",
     "gh-pages": "^3.1.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^15.0.0",
     "sw-precache": "^5.2.0"
   },
@@ -18,7 +18,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && sw-precache --config=sw-precache-config.js",
+    "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "deploy": "npm run build&&gh-pages -b master -d build"

diff --git a/public/funding.json b/public/funding.json
@@ -0,0 +1,87 @@
+{
+  "version": "v1.0.0",
+  "entity": {
+    "type": "organisation",
+    "role": "owner",
+    "name": "firstcontributions",
+    "email": "[email protected]",
+    "phone": "",
+    "description": "Improve accessibility with enhanced documentation tailored for beginners and create opportunities for first-time contributors to get involved. Focus on building great software while inspiring a thriving, collaborative community around open source projects.",
+    "webpageUrl": {
+      "url": "https://firstcontributions.github.io/"
+    }
+  },
+  "projects": [
+    {
+      "guid": "first-contributions",
+      "name": "First contributions",
+      "description": "Help beginners learn how to contribute to open-source projects. It provides a simple and beginner-friendly way for users to understand the contribution workflow using Git and GitHub. We've had over 90,000 users since we started in 2016",
+      "webpageUrl": {
+        "url": "https://firstcontributions.github.io/",
+        "wellKnown": ""
+      },
+      "repositoryUrl": {
+        "url": "https://github.com/firstcontributions/first-contributions",
+        "wellKnown": ""
+      },
+      "licenses": ["spdx:MIT"],
+      "tags": ["tutorial", "beginner", "open-source", "contribution"]
+    }
+  ],
+  "funding": {
+    "channels": [
+      {
+        "guid": "opencollective",
+        "type": "payment-provider",
+        "address": "https://opencollective.com/firstcontributions",
+        "description": "Fiscal host is Open Source Collective. Payment methods can be found in https://docs.opencollective.com/help/financial-contributors/payments#select-a-payment-method"
+      },
+      {
+        "guid": "github-sponsors",
+        "type": "payment-provider",
+        "address": "https://github.com/sponsors/firstcontributions",
+        "description": "Uses open collective"
+      }
+    ],
+    "plans": [
+      {
+        "guid": "maintainer-time",
+        "status": "active",
+        "name": "Maintainer compensation",
+        "description": "This will compensate the effort of one maintainer working part-time on the projects.",
+        "amount": 30000,
+        "currency": "USD",
+        "frequency": "yearly",
+        "channels": ["opencollective", "github-sponsors"]
+      },
+      {
+        "guid": "hosting-monthly",
+        "status": "active",
+        "name": "Hosting support",
+        "description": "This will cover the monthly server hosting costs for the projects.",
+        "amount": 30,
+        "currency": "USD",
+        "frequency": "monthly",
+        "channels": ["opencollective", "github-sponsors"]
+      }
+    ],
+    "history": [
+      {
+        "year": 2024,
+        "income": 3,
+        "expenses": 0,
+        "taxes": 0,
+        "currency": "USD",
+        "description": ""
+      },
+      {
+        "year": 2023,
+        "income": 5,
+        "expenses": 0,
+        "taxes": 0,
+        "currency": "USD",
+        "description": ""
+      }
+    ]
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,6 @@
 .App {
   /* height: 500px; */
-  background-color: #007EE5;
+  background-color: #0a0a0a;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -13,6 +13,23 @@
 }
 
 .App-header > h1 {
-  padding-top: 10%;
-  font-size: 2.5em;
+  /* padding-top: 6%; */
+  font-size: 5.1rem;
+  letter-spacing: -0.05em;
+  font-weight: 700;
 }
+
+.App-header > h1 span{
+  background: linear-gradient(to right, #60a5fa, #1d4ed8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+@media (max-width: 700px) {
+  .App-header > h1 {
+    font-size: 3.1rem;
+    letter-spacing: -0.05em;
+    font-weight: 700;
+  }
+
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -11,7 +11,7 @@ const App = () => {
     <div className="App">
         <Navbar />
         <div className="App-header">
-            <h1>Make your first open source contribution in 5 minutes</h1>
+            <h1>Make your first <br/> open source <span>contribution</span> <br/> in 5 minutes</h1>
         </div>
         <ScrollUpButton />
         <LinkButton />

diff --git a/src/components/LinkButton/LinkButton.css b/src/components/LinkButton/LinkButton.css
@@ -1,15 +1,15 @@
 .LinkButton {
-  padding: 10px 15px;
+  padding: 16px 20px;
   text-decoration: none;
   margin: 20px auto;
 
   overflow: hidden;
 
   border-width: 0;
-  border-radius: 2px;
+  border-radius: 8px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
-  background-color: #2ecc71;
+  background-color:  #2563eb;
   color: #fff;
 
   -webkit-transition: background-color 0.3s;
@@ -19,7 +19,7 @@
 }
 
 .LinkButton:hover {
-  background-color: #26a65b;
+  background-color: #3b82f6;
 }
 
 .LinkButton > span {

diff --git a/src/components/LinkButton/LinkButton.jsx b/src/components/LinkButton/LinkButton.jsx
@@ -8,7 +8,7 @@ class LinkButton extends Component {
       <div className="LinkButton-Wrapper">
         <a
           className="LinkButton"
-          href="https://github.com/firstcontributions/first-contributions/blob/master/README.md"
+          href="https://github.com/firstcontributions/first-contributions/blob/main/README.md"
         >
           <span> Get started </span>
         </a>

diff --git a/src/components/LinkButton/__snapshots__/LinkButton.test.js.snap b/src/components/LinkButton/__snapshots__/LinkButton.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders a project card 1`] = `
 <a
   className="LinkButton"
-  href="https://github.com/firstcontributions/first-contributions/blob/master/README.md"
+  href="https://github.com/firstcontributions/first-contributions/blob/main/README.md"
 >
   <span>
      Get started 

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -1,30 +1,40 @@
 .topnav {
-    background-color:#007EE5;
+    background-color: #1f293726;
     overflow: hidden;
     text-align: right;
+    backdrop-filter: blur(16px);
+    border: 1px solid #f9fafb1a;
+    padding: 1.1rem;
+    display: flex;
+    justify-content:flex-end;
+    gap: 16px;
 }
 @media (max-width: 700px) {
     .topnav {
         text-align: center;
+        overflow: auto;
+        justify-content: flex-start;
     }
 }
 
 .topnav a {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     color: #f2f2f2;
     text-align: center;
-    padding: 20px 15px;
+    padding: 0px 15px;
     text-decoration: none;
-    font-size: 20px;
+    border: 1px solid transparent;
+    /* font-size: 20px; */
 }
 
 .topnav a:hover {
-    background-color: #72B1E4;
+    background-color: #2c2e2fb3;
     color: #f2f2f2;
-    border-radius: 25px;
-    border: #72B1E4;
-    block-size: auto;
-    display: inline;
+    border-radius: 12px;
+    border:1px solid #b6b6b94a;
+    /* display: inline; */
 }
 
 .topnav a.active {
@@ -34,8 +44,8 @@
 
 .logo{
     margin-top: 10px;
-    width: 70px;
+    width: 52px;
     vertical-align:middle;
-    height: 50px;
+    height: 42px;
     display: inline-block;
 }
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -8,7 +8,7 @@ import github from './github.svg';
 const Navbar = () => {
   return (
       <div className="topnav">
-          <a href="https://join.slack.com/t/firstcontributors/shared_invite/zt-1hg51qkgm-Xc7HxhsiPYNN3ofX2_I8FA"  target="_blank" rel="noopener noreferrer">
+          <a href="https://join.slack.com/t/firstcontributors/shared_invite/zt-1n4y7xnk0-DnLVTaN6U9xLU79H5Hi62w"  target="_blank" rel="noopener noreferrer">
               <img src={slack} className="logo" alt="slack logo" />
               <span>Slack</span>
           </a>
@@ -22,7 +22,7 @@ const Navbar = () => {
           </a>
           <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">
               <img  src={github} className="logo" alt="github logo" />
-              Github
+              <span>GitHub</span>
           </a>
       </div>
   );

diff --git a/src/components/ProjectList/CardsContainer.jsx b/src/components/ProjectList/CardsContainer.jsx
@@ -119,16 +119,17 @@ export default class CardsContainer extends React.Component {
       <div>
         <div id='container'>
           <div className='inputContainer'>
-            <input id='search' type='text' name='search' placeholder='Search...' onChange={this.handleChange} />
+            <input id='search' type='text' name='search' placeholder='Search...' onChange={this.handleChange} aria-label='Search'/>
           </div>
-          <div className='inputContainer'>
+          <div id="tag-selector-container" className='inputContainer'>
             <Select
               name='tag-selector'
               value={this.state.value}
               onChange={this.handleSelectChange}
               options={this.filterOptions}
               multi={true}
-              placeholder='Filter'
+              placeholder={<div className='filter-placeholder-text'>Filter</div>}
+              aria-labelledby='tag-selector-container'
             />
           </div>
         </div>
@@ -142,6 +143,7 @@ export default class CardsContainer extends React.Component {
                 projectLink={item.projectLink}
                 description={item.description}
                 tags={item.tags}
+                className='testing-testing'
               />
             );
           })}

diff --git a/src/components/ProjectList/ProjectsCards.jsx b/src/components/ProjectList/ProjectsCards.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./css/project-cards.css";
+import defaultLogo from './default.png';
 
 const Card = ({
   projectLink,
@@ -20,14 +21,17 @@ const Card = ({
 
   return (
     <div className="Card-Container">
-      <a className="Card-Real-Link" href={projectLink}>
+      <a className="Card-Real-Link" href={projectLink} target='blank'>
         <div className="Card-Header">
           <img
             className="Project-Logo"
             alt="the framework or language that the project is build upon"
             src={logoLink}
+            onError={(e) => {
+              e.target.src = defaultLogo;
+            }}
           />
-          <h3 className="Card-Title">{name}</h3>
+          <p className="Card-Title">{name}</p>
         </div>
         <div className="Card-Body">
           <div className="Card-Tag">{tags}</div>

diff --git a/src/components/ProjectList/css/cards-container.css b/src/components/ProjectList/css/cards-container.css
@@ -7,6 +7,10 @@
   overflow: hidden;
 }
 
+.filter-placeholder-text {
+  color: #757575;
+}
+
 @media screen and (max-width: 500px) {
   .containerLayout{
     padding: 15px;