From 34ea21bcaea7615d935c15944958e59eab8513bd Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Fri, 25 Oct 2024 11:35:13 +0300 Subject: [PATCH 1/8] Set TutorialComponentProps only when needed --- apps/climatemappedafrica/src/pages/[[...slugs]].js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/climatemappedafrica/src/pages/[[...slugs]].js b/apps/climatemappedafrica/src/pages/[[...slugs]].js index 8682150fa..f000d92d5 100644 --- a/apps/climatemappedafrica/src/pages/[[...slugs]].js +++ b/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 ( - + Date: Fri, 25 Oct 2024 13:39:52 +0300 Subject: [PATCH 2/8] Enable/disable S3 based on presence of S3 key/secret --- apps/climatemappedafrica/next.config.js | 2 ++ apps/climatemappedafrica/payload.config.ts | 28 +++++++++++-------- .../payload.image.loader.js | 11 ++++++++ 3 files changed, 29 insertions(+), 12 deletions(-) create mode 100644 apps/climatemappedafrica/payload.image.loader.js diff --git a/apps/climatemappedafrica/next.config.js b/apps/climatemappedafrica/next.config.js index 9bab1d826..f48c38659 100644 --- a/apps/climatemappedafrica/next.config.js +++ b/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", diff --git a/apps/climatemappedafrica/payload.config.ts b/apps/climatemappedafrica/payload.config.ts index 70ac036cd..93001b1ef 100644 --- a/apps/climatemappedafrica/payload.config.ts +++ b/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, @@ -69,12 +73,12 @@ export default buildConfig({ globals: [HURUMap, Site] as GlobalConfig[], ...(locales?.length ? { - localization: { - locales, - defaultLocale, - fallback: true, - }, - } + localization: { + locales, + defaultLocale, + fallback: true, + }, + } : undefined), admin: { webpack: (config) => ({ @@ -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", }, }, diff --git a/apps/climatemappedafrica/payload.image.loader.js b/apps/climatemappedafrica/payload.image.loader.js new file mode 100644 index 000000000..acb0916bc --- /dev/null +++ b/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; +} From 3538ad3300cef8c26abd5ac149d6c3b0031b4b80 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Fri, 25 Oct 2024 13:40:32 +0300 Subject: [PATCH 3/8] Remove invalid elements/leaves in Hero --- .../src/payload/blocks/Hero.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/apps/climatemappedafrica/src/payload/blocks/Hero.js b/apps/climatemappedafrica/src/payload/blocks/Hero.js index 62e3286ac..674343824 100644 --- a/apps/climatemappedafrica/src/payload/blocks/Hero.js +++ b/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", From 1aa31233f1d1fa6adebe3be7345f9ded0f4ad5aa Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Fri, 25 Oct 2024 13:41:14 +0300 Subject: [PATCH 4/8] Fix Print icon and align with rich data/pin in 'lg' It must be loaded as URL instead of component --- .../src/components/HURUmap/LocationHeader/useStyles.js | 9 ++++++++- .../components/HURUmap/Panel/MobilePanel/MobilePanel.js | 2 +- .../src/components/HURUmap/Panel/Profile.js | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js index 344921df1..2f17071f0 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js +++ b/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), diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js index dc6587f6d..0a6abeb25 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js +++ b/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"; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js index 5d21637e8..e5e4dfee3 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js +++ b/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 Print 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"; From b42118bd4967f06483cbd40724be10b84f12afd2 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Fri, 25 Oct 2024 14:19:03 +0300 Subject: [PATCH 5/8] Update env template --- apps/climatemappedafrica/.env.template | 33 ++++++++++++-------------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/apps/climatemappedafrica/.env.template b/apps/climatemappedafrica/.env.template index 61c5a0d8b..e3bc636ea 100644 --- a/apps/climatemappedafrica/.env.template +++ b/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= -# 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 - #Analytics NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx" + +# AWS S3 bucket for storing images +S3_ACCESS_KEY_ID=AAAAAAAAAAAAAAAAAAAA +S3_SECRET_ACCESS_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +S3_BUCKET=name-of-s3-bucket +S3_REGION=bucket-region-us-east-1 + +# +MONGO_URL="mongodb+srv://:@host/db" +PAYLOAD_PUBLIC_APP_URL="http://localhost:3000" +PAYLOAD_SECRET="secure random string" + +# HURUmap URL +HURUMAP_API_URL="https://ng.hurumap.org/api/v1/" From 3805d43c932ba4591367216cb2ac79b48d715b7d Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Fri, 25 Oct 2024 14:20:54 +0300 Subject: [PATCH 6/8] Ignore local media folder --- .dockerignore | 1 + .gitignore | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.dockerignore b/.dockerignore index 8b4a39e3f..337282801 100644 --- a/.dockerignore +++ b/.dockerignore @@ -10,3 +10,4 @@ README.md **/.turbo **/.vscode **/build +**/media diff --git a/.gitignore b/.gitignore index 7c24dc8a8..e07935c43 100644 --- a/.gitignore +++ b/.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 From b3fbb069827ed2c6e1d75baf74759395349035a4 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Fri, 25 Oct 2024 14:57:27 +0300 Subject: [PATCH 7/8] Ensure Panel scales with screen lg+ --- apps/climatemappedafrica/payload.config.ts | 12 ++++++------ .../HURUmap/Panel/DesktopPanel/PanelButtons.js | 3 ++- .../src/components/HURUmap/Panel/Profile.js | 13 +++++++++---- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/apps/climatemappedafrica/payload.config.ts b/apps/climatemappedafrica/payload.config.ts index 93001b1ef..1b06958af 100644 --- a/apps/climatemappedafrica/payload.config.ts +++ b/apps/climatemappedafrica/payload.config.ts @@ -73,12 +73,12 @@ export default buildConfig({ globals: [HURUMap, Site] as GlobalConfig[], ...(locales?.length ? { - localization: { - locales, - defaultLocale, - fallback: true, - }, - } + localization: { + locales, + defaultLocale, + fallback: true, + }, + } : undefined), admin: { webpack: (config) => ({ diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js index 697cf25ba..f2b21397c 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js +++ b/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)`, }, ]} /> diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js index e5e4dfee3..369a63894 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js @@ -85,11 +85,15 @@ const Profile = forwardRef(function Profile( return ( ({ + ({ 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]), From 9fec4b8fc6090edc590727ceb04f93bbca14b683 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Mon, 28 Oct 2024 11:43:39 +0300 Subject: [PATCH 8/8] Clean up --- apps/climatemappedafrica/.env.template | 6 +++--- .../src/components/HURUmap/Panel/MobilePanel/MobilePanel.js | 4 ++-- .../src/components/HURUmap/Panel/Profile.js | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/climatemappedafrica/.env.template b/apps/climatemappedafrica/.env.template index e3bc636ea..600a19c60 100644 --- a/apps/climatemappedafrica/.env.template +++ b/apps/climatemappedafrica/.env.template @@ -17,7 +17,7 @@ NEXT_PUBLIC_OPENAFRICA_DOMAINS= # based site domain) NEXT_PUBLIC_SOURCEAFRICA_DOMAINS= -#Analytics +# Google Analytics NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx" # AWS S3 bucket for storing images @@ -26,10 +26,10 @@ S3_SECRET_ACCESS_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA S3_BUCKET=name-of-s3-bucket S3_REGION=bucket-region-us-east-1 -# +# Payload MONGO_URL="mongodb+srv://:@host/db" PAYLOAD_PUBLIC_APP_URL="http://localhost:3000" PAYLOAD_SECRET="secure random string" -# HURUmap URL +# HURUmap HURUMAP_API_URL="https://ng.hurumap.org/api/v1/" diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js index 0a6abeb25..228435b0a 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js +++ b/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?url"; +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 }) {
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js index 369a63894..03defc9f0 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js +++ b/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?url"; +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"; @@ -122,7 +122,7 @@ const Profile = forwardRef(function Profile( {isLoading && }