streamline layout and enhance community social proof #226
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| export default function Contributors() { | ||
| const [contributors, setContributors] = useState<any[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| const repo = 'IntersectMBO/developer-experience'; | ||
| fetch(`https://api.github.com/repos/${repo}/contributors`) | ||
|
Contributor
There was a problem hiding this comment. Currently this fetches data directly from the GitHub API on the client side. Unauthenticated requests to /contributors are limited to 60 requests/hour, and the Search API is even stricter at 10 requests/minute. In a production environment, just a few concurrent visitors will quickly exhaust this limit and break the stats. Link: GitHub Docs: Primary rate limit for unauthenticated users |
||
| .then(response => response.json()) | ||
| .then(data => { | ||
| if (Array.isArray(data)) { | ||
| const validContributors = data.filter((user: any) => | ||
|
Contributor
There was a problem hiding this comment. Same here. Let's refrain using any in favour of propper typed types. |
||
| user.type !== 'Bot' && !user.login.toLowerCase().includes('dependabot') | ||
| ); | ||
| setContributors(validContributors.slice(0, 15)); // Display up to 15 contributors | ||
| } | ||
| }) | ||
| .catch(error => console.error('Error fetching contributors:', error)); | ||
| }, []); | ||
|
|
||
| if (contributors.length === 0) { | ||
|
Contributor
There was a problem hiding this comment. Loading states are handled, but network failures are not. |
||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.contributorsContainer}> | ||
| <div className={styles.contributorsList}> | ||
| {contributors.map((user: any) => ( | ||
|
Contributor
There was a problem hiding this comment. Refer to previuous comments on the use any. |
||
| <a | ||
| key={user.login} | ||
| href={user.html_url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className={styles.contributorAvatar} | ||
| title={user.login} | ||
| > | ||
| <img src={user.avatar_url} alt={user.login} /> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| .pulseCard { | ||
| background: linear-gradient(135deg, #2962ff 0%, #0039cb 100%); | ||
| border-radius: 20px; | ||
| padding: 2.5rem; | ||
| color: white; | ||
| box-shadow: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| height: 100%; | ||
| max-width: 480px; | ||
| margin: 0 auto; | ||
| position: relative; | ||
| overflow: hidden; | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| } | ||
|
|
||
| .pulseCard:hover { | ||
| transform: translateY(-4px); | ||
| box-shadow: 0 20px 40px rgba(41, 98, 255, 0.4); | ||
| } | ||
|
|
||
| .pulseCard::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| width: 150px; | ||
| height: 150px; | ||
| background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); | ||
| border-radius: 50%; | ||
| transform: translate(30%, -30%); | ||
| } | ||
|
|
||
| .pulseHeader { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-bottom: 0.5rem; | ||
| position: relative; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .pulseHeader h3 { | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| margin: 0; | ||
| color: white; | ||
| } | ||
|
|
||
| .pulseBadge { | ||
| background: #00e676; | ||
| width: 12px; | ||
| height: 12px; | ||
| border-radius: 50%; | ||
| display: inline-block; | ||
| box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); | ||
| animation: pulse-green 1.5s infinite; | ||
| } | ||
|
|
||
| @keyframes pulse-green { | ||
| 0% { | ||
| transform: scale(0.95); | ||
| box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); | ||
| } | ||
|
|
||
| 70% { | ||
| transform: scale(1); | ||
| box-shadow: 0 0 0 10px rgba(0, 230, 118, 0); | ||
| } | ||
|
|
||
| 100% { | ||
| transform: scale(0.95); | ||
| box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); | ||
| } | ||
| } | ||
|
|
||
| .pulseDescription { | ||
| color: rgba(255, 255, 255, 0.8); | ||
| font-size: 0.95rem; | ||
| margin-bottom: 2.5rem; | ||
| position: relative; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .pulseGrid { | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| gap: 1.5rem; | ||
| margin-bottom: 2.5rem; | ||
| padding-bottom: 2rem; | ||
| position: relative; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .pulseStat { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .statValue { | ||
| font-size: 2.25rem; | ||
| font-weight: 800; | ||
| line-height: 1.2; | ||
| margin-bottom: 0.5rem; | ||
| text-shadow: 0 2px 10px rgba(0,0,0,0.1); | ||
| } | ||
|
|
||
| .statLabel { | ||
| font-size: 0.75rem; | ||
| font-weight: 600; | ||
| color: rgba(255, 255, 255, 0.8); | ||
| text-transform: uppercase; | ||
| letter-spacing: 0.5px; | ||
| } | ||
|
|
||
| .pulseButton { | ||
| background: #f55521; | ||
| border: 1px solid #f55521; | ||
| color: white !important; | ||
| padding: 0.875rem 1.5rem; | ||
| border-radius: 12px; | ||
| text-decoration: none; | ||
| font-weight: 700 !important; | ||
| font-size: 0.95rem; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| transition: all 0.2s ease; | ||
| position: relative; | ||
| z-index: 2; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .pulseButton:hover { | ||
| background: #e0481a; | ||
| border-color: #e0481a; | ||
| color: white !important; | ||
| text-decoration: none; | ||
| transform: translateY(-2px); | ||
| } | ||
|
|
||
| :global([data-theme='dark']) a.pulseButton, | ||
| :global([data-theme='dark']) a.pulseButton:hover { | ||
| color: white !important; | ||
| } | ||
|
|
||
| @media (max-width: 480px) { | ||
| .pulseGrid { | ||
| gap: 1rem; | ||
| } | ||
| .statValue { | ||
| font-size: 1.75rem; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 997px) { | ||
| .pulseCard { | ||
| max-width: 100%; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import styles from './MonthlyPulse.module.css'; | ||
|
|
||
| export default function MonthlyPulse() { | ||
| const [data, setData] = useState({ | ||
| mergedPRs: '-', | ||
| openIssues: '-', | ||
| closedIssues: '-' | ||
| }); | ||
| const [loading, setLoading] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| async function fetchPulse() { | ||
| try { | ||
| // Fetching from GitHub Search API to get aggregate counts | ||
| const [prsRes, openIssuesRes, closedIssuesRes] = await Promise.all([ | ||
|
Contributor
There was a problem hiding this comment. Just like the previuous comment. This also fetches directly from GitHub. Kindly look into the rate limit issue. For both cases consider fetching this data at build time instead. Write a prebuild script to save the data to a local JSON file, then have the components import that JSON. Let me know if you need help setting this up! |
||
| fetch(`https://api.github.com/search/issues?q=repo:IntersectMBO/developer-experience+type:pr+is:merged`), | ||
| fetch(`https://api.github.com/search/issues?q=repo:IntersectMBO/developer-experience+type:issue+is:open`), | ||
| fetch(`https://api.github.com/search/issues?q=repo:IntersectMBO/developer-experience+type:issue+is:closed`) | ||
| ]); | ||
|
|
||
| const prs = await prsRes.json(); | ||
| const openIssues = await openIssuesRes.json(); | ||
| const closedIssues = await closedIssuesRes.json(); | ||
|
|
||
| setData({ | ||
| mergedPRs: prs.total_count !== undefined ? prs.total_count : '-', | ||
| openIssues: openIssues.total_count !== undefined ? openIssues.total_count : '-', | ||
| closedIssues: closedIssues.total_count !== undefined ? closedIssues.total_count : '-' | ||
| }); | ||
| } catch (error) { | ||
|
Contributor
There was a problem hiding this comment. Loading states are handled, but network failures are not. Consider adding a fallback error state so the UI doesn't silently break or hang if a fetch fails. |
||
| console.error('Error fetching GitHub pulse:', error); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| } | ||
|
|
||
| fetchPulse(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className={styles.pulseCard}> | ||
| <div className={styles.pulseHeader}> | ||
| <h3>All-Time Overview</h3> | ||
| </div> | ||
| <p className={styles.pulseDescription}>Recent repository activity</p> | ||
|
|
||
| <div className={styles.pulseGrid}> | ||
| <div className={styles.pulseStat}> | ||
| <span className={styles.statValue}>{loading ? '...' : data.mergedPRs}</span> | ||
| <span className={styles.statLabel}>Merged PRs</span> | ||
| </div> | ||
| <div className={styles.pulseStat}> | ||
| <span className={styles.statValue}>{loading ? '...' : data.closedIssues}</span> | ||
| <span className={styles.statLabel}>Closed Issues</span> | ||
| </div> | ||
| <div className={styles.pulseStat}> | ||
| <span className={styles.statValue}>{loading ? '...' : data.openIssues}</span> | ||
| <span className={styles.statLabel}>New Issues</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <a | ||
| href="https://github.com/IntersectMBO/developer-experience" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className={styles.pulseButton} | ||
| > | ||
| Visit the GitHub Repository | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import Link from '@docusaurus/Link'; | ||
| import Heading from '@theme/Heading'; | ||
| import styles from './styles.module.css'; | ||
| import MonthlyPulse from './MonthlyPulse'; | ||
| import Contributors from './Contributors'; | ||
|
|
||
| export default function CommunitySection() { | ||
| return ( | ||
| <section className={styles.communitySection}> | ||
| <div className="container"> | ||
| <div className={styles.communityContent}> | ||
| <div className="row"> | ||
| <div className="col col--6"> | ||
| <Heading as="h2" className={styles.sectionTitle}> | ||
| Ask Questions or Suggest Improvements | ||
| </Heading> | ||
| <p className={styles.sectionDescription}> | ||
| Create an issue in our GitHub repository so that our developer advocates and community members assist you. | ||
| </p> | ||
|
|
||
| <Contributors /> | ||
|
|
||
| <div className={styles.communityActions}> | ||
| <Link | ||
| className={styles.joinButton} | ||
| href="https://members.intersectmbo.org/" | ||
| target="_blank" | ||
| rel="noopener noreferrer"> | ||
| Join Intersect | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <div className="col col--6"> | ||
| <div className={styles.communityImage}> | ||
| <MonthlyPulse /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The any type is used for contributor data.
Consider defining a minimal interface (e.g., interface Contributor { login: string; avatar_url: string; html_url: string; }) to keep types strict.