Merge branch 'develop' into ft/codeforafrica-posts-cms

apps/codeforafrica/jest.setup.js

@@ -17,6 +17,8 @@ global.TextDecoder = jest.fn().mockImplementation(() => ({
   decode: jest.fn(),
 }));
 
+process.env.NEXT_PUBLIC_APP_URL = "http://localhost:3000";
+
 jest.mock("next/router", () => ({
   useRouter: jest.fn().mockImplementation(() => ({
     asPath: "",

apps/codeforafrica/payload.config.ts

@@ -2,6 +2,7 @@ import path from "path";
 
 import { buildConfig } from "payload/config";
 import Authors from "./src/payload/collections/Authors";
+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";
@@ -35,11 +36,12 @@ export default buildConfig({
   serverURL: appURL,
   collections: [
     Authors,
+    GuidingPrinciples,
     Impact,
     Pages,
     Media,
     Partners,
-    Tags,
+    Tags
   ] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
   admin: {
@@ -67,7 +69,7 @@ export default buildConfig({
       },
     }),
     seo({
-      collections: [],
+      collections: ["pages"],
       globals: [],
       uploadsCollection: "media",
       generateTitle: ({ doc }: any) => doc?.title?.value as string,

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/lib/data/common/index.js

@@ -1,5 +1,6 @@
 import blockify from "@/codeforafrica/lib/data/blockify";
 import pagify from "@/codeforafrica/lib/data/pagify";
+import getPageSeoFromMeta from "@/codeforafrica/lib/data/seo";
 import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
 
 function getNavBar(settings) {
@@ -161,10 +162,12 @@ export async function getPageProps(api, context) {
   const navbar = getNavBar(settings);
   const footer = getFooter(settings);
 
+  const seo = getPageSeoFromMeta(page, settings);
   return {
     blocks,
     footer,
     navbar,
+    seo,
   };
 }
 

apps/codeforafrica/src/lib/data/seo.js

@@ -0,0 +1,67 @@
+import site from "@/codeforafrica/utils/site";
+
+function stringifyDescription(description) {
+  if (!Array.isArray(description)) {
+    return "";
+  }
+  return description.reduce((result, item) => {
+    if (item.text) {
+      // eslint-disable-next-line no-param-reassign
+      result += item.text;
+    }
+
+    if (Array.isArray(item.children)) {
+      // eslint-disable-next-line no-param-reassign
+      result += stringifyDescription(item.children);
+    }
+    return result;
+  }, "");
+}
+
+export default function getPageSeoFromMeta(page, settings) {
+  const { title: pageTitle, meta: pageMeta } = page;
+  const {
+    title: metaTitle,
+    description: metaDescription,
+    image = {},
+  } = pageMeta;
+  const { title: siteTitle, description: siteDescription } = settings;
+  const title =
+    metaTitle ||
+    pageTitle ||
+    siteTitle ||
+    process.env.NEXT_PUBLIC_APP_NAME ||
+    null;
+  const description =
+    metaDescription || stringifyDescription(siteDescription) || null;
+  const titleTemplate = siteTitle ? `%s | ${siteTitle}` : null;
+  const defaultTitle = siteTitle || null;
+  const canonical = site.url.replace(/\/+$/, "");
+  const openGraph = {
+    title,
+    description,
+    type: "website",
+    site_name: siteTitle,
+  };
+  if (image.url) {
+    const { alt, height, mimeType: type, url, width } = image;
+    openGraph.images = [
+      {
+        alt: alt || title || defaultTitle,
+        height,
+        type,
+        url,
+        width,
+      },
+    ];
+  }
+
+  return {
+    title,
+    titleTemplate,
+    defaultTitle,
+    description,
+    canonical,
+    openGraph,
+  };
+}

apps/codeforafrica/src/pages/[...slugs].page.js

@@ -6,6 +6,7 @@ import CustomPageHeader from "@/codeforafrica/components/CustomPageHeader";
 import FeaturedProjects from "@/codeforafrica/components/FeaturedProjects";
 import GetInTouch from "@/codeforafrica/components/GetInTouch";
 import GetInvolved from "@/codeforafrica/components/GetInvolved";
+import GuidingPrinciplesCardList from "@/codeforafrica/components/GuidingPrinciplesCardList";
 import Hero from "@/codeforafrica/components/Hero";
 import JoinOurSlack from "@/codeforafrica/components/JoinOurSlack";
 import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
@@ -25,6 +26,7 @@ const componentsBySlugs = {
   "join-our-slack": JoinOurSlack,
   "meet-our-team": MeetOurTeam,
   "news-stories": NewsAndStories,
+  "our-guiding-principles": GuidingPrinciplesCardList,
   "our-impact": OurImpact,
   "our-partners": OurPartners,
   "page-header": PageHeader,

apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js

@@ -0,0 +1,30 @@
+const GuidingPrinciples = {
+  slug: "our-guiding-principles",
+  imageURL: "/images/cms/blocks/guiding_principles.png",
+  imageAltText: "Guiding Principles",
+  fields: [
+    {
+      name: "title",
+      label: {
+        en: "Title",
+      },
+      type: "text",
+      localized: true,
+      required: true,
+    },
+    {
+      name: "list",
+      label: {
+        en: "Guiding Principles",
+      },
+      type: "relationship",
+      relationTo: "guiding-principles",
+      hasMany: true,
+      admin: {
+        isSortable: true,
+      },
+    },
+  ],
+};
+
+export default GuidingPrinciples;

apps/codeforafrica/src/payload/collections/GuidingPrinciples.js

@@ -0,0 +1,34 @@
+import image from "../fields/image";
+import richText from "../fields/richText";
+
+const GuidingPrinciples = {
+  slug: "guiding-principles",
+  admin: {
+    useAsTitle: "title",
+  },
+  fields: [
+    {
+      name: "title",
+      label: {
+        en: "Title",
+      },
+      type: "text",
+      required: true,
+    },
+    image({
+      overrides: {
+        name: "icon",
+        required: true,
+      },
+    }),
+    richText({
+      name: "description",
+      label: {
+        en: "Description",
+      },
+      required: true,
+    }),
+  ],
+};
+
+export default GuidingPrinciples;

apps/codeforafrica/src/payload/collections/Media.js

@@ -18,6 +18,9 @@ const Media = {
       required: true,
     },
   ],
+  hooks: {
+    afterRead: [({ doc }) => ({ ...doc, src: doc.url })],
+  },
 };
 
 export default Media;

apps/codeforafrica/src/payload/collections/Pages.js

@@ -3,6 +3,7 @@ import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
 import GetInTouch from "../blocks/GetInTouch";
 import GetInvolved from "../blocks/GetInvolved";
+import GuidingPrinciples from "../blocks/GuidingPrinciples";
 import Hero from "../blocks/Hero";
 import JoinOurSlack from "../blocks/JoinOurSlack";
 import MeetOurTeam from "../blocks/MeetOurTeam";
@@ -48,6 +49,7 @@ const Pages = {
         Error,
         GetInTouch,
         GetInvolved,
+        GuidingPrinciples,
         Hero,
         JoinOurSlack,
         MeetOurTeam,

apps/codeforafrica/turbo.json

@@ -6,7 +6,7 @@
     },
     "build-next": {
       "outputs": [".next/**", "!.next/cache/**", "dist/**"],
-      "env": []
+      "env": ["NEXT_PUBLIC_APP_NAME", "NEXT_PUBLIC_APP_URL"]
     },
     "build-payload": {
       "outputs": ["build/**"],