refactor: move ongoing projects to contribute page (#200)

* add ongoing projects list to contribute page
* remove ongoing projects list from programs page

Author: jdrueckert

src/components/Header/Header.jsx

@@ -99,7 +99,7 @@ function Header() {
                       className="text-color"
                       activeClassName="active"
                     >
-                      Programs & Projects
+                      Contributor Programs
                     </Link>
                   </NavLink>
                 </DropdownItem>

src/pages/contribute.jsx

@@ -1,11 +1,26 @@
 import React from "react";
 import { graphql, Link } from "gatsby";
 import { Row, Col } from "reactstrap";
+import PostListing from "../components/PostListing/PostListing";
 import Section from "../components/Section";
 import SEO from "../components/SEO/SEO";
 import Layout from "../layout";
 
-function GettingStarted() {
+function GettingStarted({ data }) {
+  function toCardData(project, defaultCover) {
+    const { id, name: title, labels, childMarkdownRemark } = project;
+    const { excerpt } = childMarkdownRemark;
+    const posttype = "project";
+    const tags = labels.map((l) => l.name);
+    const cover = defaultCover;
+    return { posttype, title, path: `/projects/${id}`, excerpt, tags, cover };
+  }
+
+  const defaultCover = data.projectCover;
+  const ongoingProjects = data.ongoingProjects.nodes.map((project) =>
+    toCardData(project, defaultCover)
+  );
+
   return (
     <Layout title="Getting Contributors Started">
       <Row className="justify-content-center align-items-start">
@@ -17,11 +32,22 @@ function GettingStarted() {
               Workspace Setup
             </Link>
             {` and `}
-            <Link className="text-success" to="#engine-modules">
-              {`Terasology's Engine & Module Land`}
+            <Link
+              className="text-success"
+              to="#terasology-engine-and-module-land"
+            >
+              Terasology Engine & Module Land
             </Link>{" "}
             should help you to get started and set yourself up for success.
           </p>
+          <p>
+            To get started with your first contribution, you will also find our
+            current{" "}
+            <Link className="text-success" to="#hot-topics">
+              Hot Topics
+            </Link>
+            {` below that you can consider joining.`}
+          </p>
           <p>
             Make sure to also join our{" "}
             <a
@@ -266,13 +292,68 @@ function GettingStarted() {
           </Col>
         </Row>
       </Section>
+      <Section tag="h3" title="Tasks & Topics">
+        <Row className="justify-content-center align-items-start">
+          <Col md="8" className="text-justify">
+            <p>
+              While you are free to roam our codebase and contribute in any area
+              you would like, below are some tasks and topics that we encourage
+              you to consider. Their scope and feasibility are potentially more
+              realistic than a goal you might set for yourself without knowing
+              the depths and intricacies of our codebase.
+            </p>
+          </Col>
+        </Row>
+        {ongoingProjects.length !== 0 ? (
+          <Section tag="h4" title="Hot Topics">
+            <Row className="justify-content-center align-items-start">
+              <Col md="8" className="text-justify">
+                <p>
+                  Find our currently ongoing efforts below. Come talk to us on
+                  our{" "}
+                  <a
+                    className="text-success font-weight-bold"
+                    href="https://discordapp.com/invite/Terasology"
+                  >
+                    Discord
+                  </a>{" "}
+                  if you would like to join one of them. You can also propose
+                  your own project ideas.
+                </p>
+              </Col>
+            </Row>
+            <PostListing postList={ongoingProjects} />
+          </Section>
+        ) : null}
+      </Section>
     </Layout>
   );
 }
 export default GettingStarted;
 
 export const pageQuery = graphql`
-  query siteQuery {
+  query pageQuery {
+    ongoingProjects: allTrelloCard(
+      filter: { list_id: { eq: "60ddd7cf64da4b3ee8c5a2e9" } }
+      sort: { index: ASC }
+    ) {
+      nodes {
+        id
+        list_id
+        name
+        labels {
+          name
+        }
+        childMarkdownRemark {
+          excerpt
+        }
+      }
+    }
+    projectCover: file(name: { eq: "defaultCardcover" }, ext: { eq: ".jpg" }) {
+      childImageSharp {
+        gatsbyImageData
+      }
+    }
     site {
       siteMetadata {
         title

src/pages/programs.jsx

@@ -18,46 +18,38 @@ function toCardData(trelloCard, defaultCover) {
 }
 
 function ContributorPrograms({ data }) {
-  const trelloCards = data.allTrelloCard.nodes;
-
   const defaultCover = data.projectCover;
-  const availableProjects = trelloCards
-    .filter((node) => node.list_id === "5c3aab0bd640fe19e4069de5")
-    .map((node) => toCardData(node, defaultCover));
-  const ongoingProjects = trelloCards
-    .filter((node) => node.list_id === "60ddd7cf64da4b3ee8c5a2e9")
-    .map((node) => toCardData(node, defaultCover));
-
+  const availableProjects = data.availableProjects.nodes.map((node) =>
+    toCardData(node, defaultCover)
+  );
   const defaultAvatar = data.profilePlaceholder;
-  const mentorList = trelloCards
-    .filter((node) => node.list_id === "5eb715b48caa18614425c25e")
-    .map((node) => {
-      const {
-        name,
-        labels,
-        custom_fields: customFields,
-        childMarkdownRemark,
-        childCardMedia,
-      } = node;
-      const { html } = childMarkdownRemark;
-      const avatar = childCardMedia ? childCardMedia.localFile : defaultAvatar;
+  const mentorList = data.mentors.nodes.map((node) => {
+    const {
+      name,
+      labels,
+      custom_fields: customFields,
+      childMarkdownRemark,
+      childCardMedia,
+    } = node;
+    const { html } = childMarkdownRemark;
+    const avatar = childCardMedia ? childCardMedia.localFile : defaultAvatar;
 
-      const tags = labels.map((l) => l.name);
-      const githubProfile = customFields.find(
-        (field) => field.idCustomField === "5eb71b3551de3a59ce8d9bd8"
-      )?.value.text;
-      const timeZone = customFields.find(
-        (field) => field.idCustomField === "5eb71b53f52d88487f550e83"
-      )?.value.text;
-      const countryCode = customFields
-        .find((field) => field.idCustomField === "5eb71b7081a67c3b58ea67ed")
-        ?.value.text.toLowerCase();
+    const tags = labels.map((l) => l.name);
+    const githubProfile = customFields.find(
+      (field) => field.idCustomField === "5eb71b3551de3a59ce8d9bd8"
+    )?.value.text;
+    const timeZone = customFields.find(
+      (field) => field.idCustomField === "5eb71b53f52d88487f550e83"
+    )?.value.text;
+    const countryCode = customFields
+      .find((field) => field.idCustomField === "5eb71b7081a67c3b58ea67ed")
+      ?.value.text.toLowerCase();
 
-      return { name, avatar, tags, html, githubProfile, timeZone, countryCode };
-    });
+    return { name, avatar, tags, html, githubProfile, timeZone, countryCode };
+  });
 
   return (
-    <Layout title="Contributor Programs & Projects">
+    <Layout title="Contributor Programs">
       <Section tag="h3" title="GSoC & TSoC">
         <Row className="justify-content-center align-items-start">
           <Col md="5" className="text-justify student-programs-content">
@@ -94,13 +86,8 @@ function ContributorPrograms({ data }) {
           </Col>
         </Row>
       </Section>
-      {ongoingProjects.length !== 0 ? (
-        <Section tag="h3" title="Ongoing Projects">
-          <PostListing postList={ongoingProjects} />
-        </Section>
-      ) : null}
       {availableProjects.length !== 0 ? (
-        <Section tag="h3" title="Available Projects">
+        <Section tag="h3" title="Available Topics">
           <PostListing postList={availableProjects} />
         </Section>
       ) : null}
@@ -130,7 +117,26 @@ export default ContributorPrograms;
 
 export const pageQuery = graphql`
   query projectQuery {
-    allTrelloCard(sort: { index: ASC }) {
+    availableProjects: allTrelloCard(
+      filter: { list_id: { eq: "5c3aab0bd640fe19e4069de5" } }
+      sort: { index: ASC }
+    ) {
+      nodes {
+        id
+        list_id
+        name
+        labels {
+          name
+        }
+        childMarkdownRemark {
+          excerpt
+        }
+      }
+    }
+    mentors: allTrelloCard(
+      filter: { list_id: { eq: "5eb715b48caa18614425c25e" } }
+      sort: { index: ASC }
+    ) {
       nodes {
         id
         list_id
@@ -180,8 +186,6 @@ export const pageQuery = graphql`
 
 export function Head({ data }) {
   return (
-    <SEO
-      title={`Contributor Programs & Projects | ${data.site.siteMetadata.title}`}
-    />
+    <SEO title={`Contributor Programs | ${data.site.siteMetadata.title}`} />
   );
 }