Content preview with Content Source Maps and Vercel

Overview

Content Source Maps is a feature that automatically tags text fields, Rich Text fields, and assets. When integrated with Vercel Content Link (formerly known as Vercel Visual Editing), it allows you to open a relevant Contentful entry by clicking a button in a field in your Vercel preview. This is particularly helpful when authors share the preview URL with colleagues, as it enables them to access the correct Contentful entry with a single click.

How it works

When enabled, our APIs return source maps for certain visual fields that have links to the correct field in Contentful. The Live Preview SDK then transforms these Content Source Maps to hidden metadata into the results of your queries.

This integration employs a method known as steganography, which conceals hidden information within other data. Specifically, this approach embeds the metadata into invisible Unicode characters incorporated into the existing text strings.

The use of these “enhanced strings” on your web pages allows Vercel preview deployments to detect and decipher the concealed metadata in the final HTML. This enables the display of interactive links that guide users directly to the relevant field in Contentful.

Supported field types

*Unsupported widget appearance settings:

• Dropdown and Radio: Not supported due to their primary use for non-visual text purposes (e.g., CSS styling properties).
• URL and Slug: Not supported as hidden metadata would cause issues.
• Markdown: Currently not supported.

Implementation

Content Source Maps can be set up according to one of the following options:

• GraphQL
• Content Preview API (CPA)
  • With Contentful.js SDK (recommended)
  • Without Contentful.js SDK

GraphQL

1. Install the latest version of the Live Preview SDK.

1
npm install @contentful/live-preview

2. Use the query level directive in your GraphQL queries.

Content Source Maps return from our GraphQL API under the “extensions”:

1
query @contentSourceMaps { //Add the query level directive
2
      postCollection(preview: true) { //And preview: true
3
         items { 
4
            title
5
         } 
6
    }
7
}
8
   // This will return:
9
   {
10
     "data": ...
11
     "extensions": ... //Content Source Maps will be here
12
}

3. Use the encodeGraphQLResponse function from the Live Preview SDK by passing it the GraphQL Response with Content Source Maps. It will return with your content that includes the hidden metadata to enable Vercel Content Link.

1
import { encodeGraphQLResponse } from "@contentful/live-preview";
2
const dataWithAutoTagging = encodeGraphQLResponse(data);

Content Preview API (CPA)

With Contentful.js SDK (recommended)

Enable Content Source Maps using the Contentful Client SDK, by setting includeContentSourceMaps in the client to true:

1
export const clientPreview = createClient({
2
space: process.env.CONTENTFUL_SPACE_ID!,
3
          accessToken: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN!,
4
     host: "preview.contentful.com",
5
       includeContentSourceMaps: true
6
});

Without Contentful.js SDK

Directly access the Contentful CPA without using the Contentful.js SDK.

Please be aware that without the Contentful Client SDK, certain protections, such as automatically requesting the sys.id, are not enforced. To ensure Content Source Maps function properly, the complete sys object needs to be retrieved. Therefore, using a select operator to exclude this from the response would cause errors.

1. Add &includeContentSourceMaps=true to the URL:

1
fetch("https://preview.contentful.com/spaces/:spaceId/environments/:e nvId/entries&includeContentSourceMaps=true",
2
    {
3
      method: "GET",
4
      headers: {
5
        Authorization: "Bearer YOUR_ACCESS_TOKEN",
6
        Content-Type: "application/json",
7
      },
8
} )

2. Use the encodeCPAResponse function from the Live Preview SDK by passing it the CPA Response with Content Source Maps. It will return with your content that includes the hidden metadata to enable Vercel Content Link.

1
   import { encodeCPAResponse } from "@contentful/live-preview";
2
   const dataWithAutoTagging = encodeCPAResponse(data);

Troubleshooting and tips

We’ve taken a cautious approach in determining which fields to generate Content Source Maps for, ensuring that it won’t disrupt your website. The remaining potential issues might include the following:

• Under certain circumstances, such as when applying letter-spacing in CSS, fields may display styles that weren’t intended. In these cases, you can utilize the functions provided by the Live Preview SDK to retrieve the content and remove any hidden metadata.

1
import { splitEncoding } from "@contentful/live-preview";
2
const { cleaned, encoded } = splitEncoding(text);

Known issues and limitations

• Markdown support is currently in development.
• Adding hidden metadata to content can result in problems, e.g. when being used for CSS values, for dates or URL content. You can remove the hidden strings using the splitEncoding function from the Live Preview SDK.
• Encoding is skipped on the following formats:
  • Any date format that does not use English letters (e.g. 4/30/24);
  • ISO dates (e.g. 2024-04-30T12:34:59Z);
  • URLs.
• We intentionally avoid tagging certain widgets, such as dropdowns, because they are primarily used for non-visual text purposes, such as CSS styling properties (e.g. #f4f4f4 color code). Adding hidden strings to these fields could potentially cause issues.