Merge pull request #467 from CodeForAfrica/ft/ui-fixes-2

feat(SEO): SEO Setup

Author: kelvinkipruto

package.json

@@ -32,17 +32,18 @@
     "@mui/material-nextjs": "^7.3.2",
     "@mui/utils": "^7.3.2",
     "@next/third-parties": "^15.5.3",
-    "@payloadcms/db-mongodb": "3.56.0",
-    "@payloadcms/email-nodemailer": "^3.56.0",
-    "@payloadcms/next": "3.56.0",
-    "@payloadcms/payload-cloud": "3.56.0",
-    "@payloadcms/plugin-cloud-storage": "^3.56.0",
-    "@payloadcms/plugin-multi-tenant": "^3.56.0",
-    "@payloadcms/plugin-sentry": "^3.56.0",
-    "@payloadcms/richtext-lexical": "3.56.0",
-    "@payloadcms/storage-s3": "^3.56.0",
-    "@payloadcms/translations": "^3.56.0",
-    "@payloadcms/ui": "3.56.0",
+    "@payloadcms/db-mongodb": "3.58.0",
+    "@payloadcms/email-nodemailer": "^3.58.0",
+    "@payloadcms/next": "3.58.0",
+    "@payloadcms/payload-cloud": "3.58.0",
+    "@payloadcms/plugin-cloud-storage": "^3.58.0",
+    "@payloadcms/plugin-multi-tenant": "^3.58.0",
+    "@payloadcms/plugin-sentry": "^3.58.0",
+    "@payloadcms/plugin-seo": "^3.58.0",
+    "@payloadcms/richtext-lexical": "3.58.0",
+    "@payloadcms/storage-s3": "^3.58.0",
+    "@payloadcms/translations": "^3.58.0",
+    "@payloadcms/ui": "3.58.0",
     "@sentry/nextjs": "^10.6.0",
     "@svgr/webpack": "^8.1.0",
     "ai": "^5.0.26",
@@ -55,7 +56,7 @@
     "graphql": "^16.11.0",
     "lucide-react": "^0.542.0",
     "next": "15.4.7",
-    "payload": "3.56.0",
+    "payload": "3.58.0",
     "react": "19.1.1",
     "react-share": "^5.2.2",
     "require-in-the-middle": "^7.5.2",

pnpm-lock.yaml

@@ -1,27 +1,102 @@
 import React, { Suspense } from "react";
+import type { Metadata } from "next";
+import { notFound, redirect } from "next/navigation";
 
 import { getGlobalPayload, queryPageBySlug } from "@/lib/payload";
-import { notFound, redirect } from "next/navigation";
 import { getDomain } from "@/lib/domain";
 import { CommonHomePage } from "@/components/CommonHomePage";
 import { BlockRenderer } from "@/components/BlockRenderer";
 import Navigation from "@/components/Navigation";
 import Footer from "@/components/Footer";
 import { getTenantBySubDomain, getTenantNavigation } from "@/lib/data/tenants";
 import { getPoliticalEntitiesByTenant } from "@/lib/data/politicalEntities";
+import {
+  buildSeoMetadata,
+  getEntitySeo,
+  getPageSeo,
+  resolveTenantSeoContext,
+} from "@/lib/seo";
 
 type Args = {
   params: Promise<{
     slugs?: string[];
   }>;
 };
 
+export async function generateMetadata({ params }: Args): Promise<Metadata> {
+  const paramsValue = await params;
+  const slugs = paramsValue?.slugs ?? [];
+
+  const { subdomain } = await getDomain();
+  const tenantResolution = await resolveTenantSeoContext(subdomain);
+
+  if (tenantResolution.status === "missing") {
+    return tenantResolution.metadata;
+  }
+
+  const {
+    tenant,
+    tenantSettings,
+    tenantSeo,
+    tenantTitleBase,
+  } = tenantResolution.context;
+
+  const politicalEntities = await getPoliticalEntitiesByTenant(tenant);
+  const [maybePoliticalEntitySlug, pageSlugCandidate] = slugs;
+  const politicalEntity = politicalEntities.find(
+    (entity) => entity.slug === maybePoliticalEntitySlug,
+  );
+
+  if (!politicalEntity) {
+    return buildSeoMetadata({
+      meta: tenantSettings?.meta,
+      defaults: tenantSeo,
+    });
+  }
+
+  const { seo: entitySeo, positionRegion } = getEntitySeo({
+    entity: politicalEntity,
+    tenant,
+    tenantSeo,
+    tenantTitleBase,
+  });
+
+  const pageSlug = pageSlugCandidate ?? "index";
+  const page = await queryPageBySlug({ slug: pageSlug, tenant });
+
+  if (!page) {
+    return buildSeoMetadata({
+      meta: politicalEntity.meta,
+      defaults: entitySeo,
+    });
+  }
+
+  const { defaults: pageSeoDefaults, meta: pageSeoMeta } = getPageSeo({
+    page,
+    entity: politicalEntity,
+    tenantSeo,
+    entitySeo,
+    positionRegion,
+  });
+
+  return buildSeoMetadata({
+    meta: pageSeoMeta ?? page.meta,
+    defaults: pageSeoDefaults,
+  });
+}
+
 export default async function Page(params: Args) {
   const { subdomain, tenantSelectionHref } = await getDomain();
 
   const tenant = await getTenantBySubDomain(subdomain);
 
   if (!tenant) {
+    if (subdomain) {
+      const target = tenantSelectionHref || "/";
+      if (target !== "/") {
+        redirect(target);
+      }
+    }
     return <CommonHomePage />;
   }
 

public/favicon.ico

@@ -1,7 +1,8 @@
 import React from "react";
 import NextLink from "next/link";
 import Image from "next/image";
-import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { notFound, redirect } from "next/navigation";
 import { Box, Button, Container, Grid, Typography } from "@mui/material";
 
 import Navigation from "@/components/Navigation";
@@ -14,6 +15,12 @@ import { getTenantBySubDomain, getTenantNavigation } from "@/lib/data/tenants";
 import { getPoliticalEntityBySlug } from "@/lib/data/politicalEntities";
 import { getPromiseById } from "@/lib/data/promises";
 import { resolveMedia } from "@/lib/data/media";
+import {
+  buildSeoMetadata,
+  getEntitySeo,
+  composeTitleSegments,
+  resolveTenantSeoContext,
+} from "@/lib/seo";
 import type {
   Promise as PromiseDocument,
   PromiseStatus as PromiseStatusDocument,
@@ -27,6 +34,89 @@ type Params = {
   promiseId: string;
 };
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<Params>;
+}): Promise<Metadata> {
+  const paramsValue = await params;
+  const { entitySlug, promiseId } = paramsValue;
+
+  const { subdomain } = await getDomain();
+  const tenantResolution = await resolveTenantSeoContext(subdomain);
+
+  if (tenantResolution.status === "missing") {
+    return tenantResolution.metadata;
+  }
+
+  const {
+    tenant,
+    tenantSettings,
+    tenantSeo,
+    tenantTitleBase,
+  } = tenantResolution.context;
+
+  const politicalEntity = await getPoliticalEntityBySlug(tenant, entitySlug);
+
+  if (!politicalEntity) {
+    return buildSeoMetadata({
+      meta: tenantSettings?.meta,
+      defaults: tenantSeo,
+    });
+  }
+
+  const { seo: entitySeo, positionRegion } = getEntitySeo({
+    entity: politicalEntity,
+    tenant,
+    tenantSeo,
+    tenantTitleBase,
+  });
+
+  const promise = await getPromiseById(promiseId);
+
+  if (!promise) {
+    return buildSeoMetadata({
+      meta: politicalEntity.meta,
+      defaults: entitySeo,
+    });
+  }
+
+  const relation = promise.politicalEntity;
+  const promiseEntityId =
+    typeof relation === "string" ? relation : relation?.id ?? null;
+
+  if (!promiseEntityId || promiseEntityId !== politicalEntity.id) {
+    return buildSeoMetadata({
+      meta: politicalEntity.meta,
+      defaults: entitySeo,
+    });
+  }
+
+  const fallbackTitle =
+    composeTitleSegments(
+      promise.title?.trim() || tenantTitleBase || tenantSeo.title,
+      politicalEntity.name,
+      positionRegion,
+    ) ??
+    entitySeo.title ??
+    tenantSeo.title;
+
+  return buildSeoMetadata({
+    meta: promise.meta,
+    defaults: {
+      title: fallbackTitle,
+      description:
+        promise.description?.trim() ||
+        entitySeo.description ||
+        tenantSeo.description,
+      image:
+        promise.image ??
+        entitySeo.image ??
+        tenantSeo.image,
+    },
+  });
+}
+
 const parseYear = (value?: string | null): number | null => {
   if (!value) {
     return null;
@@ -87,6 +177,12 @@ export default async function PromiseDetailPage({
   const tenant = await getTenantBySubDomain(subdomain);
 
   if (!tenant) {
+    if (subdomain) {
+      const target = tenantSelectionHref || "/";
+      if (target !== "/") {
+        redirect(target);
+      }
+    }
     return <CommonHomePage />;
   }
 

src/app/(frontend)/[...slugs]/page.tsx

@@ -3,6 +3,7 @@ import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 import theme from "@/theme/theme";
 import { ThemeProvider } from "@mui/material";
 import { Amiri, Open_Sans, Source_Sans_3 } from "next/font/google";
+import type { Metadata } from "next";
 
 const amiri = Amiri({
   subsets: ["arabic", "latin"],
@@ -27,9 +28,13 @@ const sourceSans = Source_Sans_3({
   variable: "--font-source-sans",
 });
 
-export const metadata = {
+export const metadata: Metadata = {
   description: "PromiseTracker",
   title: "PromiseTracker",
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon.ico",
+  },
 };
 
 export default async function RootLayout(props: { children: React.ReactNode }) {

src/app/(frontend)/[entitySlug]/promises/[promiseId]/page.tsx

@@ -4,6 +4,7 @@ import { Block } from "payload";
 export const Newsletter: Block = {
   slug: "newsletter",
   imageURL: "/cms/newsletter.png",
+  interfaceName: "NewsletterBlock",
   labels: {
     singular: "Newsletter",
     plural: "Newsletters",

src/app/(frontend)/layout.tsx

@@ -1,6 +1,5 @@
 import { CollectionConfig } from "payload";
 import { ensureUniqueSlug } from "./hooks/ensureUniqueSlug";
-import newsletterSettingsToBlock from "./hooks/newsletterSettingsToBlock";
 import Partners from "@/blocks/Partners";
 import Newsletter from "@/blocks/Newsletter";
 import LatestPromises from "@/blocks/LatestPromises";
@@ -54,7 +53,4 @@ export const Pages: CollectionConfig = {
       ],
     },
   ],
-  hooks: {
-    afterRead: [newsletterSettingsToBlock],
-  },
 };