{"_id":"@danielbrierton/gatsby-source-prismic","_rev":"1-4d2f672078b72f7038216fd7e4fa4286","name":"@danielbrierton/gatsby-source-prismic","dist-tags":{"release-ref":"2.3.0-release-ref","latest":"2.3.0-release-ref"},"versions":{"2.3.0-release-ref":{"name":"@danielbrierton/gatsby-source-prismic","version":"2.3.0-release-ref","description":"Gatsby source plugin for building websites using prismic.io as a data source","scripts":{"prepublish":"npm run build","build":"babel src --out-dir .","format":"prettier --trailing-comma all --no-semi --single-quote --write 'src/**/*.js'","test":"echo \"Error: no test specified\" && exit 1","watch":"babel -w src --out-dir ."},"homepage":"https://github.com/angeloashmore/gatsby-source-prismic","repository":{"type":"git","url":"git+https://github.com/angeloashmore/gatsby-source-prismic.git"},"keywords":["gatsby","gatsby-plugin","gatsby-source-plugin"],"author":{"name":"Angelo Ashmore","email":"angelo.ashmore@walltowall.com"},"license":"MIT","dependencies":{"asyncro":"^3.0.0","gatsby-node-helpers":"^0.3.0","gatsby-source-filesystem":"^2.0.1","prismic-dom":"^2.1.0","prismic-javascript":"^1.1.5"},"devDependencies":{"babel-cli":"^6.24.1","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.0","prettier":"^1.14.3"},"gitHead":"716d204b830994c82fc40405829cb9ca0d542a41","bugs":{"url":"https://github.com/angeloashmore/gatsby-source-prismic/issues"},"_id":"@danielbrierton/gatsby-source-prismic@2.3.0-release-ref","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-T2ks1D9uZ43WmCtuq72N6l+74SWAFE6e5UOECjLNnJQKjrNB2R8rWeh7LqzR1DRHvlBUWIYxMDdiR3no21FkxA==","shasum":"af4f06bc9f962888c128dd7b8af89cb2ca17ce53","tarball":"https://registry.npmjs.org/@danielbrierton/gatsby-source-prismic/-/gatsby-source-prismic-2.3.0-release-ref.tgz","fileCount":8,"unpackedSize":44329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCi7sCRA9TVsSAnZWagAAefMP/RZisVso8PnnRbTMCqzL\n/FFeywmdKI7TAoOVpLMOTKopz31H7tzHftqbOZUQR5v89lLFHHr3HJo7Pvgt\n+zRb4BG7TCqbWFSpGI9Wo1wmjnRkiLwnlxouq3oFgSMMbQn14pSEqvsrG0aO\nDNFrUiMTtjSZnSeWp634eEJYcxmkrUHULFiNSRC1oz+0iXgy046UdCPyYEeE\ne919Zeu7jvSJ1m4F397m2cNcgUL/c+HNXGRPyjl5bRz7MSBCw9S8hRz1dSCc\nlYe8b8oysU0+FCTPHMus/pXK1KNrEd2bsd8GUotd9EwqP9Jmv7nx0XlfGqJI\nV1OGp/fEFSDGwzvjK2P2kn8qGpNO2ivLfgf+nG56//bGJS+tK68dvod8ssbO\nTIgb1l9e4NAAOQsynwuzZMKjAzYfwj2hkrrB+mFcO9o1UyXNRLAqJ4WstKIk\nvtVjMcDAbRDy8lHF6GTTDgIdGgWTBohxZuoS2pjk00gNfAiEkKwLQ8LzO4JV\n5AnXdV2DXKp5HzZtJNYdXwZqM7IXkZP0w5b7B16XK1ChPSTlsn55ONpgD5os\nDR9DEJu2gqYDSZKUvq27Ir9h9nt8jbW7fNaWub4aUHJzVu0w/8szvNmi9p8q\nBt/KrYt8gf04THHpfrDKSAoFjW5xfIUiXpJkFv95o7pEt6tXZaKmjSZlauwD\nq2Xz\r\n=W6V4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3M3XL9vYCHnRztGGUVlqbrjJMN36kHLhcLML/o/xLTgIhALC7DvmA/9M2+pHPbtCAK5LH8A0Z814QMyy0C8VqL6C8"}]},"maintainers":[{"name":"danielbrierton","email":"daniel@brierton.me"}],"_npmUser":{"name":"danielbrierton","email":"daniel@brierton.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-source-prismic_2.3.0-release-ref_1560948459906_0.07397859300357945"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-19T12:47:39.878Z","2.3.0-release-ref":"2019-06-19T12:47:40.082Z","modified":"2022-04-05T02:40:37.266Z"},"maintainers":[{"name":"danielbrierton","email":"daniel@brierton.me"}],"description":"Gatsby source plugin for building websites using prismic.io as a data source","homepage":"https://github.com/angeloashmore/gatsby-source-prismic","keywords":["gatsby","gatsby-plugin","gatsby-source-plugin"],"repository":{"type":"git","url":"git+https://github.com/angeloashmore/gatsby-source-prismic.git"},"author":{"name":"Angelo Ashmore","email":"angelo.ashmore@walltowall.com"},"bugs":{"url":"https://github.com/angeloashmore/gatsby-source-prismic/issues"},"license":"MIT","readme":"# gatsby-source-prismic\n\nSource plugin for pulling data into [Gatsby][gatsby] from [prismic.io][prismic]\nrepositories.\n\n## Features\n\n- Supports Rich Text fields, slices, and content relation fields\n- Supports `gatsby-transformer-sharp` and `gatsby-image` for image fields\n- Utilizes `prismic-dom` to provide HTML and link values so you don't have to\n  use `prismic-dom` directly\n\n## Install\n\n```sh\nnpm install --save gatsby-source-prismic\n```\n\n## How to use\n\n```js\n// In your gatsby-config.js\nplugins: [\n  /*\n   * Gatsby's data processing layer begins with “source”\n   * plugins. Here the site sources its data from prismic.io.\n   */\n  {\n    resolve: 'gatsby-source-prismic',\n    options: {\n      // The name of your prismic.io repository. This is required.\n      // Example: 'gatsby-source-prismic-test-site' if your prismic.io address\n      // is 'gatsby-source-prismic-test-site.prismic.io'.\n      repositoryName: 'gatsby-source-prismic-test-site',\n\n      // An API access token to your prismic.io repository. This is required.\n      // You can generate an access token in the \"API & Security\" section of\n      // your repository settings. Setting a \"Callback URL\" is not necessary.\n      // The token will be listed under \"Permanent access tokens\".\n      accessToken: 'example-wou7evoh0eexuf6chooz2jai2qui9pae4tieph1sei4deiboj',\n\n      // The ID of the release you want to build from. Your access token must\n      // allow for access to releases. This is particularly useful for use on\n      // a staging branch for an upcoming release.\n      // The ID can be found in the URL for a given release. Example: 'abcdef'\n      // if the URL is https://my-repo.prismic.io/documents/upcoming~r=abcdef/\n      releaseId: 'abcdef',\n\n      // Set a link resolver function used to process links in your content.\n      // Fields with rich text formatting or links to internal content use this\n      // function to generate the correct link URL.\n      // The document node, field key (i.e. API ID), and field value are\n      // provided to the function, as seen below. This allows you to use\n      // different link resolver logic for each field if necessary.\n      // See: https://prismic.io/docs/javascript/query-the-api/link-resolving\n      linkResolver: ({ node, key, value }) => doc => {\n        // Your link resolver\n      },\n\n      // Set a list of links to fetch and be made available in your link\n      // resolver function.\n      // See: https://prismic.io/docs/javascript/query-the-api/fetch-linked-document-fields\n      fetchLinks: [\n        // Your list of links\n      ],\n\n      // Set an HTML serializer function used to process formatted content.\n      // Fields with rich text formatting use this function to generate the\n      // correct HTML.\n      // The document node, field key (i.e. API ID), and field value are\n      // provided to the function, as seen below. This allows you to use\n      // different HTML serializer logic for each field if necessary.\n      // See: https://prismic.io/docs/nodejs/beyond-the-api/html-serializer\n      htmlSerializer: ({ node, key, value }) => (\n        type,\n        element,\n        content,\n        children,\n      ) => {\n        // Your HTML serializer\n      },\n\n      // Set a default language when fetching documents. The default value is\n      // '*' which will fetch all languages.\n      // See: https://prismic.io/docs/javascript/query-the-api/query-by-language\n      lang: '*',\n\n      // Set a function to determine if images are downloaded locally and made\n      // available for gatsby-transformer-sharp for use with gatsby-image.\n      // The document node, field key (i.e. API ID), and field value are\n      // provided to the function, as seen below. This allows you to use\n      // different logic for each field if necessary.\n      // This defaults to always return true.\n      shouldNormalizeImage: ({ node, key, value }) => {\n        // Return true to normalize the image or false to skip.\n      },\n    },\n  },\n]\n```\n\n## How to query\n\nYou can query nodes created from Prismic using GraphQL like the following:\n\n**Note**: Learn to use the GraphQL tool and Ctrl+Spacebar at\n<http://localhost:8000/___graphql> to discover the types and properties of your\nGraphQL model.\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        uid\n        first_publication_date\n        last_publication_date\n        data {\n          title {\n            text\n          }\n          content {\n            html\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nAll documents are pulled from your repository and created as\n`prismic${contentTypeName}` and `allPrismic${contentTypeName}`, where\n`${contentTypeName}` is the API ID of your document's content type.\n\nFor example, if you have `Product` as one of your content types, you will be\nable to query it like the following:\n\n```graphql\n{\n  allPrismicProduct {\n    edges {\n      node {\n        id\n        data {\n          name\n          price\n          description {\n            html\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Query Rich Text fields\n\nData from fields with rich text formatting (e.g. headings, bold, italic) is\ntransformed to provide HTML and text versions. This uses the official\n[prismic-dom][prismic-dom] library and the `linkResolver` and `htmlSerializer`\nfunctions from your site's `gatsby-node.js` to create the HTML and text fields.\n\n**Note**: If you need to access the raw data, the original data is accessible\nusing the `raw` field, though use of this field is discouraged.\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          title {\n            text\n          }\n          content {\n            html\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Query Link fields\n\nLink fields are processed using the official [prismic-dom][prismic-dom] library\nand the `linkResolver` function from your site's `gatsby-node.js`. The resolved\nURL is provided at the `url` field.\n\nIf the link type is a web link (i.e. a URL external from your site), the URL is\nprovided without additional processing.\n\nAll other URL fields, such as `target`, `lang`, and `isBroken`, are provided on\nthe field, as well.\n\nThe `target` field defaults to an empty string. This allows you to always query\nthe `target` field even if it is not set in Prismic.\n\n**Note**: If you need to access the raw data, the original data is accessible\nusing the `raw` field, though use of this field is discouraged.\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          featured_post {\n            url\n            target\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Query Content Relation fields\n\nContent Relation fields relate a field to another document. Since fields from\nwithin the related document is often needed, the document data is provided at\nthe `document` field. The resolved URL to the document using the official\n[prismic-dom][prismic-dom] library and the `linkResolver` function from your\nsite's `gatsby-node.js` is also provided at the `url` field.\n\n**Note**: Data within the `document` field is wrapped in an array. Due to the\nmethod in which Gatsby processes one-to-one node relationships, this\nwork-around is necessary to ensure the field can accommodate different content\ntypes. This may be fixed in a later Gatsby relase.\n\nQuerying data on the `document` field is handled the same as querying slices.\nPlease read the [Query slices](#query-slices) section for details.\n\n**Note**: If you need to access the raw data, the original data is accessible\nusing the `raw` field, though use of this field is discouraged.\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          featured_post {\n            url\n            document {\n              __typename\n              ... on PrismicPost {\n                data {\n                  title {\n                    text\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Query slices\n\nPrismic slices allow you to build a flexible series of content blocks. Since\nthe content structure is dynamic, querying the content is handled differently\nthan other fields.\n\nTo access slice fields, you need to use GraphQL [inline\nfragments][graphql-inline-fragments]. This requires you to know types of nodes.\nThe easiest way to get the type of nodes is to use the `/___graphql` debugger\nand run the below query (adjust the document type and field name).\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          body {\n            __typename\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nWhen you have node type names, you can use them to create inline fragments.\n\nFull example:\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          body {\n            __typename\n            ... on PrismicPageBodyRichText {\n              text {\n                html\n              }\n            }\n            ... on PrismicPageBodyQuote {\n              quote {\n                html\n              }\n              credit {\n                text\n              }\n            }\n            ... on PrismicPageBodyFootnote {\n              content {\n                html\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Query direct API data as a fallback\n\nIf you find you cannot query the data you need through the GraphQL interface,\nyou can get the raw response from the [prismic-javascript][prismic-javascript]\nAPI using the `dataString` field.\n\nThis field contains the whole node's original data before processing as a\nstring generated using `JSON.stringify`.\n\nThis is absolutely discouraged as it defeats the purpose of Gatsby's GraphQL\ndata interface, but it is available if necessary\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        dataString\n      }\n    }\n  }\n}\n```\n\n### Image processing\n\nTo use image processing you need `gatsby-transformer-sharp`,\n`gatsby-plugin-sharp`, and their dependencies `gatsby-image` and\n`gatsby-source-filesystem` in your `gatsby-config.js`.\n\nYou can apply image processing to any image field on a document. Image\nprocessing of inline images added to Rich Text fields is currently not\nsupported.\n\nTo access image processing in your queries, you need to use this pattern, where\n`...ImageFragment` is one of the [`gatsby-transformer-sharp`\nfragments][gatsby-image-fragments]:\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          imageFieldName {\n            localFile {\n              childImageSharp {\n                ...ImageFragment\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nFull example:\n\n```graphql\n{\n  allPrismicPage {\n    edges {\n      node {\n        id\n        data {\n          imageFieldName {\n            localFile {\n              childImageSharp {\n                resolutions(width: 500, height: 300) {\n                  ...GatsbyImageSharpResolutions_withWebp\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nTo learn more about image processing, check the documentation of\n[gatsby-plugin-sharp][gatsby-plugin-sharp].\n\n## Site's `gatsby-node.js` example\n\n```js\nconst path = require('path')\n\nexports.createPages = async ({ graphql, actions }) => {\n  const { createPage } = actions\n\n  const pages = await graphql(`\n    {\n      allPrismicPage {\n        edges {\n          node {\n            id\n            uid\n            template\n          }\n        }\n      }\n    }\n  `)\n\n  const pageTemplates = {\n    Light: path.resolve('./src/templates/light.js'),\n    Dark: path.resolve('./src/templates/dark.js'),\n  }\n\n  pages.data.allPrismicPage.edges.forEach(edge => {\n    createPage({\n      path: `/${edge.node.uid}`,\n      component: pageTemplates[edge.node.template],\n      context: {\n        id: edge.node.id,\n      },\n    })\n  })\n}\n```\n\n[gatsby]: https://www.gatsbyjs.org/\n[prismic]: https://prismic.io/\n[prismic-dom]: https://github.com/prismicio/prismic-dom\n[prismic-javascript]: https://github.com/prismicio/prismic-javascript\n[graphql-inline-fragments]: http://graphql.org/learn/queries/#inline-fragments\n[gatsby-plugin-sharp]: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp\n[gatsby-image-fragments]: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image#gatsby-transformer-sharp\n","readmeFilename":"README.md"}