@walltowall/gatsby-theme-ww-prismic

Gatsby theme providing a base for using Prismic as a datasource for Wall-to-Wall Gatsby websites.

Usage no npm install needed!

<script type="module">
  import walltowallGatsbyThemeWwPrismic from 'https://cdn.skypack.dev/@walltowall/gatsby-theme-ww-prismic';
</script>

README

@walltowall/gatsby-theme-ww-prismic

Gatsby theme providing a base for using Prismic as a datasource for Wall-to-Wall Gatsby websites.

Install

npm install --save @walltowall/gatsby-theme-ww-prismic

In addition to installing the theme, install all peer dependencies listed in package.json.

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: '@walltowall/gatsby-theme-ww-prismic',
    options: {
      // Path to the project's root directory. This is required and should be
      // set to `__dirname`.
      root: __dirname,

      // The name of your prismic.io repository. This is required.
      // Example: 'gatsby-source-prismic-test-site' if your prismic.io address
      // is 'gatsby-source-prismic-test-site.prismic.io'.
      repositoryName,

      // An API access token to your prismic.io repository. This is required.
      // You can generate an access token in the "API & Security" section of
      // your repository settings. Setting a "Callback URL" is not necessary.
      // The token will be listed under "Permanent access tokens".
      accessToken,

      // Set a link resolver function used to process links in your content.
      // Fields with rich text formatting or links to internal content use this
      // function to generate the correct link URL.
      // The document node, field key (i.e. API ID), and field value are
      // provided to the function, as seen below. This allows you to use
      // different link resolver logic for each field if necessary.
      // See: https://prismic.io/docs/javascript/query-the-api/link-resolving
      linkResolver = () => linkResolverPathFor,

      // Set a list of links to fetch and be made available in your link
      // resolver function.
      // See: https://prismic.io/docs/javascript/query-the-api/fetch-linked-document-fields
      fetchLinks = ['page.parent'],

      // Set an HTML serializer function used to process formatted content.
      // Fields with rich text formatting use this function to generate the
      // correct HTML.
      // The document node, field key (i.e. API ID), and field value are
      // provided to the function, as seen below. This allows you to use
      // different HTML serializer logic for each field if necessary.
      // See: https://prismic.io/docs/nodejs/beyond-the-api/html-serializer
      htmlSerializer,

      // Provide an object of Prismic custom type JSON schemas to load into
      // Gatsby. This is required.
      schemas,

      // Set a default language when fetching documents. The default value is
      // '*' which will fetch all languages.
      // See: https://prismic.io/docs/javascript/query-the-api/query-by-language
      lang,

      // Set a function to determine if images are downloaded locally and made
      // available for gatsby-transformer-sharp for use with gatsby-image.
      // The document node, field key (i.e. API ID), and field value are
      // provided to the function, as seen below. This allows you to use
      // different logic for each field if necessary.
      // This defaults to always return true.
      shouldNormalizeImage,

      // Set the prefix for the filename where type paths for your schemas are
      // stored. The filename will include the MD5 hash of your schemas after
      // the prefix.
      // This defaults to 'prismic-typepaths---${repositoryName}'.
      typePathsFilenamePrefix,

      // Define pages that should not be deleted and recreated with the UID in
      // context. Generally, this should be a list of pages not created by
      // Prismic.
      // This defaults to /reference/*, /404/
      pageOverrideBlacklist: [/\/reference\//, /\/404/],

      // Define which template pages use by setting metadata criteria. Each key
      // in the object represents a template filename in `src/templates/`.
      // Pages can be filtered using the following criteria:
      //   - metadataType: The page must have this metadata type.
      //   - tag: The page must have this tag.
      templates: {
        blogPost: { metadataType: 'PrismicPageMainBlogPost', tag: 'Blog Post' }
      },

      // Create a redirect at /admin to the Prismic repository.
      // This defaults to true.
      createAdminRedirection: true,
    },
  },
]