Merge pull request #977 from CodeForAfrica/fix/climatemappedafrica_fixes

Fix @/climatemappedafrica images on Dev

Author: kilemensi

.dockerignore

@@ -10,3 +10,4 @@ README.md
 **/.turbo
 **/.vscode
 **/build
+**/media

.gitignore

@@ -57,7 +57,7 @@ storybook-static
 
 mongo-keyfile
 
-#Google credentials
+# Google credentials
 credentials.json
 
 # Sentry Config File
@@ -67,3 +67,6 @@ credentials.json
 # SQLite files
 **.db
 **.sqlite
+
+# Payload media folder
+media

apps/climatemappedafrica/.env.template

@@ -1,12 +1,4 @@
-# Learn more about ENV variables at https://github.com/WebDevStudios/nextjs-wordpress-starter/wiki/env-variables
-
-# Tells Next.js we're in development mode. You do not need a Vercel account for this.
-VERCEL_ENV="development"
-
-NEXT_PUBLIC_APP_URL = 'http://localhost:3000'
-
-# Allows Node to work with local, self-signed certificates.
-NODE_TLS_REJECT_UNAUTHORIZED="0"
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
 # The domain where your images are hosted on.
 # See https://nextjs.org/docs/basic-features/image-optimization#domains
@@ -16,9 +8,6 @@ NEXT_PUBLIC_IMAGE_DOMAINS="cms.dev.codeforafrica.org"
 # See https://vega.github.io/vega/docs/api/view/#view_toImageURL
 NEXT_PUBLIC_IMAGE_SCALE_FACTOR=2
 
-# HURUmap URL
-HURUMAP_API_URL="https://ng.hurumap.org/api/v1/"
-
 # openAFRICA domains
 # A comma-separated list of domains to openAFRICA (or any CKAN-based site domain)
 NEXT_PUBLIC_OPENAFRICA_DOMAINS=
@@ -28,11 +17,19 @@ NEXT_PUBLIC_OPENAFRICA_DOMAINS=
 # based site domain)
 NEXT_PUBLIC_SOURCEAFRICA_DOMAINS=
 
+# Google Analytics
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
+
 # AWS S3 bucket for storing images
-S3_UPLOAD_KEY=AAAAAAAAAAAAAAAAAAAA
-S3_UPLOAD_SECRET=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
-S3_UPLOAD_BUCKET=name-of-s3-bucket
-S3_UPLOAD_REGION=bucket-region-us-east-1
+S3_ACCESS_KEY_ID=AAAAAAAAAAAAAAAAAAAA
+S3_SECRET_ACCESS_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+S3_BUCKET=name-of-s3-bucket
+S3_REGION=bucket-region-us-east-1
 
-#Analytics
-NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
+# Payload
+MONGO_URL="mongodb+srv://<user>:<pass>@host/db"
+PAYLOAD_PUBLIC_APP_URL="http://localhost:3000"
+PAYLOAD_SECRET="secure random string"
+
+# HURUmap
+HURUMAP_API_URL="https://ng.hurumap.org/api/v1/"

apps/climatemappedafrica/next.config.js

@@ -13,6 +13,8 @@ module.exports = {
     domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
       ?.map((d) => d.trim())
       ?.filter((d) => d),
+    loader: "custom",
+    loaderFile: "./payload.image.loader.js",
     unoptimized:
       process.env.NEXT_PUBLIC_IMAGE_UNOPTIMIZED?.trim()?.toLowerCase() ===
       "true",

apps/climatemappedafrica/payload.config.ts

@@ -34,12 +34,16 @@ const csrf =
     ?.map((d) => d.trim())
     ?.filter(Boolean) ?? [];
 
-const adapter = s3Adapter({
+const accessKeyId = process?.env?.S3_ACCESS_KEY_ID;
+const secretAccessKey = process?.env?.S3_SECRET_ACCESS_KEY;
+const enableCloudStorage = Boolean(accessKeyId && secretAccessKey);
+
+const cloudStorageAdapter = s3Adapter({
   config: {
     region: process?.env?.S3_REGION,
     credentials: {
-      accessKeyId: process?.env?.S3_ACCESS_KEY_ID,
-      secretAccessKey: process?.env?.S3_SECRET_ACCESS_KEY,
+      accessKeyId,
+      secretAccessKey,
     },
   },
   bucket: process?.env?.S3_BUCKET,
@@ -106,11 +110,11 @@ export default buildConfig({
   },
   plugins: [
     cloudStorage({
+      enabled: enableCloudStorage,
       collections: {
         media: {
-          adapter,
-          // TODO(kilemensi): Toogle this depending on ENV?
-          disableLocalStorage: false,
+          adapter: cloudStorageAdapter,
+          disableLocalStorage: enableCloudStorage,
           prefix: "media",
         },
       },

apps/climatemappedafrica/payload.image.loader.js

@@ -0,0 +1,11 @@
+"use client";
+
+import site from "@/climatemappedafrica/utils/site";
+
+export default function payloadImageLoader({ src }) {
+  // Handle relative paths (/media) only
+  if (src?.startsWith("/media")) {
+    return `${site.url}${src}`;
+  }
+  return src;
+}

apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js

@@ -1,9 +1,12 @@
 import makeStyles from "@mui/styles/makeStyles";
 
-const useStyles = makeStyles(({ typography, palette }) => ({
+const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
   root: {
     borderBottom: `solid 1px ${palette.divider}`,
     paddingTop: typography.pxToRem(20),
+    [breakpoints.up("lg")]: {
+      position: "relative",
+    },
   },
   titleContent: {
     display: "flex",
@@ -33,6 +36,10 @@ const useStyles = makeStyles(({ typography, palette }) => ({
     height: typography.pxToRem(44),
     minWidth: typography.pxToRem(44),
     boxShadow: "none",
+    [breakpoints.up("lg")]: {
+      // quick fix to ensure print button aligns with rich data/pin buttons
+      marginTop: "10px",
+    },
   },
   closeButton: {
     marginLeft: typography.pxToRem(20),

apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js

@@ -139,7 +139,8 @@ function PanelButtons({
         }),
         ({ widths }) =>
           open && {
-            left: `max(calc((100vw - ${widths.values.lg}px)/2 + 833px),1100px)`,
+            // must match min width of TreeView + Profile
+            left: `max(calc((100vw - ${widths.values.lg}px)/2 + 79px + 800px),1100px)`,
           },
       ]}
     />

apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js

@@ -4,7 +4,7 @@ import React from "react";
 
 import RichData from "./RichData";
 
-import PrintIcon from "@/climatemappedafrica/assets/icons/print.svg";
+import printIcon from "@/climatemappedafrica/assets/icons/print.svg?url";
 import TopIcon from "@/climatemappedafrica/assets/icons/top.svg";
 import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader";
 import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare";
@@ -52,7 +52,7 @@ function MobilePanel({ activeType, scrollToTopLabel, sx, ...props }) {
         <Section>
           <LocationHeader
             variant="primary"
-            icon={PrintIcon}
+            icon={printIcon}
             title={geography.name}
             {...geography}
           />

apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js

@@ -4,7 +4,7 @@ import React, { forwardRef } from "react";
 
 import ProfileItems from "./ProfileItems";
 
-import Print from "@/climatemappedafrica/assets/icons/print.svg";
+import printIcon from "@/climatemappedafrica/assets/icons/print.svg?url";
 import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader";
 import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare";
 import Loading from "@/climatemappedafrica/components/Loading";
@@ -85,11 +85,15 @@ const Profile = forwardRef(function Profile(
   return (
     <Box
       sx={[
-        ({ palette, typography, zIndex }) => ({
+        ({ palette, typography, widths, zIndex }) => ({
           backgroundColor: palette.background.default,
+          // must match min width of TreeView
+          left: {
+            lg: `max(calc((100vw - ${widths.values.lg}px)/2 + 79px), 300px)`,
+          },
           marginLeft: {
             xs: typography.pxToRem(20),
-            lg: `max(calc((100vw - 1160px)/2 + 79px), 300px)`,
+            lg: 0,
           },
           marginRight: {
             xs: typography.pxToRem(20),
@@ -104,10 +108,11 @@ const Profile = forwardRef(function Profile(
             md: typography.pxToRem(80),
             lg: typography.pxToRem(17),
           },
-          width: { lg: typography.pxToRem(800) },
-          minHeight: { lg: "100%" },
           paddingTop: { lg: typography.pxToRem(67.7) },
           paddingRight: { lg: typography.pxToRem(17) },
+          position: { lg: "absolute" },
+          width: { lg: typography.pxToRem(800) },
+          minHeight: { lg: "100%" },
           zIndex: { lg: zIndex.drawer },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -117,7 +122,7 @@ const Profile = forwardRef(function Profile(
       {isLoading && <Loading />}
       <LocationHeader
         variant="primary"
-        icon={Print}
+        icon={printIcon}
         title={primaryProfile.geography.name}
         onClick={handleClick(primaryProfile)}
         {...primaryProfile.geography}

apps/climatemappedafrica/src/pages/[[...slugs]].js

@@ -51,11 +51,15 @@ function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
     }
   }
 
-  const tutorialBlock = blocks.find((block) => block.blockType === "tutorial");
-
   let TutorialComponent = React.Fragment;
+  let TutorialComponentProps;
+  const tutorialBlock = blocks.find((block) => block.blockType === "tutorial");
   if (tutorialBlock) {
     TutorialComponent = Tutorial;
+    TutorialComponentProps = {
+      ...tutorialBlock,
+      defaultOpen: Number.parseInt(showTutorial, 10) === 1,
+    };
   }
 
   let PageConfig = React.Fragment;
@@ -65,11 +69,7 @@ function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
     pageConfigProps = { value: { fallback } };
   }
   return (
-    <TutorialComponent
-      key={showTutorial}
-      {...tutorialBlock}
-      defaultOpen={Number.parseInt(showTutorial, 10) === 1}
-    >
+    <TutorialComponent key={showTutorial} {...TutorialComponentProps}>
       <Navigation {...menus} />
       <NextSeo
         {...pageSeo}

apps/climatemappedafrica/src/payload/blocks/Hero.js

@@ -1,3 +1,5 @@
+import { slateEditor } from "@payloadcms/richtext-slate";
+
 import richText from "../fields/richText";
 
 const Hero = {
@@ -12,13 +14,24 @@ const Hero = {
     richText({
       name: "title",
       required: true,
-      label: "Title",
       localized: true,
+      editor: slateEditor({
+        admin: {
+          elements: [],
+          leaves: ["bold"],
+        },
+      }),
     }),
     richText({
       name: "subtitle",
       required: true,
       localized: true,
+      editor: slateEditor({
+        admin: {
+          elements: [],
+          leaves: ["bold", "code", "italic", "strikethrough", "underline"],
+        },
+      }),
     }),
     {
       name: "searchLabel",