Intergrate Prismic.io

[M4TThys123]

Primsic.io connection

We gaan gebruik maken van twee packages om te werken met Prismic in Svelte.

• @prismicio/client is voor het fetching van content uit de API

npm install -D @prismicio/client

[M4TThys123]

prismicClient.js

Maak vervolgens een nieuwe directory in /src, in /vendors genaamd /lib. Daarin maak je een nieuwe file genaamd prismicClient.js, en plak deze code:

~/src/lib/vendors/prismicClient.js

import * as prismic from '@prismicio/client'

// Update your repository name here
const repositoryName = ''

const createClient = (params) => {
  const client = prismic.createClient(repositoryName, params)

  return client
}

export default createClient

Het prismicClient.js file zorgt er voor dat je instellingen kunt meegeven voor je Prismic API connection.

[M4TThys123]

Fetch Prismic.io data

Nu gaan we een endpoint maken om content te fetchen van de repo. Maak het bestand +page.js, en plak deze code:

~/src/routes/+page.js

import createClient from '$lib/prismicio'

export async function get({ fetch }) {
  const client = createClient({ fetch })
  const document = await client.getByUID('page', 'homepage')

  if (document)
    return {
      body: {
        document,
      },
    }

  return {
    status: 404,
  }
}

Deze endpoint heet +Page.js. Deze queriet de API voor een homepage component. Als het een document vind, geeft het deze terug. Anders geeft het een error.

[M4TThys123]

Render data using @primicio/helpers package

• Install @primicio/helpers

npm install @primicio/helpers

+page.svelte

• Import @prismicio/helpers
• Add prismicH.asHTML

<script>
      import * as prismicH from "@prismicio/helpers";
      export let data;
      const textField = data.documents[0].data.ritch_text_field
</script>

{@html prismicH.asHTML(textField)}