climateconnect · fateme-ramezanpour · Oct 14, 2024 · Oct 17, 2024
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import React, { useContext, useEffect, useRef, useState } from "react";
+import Head from "next/head";
 import { IconButton } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import { apiRequest, getLocalePrefix } from "../public/lib/apiOperations";
@@ -149,8 +150,18 @@ export default function Index() {
 
   const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
 
+  const schemaMarkup = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "Climate Connect",
+    url: "https://climateconnect.earth/",
+  };
+
   return (
     <BrowseContext.Provider value={contextValues}>
+      <Head>
+        <script type="application/ld+json">{JSON.stringify(schemaMarkup)}</script>
+      </Head>
       <WideLayout
         /*TODO(unused) hideTitle */
         fixedHeader

diff --git a/frontend/pages/profiles/[profileUrl].tsx b/frontend/pages/profiles/[profileUrl].tsx
@@ -47,10 +47,10 @@ export default function ProfilePage({ profile, projects, organizations, ideas, p
     <WideLayout
       title={profile ? texts.persons_profile : texts.not_found}
       description={
-        profile.name +
+        profile?.name +
         " | " +
-        profile.info.location +
-        (profile.info.bio ? " | " + profile.info.bio : "")
+        profile?.info?.location +
+        (profile?.info?.bio ? " | " + profile?.info?.bio : "")
       }
     >
       {profile ? (

diff --git a/frontend/pages/projects/[projectId].tsx b/frontend/pages/projects/[projectId].tsx
@@ -2,7 +2,7 @@ import NextCookies from "next-cookies";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import Cookies from "universal-cookie";
 import ROLE_TYPES from "../../public/data/role_types";
-import { apiRequest } from "../../public/lib/apiOperations";
+import { apiRequest, getLocalePrefix } from "../../public/lib/apiOperations";
 import { nullifyUndefinedValues } from "../../public/lib/profileOperations";
 import getTexts from "../../public/texts/texts";
 import UserContext from "../../src/components/context/UserContext";
@@ -70,6 +70,7 @@ const parseComments = (comments) => {
 export async function getServerSideProps(ctx) {
   const { auth_token } = NextCookies(ctx);
   const projectUrl = encodeURI(ctx.query.projectId);
+
   const [
     project,
     members,
@@ -224,7 +225,7 @@ export default function ProjectPage({
       description={project?.short_description}
       message={message?.message}
       messageType={message?.messageType}
-      title={project ? project.name : texts.project + " " + texts.not_found}
+      title={project ? project?.name : texts.project + " " + texts.not_found}
       subHeader={
         !tinyScreen ? (
           <HubsSubHeader hubs={hubs} subHeaderRef={hubsSubHeaderRef} onlyShowDropDown={true} />
@@ -233,6 +234,11 @@ export default function ProjectPage({
         )
       }
       image={project ? getImageUrl(project.image) : undefined}
+      canonicalUrl={
+        project.url_slug
+          ? `${process.env.BASE_URL + getLocalePrefix(locale)}/projects/${project?.url_slug}`
+          : ""
+      }
     >
       <BrowseContext.Provider value={contextValues}>
         {project ? (

diff --git a/frontend/pages/signin.tsx b/frontend/pages/signin.tsx
@@ -96,7 +96,12 @@ export default function Signin() {
   };
 
   return (
-    <Layout title={texts.log_in} isLoading={isLoading} messageType="error">
+    <Layout
+      title={texts.log_in}
+      isLoading={isLoading}
+      messageType="error"
+      canonicalUrl={`${process.env.BASE_URL + getLocalePrefix(locale) + "/signin"}`}
+    >
       <Form
         fields={fields}
         messages={messages}

diff --git a/frontend/src/components/layouts/LayoutWrapper.tsx b/frontend/src/components/layouts/LayoutWrapper.tsx
@@ -69,6 +69,7 @@ export default function LayoutWrapper({
   description,
   image,
   useFloodStdFont,
+  canonicalUrl,
 }: any) {
   const [snackbarProps, setSnackbarProps] = useState({
     open: false,
@@ -159,6 +160,7 @@ export default function LayoutWrapper({
         <meta property="og:type" content="website" />
 
         <meta name="description" content={description ? description : defaultDescription} />
+        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
       </Head>
       {/* If theme is falsy, slience the MUI console.warning for having an undefined theme */}
       <ThemeProvider theme={theme}>

diff --git a/frontend/src/components/layouts/WideLayout.tsx b/frontend/src/components/layouts/WideLayout.tsx
@@ -64,6 +64,7 @@ type Props = {
   customFooterImage?: string;
   isLocationHub?: boolean;
   noHeader?: boolean;
+  canonicalUrl?: string;
 };
 //Wrapper layout component for pages where the content takes the whole width of the screen
 export default function WideLayout({
@@ -94,6 +95,7 @@ export default function WideLayout({
   hideDonationCampaign,
   customFooterImage,
   noHeader,
+  canonicalUrl,
 }: Props) {
   const classes = useStyles({ noSpaceBottom: noSpaceBottom, isStaticPage: isStaticPage });
   const [alertOpen, setAlertOpen] = React.useState(true);
@@ -127,6 +129,7 @@ export default function WideLayout({
       useFloodStdFont={useFloodStdFont}
       theme={theme}
       image={image}
+      canonicalUrl={canonicalUrl}
     >
       {!noHeader && (
         <Header

diff --git a/frontend/src/components/layouts/layout.tsx b/frontend/src/components/layouts/layout.tsx
@@ -30,6 +30,7 @@ export default function Layout({
   messageType,
   isLoading,
   isStaticPage,
+  canonicalUrl,
 }: any) {
   const classes = useStyles({ donationCampaignRunning: process.env.DONATION_CAMPAIGN_RUNNING });
   const [hideAlertMessage, setHideAlertMessage] = React.useState(false);
@@ -43,8 +44,9 @@ export default function Layout({
       setInitialMessageType("error");
     }
   }, []);
+
   return (
-    <LayoutWrapper theme={theme} title={title}>
+    <LayoutWrapper theme={theme} title={title} canonicalUrl={canonicalUrl}>
       <Header noSpacingBottom isStaticPage={isStaticPage} />
       {<DonationCampaignInformation />}
       {isLoading ? (