Reimplement the community page

Author: visortelle

src/components/PromoCallout.js

@@ -31,3 +31,59 @@
 .Paragraph {
   max-width: var(--max-readable-content-width);
 }
+
+.PromoCallout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.SectionWithBackground {
+  position: relative;
+}
+
+.SectionWithBackground:after {
+  content: "";
+  background-color: #fff;
+  background-image: radial-gradient(var(--text-color) 1px, #fff 1px);
+  background-size: 1.2rem 1.2rem;
+  bottom: 0;
+  height: 100%;
+  opacity: 0.8;
+  position: absolute;
+  right: 0;
+  width: 30%;
+  z-index: -1;
+}
+
+.StatTables {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+@media (max-width: 1150px) {
+  .SectionWithBackground:after {
+    width: 20%;
+  }
+}
+
+@media (max-width: 1000px) {
+  .SectionWithBackground:after {
+    display: none;
+  }
+
+  .StatTables {
+    grid-template-columns: 1fr;
+  }
+
+  .PromoCallout {
+    align-items: center;
+  }
+
+  .PromoCallout > * {
+    flex: 1;
+    width: 100%;
+  }
+}

src/components/pages/CommunityPage/CommunityPage.module.css

@@ -3,8 +3,6 @@ import Layout from "@theme/Layout";
 import s from "./CommunityPage.module.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import TeamTable from "@site/src/components/pages/CommunityPage/TeamTable";
-import PromoCallout from "@site/src/components/PromoCallout";
-import WavySeparatorFive from "@site/static/img/separator-5.svg";
 import team from "@site/data/team";
 import DiscussionPlatforms from "./sections/discussions/DiscussionPlatforms";
 import HowToContribute from "./sections/how-to-contribute/HowToContribute";
@@ -13,6 +11,7 @@ import ProjectGovernance from "./sections/project-governance/ProjectGovernance";
 import Slider from '@site/src/components/ui/Slider/Slider';
 import Page from "@site/src/components/ui/Page/Page";
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import Button from "@site/src/components/ui/Button/Button";
 
 export default function CommunityPage(): JSX.Element {
   return (
@@ -125,26 +124,25 @@ export default function CommunityPage(): JSX.Element {
           </div>
         </section>
 
-        <WavySeparatorFive />
-
         <Section title="Discussions" anchor="section-discussions">
           <DiscussionPlatforms />
         </Section>
 
-        <Section title="Project Governance" anchor="section-governance">
-          <ProjectGovernance />
-        </Section>
+        <div className={s.SectionWithBackground}>
+          <Section title="Project Governance" anchor="section-governance">
+            <ProjectGovernance />
+          </Section>
 
-        <Section title="How to Contribute" anchor="section-contribute">
-          <HowToContribute />
-        </Section>
+          <Section title="How to Contribute" anchor="section-contribute">
+            <HowToContribute />
+          </Section>
+        </div>
 
         <Section anchor="section-community" title="Meet the Community">
           <p>
             Pulsar community consists of PMC members, committers and
             contributors.{" "}
-          </p>
-          <p>
+            <br />
             For the complete and up-to-date list, see{" "}
             <a
               className="secondary-cta"
@@ -155,21 +153,19 @@ export default function CommunityPage(): JSX.Element {
             </a>
             .
           </p>
-          <h3>PMC members</h3>
+          <br />
+          <h3>PMC members ({team.pmc.length})</h3>
           <div>
-            <TeamTable data={team.pmc.slice(0, (team.pmc.length + 1) / 2)} />
-            <TeamTable data={team.pmc.slice((team.pmc.length + 1) / 2)} />
+            <TeamTable data={team.pmc} />
           </div>
-          <h3>Committers</h3>
+          <br />
+          <h3>Committers ({team.committers.length})</h3>
           <div>
             <TeamTable
-              data={team.committers.slice(0, (team.committers.length + 1) / 2)}
-            />
-            <TeamTable
-              data={team.committers.slice((team.committers.length + 1) / 2)}
+              data={team.committers}
             />
           </div>
-          <div>
+          <div className={s.StatTables}>
             <img
               src="https://contributor-overtime-api.git-contributor.com/contributors-svg?chart=contributorOverTime&repo=apache/pulsar"
               alt={"Contributors over time"}
@@ -181,11 +177,14 @@ export default function CommunityPage(): JSX.Element {
           </div>
         </Section>
 
-        <PromoCallout
-          url="/blog"
-          linkText="Read Now"
-          text="Get up-to-date Pulsar insights on the blog"
-        />
+        <div className={s.PromoCallout}>
+          <h3>Get up-to-date Pulsar insights on the blog.</h3>
+          <Button
+            title="Read Now"
+            variant="action"
+            href={`${useBaseUrl("blog")}`}
+          />
+        </div>
       </Page>
     </Layout>
   );

src/components/pages/CommunityPage/CommunityPage.tsx

@@ -4,18 +4,15 @@ import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-// import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Translate, { translate } from "@docusaurus/Translate";
 
 export default function VersionsTable(props) {
-  // const { siteConfig } = useDocusaurusContext();
   return (
     <Table size="small">
       <TableHead>
         <TableRow>
           {["Name", "Apache Id"].map(header => (
-            <TableCell className="font-bold" sx={{ border: 0, color: "inherit" }} key={header}>
-              <Translate>{header}</Translate>
+            <TableCell sx={{ border: 0, color: "inherit" }} key={header}>
+              <strong>{header}</strong>
             </TableCell>
           ))}
         </TableRow>

src/components/pages/CommunityPage/TeamTable.js

@@ -29,10 +29,6 @@ const HowToContribute: React.FC = () => {
           type: "normal",
         },
       ],
-      image: {
-        src: useBaseUrl("img/contribute.svg"),
-        size: "big",
-      },
     },
     {
       title: "Reporting Bugs",
@@ -49,10 +45,6 @@ const HowToContribute: React.FC = () => {
           running and on which environment.
         </>
       ),
-      image: {
-        src: useBaseUrl("img/report-bugs.svg"),
-        size: "big",
-      },
     },
     {
       title: "Reporting a Vulnerability",
@@ -78,10 +70,6 @@ const HowToContribute: React.FC = () => {
           This is a private mailing list.
         </>
       ),
-      image: {
-        src: useBaseUrl("img/report-vulnerability.svg"),
-        size: "big",
-      },
     },
   ];
 

src/components/pages/CommunityPage/sections/how-to-contribute/HowToContribute.tsx

@@ -1,28 +1,51 @@
 .ContentCard {
   display: flex;
+  max-width: var(--max-readable-content-width);
 }
 
 .NormalImage {
-  flex: 0 0 96px;
-  width: 96px;
-  height: 96px;
+  flex: 0 0 6rem;
+  width: 6rem;
+  height: 6rem;
   display: block;
-  margin-right: 24px;
+  margin-right: 1.5rem;
 }
 
 .BigImage {
-  flex: 0 0 192px;
-  width: 192px;
-  height: 192px;
+  flex: 0 0 12rem;
+  width: 12rem;
+  height: 12rem;
   display: block;
-  margin-right: 24px;
+  margin-right: 1.5rem;
 }
 
 .Actions {
-  margin-top: 18px;
+  margin-top: 1rem;
   display: flex;
+  gap: 1rem;
 }
 
 .ActionButton {
-  margin-right: 1rem;
 }
+
+@media (max-width: 640px) {
+  .ContentCard {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .Actions {
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .ActionButton {
+    flex: 1;
+  }
+
+  .ActionButton > * {
+    width: 100%;
+  }
+}
+

src/components/pages/CommunityPage/shared/ContentCard/ContentCard.module.css

@@ -1,19 +1,12 @@
 .Section {
-  padding: 36px 0;
-  margin-bottom: 24px;
+  padding: 2rem 0;
+  margin-bottom: 1.5rem;
 }
 
 .Content {
-  max-width: 1200px;
   margin: auto;
-  padding: 0 32px;
 }
 
 h2.Title {
-  text-align: center;
-  margin-bottom: 48px;
-}
-
-.Separator {
-  margin-top: 48px;
+  margin-bottom: 2rem;
 }

src/components/pages/CommunityPage/shared/Section/Section.module.css

@@ -1,12 +1,10 @@
 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) => {
@@ -16,11 +14,6 @@ const Section: React.FC<SectionProps> = (props) => {
         <h2 className={s.Title}>{props.title}</h2>
         {props.children}
       </div>
-      {!props.isHideSeparator && (
-        <div className={s.Separator}>
-          <WavySeparatorSix />
-        </div>
-      )}
     </section>
   );
 };

src/components/pages/CommunityPage/shared/Section/Section.tsx

@@ -18,6 +18,10 @@
   color: var(--primary-color);
 }
 
+.AdditionalInfo {
+  margin-bottom: 1rem;
+}
+
 @media (max-width: 800px) {
   .Cards {
     grid-template-columns: 1fr;

src/components/pages/ResourcesPage/Cards/Cards.module.css

@@ -9,10 +9,10 @@ const Card: React.FC<data.Resource> = (props) => {
         <a className={s.ForumLink} target="_blank" href={props.forum_link}><strong>{props.forum}</strong></a>
       </p>
       <h3><a href={props.link}>{props.title}</a></h3>
-      <p>
+      <div className={s.AdditionalInfo}>
         {props.date && <div><small className={s.Date}>{props.date}</small></div>}
         {props.tags && <div><small>Tags: {props.tags}</small></div>}
-      </p>
+      </div>
       {props.presenter && <p>Presented by <strong>{props.presenter}</strong></p>}
       <a href={props.link} target="_blank">Learn more</a>
     </div>