Experience reference fields for metadata

1
// src/utils/meta.ts
2
import { EntityStore, isEntry } from '@contentful/experiences-core';
3
import type {
4
  Experience,
5
  ExperienceFields,
6
} from '@contentful/experiences-core';
7
import type { Entry } from 'contentful';
8
9
type FooEntry = Entry<
10
  {
11
    contentTypeId: 'foo';
12
    fields: {
13
      description?: string;
14
    };
15
    // Using `undefined` for the modifier assuming that locales are already resolved (e.g., CDA/CPA)
16
  },
17
  undefined
18
>;
19
20
type BarEntry = Entry<
21
  {
22
    contentTypeId: 'bar';
23
    fields: {
24
      text?: string;
25
    };
26
  },
27
  undefined
28
>;
29
30
/** Utility function to extract a specific field from the entry fields based on its content type */
31
const getFieldValueFromEntry = (input: Entry): string | undefined => {
32
  // Since entry references don't point to a specific field, the whole entry is resolved
33
  // and we have to extract the desired field based on the content type.
34
  switch (input.sys.contentType.sys.id) {
35
    case 'foo':
36
      return (input as FooEntry).fields.description;
37
    case 'bar':
38
      return (input as BarEntry).fields.text;
39
    default:
40
      return undefined;
41
  }
42
};
43
44
const hasCustomExperienceField = (
45
  fields: undefined | ExperienceFields,
46
  key: string
47
): fields is ExperienceFields & { [key]: unknown } =>
48
  typeof fields === 'object' && fields !== null && key in fields;
49
50
/** Utility function to get a specific field from the experience while supporting both raw values and references to other entries */
51
const getFieldFromExperience = (
52
  experience: Experience<EntityStore>,
53
  key: string
54
): string | undefined => {
55
  // Parsing the tree is a NOT OFFICIALLY SUPPORTED strategy.
56
  // We're exploring having a standalone SDK method for this in a future version, so use at your own risk.
57
  const fields = experience?.entityStore?.experienceEntryFields;
58
  const value = hasCustomExperienceField(fields, key) ? fields[key] : undefined;
59
60
  // Value is a reference
61
  if (isEntry(value)) {
62
    return getFieldValueFromEntry(value);
63
  }
64
65
  // Value is a raw value already
66
  if (typeof value === 'string') {
67
    return value;
68
  }
69
70
  // Ignores everything else which is not a string (arrays, numbers, objects, etc.)
71
  return undefined;
72
};
73
74
/** Utility function to get the meta title from the experience entry fields */
75
export const getMetaTitleFromExperienceEntryFields = (
76
  experience: Experience<EntityStore>
77
): string | undefined =>
78
  getFieldFromExperience(experience, 'metaTitle') ||
79
  getFieldFromExperience(experience, 'title');
80
81
/** Utility function to get the meta description from the experience entry fields */
82
export const getMetaDescriptionFromExperienceEntryFields = (
83
  experience: Experience<EntityStore>
84
): string | undefined => getFieldFromExperience(experience, 'metaDescription');

1
// src/app/[locale]/[slug]/page.tsx
2
import type { Metadata } from 'next';
3
import Experience from '../../../components/Experience';
4
import Header from '../../../components/Header/Header';
5
import Footer from '../../../components/Footer/Footer';
6
import { getExperience } from '../../../getExperience';
7
import { detachExperienceStyles } from '@contentful/experiences-sdk-react';
8
import { Layout } from 'antd';
9
import {
10
  Footer as LayoutFooter,
11
  Header as LayoutHeader,
12
  Content as LayoutContent,
13
} from 'antd/es/layout/layout';
14
import styles from './page.module.css';
15
import '../studio-config';
16
import {
17
  getMetaDescriptionFromExperienceEntryFields,
18
  getMetaTitleFromExperienceEntryFields,
19
} from '../../../utils/meta';
20
21
type Page = {
22
  params: Promise<{ locale?: string; slug?: string; preview?: string }>;
23
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
24
};
25
26
// Taking the experience, extract the meta data from it and provide it to the Next page
27
export async function generateMetadata({
28
  params,
29
  searchParams,
30
}: Page): Promise<Metadata> {
31
  const { locale = 'en-US', slug = 'home-page' } = (await params) || {};
32
  const { isPreview, expEditorMode } = (await searchParams) || {};
33
  const preview = isPreview === 'true';
34
  const editorMode = expEditorMode === 'true';
35
  const { experience } = await getExperience(slug, locale, preview, editorMode);
36
37
  const metaTitle = experience
38
    ? getMetaTitleFromExperienceEntryFields(experience)
39
    : undefined;
40
  const metaDescription = experience
41
    ? getMetaDescriptionFromExperienceEntryFields(experience)
42
    : undefined;
43
44
  return {
45
    title: metaTitle,
46
    description: metaDescription,
47
    openGraph: {
48
      title: metaTitle,
49
      description: metaDescription,
50
    },
51
  };
52
}
53
54
export default async function ExperiencePage({ params, searchParams }: Page) {
55
  const { locale = 'en-US', slug = 'home-page' } = (await params) || {};
56
  const { isPreview, expEditorMode } = (await searchParams) || {};
57
  const preview = isPreview === 'true';
58
  const editorMode = expEditorMode === 'true';
59
  const { experience, error } = await getExperience(
60
    slug,
61
    locale,
62
    preview,
63
    editorMode
64
  );
65
66
  if (error) {
67
    return <>{error.message}</>;
68
  }
69
70
  // extract the styles from the experience
71
  const stylesheet = experience ? detachExperienceStyles(experience) : null;
72
73
  // experience currently needs to be stringified manually to be passed to the component
74
  const experienceJSON = experience ? JSON.stringify(experience) : null;
75
76
  return (
77
    <Layout className={styles.layout}>
78
      {stylesheet && <style>{`{stylesheet}`}</style>}
79
      <LayoutHeader className={styles.header}>
80
        <Header />
81
      </LayoutHeader>
82
      <LayoutContent className={styles.content}>
83
        <Experience experienceJSON={experienceJSON} locale={locale} />
84
      </LayoutContent>
85
      <LayoutFooter className={styles.footer}>
86
        <Footer />
87
      </LayoutFooter>
88
    </Layout>
89
  );
90
}

1
/** Utility function to extract a specific field from the entry fields based on its content type */
2
const getFieldValueFromEntry = (input: Entry): string | undefined => {
3
  // Since entry references don't point to a specific field, the whole entry is resolved
4
  // and we have to extract the desired field based on the content type.
5
  switch (input.sys.contentType.sys.id) {
6
    case 'foo':
7
      return (input as FooEntry).fields.description;
8
    case 'bar':
9
      return (input as BarEntry).fields.text;
10
    case 'product':
11
      return (input as ProductEntry).fields.name;
12
    default:
13
      return undefined;
14
  }
15
};