This is an automated email from the ASF dual-hosted git repository.
tison 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 2b9d0c635b2 Adjust the community page (#417)
2b9d0c635b2 is described below
commit 2b9d0c635b2eff7f675887854bfb73131f1c64da
Author: Kiryl Valkovich <[email protected]>
AuthorDate: Fri Feb 17 02:37:11 2023 +0300
Adjust the community page (#417)
---
src/components/CommunityPage/index.tsx | 181 ++++++++++++
.../discussions}/DiscussionPlatforms.module.css | 0
.../sections/discussions}/DiscussionPlatforms.tsx | 78 ++---
.../sections/how-to-contribute/HowToContribute.tsx | 91 ++++++
.../project-governance/ProjectGovernance.tsx | 60 ++++
.../shared/ContentCard/ContentCard.module.css | 23 ++
.../shared/ContentCard/ContentCard.tsx} | 30 +-
.../ContentCard/ContentCardsLayout.module.css} | 10 +-
.../shared/ContentCard/ContentCardsLayout.tsx | 32 ++
.../shared/Section/Section.module.css | 19 ++
.../CommunityPage/shared/Section/Section.tsx | 28 ++
.../CommunityPage/shared/Slider}/Slider.tsx | 0
src/pages/community.tsx | 3 +
src/pages/community/DiscussionPlatform.module.css | 10 -
src/pages/community/index.tsx | 321 ---------------------
static/img/contribute.svg | 6 +-
static/img/mailing-list.svg | 4 +-
static/img/report-bugs.svg | 6 +-
...vulnerabillity.svg => report-vulnerability.svg} | 11 +-
19 files changed, 518 insertions(+), 395 deletions(-)
diff --git a/src/components/CommunityPage/index.tsx
b/src/components/CommunityPage/index.tsx
new file mode 100644
index 00000000000..35d363ba98b
--- /dev/null
+++ b/src/components/CommunityPage/index.tsx
@@ -0,0 +1,181 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import TeamTable from "@site/src/components/TeamTable";
+import PromoCallout from "@site/src/components/PromoCallout";
+import WavySeparatorFive from "@site/static/img/separator-5.svg";
+import team from "@site/data/team";
+import Slider from "./shared/Slider/Slider";
+import DiscussionPlatforms from "./sections/discussions/DiscussionPlatforms";
+import HowToContribute from "./sections/how-to-contribute/HowToContribute";
+import Section from "./shared/Section/Section";
+import ProjectGovernance from
"./sections/project-governance/ProjectGovernance";
+
+export default function CommunityPage(): JSX.Element {
+ return (
+ <Layout
+ title={"Community"}
+ description={"Learn about the basics of using Apache Pulsar"}
+ >
+ <div className="page-wrap tailwind">
+ <div className="hero-bg absolute z-0">
+ <img
+ className="relative"
+ src={useBaseUrl("/img/community-hero-bg.jpg")}
+ alt={"Community Hero"}
+ />
+ </div>
+ <section
+ id="section-welcome"
+ className="scrollable hero hero--welcome pt-24 relative"
+ >
+ <div className="inner cf">
+ <h1>Welcome to the Pulsar Community</h1>
+ <div className="cf">
+ <div className="md:w-2/3 md:float-left">
+ <p className="text-lg">
+ 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>
+ </div>
+ </div>
+ </section>
+
+ <section id="section-team" className="main-content relative">
+ l
+ <div className="inner pb-0 cf">
+ <div className="cf flex flex-col md:items-center md:flex-row">
+ <div className="md:w-1/2 md:pr-12">
+ <h2>About the Community</h2>
+ <p>
+ 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>
+ </div>
+ <Slider
+ slides={[
+ {
+ img: useBaseUrl("/img/community-photo-small.jpg"),
+ alt: "community photo",
+ },
+ {
+ img: useBaseUrl("/img/community-image-2.jpg"),
+ alt: "community photo 2",
+ },
+ {
+ img: useBaseUrl("/img/community-image-3.jpg"),
+ alt: "community photo 3",
+ },
+ ]}
+ />
+ </div>
+ <div className="cf py-12 flex flex-col sm:flex-row">
+ <div className="sm:w-1/3">
+ <h3>
+ A successful project requires many people to play many roles.
+ </h3>
+ </div>
+ <div className="sm:w-2/3 sm:pl-8">
+ <p>
+ Some write code or documentation, while others are valuable
as
+ testers, submitting patches, and suggestions. Get involved
+ today! All contributions to the project are greatly
+ appreciated.
+ </p>
+ <p>
+ 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>
+
+ <WavySeparatorFive />
+
+ <Section title="Discussions" anchor="section-discussions">
+ <DiscussionPlatforms />
+ </Section>
+
+ <Section title="Project Governance" anchor="section-governance">
+ <ProjectGovernance />
+ </Section>
+
+ <Section title="How to Contribute" anchor="section-contribute">
+ <HowToContribute />
+ </Section>
+
+ <Section anchor="section-community" title="Meet the Community">
+ <p>
+ Pulsar community consists of PMC members, committers and
+ contributors.{" "}
+ </p>
+ <p>
+ For the complete and up-to-date list, see{" "}
+ <a
+ className="secondary-cta"
+ href="https://projects.apache.org/committee.html?pulsar";
+ target="_blank"
+ >
+ Apache Pulsar Committee
+ </a>
+ .
+ </p>
+ <h3 className="text--center">PMC members</h3>
+ <div className="md:grid md:grid-cols-2 md:gap-x-4">
+ <TeamTable data={team.pmc.slice(0, (team.pmc.length + 1) / 2)} />
+ <TeamTable data={team.pmc.slice((team.pmc.length + 1) / 2)} />
+ </div>
+ <h3 className="text--center">Committers</h3>
+ <div className="md:grid md:grid-cols-2 md:gap-x-4">
+ <TeamTable
+ data={team.committers.slice(0, (team.committers.length + 1) / 2)}
+ />
+ <TeamTable
+ data={team.committers.slice((team.committers.length + 1) / 2)}
+ />
+ </div>
+ <div className="md:grid md:grid-cols-2 md:gap-x-4">
+ <img
+
src="https://contributor-overtime-api.git-contributor.com/contributors-svg?chart=contributorOverTime&repo=apache/pulsar";
+ alt={"Contributors over time"}
+ />
+ <img
+
src="https://contributor-overtime-api.git-contributor.com/contributors-svg?chart=contributorMonthlyActivity&repo=apache/pulsar";
+ alt={"Active contributors monthly"}
+ />
+ </div>
+ </Section>
+
+ <PromoCallout
+ url="/blog"
+ linkText="Read Now"
+ text="Get up-to-date Pulsar insights on the blog"
+ />
+ </div>
+ </Layout>
+ );
+};
diff --git a/src/pages/community/DiscussionPlatforms.module.css
b/src/components/CommunityPage/sections/discussions/DiscussionPlatforms.module.css
similarity index 100%
copy from src/pages/community/DiscussionPlatforms.module.css
copy to
src/components/CommunityPage/sections/discussions/DiscussionPlatforms.module.css
diff --git a/src/pages/community/DiscussionPlatforms.tsx
b/src/components/CommunityPage/sections/discussions/DiscussionPlatforms.tsx
similarity index 76%
rename from src/pages/community/DiscussionPlatforms.tsx
rename to
src/components/CommunityPage/sections/discussions/DiscussionPlatforms.tsx
index 6ebf3f5ac10..6af0f088879 100644
--- a/src/pages/community/DiscussionPlatforms.tsx
+++ b/src/components/CommunityPage/sections/discussions/DiscussionPlatforms.tsx
@@ -1,14 +1,12 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
-import DiscussionPlatform, {
- DiscussionPlatformProps,
-} from "./DiscussionPlatform";
-import s from "./DiscussionPlatforms.module.css";
+import { ContentCardProps } from "../../shared/ContentCard/ContentCard";
+import ContentCardsLayout from "../../shared/ContentCard/ContentCardsLayout";
const DiscussionPlatforms: React.FC = () => {
- const platforms: DiscussionPlatformProps[] = [
+ const platforms: ContentCardProps[] = [
{
- name: "User Mailing List",
+ title: "User Mailing List",
description: (
<div>
General mailing list for user-related discussions.
@@ -35,16 +33,18 @@ const DiscussionPlatforms: React.FC = () => {
type: "normal",
},
],
- logoSrc: useBaseUrl("/img/mailing-list.svg"),
+ image: {
+ src: useBaseUrl("/img/mailing-list.svg"),
+ },
},
{
- name: "Developer Mailing List",
+ title: "Developer Mailing List",
description: (
<div>
Questions and discussions related to Pulsar development.
<br />
<a
- href="https://lists.apache.org/[email protected]";
+ href="https://lists.apache.org/[email protected]";
target="_blank"
>
Access the archives
@@ -65,14 +65,16 @@ const DiscussionPlatforms: React.FC = () => {
type: "normal",
},
],
- logoSrc: useBaseUrl("/img/mailing-list.svg"),
+ image: {
+ src: useBaseUrl("/img/mailing-list.svg"),
+ },
},
{
- name: "Discussions at GitHub",
+ title: "Discussions at GitHub",
description: (
<div>
- A good place to ask any question, bring an idea or get support.
Especially if you are not
- friends with mailing lists.
+ A good place to ask any question, bring an idea or get support.
+ Especially if you are not friends with mailing lists.
</div>
),
actions: [
@@ -91,10 +93,12 @@ const DiscussionPlatforms: React.FC = () => {
isExternal: true,
},
],
- logoSrc: useBaseUrl("/img/github-mark.svg"),
+ image: {
+ src: useBaseUrl("/img/github-mark.svg"),
+ },
},
{
- name: "Stack Overflow",
+ title: "Stack Overflow",
description: (
<span>
For technical questions, we ask that you post them to Stack Overflow
@@ -118,10 +122,12 @@ const DiscussionPlatforms: React.FC = () => {
isExternal: true,
},
],
- logoSrc: useBaseUrl("/img/stackoverflow-logo.svg"),
+ image: {
+ src: useBaseUrl("/img/stackoverflow-logo.svg"),
+ },
},
{
- name: "Slack",
+ title: "Slack",
description: (
<>
Use it for instant messaging and real-time discussions.
@@ -134,41 +140,44 @@ const DiscussionPlatforms: React.FC = () => {
),
actions: [
{
- id: "open",
- text: "Open",
- href: "https://apache-pulsar.slack.com/";,
+ id: "sign-up",
+ text: "Sign-up",
+ href:
"https://communityinviter.com/apps/apache-pulsar/apache-pulsar";,
type: "primary",
isExternal: true,
},
{
- id: "sign-up",
- text: "Sign-up",
- href:
"https://communityinviter.com/apps/apache-pulsar/apache-pulsar";,
+ id: "launch-slack",
+ text: "Launch Slack",
+ href: "https://apache-pulsar.slack.com/";,
type: "normal",
isExternal: true,
},
],
- logoSrc: useBaseUrl("/img/Slack_Mark.svg"),
+ image: {
+ src: useBaseUrl("/img/Slack_Mark.svg"),
+ },
},
{
- name: "WeChat",
+ title: "WeChat",
description: (
<span>
Welcome to the Apache Pulsar Official Account at WeChat! The account
ID is <code>ApachePulsar</code>.
</span>
),
- logoSrc: useBaseUrl("/img/wechat-logo.svg"),
+ image: {
+ src: useBaseUrl("/img/wechat-logo.svg"),
+ },
},
{
- name: "Community Meetings",
+ title: "Community Meetings",
description: (
<span>
The community meeting occurs biweekly on Tuesdays and Thursdays to
discuss new proposals, open pull requests, and host open discussions.
</span>
),
- logoSrc: useBaseUrl("/img/community-meetings.svg"),
actions: [
{
id: "see-details",
@@ -178,18 +187,13 @@ const DiscussionPlatforms: React.FC = () => {
isExternal: true,
},
],
+ image: {
+ src: useBaseUrl("/img/community-meetings.svg"),
+ },
},
];
- return (
- <div className={s.DiscussionPlatforms}>
- {platforms.map((platform) => (
- <div key={platform.name} className={s.DiscussionPlatform}>
- <DiscussionPlatform {...platform} />
- </div>
- ))}
- </div>
- );
+ return <ContentCardsLayout cards={platforms} columns={2} />;
};
export default DiscussionPlatforms;
diff --git
a/src/components/CommunityPage/sections/how-to-contribute/HowToContribute.tsx
b/src/components/CommunityPage/sections/how-to-contribute/HowToContribute.tsx
new file mode 100644
index 00000000000..b8e745ee16b
--- /dev/null
+++
b/src/components/CommunityPage/sections/how-to-contribute/HowToContribute.tsx
@@ -0,0 +1,91 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import React from "react";
+
+import { ContentCardProps } from "../../shared/ContentCard/ContentCard";
+import ContentCardsLayout from "../../shared/ContentCard/ContentCardsLayout";
+
+const HowToContribute: React.FC = () => {
+ const contentCards: ContentCardProps[] = [
+ {
+ title: "Contributing to the Project",
+ description: (
+ <>
+ Pulsar has many different opportunities for contributions -- you can
+ write new examples/tutorials, add new user-facing libraries, write
new
+ Pulsar IO connectors, participate in documentation, and more."
+ </>
+ ),
+ actions: [
+ {
+ id: "contributing-to-the-project",
+ href: useBaseUrl("/contribute"),
+ text: "Contribution guide",
+ type: "primary",
+ },
+ {
+ id: "contributing-to-the-project",
+ href: useBaseUrl("/contribute/develop-coding-conventions"),
+ text: "Coding conventions",
+ type: "normal",
+ },
+ ],
+ image: {
+ src: useBaseUrl("img/contribute.svg"),
+ size: "big",
+ },
+ },
+ {
+ title: "Reporting Bugs",
+ description: (
+ <>
+ If you encounter a problem with Pulsar, the first places to ask for
+ help are the user mailing list or Stack Overflow.
+ <br />
+ <br />
+ If, after having asked for help, you suspect that you have found a
bug
+ in Pulsar, you should report it to the developer mailing list or by
+ opening GitHub Issue. Please provide as much detail as you can on
your
+ problem. Don't forget to indicate which version of Pulsar you
are
+ running and on which environment.
+ </>
+ ),
+ image: {
+ src: useBaseUrl("img/report-bugs.svg"),
+ size: "big",
+ },
+ },
+ {
+ title: "Reporting a Vulnerability",
+ description: (
+ <>
+ To report a vulnerability for Pulsar, contact the{" "}
+ <a href="https://www.apache.org/security/projects.html";>
+ Apache Security Team
+ </a>
+ .
+ <br />
+ The process for reporting a vulnerability is outlined{" "}
+ <a href="https://www.apache.org/security/"; target="_blank">
+ here
+ </a>
+ . When reporting a vulnerability to{" "}
+ <a href="mailto:[email protected]";>[email protected]</a>, you can
+ copy your email to{" "}
+ <a href="mailto:[email protected]";>
+ [email protected]
+ </a>{" "}
+ to send your report to the Apache Pulsar Project Management
Committee.
+ This is a private mailing list.
+ </>
+ ),
+ image: {
+ src: useBaseUrl("img/report-vulnerability.svg"),
+ size: "big",
+ },
+ },
+ ];
+
+ return <ContentCardsLayout cards={contentCards} columns={1} />;
+};
+
+export default HowToContribute;
diff --git
a/src/components/CommunityPage/sections/project-governance/ProjectGovernance.tsx
b/src/components/CommunityPage/sections/project-governance/ProjectGovernance.tsx
new file mode 100644
index 00000000000..c379fe08681
--- /dev/null
+++
b/src/components/CommunityPage/sections/project-governance/ProjectGovernance.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { ContentCardProps } from "../../shared/ContentCard/ContentCard";
+import ContentCardsLayout from "../../shared/ContentCard/ContentCardsLayout";
+
+const ProjectGovernance: React.FC = () => {
+ const cards: ContentCardProps[] = [
+ {
+ title: "Project Management Committee (PMC)",
+ description: (
+ <>
+ Apache Pulsar is independently managed by its PMC, the governing body
+ tasked with project management.
+ <br />
+ <br />
+ <strong>Responsibilities:</strong>
+ <ul>
+ <li>Technical direction.</li>
+ <li>Voting on new committers and PMC members.</li>
+ <li>Setting policies.</li>
+ <li>Formally voting on software product releases.</li>
+ </ul>
+ </>
+ ),
+ actions: [
+ {
+ id: "project-independence-overview",
+ text: "Project independence overview",
+ href: "https://community.apache.org/projectIndependence";,
+ type: "primary",
+ isExternal: true,
+ },
+ {
+ id: "pmcs",
+ text: "PMCs",
+ href: "https://www.apache.org/foundation/governance/pmcs.html";,
+ type: "normal",
+ isExternal: true,
+ },
+ {
+ id: "voting-process",
+ text: "Voting process",
+ href: "https://www.apache.org/foundation/voting.html";,
+ type: "normal",
+ isExternal: true,
+ },
+ {
+ id: "apache-way",
+ text: "The Apache way",
+ href: "https://www.apache.org/theapacheway/index.html";,
+ type: "normal",
+ isExternal: true,
+ },
+ ],
+ },
+ ];
+
+ return <ContentCardsLayout cards={cards} columns={1} />;
+};
+
+export default ProjectGovernance;
diff --git
a/src/components/CommunityPage/shared/ContentCard/ContentCard.module.css
b/src/components/CommunityPage/shared/ContentCard/ContentCard.module.css
new file mode 100644
index 00000000000..447e43029ee
--- /dev/null
+++ b/src/components/CommunityPage/shared/ContentCard/ContentCard.module.css
@@ -0,0 +1,23 @@
+.ContentCard {
+ display: flex;
+}
+
+.NormalImage {
+ flex: 0 0 96px;
+ width: 96px;
+ height: 96px;
+ display: block;
+ margin-right: 24px;
+}
+
+.BigImage {
+ flex: 0 0 192px;
+ width: 192px;
+ height: 192px;
+ display: block;
+ margin-right: 24px;
+}
+
+.Actions {
+ margin-top: 18px;
+}
diff --git a/src/pages/community/DiscussionPlatform.tsx
b/src/components/CommunityPage/shared/ContentCard/ContentCard.tsx
similarity index 64%
rename from src/pages/community/DiscussionPlatform.tsx
rename to src/components/CommunityPage/shared/ContentCard/ContentCard.tsx
index c7cf83d9903..edd500c8f52 100644
--- a/src/pages/community/DiscussionPlatform.tsx
+++ b/src/components/CommunityPage/shared/ContentCard/ContentCard.tsx
@@ -1,6 +1,6 @@
import React from "react";
import PillButton, { PillButtonVariant } from
"@site/src/components/PillButton";
-import s from "./DiscussionPlatform.module.css";
+import s from "./ContentCard.module.css";
type ActionButtonProps = {
id: string;
@@ -10,21 +10,29 @@ type ActionButtonProps = {
isExternal?: boolean;
};
-export type DiscussionPlatformProps = {
- name: string;
- logoSrc: string;
+export type ContentCardProps = {
+ title: string;
description: React.ReactNode;
+ image?: {
+ src: string;
+ size?: "normal" | "big";
+ };
actions?: ActionButtonProps[];
};
-const DiscussionPlatform: React.FC<DiscussionPlatformProps> = (props) => {
+const ContentCard: React.FC<ContentCardProps> = (props) => {
return (
- <div className={s.DiscussionPlatform}>
- <img className={s.Logo} src={props.logoSrc} />
+ <div className={s.ContentCard}>
+ {props.image && (
+ <img
+ className={`${props.image.size === "big" ? s.BigImage :
s.NormalImage}`}
+ src={props.image.src}
+ />
+ )}
<div>
- <h3>{props.name}</h3>
- <p>{props.description}</p>
- <div>
+ <h3>{props.title}</h3>
+ <div>{props.description}</div>
+ <div className={s.Actions}>
{(props.actions || []).map((action) => (
<ActionButton key={action.id} {...action} />
))}
@@ -59,4 +67,4 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
);
};
-export default DiscussionPlatform;
+export default ContentCard;
diff --git a/src/pages/community/DiscussionPlatforms.module.css
b/src/components/CommunityPage/shared/ContentCard/ContentCardsLayout.module.css
similarity index 52%
rename from src/pages/community/DiscussionPlatforms.module.css
rename to
src/components/CommunityPage/shared/ContentCard/ContentCardsLayout.module.css
index f7128862274..d47000cd598 100644
--- a/src/pages/community/DiscussionPlatforms.module.css
+++
b/src/components/CommunityPage/shared/ContentCard/ContentCardsLayout.module.css
@@ -1,11 +1,17 @@
-.DiscussionPlatforms {
+.TwoColumnsLayout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px 24px;
}
@media (max-width: 1000px) {
- .DiscussionPlatforms {
+ .TwoColumnsLayout {
grid-template-columns: 1fr;
}
}
+
+.OneColumnLayout {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 72px 0;
+}
diff --git
a/src/components/CommunityPage/shared/ContentCard/ContentCardsLayout.tsx
b/src/components/CommunityPage/shared/ContentCard/ContentCardsLayout.tsx
new file mode 100644
index 00000000000..9a1911c0f1f
--- /dev/null
+++ b/src/components/CommunityPage/shared/ContentCard/ContentCardsLayout.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import s from "./ContentCardsLayout.module.css";
+import ContentCard, { ContentCardProps } from "./ContentCard";
+
+export type LayoutProps = {
+ cards: ContentCardProps[];
+ columns: 1 | 2;
+};
+
+const ContentCardsLayout: React.FC<LayoutProps> = (props) => {
+ let className = "";
+ switch (props.columns) {
+ case 1:
+ className = s.OneColumnLayout;
+ break;
+ case 2:
+ className = s.TwoColumnsLayout;
+ break;
+ }
+
+ return (
+ <div className={className}>
+ {(props.cards || []).map((card) => (
+ <div key={card.title} className={s.Card}>
+ <ContentCard {...card} />
+ </div>
+ ))}
+ </div>
+ );
+};
+
+export default ContentCardsLayout;
diff --git a/src/components/CommunityPage/shared/Section/Section.module.css
b/src/components/CommunityPage/shared/Section/Section.module.css
new file mode 100644
index 00000000000..c987834f9b7
--- /dev/null
+++ b/src/components/CommunityPage/shared/Section/Section.module.css
@@ -0,0 +1,19 @@
+.Section {
+ padding: 36px 0;
+ margin-bottom: 24px;
+}
+
+.Content {
+ max-width: 1200px;
+ margin: auto;
+ padding: 0 32px;
+}
+
+h2.Title {
+ text-align: center;
+ margin-bottom: 48px;
+}
+
+.Separator {
+ margin-top: 48px;
+}
diff --git a/src/components/CommunityPage/shared/Section/Section.tsx
b/src/components/CommunityPage/shared/Section/Section.tsx
new file mode 100644
index 00000000000..d864e7ce4cd
--- /dev/null
+++ b/src/components/CommunityPage/shared/Section/Section.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import s from "./Section.module.css";
+import WavySeparatorSix from "@site/static/img/separator-6.svg";
+
+export type SectionProps = {
+ title: string;
+ children: React.ReactNode;
+ anchor?: string;
+ isHideSeparator?: boolean;
+};
+
+const Section: React.FC<SectionProps> = (props) => {
+ return (
+ <section className={s.Section} id={props.anchor}>
+ <div className={s.Content}>
+ <h2 className={s.Title}>{props.title}</h2>
+ {props.children}
+ </div>
+ {!props.isHideSeparator && (
+ <div className={s.Separator}>
+ <WavySeparatorSix />
+ </div>
+ )}
+ </section>
+ );
+};
+
+export default Section;
diff --git a/src/pages/community/Slider.tsx
b/src/components/CommunityPage/shared/Slider/Slider.tsx
similarity index 100%
rename from src/pages/community/Slider.tsx
rename to src/components/CommunityPage/shared/Slider/Slider.tsx
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
new file mode 100644
index 00000000000..4d81a4dd54f
--- /dev/null
+++ b/src/pages/community.tsx
@@ -0,0 +1,3 @@
+import CommunityPage from '@site/src/components/CommunityPage';
+
+export default CommunityPage;
diff --git a/src/pages/community/DiscussionPlatform.module.css
b/src/pages/community/DiscussionPlatform.module.css
deleted file mode 100644
index 18a39dc7423..00000000000
--- a/src/pages/community/DiscussionPlatform.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.DiscussionPlatform {
- display: flex;
-}
-
-.Logo {
- width: 100px;
- height: 100px;
- display: block;
- margin-right: 24px;
-}
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
deleted file mode 100644
index 19bd26ff8b1..00000000000
--- a/src/pages/community/index.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import React, { useEffect } from "react";
-import Layout from "@theme/Layout";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import TeamTable from "@site/src/components/TeamTable";
-import PromoCallout from "@site/src/components/PromoCallout";
-import PillButton from "@site/src/components/PillButton";
-import WavySeparatorFive from "@site/static/img/separator-5.svg";
-import WavySeparatorSix from "@site/static/img/separator-6.svg";
-import team from "@site/data/team";
-import Slider from "./Slider";
-import DiscussionPlatforms from "./DiscussionPlatforms";
-
-const CommunityPage: React.FC = () => {
- return (
- <Layout
- title={"Community"}
- description={"Learn about the basics of using Apache Pulsar"}
- >
- <div className="page-wrap tailwind">
- <div className="hero-bg absolute z-0">
- <img
- className="relative"
- src={useBaseUrl("/img/community-hero-bg.jpg")}
- alt={"Community Hero"}
- />
- </div>
- <section
- id="section-welcome"
- className="scrollable hero hero--welcome pt-24 relative"
- >
- <div className="inner cf">
- <h1>Welcome to the Pulsar Community</h1>
- <div className="cf">
- <div className="md:w-2/3 md:float-left">
- <p className="text-lg">
- 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>
- </div>
- </div>
- </section>
-
- <section id="section-team" className="main-content relative">
- l
- <div className="inner pb-0 cf">
- <div className="cf flex flex-col md:items-center md:flex-row">
- <div className="md:w-1/2 md:pr-12">
- <h2>About the Community</h2>
- <p>
- 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>
- </div>
- <Slider
- slides={[
- {
- img: useBaseUrl("/img/community-photo-small.jpg"),
- alt: "community photo",
- },
- {
- img: useBaseUrl("/img/community-image-2.jpg"),
- alt: "community photo 2",
- },
- {
- img: useBaseUrl("/img/community-image-3.jpg"),
- alt: "community photo 3",
- },
- ]}
- />
- </div>
- <div className="cf py-12 flex flex-col sm:flex-row">
- <div className="sm:w-1/3">
- <h3>
- A successful project requires many people to play many roles.
- </h3>
- </div>
- <div className="sm:w-2/3 sm:pl-8">
- <p>
- Some write code or documentation, while others are valuable
as
- testers, submitting patches, and suggestions. Get involved
- today! All contributions to the project are greatly
- appreciated.
- </p>
- <p>
- 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>
-
- <WavySeparatorFive />
-
- <section id="section-discussions">
- <div className="inner pt-12">
- <h2 className="text--center">Discussions</h2>
- <DiscussionPlatforms />
- </div>
- </section>
-
- <WavySeparatorSix />
-
- <section id="section-governance" className="py-12 scrollable">
- <div className="inner">
- <h2>Project Governance</h2>
- <p>
- Apache Pulsar is independently managed by its Project Management
- Committee (PMC)—the governing body tasked with project management
- including technical direction, voting on new committers and PMC
- members, setting policies, and formally voting on software
product
- releases.
- </p>
- <PillButton
- variant="primary"
- target="_blank"
- href="https://community.apache.org/projectIndependence";
- >
- ASF PROJECT INDEPENDENCE OVERVIEW
- </PillButton>
- <PillButton
- variant="grey"
- target="_blank"
- href="https://www.apache.org/foundation/governance/pmcs.html";
- >
- ASF PMC OVERVIEW
- </PillButton>
- <PillButton
- variant="primary"
- target="_blank"
- href="https://www.apache.org/theapacheway/index.html";
- >
- THE APACHE WAY
- </PillButton>
- </div>
- </section>
- <section id="section-contribute" className="py-12 scrollable">
- <div className="inner">
- <h2 className="text-center sm:text-left">How to Contribute</h2>
- <div className="">
- <div className="flex flex-col sm:flex-row items-center py-12">
- <div className="sm:w-1/3 section-icon px-12">
- <img src={useBaseUrl("/img/contribute.svg")} />
- </div>
- <div className="sm:w-2/3">
- <h3>Contributing to the Project</h3>
- <p>
- Pulsar has many different opportunities for contributions
--
- you can write new examples/tutorials, add new user-facing
- libraries, write new Pulsar IO connectors, participate in
- documentation, and more.{" "}
- </p>
- <PillButton
- variant="primary"
- href={useBaseUrl("contribute")}
- >
- Contribution Guide
- </PillButton>
- <PillButton
- variant="grey"
- href={useBaseUrl("contribute/develop-coding-conventions")}
- >
- Coding Conventions
- </PillButton>
- </div>
- </div>
- <div className="flex flex-col sm:flex-row items-center py-12">
- <div className="sm:w-1/3 section-icon px-12">
- <img
- src={useBaseUrl("/img/report-bugs.svg")}
- alt={"Report bugs"}
- />
- </div>
- <div className="sm:w-2/3 ">
- <h3>Reporting Bugs</h3>
- <p>
- If you encounter a problem with Pulsar, the first places to
- ask for help are the user mailing list or Stack Overflow.
- </p>
- <p>
- If, after having asked for help, you suspect that you have
- found a bug in Pulsar, you should report it to the
developer
- mailing list or by opening GitHub Issue. Please provide as
- much detail as you can on your problem. Don’t forget to
- indicate which version of Pulsar you are running and on
- which environment.
- </p>
- </div>
- </div>
- <div className="flex flex-col sm:flex-row items-center py-12">
- <div className="sm:w-1/3 section-icon px-12">
- <img src={useBaseUrl("/img/report-vulnerabillity.svg")} />
- </div>
- <div className="sm:w-2/3">
- <h3>Reporting a Vulnerability</h3>
- <p>
- To report a vulnerability for Pulsar, contact the{" "}
- <a
- className="secondary-cta"
- href="https://www.apache.org/security/projects.html";
- target="_blank"
- >
- Apache Security Team
- </a>
- .
- </p>
- <p>
- The process for reporting a vulnerability is outlined
- <a
- className="secondary-cta"
- href="https://www.apache.org/security/";
- target="_blank"
- >
- here
- </a>
- . When reporting a vulnerability to
- <a
- className="secondary-cta"
- href="mailto:[email protected]";
- target="_blank"
- >
- [email protected]
- </a>
- , you can copy your email to
- <a
- className="secondary-cta"
- href="mailto:[email protected]";
- target="_blank"
- >
- [email protected]
- </a>
- to send your report to the Apache Pulsar Project Management
- Committee. This is a private mailing list.
- </p>
- </div>
- </div>
- </div>
- </div>
- </section>
- <WavySeparatorSix></WavySeparatorSix>
- <section id="section-community" className="py-12 scrollable">
- <div className="inner">
- <h2 className="text--center">Meet the Community</h2>
- <p>
- Pulsar community consists of PMC members, committers and
- contributors.{" "}
- </p>
- <p>
- For the complete and up-to-date list, see{" "}
- <a
- className="secondary-cta"
- href="https://projects.apache.org/committee.html?pulsar";
- target="_blank"
- >
- Apache Pulsar Committee
- </a>
- .
- </p>
- <h3 className="text--center">PMC members</h3>
- <div className="md:grid md:grid-cols-2 md:gap-x-4">
- <TeamTable data={team.pmc.slice(0, (team.pmc.length + 1) / 2)} />
- <TeamTable data={team.pmc.slice((team.pmc.length + 1) / 2)} />
- </div>
- <h3 className="text--center">Committers</h3>
- <div className="md:grid md:grid-cols-2 md:gap-x-4">
- <TeamTable
- data={team.committers.slice(
- 0,
- (team.committers.length + 1) / 2
- )}
- />
- <TeamTable
- data={team.committers.slice((team.committers.length + 1) / 2)}
- />
- </div>
- <div className="md:grid md:grid-cols-2 md:gap-x-4">
- <img
-
src="https://contributor-overtime-api.git-contributor.com/contributors-svg?chart=contributorOverTime&repo=apache/pulsar";
- alt={"Contributors over time"}
- />
- <img
-
src="https://contributor-overtime-api.git-contributor.com/contributors-svg?chart=contributorMonthlyActivity&repo=apache/pulsar";
- alt={"Active contributors monthly"}
- />
- </div>
- </div>
- </section>
- <PromoCallout
- url="/blog"
- linkText="Read Now"
- text="Get up-to-date Pulsar insights on the blog"
- />
- </div>
- </Layout>
- );
-};
-
-export default CommunityPage;
diff --git a/static/img/contribute.svg b/static/img/contribute.svg
index bb01194fb3a..4684705d876 100644
--- a/static/img/contribute.svg
+++ b/static/img/contribute.svg
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
-<svg width="108px" height="136px" viewBox="0 0 108 136" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+<svg viewBox="0 0 97 122" version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
<title>expansion</title>
<defs>
<filter x="-13.6%" y="-10.7%" width="128.5%" height="120.9%"
filterUnits="objectBoundingBox" id="filter-1">
@@ -13,7 +13,7 @@
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
- <g id="expansion" filter="url(#filter-1)"
transform="translate(9.000000, 10.000000)">
+ <g id="expansion" filter="url(#filter-1)"
transform="translate(0.000000, 4.000000)">
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="42"
cy="59" r="42"></circle>
<polygon id="Path" stroke="#2A5082" fill="#188FFF"
fill-rule="nonzero" points="72.4255319 45 72.4255319 33.75 88 33.75 57.5927052
0 57.4072948 0 27 33.75 40.9057751 33.75 40.9057751 45"></polygon>
<rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" x="41"
y="89" width="32" height="11"></rect>
@@ -39,4 +39,4 @@
<line x1="30" y1="72" x2="30" y2="76" id="Path"
stroke="#2B5183"></line>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/static/img/mailing-list.svg b/static/img/mailing-list.svg
index 449200ccd41..05fe19452bd 100644
--- a/static/img/mailing-list.svg
+++ b/static/img/mailing-list.svg
@@ -1,4 +1,4 @@
-<svg focusable="false" viewBox="0 0 115 115" tabindex="-1"
xmlns="http://www.w3.org/2000/svg";>
+<svg focusable="false" viewBox="0 0 114 114" tabindex="-1"
xmlns="http://www.w3.org/2000/svg";>
<defs>
<filter filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha"
result="shadowOffsetOuter1"></feOffset>
@@ -11,7 +11,7 @@
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
- <g id="e-mail" filter="url(#filter-1)" transform="translate(3, 3)">
+ <g id="e-mail" filter="url(#filter-1)" transform="translate(2, 0)">
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="54.5"
cy="54.5" r="54.5"></circle>
<path d="M97,80 L97,46.8075 C97,44.855 95.925,42.725
94.3125,41.4825 L60.9875,11.6625 C57.0458333,8.1125 50.9541667,8.1125
47.0125,11.6625 L13.6875,41.4825 C12.075,42.725 11,44.6775 11,46.8075 L11,80
L97,80 Z" id="Path" stroke="#2A5082" fill="#E6F1FF" fill-rule="nonzero"></path>
<rect id="Rectangle" stroke="#2A5082" fill="#FFFFFF"
fill-rule="nonzero" x="23" y="22" width="61" height="57"></rect>
diff --git a/static/img/report-bugs.svg b/static/img/report-bugs.svg
index 5cb0793d45c..636b00e7a4a 100644
--- a/static/img/report-bugs.svg
+++ b/static/img/report-bugs.svg
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="114px" viewBox="0 0 125 114" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+<svg viewBox="0 0 114 114" version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
<title>settings</title>
<defs>
<filter x="-11.8%" y="-13.3%" width="123.1%" height="126.6%"
filterUnits="objectBoundingBox" id="filter-1">
@@ -13,7 +13,7 @@
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
- <g id="settings" filter="url(#filter-1)"
transform="translate(10.000000, 10.000000)" fill-rule="nonzero">
+ <g id="settings" filter="url(#filter-1)"
transform="translate(4.000000, 10.000000)" fill-rule="nonzero">
<circle id="Oval" fill="#FFFFFF" cx="74" cy="34" r="32"></circle>
<path d="M66,23.6339523 L62.8488064,16.1061008
C61.9734748,15.7559682 61.4482759,15.5809019 60.5729443,15.2307692
L55.1458886,17.5066313 C54.4456233,17.331565 53.9204244,17.1564987
53.0450928,16.9814324 C51.8196286,15.4058355 50.4190981,14.1803714
49.0185676,12.9549072 C48.8435013,12.2546419 48.668435,11.729443
48.4933687,10.8541114 L50.7692308,5.4270557 C50.4190981,4.55172414
50.2440318,4.0265252 49.8938992,3.15119363 L42.3660477,0
C41.4907162,0.350132626 40.9655172,0.525198 [...]
<path d="M102,65.2440945 L100.27451,61.2598425
C99.4117647,60.9133858 98.8941176,60.7401575 98.0313725,60.3937008
L95.2705882,61.6062992 C94.5803922,61.4330709 94.0627451,61.2598425
93.2,61.0866142 C92.5098039,60.2204724 91.8196078,59.5275591
90.9568627,58.8346457 C90.7843137,58.1417323 90.6117647,57.6220472
90.4392157,56.7559055 L91.6470588,53.984252 C91.3019608,53.1181102
91.1294118,52.5984252 90.7843137,51.7322835 L86.8156863,50
C85.9529412,50.3464567 85.4352941,50.519685 [...]
@@ -21,4 +21,4 @@
<circle id="Oval" stroke="#2A5082" fill="#FFFFFF" cx="32" cy="32"
r="12"></circle>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/static/img/report-vulnerabillity.svg
b/static/img/report-vulnerability.svg
similarity index 88%
rename from static/img/report-vulnerabillity.svg
rename to static/img/report-vulnerability.svg
index 7cfd14b4173..2b51b58c90d 100644
--- a/static/img/report-vulnerabillity.svg
+++ b/static/img/report-vulnerability.svg
@@ -1,9 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
-<svg width="130px" height="116px" viewBox="0 0 130 116" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
- <title>alarm</title>
+<svg viewBox="0 0 114 114" version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
<defs>
- <filter x="-11.4%" y="-13.0%" width="122.7%" height="125.6%"
filterUnits="objectBoundingBox" id="filter-1">
- <feOffset dx="0" dy="2" in="SourceAlpha"
result="shadowOffsetOuter1"></feOffset>
+ <filter filterUnits="objectBoundingBox" id="filter-1">
+ <feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.0941176471 0 0 0 0 0.560784314
0 0 0 0 1 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"
result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
@@ -13,7 +12,7 @@
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
- <g id="alarm" filter="url(#filter-1)" transform="translate(10.000000,
10.000000)">
+ <g id="alarm" filter="url(#filter-1)" transform="translate(2, 10)">
<line x1="21" y1="76" x2="17" y2="78" id="Path"
stroke="#2B5183"></line>
<line x1="29" y1="83" x2="27" y2="87" id="Path"
stroke="#2B5183"></line>
<line x1="38.9" y1="89" x2="37.1" y2="93" id="Path"
stroke="#2B5183"></line>
@@ -34,4 +33,4 @@
<path d="M51,16 C45.8382353,17.5813953 40.1029412,21.9302326
38,33" id="Path" stroke="#2A5082"></path>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
