You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pulsar.apache.org by vi...@apache.org on 2024/03/19 15:41:59 UTC
(pulsar-site) branch fix-avatars-commmunity-page created (now 72427c9c1ff8)
This is an automated email from the ASF dual-hosted git repository.
visortelle pushed a change to branch fix-avatars-commmunity-page
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
at 72427c9c1ff8 Fix display wrong avatars on community page
This branch includes the following new commits:
new 72427c9c1ff8 Fix display wrong avatars on community page
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(pulsar-site) 01/01: Fix display wrong avatars on community page
Posted by vi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
visortelle pushed a commit to branch fix-avatars-commmunity-page
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
commit 72427c9c1ff851dc64437d6fce042c10372b92f4
Author: visortelle <vi...@gmail.com>
AuthorDate: Tue Mar 19 19:41:45 2024 +0400
Fix display wrong avatars on community page
---
.../pages/CommunityPage/CommunityPage.tsx | 451 ++++++++++-----------
1 file changed, 214 insertions(+), 237 deletions(-)
diff --git a/src/components/pages/CommunityPage/CommunityPage.tsx b/src/components/pages/CommunityPage/CommunityPage.tsx
index fedc2ba9e9c8..10b24e860bd5 100644
--- a/src/components/pages/CommunityPage/CommunityPage.tsx
+++ b/src/components/pages/CommunityPage/CommunityPage.tsx
@@ -14,295 +14,272 @@ import Button from "@site/src/components/ui/Button/Button";
import _ from 'lodash'
export default function CommunityPage(): JSX.Element {
-
const [isShowMorePMC, setIsShowMorePMC] = useState(false);
const showMorePMCButton = (
- <Button title={isShowMorePMC ? 'Show less' : 'Show more'} variant="transparentWhite" onClick={() => setIsShowMorePMC(!isShowMorePMC)}/>
+ <Button title={isShowMorePMC ? 'Show less' : 'Show more'} variant="transparentWhite" onClick={() => setIsShowMorePMC(!isShowMorePMC)} />
);
const [isShowMoreCmtrs, setIsShowMoreCmtrs] = useState(false);
const showMoreCmtrsButton = (
- <Button title={isShowMoreCmtrs ? 'Show less' : 'Show more'} variant="transparentWhite" onClick={() => setIsShowMoreCmtrs(!isShowMoreCmtrs)}/>
+ <Button title={isShowMoreCmtrs ? 'Show less' : 'Show more'} variant="transparentWhite" onClick={() => setIsShowMoreCmtrs(!isShowMoreCmtrs)} />
);
// Shuffle the team members so that the order is different each time the page is loaded
const pmcMembers = useMemo(() => _.shuffle(team.pmc), [team.pmc]);
const committers = useMemo(() => _.shuffle(team.committers), [team.committers]);
- let TeamPMCSets = new Array(Math.ceil(pmcMembers.length/5));
- let teamCtrsSets = new Array(Math.ceil(committers.length/5));
-
- let CountTheSet = 0;
- let CountTheSets = 0;
- pmcMembers.forEach(element => {
- CountTheSet++;
- if((CountTheSet-1)%5 == 0){ CountTheSets++; }
- if(!Array.isArray(TeamPMCSets[CountTheSets])) TeamPMCSets[CountTheSets] = new Array();
- TeamPMCSets[CountTheSets].push(element);
- });
+ const teamPmcSets = useMemo(() => _.chunk(pmcMembers, 5), [pmcMembers]);
+ const teamCtrsSets = useMemo(() => _.chunk(committers, 5), [committers]);
- CountTheSet = CountTheSets = 0;
+ return (
+ <Layout title={"Community"} description={"Learn about the basics of using Apache Pulsar"} wrapperClassName="LandingPage">
+ <section className={s.CommunityHeader}>
+ <div className={s.CommunityContent}>
+ <h1>Welcome to the Pulsar Community</h1>
+ <p className={s.Paragraph}>
+ The Apache Pulsar community includes people from around the
+ globe who are developing and using the messaging and streaming
+ platform for real-time workloads. We welcome contributions
+ from anyone with a passion for distributed systems.
+ </p>
+ </div>
+ </section>
- committers.forEach(element => {
- CountTheSet++;
- if((CountTheSet-1)%5 == 0){ CountTheSets++; }
- if(!Array.isArray(teamCtrsSets[CountTheSets])) teamCtrsSets[CountTheSets] = new Array();
- teamCtrsSets[CountTheSets].push(element);
- });
+ <section className={s.CommunityAbout}>
+ <div className={s.CommunityContent}>
+ <h2>About the Community</h2>
- function MemberCard({ member }) {
- // require the member to have "GitHub username(s) (user-provided)" field information in Whimsy
- // the user can go to Whimsy url https://whimsy.apache.org/roster/committer/__self__ to update the information
- // since it's possible to have multiple GitHub usernames, we only take the first one
- const githubUsername = member.githubUsername?.[0];
- const href = githubUsername ? ('https://github.com/' + githubUsername) : "#";
- const target = githubUsername ? "_blank" : "_self";
+ <div>
+ <p className={s.SmallParagraph}>
+ The Pulsar community is composed of members of the Project
+ Management Committee (PMC), committers, and contributors.
+ Committers have direct access to the source of a project and
+ actively evolve the codebase. Contributors improve the project
+ through submission of patches and suggestions to be reviewed
+ by the committers. The number of committers and contributors
+ to the project is unbounded.
+ </p>
- return (
- <a href={href} target={target} key={member.apacheId} className={s.CommunityMembersMember}>
- <div>
- <div className={s.CommunityMembersMemberPic}>
- { githubUsername && (
- <img src={'https://github.com/' + githubUsername + '.png'} alt={githubUsername} />
- )}
- </div>
- <div className={s.CommunityMembersMemberName}>
- <strong>{member.name}</strong><br />
- {githubUsername ? githubUsername : member.apacheId}
- </div>
- </div>
- </a>
- );
- }
+ <div className={s.Slider}>
+ <BrowserOnly>
+ {() => (
+ <Slider centerMode={window.innerWidth > 800} slidesToShow={2}>
+ {[
+ {
+ img: useBaseUrl("/img/community-image-6.jpg"),
+ alt: "Apache Pulsar community photo",
+ },
+ {
+ img: useBaseUrl("/img/community-image-1.jpg"),
+ alt: "Apache Pulsar community photo",
+ },
+ {
+ img: useBaseUrl("/img/community-image-3.jpg"),
+ alt: "Apache Pulsar community photo",
+ },
- return (
- <Layout title={"Community"} description={"Learn about the basics of using Apache Pulsar"} wrapperClassName="LandingPage">
- <section className={s.CommunityHeader}>
- <div className={s.CommunityContent}>
- <h1>Welcome to the Pulsar Community</h1>
- <p className={s.Paragraph}>
- The Apache Pulsar community includes people from around the
- globe who are developing and using the messaging and streaming
- platform for real-time workloads. We welcome contributions
- from anyone with a passion for distributed systems.
- </p>
+ {
+ img: useBaseUrl("/img/community-image-2.jpg"),
+ alt: "Apache Pulsar community photo",
+ },
+ {
+ img: useBaseUrl("/img/community-image-5.jpg"),
+ alt: "Apache Pulsar community photo",
+ },
+ {
+ img: useBaseUrl("/img/community-image-4.jpg"),
+ alt: "Apache Pulsar community photo",
+ },
+ ].map((slide, i) => (
+ <div key={i} className={s.Slide}>
+ <img className={s.SlideImage} alt={slide.alt} src={slide.img} />
+ </div>
+ ))}
+ </Slider>
+ )}
+ </BrowserOnly>
+ </div>
</div>
- </section>
-
- <section className={s.CommunityAbout}>
- <div className={s.CommunityContent}>
- <h2>About the Community</h2>
+ <div className={s.AfterCommunitySlider}>
+ <div>
+ <h3>
+ A successful project requires many people to play many roles.
+ </h3>
+ </div>
<div>
<p className={s.SmallParagraph}>
- The Pulsar community is composed of members of the Project
- Management Committee (PMC), committers, and contributors.
- Committers have direct access to the source of a project and
- actively evolve the codebase. Contributors improve the project
- through submission of patches and suggestions to be reviewed
- by the committers. The number of committers and contributors
- to the project is unbounded.
+ Some write code or documentation, while others are valuable as
+ testers, submitting patches, and suggestions.<br />
+ Get involved today!<br />
+ All contributions to the project are greatly appreciated.
+ </p>
+ <p className={s.SmallParagraphTop}>
+ Read the <a href="https://www.apache.org/foundation/policies/conduct" className="secondary-cta" target="_blank" >Apache Code of Conduct</a> and <a href="https://www.apache.org/foundation/policies/conduct#reporting-guidelines" className="secondary-cta" target="_blank" >Reporting Guidelines</a>.
</p>
-
- <div className={s.Slider}>
- <BrowserOnly>
- {() => (
- <Slider centerMode={window.innerWidth > 800} slidesToShow={2}>
- {[
- {
- img: useBaseUrl("/img/community-image-6.jpg"),
- alt: "Apache Pulsar community photo",
- },
- {
- img: useBaseUrl("/img/community-image-1.jpg"),
- alt: "Apache Pulsar community photo",
- },
- {
- img: useBaseUrl("/img/community-image-3.jpg"),
- alt: "Apache Pulsar community photo",
- },
-
- {
- img: useBaseUrl("/img/community-image-2.jpg"),
- alt: "Apache Pulsar community photo",
- },
- {
- img: useBaseUrl("/img/community-image-5.jpg"),
- alt: "Apache Pulsar community photo",
- },
- {
- img: useBaseUrl("/img/community-image-4.jpg"),
- alt: "Apache Pulsar community photo",
- },
- ].map((slide, i) => (
- <div key={i} className={s.Slide}>
- <img className={s.SlideImage} alt={slide.alt} src={slide.img} />
- </div>
- ))}
- </Slider>
- )}
- </BrowserOnly>
- </div>
- </div>
-
- <div className={s.AfterCommunitySlider}>
- <div>
- <h3>
- A successful project requires many people to play many roles.
- </h3>
- </div>
- <div>
- <p className={s.SmallParagraph}>
- Some write code or documentation, while others are valuable as
- testers, submitting patches, and suggestions.<br />
- Get involved today!<br />
- All contributions to the project are greatly appreciated.
- </p>
- <p className={s.SmallParagraphTop}>
- Read the <a href="https://www.apache.org/foundation/policies/conduct" className="secondary-cta" target="_blank" >Apache Code of Conduct</a> and <a href="https://www.apache.org/foundation/policies/conduct#reporting-guidelines" className="secondary-cta" target="_blank" >Reporting Guidelines</a>.
- </p>
- </div>
</div>
</div>
- </section>
+ </div>
+ </section>
- <section className={s.CommunityDiscussions}>
- <div className={s.CommunityDiscussionsBlur} />
- <div className={s.CommunityContent}>
- <Section title="Discussions" anchor="section-discussions">
- <p>
- Please notice that security-related issues or concerns should not be reported in public channels.<br/>
- Please follow the instructions in the <a href={`${useBaseUrl("security")}#security-policy`}>Security Policy</a> to contact the <a href="https://www.apache.org/security/">ASF Security Team</a>.<br/>
- <br/>
- </p>
- <DiscussionPlatforms />
- </Section>
- </div>
- </section>
+ <section className={s.CommunityDiscussions}>
+ <div className={s.CommunityDiscussionsBlur} />
+ <div className={s.CommunityContent}>
+ <Section title="Discussions" anchor="section-discussions">
+ <p>
+ Please notice that security-related issues or concerns should not be reported in public channels.<br />
+ Please follow the instructions in the <a href={`${useBaseUrl("security")}#security-policy`}>Security Policy</a> to contact the <a href="https://www.apache.org/security/">ASF Security Team</a>.<br />
+ <br />
+ </p>
+ <DiscussionPlatforms />
+ </Section>
+ </div>
+ </section>
- <div className={s.CommunityContribute}>
- <div className={s.CommunityContent}>
- <Section title="How to Contribute" anchor="section-contribute">
- <HowToContribute />
- </Section>
- </div>
+ <div className={s.CommunityContribute}>
+ <div className={s.CommunityContent}>
+ <Section title="How to Contribute" anchor="section-contribute">
+ <HowToContribute />
+ </Section>
</div>
+ </div>
- <div className={s.CommunityProjectGovernance}>
- <div className={s.CommunityContent}>
- <Section title="Project Governance" anchor="section-governance">
- <ProjectGovernance />
- </Section>
- </div>
+ <div className={s.CommunityProjectGovernance}>
+ <div className={s.CommunityContent}>
+ <Section title="Project Governance" anchor="section-governance">
+ <ProjectGovernance />
+ </Section>
</div>
+ </div>
- <div className={s.CommunityMembers}>
- <div className={s.CommunityContent}>
- <Section anchor="section-community" title="Meet the Community">
- <p className={s.CommunityMembersBig}>
- Pulsar community consists of PMC members, committers and contributors.
- </p>
- <p className={s.CommunityMembersSmall}>
- For the complete and up-to-date list, see <a href="https://projects.apache.org/committee.html?pulsar" target="_blank" >Apache Pulsar Committee</a>.
- </p>
- <br />
- <h4>{pmcMembers.length} PMC members</h4>
- <div>
- <div className={(isShowMorePMC ? s.CommunityMembersDesktopOpen : s.CommunityMembersDesktop)}>
- {(pmcMembers || []).map((member) => (
- <MemberCard key={member.apacheId} member={member} />
- ))}
- <div className={s.CommunityMembersShowMore}>
- {showMorePMCButton}
- <Button title="Go to Github" variant="cleanInvert" href="https://github.com/apache/pulsar" target="_blank" icon={useBaseUrl("/img/gotoi.svg")}/>
+ <div className={s.CommunityMembers}>
+ <BrowserOnly>
+ {() => (
+ <div className={s.CommunityContent}>
+ <Section anchor="section-community" title="Meet the Community">
+ <p className={s.CommunityMembersBig}>
+ Pulsar community consists of PMC members, committers and contributors.
+ </p>
+ <p className={s.CommunityMembersSmall}>
+ For the complete and up-to-date list, see <a href="https://projects.apache.org/committee.html?pulsar" target="_blank" >Apache Pulsar Committee</a>.
+ </p>
+ <br />
+ <h4>{pmcMembers.length} PMC members</h4>
+ <div>
+ <div className={(isShowMorePMC ? s.CommunityMembersDesktopOpen : s.CommunityMembersDesktop)}>
+ {(pmcMembers || []).map((member) => (
+ <MemberCard key={member.apacheId} member={member} />
+ ))}
+ <div className={s.CommunityMembersShowMore}>
+ {showMorePMCButton}
+ <Button title="Go to Github" variant="cleanInvert" href="https://github.com/apache/pulsar" target="_blank" icon={useBaseUrl("/img/gotoi.svg")} />
+ </div>
</div>
- </div>
- <div className={s.CommunityMembersMobile}>
- <div className={s.Slider}>
- <BrowserOnly>
- {() => (
- <Slider centerMode={window.innerWidth > 800} slidesToShow={1} invertMode={true}>
- {TeamPMCSets.map((set, i) => (
- <div key={i} className={s.SlideTeam}>
- {set.map((member, i) => (
- <MemberCard key={member.apacheId} member={member} />
- ))}
- </div>
- ))}
- </Slider>
- )}
- </BrowserOnly>
+ <div className={s.CommunityMembersMobile}>
+ <div className={s.Slider}>
+ <Slider centerMode={window.innerWidth > 800} slidesToShow={1} invertMode={true}>
+ {teamPmcSets.map((set, i) => (
+ <div key={i} className={s.SlideTeam}>
+ {set.map((member) => (
+ <MemberCard key={member.apacheId} member={member} />
+ ))}
+ </div>
+ ))}
+ </Slider>
+ </div>
</div>
</div>
- </div>
- <h4>{committers.length} Committers</h4>
- <div>
- <div className={(isShowMoreCmtrs ? s.CommunityMembersDesktopOpen : s.CommunityMembersDesktop)}>
- {(committers || []).map((member,i) => (
- <MemberCard key={member.apacheId} member={member} />
- ))}
- <div className={s.CommunityMembersShowMore}>
- {showMoreCmtrsButton}
- <Button title="Go to Github" variant="cleanInvert" href="https://github.com/apache/pulsar" target="_blank" icon={useBaseUrl("/img/gotoi.svg")}/>
+ <h4>{committers.length} Committers</h4>
+ <div>
+ <div className={(isShowMoreCmtrs ? s.CommunityMembersDesktopOpen : s.CommunityMembersDesktop)}>
+ {(committers || []).map((member, i) => (
+ <MemberCard key={member.apacheId} member={member} />
+ ))}
+ <div className={s.CommunityMembersShowMore}>
+ {showMoreCmtrsButton}
+ <Button title="Go to Github" variant="cleanInvert" href="https://github.com/apache/pulsar" target="_blank" icon={useBaseUrl("/img/gotoi.svg")} />
+ </div>
</div>
- </div>
- <div className={s.CommunityMembersMobile}>
- <div className={s.Slider}>
- <BrowserOnly>
- {() => (
- <Slider centerMode={window.innerWidth > 800} slidesToShow={1} invertMode={true}>
- {teamCtrsSets.map((set, i) => (
- <div key={i} className={s.SlideTeam}>
- {set.map((member, i) => (
- <MemberCard key={member.apacheId} member={member} />
- ))}
- </div>
- ))}
- </Slider>
- )}
- </BrowserOnly>
+ <div className={s.CommunityMembersMobile}>
+ <div className={s.Slider}>
+ <Slider centerMode={window.innerWidth > 800} slidesToShow={1} invertMode={true}>
+ {teamCtrsSets.map((set, i) => (
+ <div key={i} className={s.SlideTeam}>
+ {set.map((member) => (
+ <MemberCard key={member.apacheId} member={member} />
+ ))}
+ </div>
+ ))}
+ </Slider>
+ </div>
</div>
</div>
- </div>
- </Section>
- </div>
- </div>
-
- <div className={s.CommunityNumbers}>
- <div className={s.CommunityNumbersBlur} />
- <div className={s.CommunityContent}>
- <div>
- <h2>Pulsar trusted community</h2>
- <p>Join us and start contributing</p>
+ </Section>
</div>
+ )}
+ </BrowserOnly>
+ </div>
+
+ <div className={s.CommunityNumbers}>
+ <div className={s.CommunityNumbersBlur} />
+ <div className={s.CommunityContent}>
+ <div>
+ <h2>Pulsar trusted community</h2>
+ <p>Join us and start contributing</p>
</div>
- <div className={s.CommunityContent}>
- <div className={s.CommunityNumbersContainer}>
+ </div>
+ <div className={s.CommunityContent}>
+ <div className={s.CommunityNumbersContainer}>
{communityNumbers.map((number, i) => (
- <div key={'num'+i}>
+ <div key={i}>
<div className={s.CommunityNumbersBig}>{number.number}{(number.icon) ? <img src={useBaseUrl(number.icon)} /> : null}</div>
<strong>{number.title}</strong>
{number.linkTitle ? <div className="margin-top--lg"><Button title={number.linkTitle} href={number.link} target='_blank' variant='transparentBlack' /></div> : ''}
</div>
))}
- </div>
</div>
</div>
+ </div>
- <div className={s.PromoCallout}>
- <div className={s.CommunityContent}>
- <div className={s.PromoCalloutContent}>
- <div>
- <strong>Blog </strong>
- Get up-to-date Pulsar insights.
- </div>
- </div>
+ <div className={s.PromoCallout}>
+ <div className={s.CommunityContent}>
+ <div className={s.PromoCalloutContent}>
<div>
- <Button title="Explore" variant="transparentBlack" href={`${useBaseUrl("blog")}`} />
+ <strong>Blog </strong>
+ Get up-to-date Pulsar insights.
</div>
</div>
+ <div>
+ <Button title="Explore" variant="transparentBlack" href={`${useBaseUrl("blog")}`} />
+ </div>
</div>
+ </div>
</Layout>
);
};
+
+function MemberCard({ member }) {
+ // require the member to have "GitHub username(s) (user-provided)" field information in Whimsy
+ // the user can go to Whimsy url https://whimsy.apache.org/roster/committer/__self__ to update the information
+ // since it's possible to have multiple GitHub usernames, we only take the first one
+ const githubUsername = member.githubUsername?.[0];
+ const href = githubUsername ? ('https://github.com/' + githubUsername) : "#";
+ const target = githubUsername ? "_blank" : "_self";
+
+ return (
+ <a href={href} target={target} key={member.apacheId} className={s.CommunityMembersMember}>
+ <div>
+ <div className={s.CommunityMembersMemberPic}>
+ {githubUsername && (
+ <img src={'https://github.com/' + githubUsername + '.png'} alt={githubUsername} />
+ )}
+ </div>
+ <div className={s.CommunityMembersMemberName}>
+ <strong>{member.name}</strong><br />
+ {githubUsername ? githubUsername : member.apacheId}
+ </div>
+ </div>
+ </a>
+ );
+}