fix(seo): consider full path in seo fetching (#764)

varianter · Oct 14, 2024 · 3d7ecca · 3d7ecca
1 parent 9a105ee
commit 3d7ecca
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 15 deletions.
diff --git a/src/app/(main)/[lang]/[...path]/page.tsx b/src/app/(main)/[lang]/[...path]/page.tsx
@@ -11,22 +11,49 @@ import { homeLink } from "src/components/utils/linkTypes";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { fetchPageDataFromParams } from "src/utils/pageData";
 import SectionRenderer from "src/utils/renderSection";
-import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo";
-import { SEO_SLUG_QUERY } from "studio/lib/queries/pages";
+import { SeoData, generateMetadataFromSeo } from "src/utils/seo";
 
 export const dynamic = "force-dynamic";
 
 type Props = {
   params: { lang: string; path: string[] };
 };
 
+function seoDataFromPageData(
+  data: Awaited<ReturnType<typeof fetchPageDataFromParams>>,
+): SeoData | null {
+  if (data === null) {
+    return null;
+  }
+  switch (data.docType) {
+    case "customerCase":
+      // TODO
+      return null;
+    case "customerCasesPage":
+      // TODO
+      return null;
+    case "pageBuilder":
+      // TODO
+      return null;
+    case "legalDocument":
+      // TODO
+      return null;
+    case "compensations": {
+      return data.queryResponse.compensationsPage.data.seo;
+    }
+  }
+}
+
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const seo = await fetchSeoData(SEO_SLUG_QUERY, {
-    // TODO: handle full path, not just the first slug
-    slug: params.path[0],
+  const { perspective } = getDraftModeInfo();
+
+  const pageData = await fetchPageDataFromParams({
+    language: params.lang,
+    path: params.path,
+    perspective: perspective ?? "published",
   });
 
-  return generateMetadataFromSeo(seo);
+  return generateMetadataFromSeo(seoDataFromPageData(pageData));
 }
 
 const Page404 = (

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,7 @@ const fontBrittiSans = localFont({
 });
 
 export async function generateMetadata(): Promise<Metadata> {
-  // TODO: Root metadata should only rely on seo from site settings
+  // fallback if no page-specific metadata is provided
   return generateMetadataFromSeo(null);
 }
 

diff --git a/src/utils/seo.ts b/src/utils/seo.ts
@@ -12,11 +12,11 @@ import {
 } from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
-type SeoData = {
-  title: string;
-  description: string;
-  imageUrl: string;
-  keywords: string;
+export type SeoData = {
+  title?: string;
+  description?: string;
+  imageUrl?: string;
+  keywords?: string;
 };
 
 export const OPEN_GRAPH_IMAGE_DIMENSIONS = {

diff --git a/studio/lib/interfaces/compensations.ts b/studio/lib/interfaces/compensations.ts
@@ -1,6 +1,6 @@
 import { PortableTextBlock, Reference } from "sanity";
 
-import { SeoObject } from "./seo";
+import { SeoData } from "src/utils/seo";
 
 export interface Benefit {
   _type: string;
@@ -86,5 +86,5 @@ export interface CompensationsPage {
   bonusesByLocation: BonusesByLocationPage[];
   salariesByLocation: SalariesByLocation[];
   showSalaryCalculator: boolean;
-  seo: SeoObject;
+  seo: SeoData;
 }
diff --git a/studio/lib/queries/specialPages.ts b/studio/lib/queries/specialPages.ts
@@ -17,7 +17,12 @@ export const COMPENSATIONS_PAGE_QUERY = groq`
         "richText": ${translatedFieldFragment("richText")}
       }
     },
-    "seo": ${translatedFieldFragment("seo")}
+    "seo": ${translatedFieldFragment("seo")} {
+      "title": seoTitle,
+      "description": seoDescription,
+      "imageUrl": seoImage.asset->url,
+      "keywords": seoKeywords
+    },
   }
 `;