{"_id":"@arcblock/gatsby-awesome-pagination","_rev":"4-7ca0f9ea14b4b3f787f3a695f34667a8","name":"@arcblock/gatsby-awesome-pagination","dist-tags":{"latest":"0.3.4"},"versions":{"0.3.4":{"name":"@arcblock/gatsby-awesome-pagination","version":"0.3.4","description":"An opinionated, more awesome approach to pagination in Gatsby","main":"lib/index.js","browser":"lib/components.js","scripts":{"prepack":"npm run build","build":"npm run prepack:babel && npm run prepack:flow","prepack:babel":"babel src/ -d lib","prepack:flow":"flow-copy-source src lib","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/GatsbyCentral/gatsby-plugin-awesome-pagination.git"},"bugs":{"url":"https://github.com/GatsbyCentral/gatsby-plugin-awesome-pagination/issues"},"homepage":"https://github.com/GatsbyCentral/gatsby-plugin-awesome-pagination#readme","keywords":["gatsby","gatsby-plugin","pagination"],"author":{"name":"Callum Macdonald"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-jest":"^23.6.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.7.0","flow-bin":"^0.72.0","flow-copy-source":"^1.3.0","jest":"^23.6.0"},"dependencies":{"lodash":"^4.17.10"},"peerDependencies":{"gatsby":"^2.0.0","react":"^16.0.0"},"gitHead":"e2642cc9f97c2af7df263ccb62c6d6cd4ccf5dd8","_id":"@arcblock/gatsby-awesome-pagination@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"wangshijun","email":"wangshijun2010@gmail.com"},"dist":{"integrity":"sha512-1QzBoGjYZa/o0XVsrvkoahxcBN1USiIYDOBMYnV9W4g+2Rzd/TmVExWc515NULyPAoa/e2g5C7X6r3HC++r3Vg==","shasum":"f1e8bd09e2af2c495bde709a8481583728b478e9","tarball":"https://registry.npmjs.org/@arcblock/gatsby-awesome-pagination/-/gatsby-awesome-pagination-0.3.4.tgz","fileCount":9,"unpackedSize":27786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHMroCRA9TVsSAnZWagAAspsP/27wwGg4tYRC6TWrcWpL\nsGDZLyfSV5O5NP/MI4L+tqlJkjnK2QYQN/RmYYto6cgJf5sGT6H5ghROEFWB\ngWC7yFWBkGsJt+HzJq5sYCdtA/oiIA/ZrX0QGVPXdDZ77tLCjxWX7qob+c74\n01GInp6PFGDGLgzzJkkMcL/i4xXnkmx8owtWPhOmZUwq5W19RKmbx0kdxPAD\nFc4pQIjVgWLIJyFwiQzWQl2HonTreB61g8PF4bqiNT1czoOBRDbPx7inK6bJ\nCWmNzFso72bY5hsXhE2Vb2ii774bQFh7/HLOUA5yNOISwRgNNApIWrSEV7jb\nVa26+JekLhIbGM1MbuaMy1L3n7PJTAR506sM+MkXdgeSxe/aknTgePp7Z5hh\nE4qC2m/fOBB8HW83Ju58znZSQVDibGYn5s3WJaeCVoSFDMnaUHgZzgibRy8X\nTwn/WHenTpLVZV65QByznrRvuo6Mpk6kmGicGLPerV5QsJqQc8HPTb+uPAgG\nJzCXH2nkHYA2Oiaz2BS/d2lffjZCewAV3eIYFciRX85T0yd3BPKJvxbZCgEl\nZZPaVl9H9VQbp8Nn/+Q6qgo//yKCuBoLwwznx87opyJfnUErgv8gJxHZi3jN\nOxr6FDW2a/J3I2iOiqFCDT3auT7woc8dwsO8o097bGLQ5Sc1ggdqcEmqZv/q\nwp6t\r\n=mrIX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGVTTTg2/IFjmXYvj38IaVVkcr+Y/ZteBK37grqlKBOAiEAm9j+lLc8snGcChANJvLQU8y3xFmZskpoOwX33plJrjo="}]},"maintainers":[{"name":"wangshijun","email":"wangshijun2010@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-awesome-pagination_0.3.4_1545390823272_0.6273410995731641"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-21T11:13:43.197Z","0.3.4":"2018-12-21T11:13:44.273Z","modified":"2022-04-04T15:17:06.548Z"},"maintainers":[{"email":"840501291@qq.com","name":"gxw"},{"email":"rob@arcblock.io","name":"mave99a"},{"email":"polunzh@gmail.com","name":"polunzh"},{"email":"wangshijun2010@gmail.com","name":"wangshijun"}],"description":"An opinionated, more awesome approach to pagination in Gatsby","homepage":"https://github.com/GatsbyCentral/gatsby-plugin-awesome-pagination#readme","keywords":["gatsby","gatsby-plugin","pagination"],"repository":{"type":"git","url":"git+https://github.com/GatsbyCentral/gatsby-plugin-awesome-pagination.git"},"author":{"name":"Callum Macdonald"},"bugs":{"url":"https://github.com/GatsbyCentral/gatsby-plugin-awesome-pagination/issues"},"license":"MIT","readme":"Awesome Pagination for Gatsby\n---\n\nThis plugin is under active development, all feedback / comments welcome via\nGitHub issues.\n\n## Contents\n\n* [QuickStart](#quick-start)\n* [Introduction](#introduction)\n* [Philosophy](#philosophy)\n* [Notes](#notes)\n\n## Quick start\n\nOpen `gatsby-node.js` and import:\n\n```javascript\nimport { paginate } from 'gatsby-awesome-pagination';\n```\n\nThen, use `paginate()` like so:\n\n```javascript\nexports.createPages = ({ actions, graphql }) => {\n  const { createPage } = actions;\n\n  // Fetch your items (blog posts, categories, etc).\n  const blogPosts = doSomeMagic();\n\n  // Create your paginated pages\n  paginate({\n    createPage, // The Gatsby `createPage` function\n    items: blogPosts, // An array of objects\n    itemsPerPage: 10, // How many items you want per page\n    pathPrefix: '/blog', // Creates pages like `/blog`, `/blog/2`, etc\n    component: path.resolve('...'), // Just like `createPage()`\n  })\n}\n```\n\nNow in your page query you can use the pagination context like so:\n\n```javascript\nexport const pageQuery = graphql`\n  query ($skip: Int!, $limit: Int!) {\n    allMarkdownRemark(\n      sort: { fields: [frontmatter___date], order: DESC }\n      skip: $skip // This was added by the plugin\n      limit: $limit // This was added by the plugin\n    ) {\n      ...\n    }\n  }\n`\n```\n\nThen inside your component, you can link to next / previous pages, and so on:\n\n```javascript\nconst BlogIndex = (props) => {\n  return (\n    <div>\n      {data.allMarkdownRemark.edges.map(edge => <PostItem item={edge.node}/>)}\n      <div>\n        {/* previousPageLink and nextPageLink were added by the plugin */ }\n        <Link to={props.pathContext.previousPagePath}>Previous</Link>\n        <Link to={props.pathContext.nextPagePath}>Next</Link>\n      </div>\n    </div>\n  )\n}\n```\n\nFor a more detailed example, see [docs/examples.md](docs/examples.md)\n\n## Introduction\n\nLove Gatsby, wanna paginate. Sweet, that's exactly what this package is for.\n\nWe differ from other pagination options as follows:\n\n* Don't abuse `context` to pass data into components\n* Pass only pagination context via `context`\n* Provide helpers for next / previous links\n\nThere are 2 types of pagination. You have 80 blog posts and you want to show\nthem 15 at a time on pages like `/blog`, `/blog/2`, `/blog/3`, etc. You do this\nwith `paginate()`. Then on each blog post, you want to link to the previous and\nnext blog posts. You do this with `createPagePerItem()`.\n\n## Philosophy\n\nWhy did we create this plugin? We felt that the other Gatsby pagination plugins\nwere using an approach that goes against the principles of GraphQL. One of the\nadvantages of GraphQL is to be able to decide what data you need right where you\nuse that data. That's how Gatsby works with page queries.\n\nBy putting all the data into `context`, the other pagination plugins break this.\nNow you need to decide what data you require for each page inside\n`gatsby-node.js` and not inside your page query.\n\nWe also felt that there were some helpers missing. Generating links to the next\nand previous pages.\n\nThis plugin aims to make it easy to paginate in Gatsby **properly**. No\ncompromises.\n\n## API\n\nBoth `paginate()` and `createPagePerItem()` take a single argument, an object.\nThey share the following keys (* = required):\n\n* `createPage`* - The `createPage` function from `exports.createPages`\n* `component`* - The value you would pass to `createPage()` as `component` [Gatsby docs here](https://www.gatsbyjs.org/docs/bound-action-creators/#createPage)\n* `items`* - An array of objects, the items you want to paginate over\n\n### `paginate()`\n\nIn addition to the arguments above, `paginate()` also supports:\n\n* `itemsPerPage`* - An integer, how many items should be displayed on each page\n* `itemsPerFirstPage` - An integer, how many items should be displayed on the **first** page\n* `pathPrefix`* - A string, the path like `/blog` (or string returning function), to which `/2`, `/3`, etc will be added\n* `context` - A base context object which is extended with the pagination context values\n\nExample:\n\n```javascript\npaginate({\n  createPage: boundActionCreators.createPage,\n  component: path.resolve('./src/templates/blog-index.js'),\n  items: blogPosts,\n  itemsPerPage: 15,\n  itemsPerFirstPage: 3,\n  pathPrefix: '/blog'\n})\n```\n\nEach page's `context` automatically receives the following values:\n\n* `pageNumber` - The page number (starting from 0)\n* `humanPageNumber` - The page number (starting from 1) for human consumption\n* `skip` - The $skip you can use in a GraphQL query\n* `limit` - The $limit you can use in a GraphQL query\n* `numberOfPages` - The total number of pages\n* `previousPagePath` - The path to the previous page or `undefined`\n* `nextPagePath` - The path to the next page or `undefined`\n\n#### pathPrefix()\n\nFor more advanced use cases, you can supply a function to `pathPrefix`. This\nfunction will receive a single object as its only argument, that object will\ncontain `pageNumber` and `numberOfPages`, both integers.\n\nA simple example implementation could be:\n\n```javascript\nconst pathPrefix = ({ pageNumber, numberOfPages }) =>\n  pageNumber === 0 ? '/blog' : '/blog/page'\n```\n\nThis example produces pages like `/blog`, `/blog/page/2`, `/blog/page/3`, etc.\n\n### `createPagePerItem()`\n\nWARNING: This API is under active development and will probably change. USE WITH\nCAUTION.\n\nIn addition to the arguments above, `createPagePerItem()` also accepts:\n\n* `itemToPath`* - A function that takes one object from `items` and returns the\n  `path` for this `item`\n* `itemToId`* - A function that takes one object from `items` and returns the\n  item's ID\n\n**NOTE**: Both `itemToPath` and `itemToId` also accept a string with the path to\nthe value, for example `node.frontmatter.permalink` or `node.id`.\n\n**NOTE**: If an individual `item` has a property called `context`, and that\nproperty is an object, then it's own properties will be added to the page's\n`context` for that item.\n\nExample:\n\n```javascript\ncreatePagePerItem({\n  createPage: boundActionCreators.createPage,\n  component: path.resolve('./src/templates/blog-post.js'),\n  items: blogPosts,\n  itemToPath: 'node.frontmatter.permalink',\n  itemToId: 'node.id'\n})\n```\n\nEach page's `context` automatically receives the following values:\n\n* `previousPagePath` - The path to the previous page or `undefined`\n* `previousItem` - A copy of the previous element from `items`\n* `previousPageId` - The ID of the previous page\n* `nextPagePath` - The path to the next page or `undefined`\n* `nextItem` - A copy of the next element from `items`\n* `nextPageId` - The ID of the next page\n\n## Notes\n\n### Flow\n\nThis plugin is written using [flow](https://flow.org/). There are some\nlimitations when using flow and [lodash](https://lodash.com/). Specifically\n[this issue](https://github.com/facebook/flow/issues/34). In many cases we use\n`$FlowExpectError` and explicitly define the type of something to workaround. A\nmore elegant solution does not currently seem to exist. Any input on improving\nthe typing is greatly appreciated in the plugin's issues.\n\n### Contributors\n\nThanks to the following for their contributions:\n\n* https://github.com/Pyrax\n* https://github.com/JesseSingleton\n* https://github.com/silvenon\n","readmeFilename":"README.md"}