@/CivicSignalBlog - Add Ability to Manage MediaData Page

apps/civicsignalblog/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   root: true,
+  parser: "@typescript-eslint/parser",
   extends: ["eslint-config-commons-ui/next"],
   settings: {
     "import/resolver": {

apps/civicsignalblog/jsconfig.json

@@ -4,7 +4,8 @@
     "paths": {
       "@/civicsignalblog/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
-      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"]
+      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"]
     }
   },
   "exclude": ["node_modules"]

apps/civicsignalblog/next.config.js

@@ -17,7 +17,11 @@ const nextConfig = {
   },
   pageExtensions: ["page.js"],
   reactStrictMode: true,
-  transpilePackages: ["@commons-ui/core", "@commons-ui/next"],
+  transpilePackages: [
+    "@commons-ui/core",
+    "@commons-ui/next",
+    "@commons-ui/payload",
+  ],
   webpack: (config) => {
     config.module.rules.push(
       {

apps/civicsignalblog/package.json

@@ -41,6 +41,7 @@
     "@aws-sdk/lib-storage": "catalog:",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
+    "@commons-ui/payload": "workspace:*",
     "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",
     "@emotion/server": "catalog:",

apps/civicsignalblog/payload.config.ts

@@ -1,3 +1,4 @@
+import { Request, Response, NextFunction } from "express";
 import path from "path";
 
 import { buildConfig } from "payload/config";
@@ -17,6 +18,7 @@ import Authors from "./src/payload/collections/Research/Authors";
 import Media from "./src/payload/collections/Research/Media";
 import Pages from "./src/payload/collections/Research/Pages";
 import CivicSignalPages from "./src/payload/collections/Main/Pages";
+import MediaData from "./src/payload/collections/Main/MediaData";
 import Posts from "./src/payload/collections/Research/Posts";
 import Publication from "./src/payload/globals/Publication";
 import Research from "./src/payload/globals/Site/research";
@@ -37,6 +39,8 @@ const cors =
     ?.map((d) => d.trim())
     ?.filter(Boolean) ?? [];
 
+const customHeaders: string[] = ["CS-App"];
+
 const csrf =
   process?.env?.PAYLOAD_CSRF?.split(",")
     ?.map((d) => d.trim())
@@ -67,6 +71,7 @@ export default buildConfig({
     Posts,
     Tags,
     CivicSignalPages,
+    MediaData,
     Users,
   ] as CollectionConfig[],
   globals: [Publication, Research, Main] as GlobalConfig[],
@@ -153,4 +158,19 @@ export default buildConfig({
     }),
   ] as any[],
   telemetry: process?.env?.NODE_ENV !== "production",
+  // We need to add a postMiddleware function to add support for custom headers in Payload
+  express: {
+    postMiddleware: [
+      (_req: Request, res: Response, next: NextFunction) => {
+        const existingHeaders =
+          res.getHeader("Access-Control-Allow-Headers") || "";
+        const additionalHeaders = customHeaders.join(", ");
+        res.header(
+          "Access-Control-Allow-Headers",
+          `${existingHeaders}, ${additionalHeaders}`,
+        );
+        next();
+      },
+    ],
+  },
 });

apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js

@@ -13,7 +13,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit css-1yokalx-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-ww82j7-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"

apps/civicsignalblog/src/components/Footer/FooterDescription.js

@@ -1,11 +1,10 @@
 /* eslint-env browser */
 import { Figure, Link } from "@commons-ui/next";
+import { RichText } from "@commons-ui/payload";
 import { Stack } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import RichText from "@/civicsignalblog/components/RichText";
-
 const FooterDescription = React.forwardRef(
   function FooterDescription(props, ref) {
     const { description, logo, sx } = props;

apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.js

@@ -1,7 +1,6 @@
+import { RichText } from "@commons-ui/payload";
 import React from "react";
 
-import RichText from "@/civicsignalblog/components/RichText";
-
 const LongFormRichText = React.forwardRef((props, ref) => {
   const { richTextBlockFields: { content } = {} } = props;
 

apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js

@@ -10,7 +10,7 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit css-1yokalx-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-ww82j7-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"

apps/civicsignalblog/src/components/PageHeader/PageHeader.js

@@ -1,5 +1,6 @@
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
+import { RichText } from "@commons-ui/payload";
 import React from "react";
 
 import TwoToneBackground from "../TwoToneBackground";
@@ -31,9 +32,13 @@ const PageHeader = React.forwardRef(function PageHeader(props, ref) {
         >
           {title}
         </RichTypography>
-        <RichTypography component="h2" variant="h2">
-          {subtitle}
-        </RichTypography>
+        <RichText
+          typographyProps={{
+            fontWeight: "normal",
+            variant: "h2",
+          }}
+          elements={subtitle}
+        />
       </Section>
     </TwoToneBackground>
   );

apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js

@@ -13,11 +13,22 @@ exports[`<PageHeader /> renders unchanged 1`] = `
       >
         Contact
       </h2>
-      <h2
-        class="MuiTypography-root MuiTypography-h2 css-1w3bpx1-MuiTypography-root"
+      <div
+        class="MuiBox-root css-0"
       >
-        Let’s start something together!
-      </h2>
+        <h2
+          class="MuiTypography-root MuiTypography-h2 css-hd3436-MuiTypography-root"
+        >
+          Let's
+          <strong>
+             start 
+          </strong>
+          something
+          <strong>
+             together
+          </strong>
+        </h2>
+      </div>
     </div>
   </div>
 </div>

apps/civicsignalblog/src/components/PageHeader/PageHeader.test.js

@@ -10,7 +10,16 @@ const render = createRender({ theme });
 
 const defaultProps = {
   title: "Contact",
-  subtitle: "Let’s start something together!",
+  subtitle: [
+    {
+      children: [
+        { text: "Let's", children: null },
+        { children: null, bold: true, text: " start " },
+        { children: null, text: "something" },
+        { children: null, bold: true, text: " together" },
+      ],
+    },
+  ],
 };
 
 describe("<PageHeader />", () => {