This should log your formatted text.
}; init(); ``` -------------------------------- ### HTML Serializer Function Example Source: https://prismic.io/docs/prismic-helpers-v2-migration-guide This is an example of an HTML Serializer function used with `prismic-dom`'s `RichText.asHtml()`. ```tsx import { Element } from "@prismicio/helpers"; function htmlSerializer(type, element, content, children) { switch (type) { case Element.paragraph: { return `${children}
`; } } } ``` -------------------------------- ### Fetching Documents with @prismicio/client Source: https://prismic.io/docs/content-api Example of using the `@prismicio/client` library to fetch documents by type, abstracting away manual URL construction and ref fetching. ```typescript import * as prismic from "@prismicio/client" const client = prismic.createClient("your-repo-name") const posts = await client.getAllByType("post", { page: 2, pageSize, 5 }) ``` -------------------------------- ### Create Prismic Client and Filter by Date and Type (JavaScript) Source: https://prismic.io/docs/content-api Example using @prismicio/client SDK to create a client and perform a query filtered by date and document type. ```javascript import * as prismic from "@prismicio/client"; const endpoint = prismic.getEndpoint("your-repo-name"); const client = prismic.createClient(endpoint); const init = async () => { client.get({ filters: [ prismic.filter.dateYear("document.last_publication_date", 2020), prismic.filter.at("document.type", "blog-post"), ], }); }; init(); ``` -------------------------------- ### Timestamp field API response example Source: https://prismic.io/docs/fields/timestamp This is an example of how a timestamp field is represented in the Content API response. ```json { "example_timestamp": "2030-01-31:05:00:00+0000" } ``` -------------------------------- ### Using @prismicio/client for Filtering Source: https://prismic.io/docs/content-api Demonstrates how to use the @prismicio/client SDK to build and execute filtered queries. ```APIDOC ## Client-Side Filtering with @prismicio/client ### Description This section shows how to use the Prismic client library in JavaScript to filter documents programmatically. ### Method GET (handled by the client) ### Endpoint (Handled by the client, typically `https://your-repo-name.cdn.prismic.io/api/v2/documents/search`) ### Parameters (Managed by the `prismic.filter` module) ### Request Example (JavaScript) ```tsx import * as prismic from "@prismicio/client"; const endpoint = prismic.getEndpoint("your-repo-name"); const client = prismic.createClient(endpoint); const init = async () => { const results = await client.get({ filters: [ prismic.filter.dateYear("document.last_publication_date", 2020), prismic.filter.at("document.type", "blog-post"), ], }); console.log(results.items); }; init(); ``` ### Response #### Success Response (200) - **items** (array) - An array of document objects matching the query. ### Related Documentation - [@prismicio/client technical reference](https://prismic.io/docs/technical-reference/prismicio-client.md) ``` -------------------------------- ### GraphQL Query - Example Single Document Source: https://prismic.io/docs/graphql-technical-reference An example GraphQL query to fetch a single document by its UID and language. ```APIDOC query ExampleSingleQuery { # query definition example_singleton_type(uid: "example", lang: "en-US") { # root field with arguments example_title } } ``` -------------------------------- ### Set up Prismic Client Source: https://prismic.io/docs/sveltekit/with-slice-machine Centralize your Prismic client setup in `$lib/prismicio.ts`. This includes route resolvers and default client settings. ```typescript import { createClient as baseCreateClient, type Route, } from "@prismicio/client"; import { enableAutoPreviews, type CreateClientConfig, } from "@prismicio/svelte/kit"; import sm from "../../slicemachine.config.json"; export const repositoryName = sm.repositoryName; // TODO: Update with your route resolvers. const routes: Route[] = [ { type: "homepage", path: "/" }, { type: "page", path: "/:uid" }, { type: "blog_post", path: "/blog/:uid" }, ]; export function createClient({ cookies, ...config }: CreateClientConfig = {}) { const client = prismic.createClient(repositoryName, { routes, ...config, }); enableAutoPreviews({ client, cookies }); return client; } ``` -------------------------------- ### JavaScript URL Constructor Example Source: https://prismic.io/docs/content-api Example of using the JavaScript URL constructor to build API request URLs. ```APIDOC ## JavaScript URL Constructor ### Description Utilize the built-in `URL()` constructor in JavaScript to manage search parameters for API requests. ### Code Example ```tsx const url = new URL( "https://your-repo-name.cdn.prismic.io/api/v2/search/documents" ); url.searchParams.append("ref", "X71BaxIAACMA0NsN"); url.searchParams.append("page", 2); url.searchParams.append("pageSize", 5); console.log(url.href); // Output: https://your-repo-name.cdn.prismic.io/api/v2/search/documents?ref=X71BaxIAACMA0NsN&page=2&pageSize=5 ``` ``` -------------------------------- ### Create Prismic Client with Route Resolvers Source: https://prismic.io/docs/route-resolver Initializes the Prismic client with a basic route resolver for blog posts. This example demonstrates fetching a blog post and accessing its generated URL. ```javascript import { createClient } from "@prismicio/client"; const client = createClient("example-prismic-repo", { routes: [ { type: "blog_post", path: "/blog/:uid" }, ], }); const blogPost = await client.getByUID("blog_post", "my-first-post"); blogPost.url; // => "/blog/my-first-post" ``` -------------------------------- ### Create Prismic Client with Configuration Source: https://prismic.io/docs/technical-reference/prismicio-client/v7 Instantiate a Prismic client with your repository name and access token. This is the basic setup for interacting with the Prismic API. ```typescript const client = createClient("example-prismic-repo", { accessToken: "example-access-token", }); ``` -------------------------------- ### Install Internationalization Packages Source: https://prismic.io/docs/sveltekit Install the 'negotiator' and '@formatjs/intl-localematcher' npm packages required for locale detection and matching in your SvelteKit application. ```bash npm install negotiator @formatjs/intl-localematcher ``` -------------------------------- ### Create Prismic Client and Fetch Document Source: https://prismic.io/docs/slice-machine Demonstrates how to create a Prismic client instance and fetch a document by its UID using the client. The fetched document is automatically typed. ```typescript import { createClient } from "@prismicio/client"; const client = createClient("example-prismic-repo"); const blogPost = await client.getByUID("blog_post", "my-first-post"); // ^ Typed as BlogPostDocument ``` -------------------------------- ### Create a SvelteKit Project using Vite Source: https://prismic.io/docs/sveltekit Use this command to scaffold a new SvelteKit project. You can also use an existing project. ```sh npx sv create my-website cd my-website ``` -------------------------------- ### Get Help for Prismic CLI Source: https://prismic.io/docs/cli Use the --help flag to view all available commands and options for the Prismic CLI. ```sh npx prismic --help ``` -------------------------------- ### Full Content API Query with Parameters Source: https://prismic.io/docs/content-api An example of a complete Content API query URL including a ref and multiple search parameters. ```bash https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=X71BaxIAACMA0NsN&page=2&pageSize=5 ``` -------------------------------- ### Create a Prismic Client Source: https://prismic.io/docs/technical-reference/prismicio-client Create a Prismic client instance using `createClient`. This client is used for fetching content from a Prismic repository. It requires the repository name and an optional configuration object. ```javascript const client = createClient(repositoryName, config); ``` ```javascript const client = createClient("example-prismic-repo", { accessToken: "example-access-token", }); ``` -------------------------------- ### Get Image URL Source: https://prismic.io/docs/technical-reference/prismicio-helpers Use `asImageSrc` to get the URL of an image field. Image transformations can be applied by passing parameters. ```javascript prismicH.asImageSrc(document.data.example_image); ``` ```javascript prismicH.asImageSrc(document.data.example_image, { sat: -100, }); ``` ```javascript prismicH.asImageSrc(document.data.example_image, { auto: undefined, }); ``` ```javascript prismicH.asImageSrc(document.data.empty_image); ``` -------------------------------- ### Replace `query()` with `get()` Source: https://prismic.io/docs/prismic-client-v6-migration-guide Migrate from `query()` to `get()` by moving predicates into the `predicates` option. This change simplifies query construction. ```diff - const documents = client.query( - Prismic.Predicates.at('document.tags', 'food'), - { lang: 'fr-fr' } - ) + const documents = client.get({ + predicates: prismic.predicate.at('document.tags', 'food'), + lang: 'fr-fr', + }) ``` -------------------------------- ### Basic Content API Query with Ref Source: https://prismic.io/docs/content-api An example of a Content API query URL including a required ref for content versioning. ```bash https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=X71BaxIAACMA0NsN ``` -------------------------------- ### HTML Serializer Object Example Source: https://prismic.io/docs/prismic-helpers-v2-migration-guide This is an example of an HTML Serializer object, a new, easier-to-write format for `@prismicio/helpers`'s `asHTML()` function. ```tsx const htmlSerializer = { // Arguments can be destructured for each block type paragraph: ({ children }) => `${children}
`, }; ``` -------------------------------- ### Get Help for Prismic Commands Source: https://prismic.io/docs/cli Use the --help flag with specific commands or subcommands to get detailed information about their usage. ```sh npx prismic repo --help ``` ```sh npx prismic webhook create --help ``` -------------------------------- ### Repository API Response Example Source: https://prismic.io/docs/repository-api-technical-reference This is an example of the JSON response you can expect when querying the Repository API. It includes details about refs, types, languages, and more. ```json { "refs": [ { "id": "master", "ref": "ZG5h3BAAAB8AhmzJ", "label": "Master", "isMasterRef": true }, { "id": "ZIBvwhAAACMAgx9w", "ref": "ZIBvwxAAACEAgx93~ZIBJVRAAACMAgmBd", "label": "", "scheduledAt": 1696633200000 } ], "bookmarks": {}, "experiments": { "draft": [], "running": [] }, "types": { "home": "Home", "pages": "Pages" }, "languages": [ { "id": "en-us", "name": "English - United States" }, { "id": "en-gb", "name": "English - United Kingdom" } ], "forms": "// Omitted ", "oauth_initiate": "https://your-repo-name.prismic.io/auth", "oauth_token": "https://your-repo-name.prismic.io/auth/token", "tags": [], "license": "All Rights Reserved", "version": "482083b" } ``` -------------------------------- ### Explore Repositories Source: https://prismic.io/docs/mcp Use this prompt to list all repositories you have access to in Prismic. ```markdown What repositories do I have access to in Prismic? ``` -------------------------------- ### Run Prismic CLI without installation Source: https://prismic.io/docs/cli Use this command to run the Prismic CLI directly using npx without needing to install it globally. ```sh npx prismic ``` -------------------------------- ### Initialize Nuxt project with Prismic CLI Source: https://prismic.io/docs/nuxt Use the Prismic CLI to initialize a new Nuxt project with Prismic integration. This command installs necessary packages and configures your project. ```bash npx nuxi@latest init my-website cd my-website ``` ```bash npx prismic init ``` ```bash npx prismic init --repo your-domain ``` -------------------------------- ### Example Payload: Page Published Source: https://prismic.io/docs/webhooks This example demonstrates the structure of a webhook payload when a page is published. The `documents` array will contain the ID of the published page. ```APIDOC ## POST /webhooks/prismic ### Description This is an example of a webhook payload triggered when a page is published. The `documents` array contains the ID of the newly published page. ### Method POST ### Endpoint `/webhooks/prismic` ### Request Body - **type** (string) - Required - Must be "api-update". - **masterRef** (string) - Required - The master ref of the repository. - **releases** (object) - Required - An empty object if no releases were affected. - **masks** (object) - Required - An empty object if no masks were affected. - **tags** (object) - Required - An empty object if no tags were affected. - **experiments** (object) - Required - An empty object if no experiments were affected. - **documents** (string[]) - Required - An array containing the ID of the published page. - **domain** (string) - Required - Your Prismic repository name. - **apiUrl** (string) - Required - The URL of your Prismic repository. - **secret** (string | null) - Optional - The configured secret, if one exists. ### Request Example ```json { "type": "api-update", "masterRef": "X6qn-RIAACMAVge1", "releases": {}, "masks": {}, "tags": {}, "experiments": {}, "documents": ["X6LcjhAAAB8AUJwb"], "domain": "your-repo-name", "apiUrl": "https://your-repo-name.prismic.io/api", "secret": null } ``` ### Response #### Success Response (200) - **message** (string) - Confirmation message. #### Response Example ```json { "message": "Webhook received successfully." } ``` ``` -------------------------------- ### Get All Custom Types Source: https://prismic.io/docs/custom-types-api Use this GET request to retrieve all custom types from your Prismic repository. Ensure 'repository' and 'Authorization' headers are correctly set. ```bash curl --location --request GET 'https://customtypes.prismic.io/customtypes' \ --header 'repository: tutorial-series' \ --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjM2M3MTAzMTEwMDAwMWYwMGExYTZhMiIsInR5cGUiOiJ1c2VyIiwiZGF0ZSI6MTYxMzczNTY2NzIxNSwiaWF0IjoxNjEzNzM1NjY3fQ.Ex18_cuNtHes69me4pHQGLpiQ-OUbi42-qFxkZCG-yw' ```