@creative-web-solution/prismic-connector

Prismic.io connector

This generic bundle only works with the website socle.

• Dependencies
• Configuration
• Connector
• Middleware

Dependencies

• @prismicio/client
• prismic-dom

Configuration

Configuration object:

const connector = new PrismicConnector({
    "endpoint":        "https://MY-REPOSITORY.cdn.prismic.io/api/v2",
    "accessToken":     "secret-access-token",
    "addToTwigLocals": false
})

• In endpoint, set the url of your repository.
• If your repository need an access token, set it in accessToken. Otherwise, remove the property or set it to null.
• addToTwigLocals: if true, add the PrismicDOM object to the Twig context.

Connector

const connector = new PrismicConnector( settings );
const prismicAPI = await connector.connect( request, response );

const result = await prismicAPI.query(
    prismicAPI.Prismic.Predicates.at( 'document.type', 'homepage' )
);

Middleware

Route

export default [
    {
        "name":   "some.route",
        "route":  AppPath.getUrlWithBasePath( '/path' ),
        "method": "get",
        "middlewares": [
            addMiddleware({
                "middlewarePath": "@creative-web-solution/prismic-connector/PrismicConnectorMiddleware",
                "data": {
                    "endpoint":        "https://MY-REPOSITORY.cdn.prismic.io/api/v2",
                    "accessToken":     "secret-access-token",
                    "addToTwigLocals": false
                }
            }),
            ...
        ]
    }
]

Render in controller

Controller:

import BaseController             from '@core/Controller/Base/BaseController';
import PrismicConnectorMiddleware from '@creative-web-solution/prismic-connector/PrismicConnectorMiddleware';


export default class PrismicController extends BaseController {

    #linkResolver( doc ) {
        // Define the url depending on the document type
        if ( doc.type === 'page' ) {
            return '/page/' + doc.uid;
        }
        else if ( doc.type === 'blog_post' ) {
            return '/blog/' + doc.uid;
        }

        // Default to homepage
        return '/';
    }

    async index({ middlewares }) {
        const PRISMIC     = middlewares[ PrismicConnectorMiddleware.MIDDLEWARE_NAME ];
        const PRISMIC_API = PRISMIC.API;

        const QUERY_RESULT = await PRISMIC_API.query(
            PRISMIC.Prismic.Predicates.at( 'document.type', 'homepage' )
        );

        const DOCUMENT = QUERY_RESULT?.results?.[ 0 ];

        if ( !DOCUMENT ) {
            this.response.status( 404 );
            this.next();
            return;
        }

        return this.render( 'my-template.html.twig', {
                "title": PRISMIC.PrismicDOM.RichText.asText( DOCUMENT.data.title ),
                "intro": PRISMIC.PrismicDOM.RichText.asHtml( DOCUMENT.data.intro, this.#linkResolver )
            }
        );
    }
}

Twig:

<h1>{{ title }}</h1>
<div>{{ intro }}</div>

Render in Twig

You must set addToTwigLocals to true in the configuration.

Controller:

import BaseController             from '@core/Controller/Base/BaseController';
import PrismicConnectorMiddleware from '@creative-web-solution/prismic-connector/PrismicConnectorMiddleware';


export default class PrismicController extends BaseController {

    #linkResolver( doc ) {
        // Define the url depending on the document type
        if ( doc.type === 'page' ) {
            return '/page/' + doc.uid;
        }
        else if ( doc.type === 'blog_post' ) {
            return '/blog/' + doc.uid;
        }

        // Default to homepage
        return '/';
    }

    async index({ middlewares }) {
        const PRISMIC     = middlewares[ PrismicConnectorMiddleware.MIDDLEWARE_NAME ];
        const PRISMIC_API = PRISMIC.API;

        const QUERY_RESULT = await PRISMIC_API.query(
            PRISMIC.Prismic.Predicates.at( 'document.type', 'homepage' )
        );

        const DOCUMENT = QUERY_RESULT?.results?.[ 0 ];

        if ( !DOCUMENT ) {
            this.response.status( 404 );
            this.next();
            return;
        }

        PRISMIC.setResolver( this.#linkResolver );

        return this.render( 'pages/prismic.html.twig', {
                "document": DOCUMENT
            }
        );
    }
}

Twig:

<h1>{{ PrismicDOM.RichText.asText( document.data.title ) }}</h1>
<div><b>{{ PrismicDOM.RichText.asHtml( document.data.intro, PrismicCtx.linkResolver ) }}</b></div>