Merge branch 'develop' into ft/codeforafrica-seo

Signed-off-by: Kipruto <[email protected]>

.github/workflows/codeforafrica-deploy-review-app.yml

@@ -57,8 +57,6 @@ jobs:
             MONGODB_URL=${{ secrets.CODEFORAFRICA_MONGO_URL }}/${{ env.APP_NAME }}
             NEXT_PUBLIC_APP_URL=${{ env.NEXT_PUBLIC_APP_URL }}
             PAYLOAD_SECRET=${{ secrets.CODEFORAFRICA_PAYLOAD_SECRET_KEY }}
-            GHOST_URL=${{ secrets.GHOST_URL }}
-            GHOST_API_KEY=${{ secrets.GHOST_API_KEY }}
             NEXT_PUBLIC_APP_LOGO_URL=${{ secrets.NEXT_PUBLIC_APP_CFA_LOGO_URL }}
             NEXT_PUBLIC_APP_NAME=${{ secrets.NEXT_PUBLIC_APP_CFA_NAME }}
           cache-from: type=local,src=/tmp/.buildx-cache

Dockerfile.codeforafrica

@@ -33,9 +33,7 @@ RUN pnpm install --recursive --offline --frozen-lockfile
 ARG PORT=3000 \
     MONGODB_URL \
     PAYLOAD_SECRET \
-    NEXT_PUBLIC_APP_URL=http://localhost:3000 \
-    GHOST_URL \
-    GHOST_API_KEY
+    NEXT_PUBLIC_APP_URL=http://localhost:3000
 
 RUN pnpm build-next --filter=codeforafrica
 
@@ -62,8 +60,6 @@ ENV NODE_ENV=production \
     PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH} \
     PAYLOAD_SECRET=${PAYLOAD_SECRET} \
     MONGODB_URL=${MONGODB_URL} \
-    GHOST_URL=${GHOST_URL} \
-    GHOST_API_KEY=${GHOST_API_KEY} \
     NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \
     NEXT_PUBLIC_APP_NAME=${NEXT_PUBLIC_APP_NAME} \
     NEXT_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL}

apps/codeforafrica/payload.config.ts

@@ -1,6 +1,7 @@
 import path from "path";
 
 import { buildConfig } from "payload/config";
+import GuidingPrinciples from "./src/payload/collections/GuidingPrinciples";
 import Impact from "./src/payload/collections/Impact";
 import Media from "./src/payload/collections/Media";
 import Pages from "./src/payload/collections/Pages";
@@ -31,7 +32,13 @@ const adapter = s3Adapter({
 
 export default buildConfig({
   serverURL: appURL,
-  collections: [Impact, Pages, Media, Partners] as CollectionConfig[],
+  collections: [
+    GuidingPrinciples,
+    Impact,
+    Pages,
+    Media,
+    Partners,
+  ] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
   admin: {
     css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),

apps/codeforafrica/src/components/ConnectBar/ConnectBar.js

@@ -6,18 +6,14 @@ import SocialMediaButton from "@/codeforafrica/components/SocialMediaButton";
 const ConnectBar = React.forwardRef(function ConnectBar(props, ref) {
   const { sx, title, links } = props;
 
-  if (!links || !Object.entries(links)?.length) {
+  if (!links?.length) {
     return null;
   }
 
-  const socialConnections = [
-    "twitter",
-    "slack",
-    "linkedin",
-    "facebook",
-    "instagram",
-    "github",
-  ].flatMap((name) => (links[name] ? [{ name, url: links[name] }] : []));
+  const socialConnections = links.map(({ platform, url }) => ({
+    name: platform?.toLowerCase(),
+    url,
+  }));
 
   return (
     <SocialMediaBar

apps/codeforafrica/src/components/ConnectBar/ConnectBar.snap.js

@@ -1,29 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ConnectBar /> renders unchanged 1`] = `
-<div>
-  <div
-    class="MuiStack-root css-150zc89-MuiStack-root"
-  >
-    <div
-      class="MuiStack-root css-1mbd5au-MuiStack-root"
-    >
-      <a
-        aria-label="facebook"
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root active css-tmo8yp-MuiTypography-root-MuiLink-root"
-        data-mui-internal-clone-element="true"
-        href="https://www.facebook.com/"
-        rel="noreferrer noopener"
-        target="_blank"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </a>
-    </div>
-  </div>
-</div>
-`;
+exports[`<ConnectBar /> renders unchanged 1`] = `<div />`;

apps/codeforafrica/src/components/GetInTouch/GetInTouch.js

@@ -8,7 +8,7 @@ import TwoToneBackground from "@/codeforafrica/components/TwoToneBackground";
 
 const GetInTouch = React.forwardRef(function GetInTouch(props, ref) {
   const {
-    action: { href, content },
+    action: { href, label },
     subtitle,
     title,
     sx,
@@ -59,7 +59,7 @@ const GetInTouch = React.forwardRef(function GetInTouch(props, ref) {
               },
             }}
           >
-            {content}
+            {label}
           </Button>
         </Stack>
       </Section>

apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js

@@ -36,6 +36,7 @@ exports[`<GetInTouch /> renders unchanged 1`] = `
               viewbox="0 0 24 24"
             />
           </span>
+          Get in touch
         </a>
       </div>
     </div>

apps/codeforafrica/src/components/GetInvolved/GetInvolved.js

@@ -7,7 +7,7 @@ import React from "react";
 import ImpactCardList from "@/codeforafrica/components/ImpactCardList";
 
 const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
-  const { list, action, sx } = props;
+  const { impacts, action, sx } = props;
 
   if (!action?.href?.length) {
     return null;
@@ -26,7 +26,7 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
           py: { xs: 5, sm: 10, md: 4, lg: 12.5 },
         }}
       >
-        <ImpactCardList list={list} />
+        <ImpactCardList list={impacts} />
         <Button
           variant="contained"
           component={Link}
@@ -39,20 +39,20 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
             width: { xs: "100%", sm: "fit-content" },
           }}
         >
-          {action.content || action.href}
+          {action.label}
         </Button>
       </Section>
     </Box>
   );
 });
 
 GetInvolved.propTypes = {
-  list: PropTypes.arrayOf(PropTypes.shape({})),
+  impacts: PropTypes.arrayOf(PropTypes.shape({})),
   action: PropTypes.shape({}),
 };
 
 GetInvolved.defaultProps = {
-  list: undefined,
+  impacts: undefined,
   action: undefined,
 };
 

apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js

@@ -47,6 +47,15 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
               >
                 15000
               </div>
+              <div
+                class="MuiBox-root css-2ligbh"
+              >
+                <span
+                  class="MuiTypography-root MuiTypography-body3 css-s9m4rs-MuiTypography-root"
+                >
+                  Our team makes an impact in more than 20 countries where members are present.
+                </span>
+              </div>
             </div>
           </div>
         </div>

apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js

@@ -9,19 +9,27 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  list: [
+  impacts: [
     {
       title: "Beneficiaries trained",
       value: 15000,
       image: {
         src: "/images/Type=layout,%20Size=32,%20Color=1020E1.svg",
       },
-      content:
-        "In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.",
+      description: [
+        {
+          children: [
+            {
+              text: "Our team makes an impact in more than 20 countries where members are present.",
+              children: null,
+            },
+          ],
+        },
+      ],
     },
   ],
   action: {
-    content: "Get Involved",
+    label: "Get Involved",
     href: "/contact",
   },
 };

apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.js

@@ -2,9 +2,11 @@ import { RichTypography } from "@commons-ui/next";
 import { Card, CardContent, CardMedia } from "@mui/material";
 import React from "react";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const GuidingPrinciplesCard = React.forwardRef(
   function GuidingPrinciplesCard(props, ref) {
-    const { title, content, icon } = props;
+    const { title, description, icon } = props;
 
     return (
       <Card
@@ -35,7 +37,7 @@ const GuidingPrinciplesCard = React.forwardRef(
           <RichTypography variant="h3" sx={{ my: 2.5 }}>
             {title}
           </RichTypography>
-          <RichTypography>{content}</RichTypography>
+          <RichText elements={description} />
         </CardContent>
       </Card>
     );

apps/codeforafrica/src/components/GuidingPrinciplesCardList/GuidingPrinciplesCardList.js

@@ -7,13 +7,20 @@ import GuidingPrinciplesCard from "../GuidingPrinciplesCard";
 
 const GuidingPrinciplesCardList = React.forwardRef(
   function GuidingPrinciplesCardList(props, ref) {
-    const { list, title, ...other } = props;
+    const { list, title, sx } = props;
 
     if (!list?.length) {
       return null;
     }
     return (
-      <Section {...other} ref={ref}>
+      <Section
+        sx={{
+          px: { xs: 2.5, sm: 0 },
+          py: { xs: 2.5, md: 10 },
+          ...sx,
+        }}
+        ref={ref}
+      >
         <RichTypography variant="h4">{title}</RichTypography>
         <Grid
           container

apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js

@@ -41,6 +41,15 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
           >
             15000
           </div>
+          <div
+            class="MuiBox-root css-2ligbh"
+          >
+            <span
+              class="MuiTypography-root MuiTypography-body3 css-s9m4rs-MuiTypography-root"
+            >
+              Our team makes an impact in more than 20 countries where members are present.
+            </span>
+          </div>
         </div>
       </div>
     </div>

apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js

@@ -16,8 +16,16 @@ const defaultProps = {
       image: {
         src: "/images/Type=layout,%20Size=32,%20Color=1020E1.svg",
       },
-      content:
-        "In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.",
+      description: [
+        {
+          children: [
+            {
+              text: "Our team makes an impact in more than 20 countries where members are present.",
+              children: null,
+            },
+          ],
+        },
+      ],
     },
   ],
 };

apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.js

@@ -4,8 +4,15 @@ import { Box, Button, Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
-  const { title, description, href, logo } = props;
+  const {
+    title,
+    description,
+    action: { href, label },
+    image,
+  } = props;
 
   if (!title || !description) {
     return null;
@@ -26,16 +33,14 @@ const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
             >
               {title}
             </RichTypography>
-            <RichTypography variant="body3" sx={{ pt: 5 }}>
-              {description}
-            </RichTypography>
+            <RichText sx={{ pt: 5 }} variant="body3" elements={description} />
             <Button
               component={href ? Link : undefined}
               href={href}
               sx={{ width: { xs: "100%", sm: "auto" }, margin: "2.5rem 0" }}
               variant="contained-reverse"
             >
-              Meet our Team
+              {label}
             </Button>
           </Grid>
 
@@ -48,8 +53,7 @@ const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
           >
             <Figure
               ImageProps={{
-                src: logo,
-                alt: "Our offices across africa",
+                ...image,
               }}
               sx={{
                 height: { xs: "21.93rem", sm: "26rem", lg: "32.37rem" },
@@ -65,14 +69,17 @@ const MeetOurTeam = React.forwardRef(function MeetOurTeam(props, ref) {
 
 MeetOurTeam.propTypes = {
   title: PropTypes.string,
-  description: PropTypes.string,
-  logo: PropTypes.string,
+  description: PropTypes.arrayOf(PropTypes.shape({})),
+  image: PropTypes.shape({
+    src: PropTypes.string,
+    alt: PropTypes.string,
+  }),
 };
 
 MeetOurTeam.defaultProps = {
   title: undefined,
   description: undefined,
-  logo: undefined,
+  image: undefined,
 };
 
 export default MeetOurTeam;

apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js

@@ -19,17 +19,12 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           >
             title
           </div>
-          <div
-            class="MuiTypography-root MuiTypography-body3 css-scexb3-MuiTypography-root"
-          >
-            description
-          </div>
           <a
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-16j572f-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/about#our-team"
             tabindex="0"
           >
-            Meet our Team
+            Meet our team
           </a>
         </div>
         <div