This is an automated email from the ASF dual-hosted git repository.
visortelle pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new 764a211662df Fix display wrong avatars on community page (#861)
764a211662df is described below
commit 764a211662dfe2f57fe9317935104fb69ae6fa60
Author: Kiryl Valkovich 🛸 <[email protected]>
AuthorDate: Tue Mar 19 19:43:45 2024 +0400
Fix display wrong avatars on community page (#861)
---
.../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>
+ );
+}
