Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@contentful/content-source-maps
Advanced tools
Base SDK for building Content Source Maps with Contentful
⚠️ Content Source Maps are only available on our Premium plan. Vercel Content Links are only available on Vercel Pro and Enterprise plans.
Install the Live Preview SDK:
npm install @contentful/live-preview
The process employs steganography to conceal metadata within invisible Unicode characters, containing information to activate inspector mode. These invisible Unicode characters will not alter the visual presentation of your content.
This step is only required for Live Preview Inspector Mode (not for Vercel Content Links).
import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
const CustomApp = ({ Component, pageProps }) => (
<ContentfulLivePreviewProvider locale="en-US">
<Component {...pageProps}>
</ContentfulLivePreviewProvider>
)
Enable Content Source Maps in your GraphQL queries as follows:
query @contentSourceMaps {
postCollection(preview: true) {
items {
title
}
}
}
The GraphQL API will now return the data along with the Content Source Maps in the extensions
field.
Then, pass the data to the provided function encodeGraphQLResponse
to encode the response:
import { encodeGraphQLResponse } from '@contentful/live-preview';
const dataWithAutoTagging = encodeGraphQLResponse(data);
When rendering the encoded data in your website, inspector mode will activate automatically.
This step is only required for Live Preview Inspector Mode (not for Vercel Content Links).
import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
const CustomApp = ({ Component, pageProps }) => (
<ContentfulLivePreviewProvider locale="en-US">
<Component {...pageProps}>
</ContentfulLivePreviewProvider>
)
To enable Content Source Maps using the Contentful Client SDK, simply enable includeContentSourceMaps
in the client:
export const clientPreview = createClient({
space: process.env.CONTENTFUL_SPACE_ID!,
accessToken: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN!,
host: "preview.contentful.com",
alphaFeatures: {
includeContentSourceMaps: true
}
});
Inspector mode will now activate automatically. Please make sure to use Contentful.js version v10.11.0 or above.
Please be aware that without the Contentful Client SDK, certain protections, such as automatically requesting the required 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.
Add &includeContentSourceMaps=true
to the URL
fetch("https://preview.contentful.com/spaces/:spaceId/environments/:envId/entries&includeContentSourceMaps=true",
{
method: "GET",
headers: {
Authorization: "Bearer YOUR_ACCESS_TOKEN",
Content-Type: "application/json",
},
}
)
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 inspector mode.
import { encodeCPAResponse } from '@contentful/live-preview';
const dataWithAutoTagging = encodeCPAResponse(data);
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 splitEncoding
function provided by the Live Preview SDK to retrieve the content and remove any hidden metadata.
import { splitEncoding } from '@contentful/live-preview';
const { cleaned, encoded } = splitEncoding(text);
Images will get automatically tagged if you provide an alt attribute with the asset title or description.
To stop using manual tags while using Content Source Maps:
<ContentfulLivePreviewProvider experimental={{ ignoreManuallyTaggedElements: true }} />
For usage with @apollo/client, a custom link is needed to add the extensions to forward the extionsions to the response. Example
splitEncoding
function from the Live Preview SDK.4/30/24
)2024-04-30T12:34:59Z
)FAQs
Base SDK for building Content Source Maps with Contentful
The npm package @contentful/content-source-maps receives a total of 144,902 weekly downloads. As such, @contentful/content-source-maps popularity was classified as popular.
We found that @contentful/content-source-maps demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.