{"_id":"gatsby-theme-docz","_rev":"170-8e9e6281282f76296de0d90c8dadc88a","name":"gatsby-theme-docz","dist-tags":{"latest":"2.4.0","canary":"2.0.0-alpha.87","next":"2.3.3-alpha.0","alpha":"2.0.0-rc.23"},"versions":{"0.0.1":{"name":"gatsby-theme-docz","version":"0.0.1","main":"index.js","author":{"name":"christopherbiscardi","email":"chris@christopherbiscardi.com","url":"@chrisbiscardi"},"license":"MIT","_id":"gatsby-theme-docz@0.0.1","dist":{"shasum":"539e546bc882513e278bd4d4bc208f781c661ae3","integrity":"sha512-JxBokXtp1rmS6EugEOEnxaCcdZsxcMOO9RJPJ9fSs1aU+W8T7Y/ADu9CRfi9SpaN8t7RxJ8Cg1/1F9zef8fniQ==","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-0.0.1.tgz","fileCount":3,"unpackedSize":182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7pkKCRA9TVsSAnZWagAAPTkQAKCDq6i7NuMaoxJAl757\n9fWC43xAXwSMbxDADn98ZZhEB3LY5F5j5sbnZ5yYxMqRCCzOHDQ5qqOA+PMm\nPC7cynYLlbRGHAyZBTS7jXJKxRiNKtNCY7XUzQmgGT3gbrZKTYKaWDE99g5K\nai0EKeArW5UrIOHINV49XLmaz6E4pxL/pslYRgSBetEcfvzg6kX4K/vcu/+0\nLLx0NpuSJT7sm+tWMOmt4vDwJFgR/Yc3RXq27rE3JapzRlrA10oPIa0WZMqx\n3En/fVXOVIwhy+11tfhbSz1ssknZbOU/CbY2Tr5EDYvy6KOOD0ZUfv5KX5F9\njyQMWTSJ5EFiH7AeyL6grNw28ndn+FpGC3TObaxAc5HLZyJHeL8KTzjrIQr1\nYN1LKNtMwcuPTmRVa7T6NWASPnOyZ6Hq5KTaPMNvIcQHQ7e2r0fALuHEfqjY\nktAnVHXgGEKV12ZfE4xY5eEH68hSTxG1cUCfzgv6Uu2IBoimRUpE6kL+BlZE\nMhnlfSKEfqlwlDF9VJmwyfqC2ilxzuUeqJmCvrTmE31SKxpGYF5jDAjq9W3C\nSK+J+PFygZw6sNRHfktO65f+fI7PMIgrPt8VKUAmEDnSt5kXoOZkBDOo43dC\namaovCDG1DhlfAyWZs7IMaZTmr1YTLRhajxQ641R05QkI4rvB2JIaJeadDeC\n8fZO\r\n=QK29\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEW2YDricL4PUYls9jL1Ew/e36PvQ097LRoilq8HMWCJAiEAim3mmcZqNViotzvirUYX/AcPnXaNfWyT4aBgT1yJFdk="}]},"maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"}],"_npmUser":{"name":"biscarch","email":"chris@christopherbiscardi.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_0.0.1_1542363401722_0.5849626031693715"},"_hasShrinkwrap":false},"0.14.0-alpha.68":{"name":"gatsby-theme-docz","version":"0.14.0-alpha.68","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@emotion/core":"^10.0.7","@emotion/styled":"^10.0.7","babel-plugin-export-metadata":"0.14.0-alpha.68+852e2c7","change-case":"^3.1.0","chokidar":"^2.1.0","docz":"0.14.0-alpha.68+852e2c7","docz-core":"0.14.0-alpha.68+852e2c7","docz-theme-default":"0.14.0-alpha.68+852e2c7","fs-extra":"^7.0.1","gatsby":"^2.0.117","gatsby-mdx":"^0.3.5","gatsby-plugin-manifest":"^2.0.17","gatsby-plugin-react-helmet":"^3.0.6","prop-types":"^15.6.2","react":"^16.8.1","react-dom":"^16.8.1","react-helmet":"^5.2.0","rehype-docz":"0.14.0-alpha.68+852e2c7","rehype-slug":"^2.0.2","remark-docz":"0.14.0-alpha.68+852e2c7","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^12.0.5"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.13.0","eslint-config-react-app":"^3.0.6","eslint-plugin-flowtype":"3.2.1","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"852e2c77091602e60dff1854b2ab09d3b29e3513","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n        options: {\n          base: '/docs'\n          themeConfig: {\n            mode: 'dark'\n          }\n        }\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@0.14.0-alpha.68","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.11.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-7Th8oCIpafHafWe8Gm9fq5IdmNXPXOGMIyjnrT9+xiwiIWIM7IXgM6y6sUSEIlrOm4oUXaKoPOViuVJ5lES2ZQ==","shasum":"2a88903fe7996307730bb807d77466f637bc686a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-0.14.0-alpha.68.tgz","fileCount":598,"unpackedSize":238180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXeE1CRA9TVsSAnZWagAAp60P/jFYLotV8jjRLVn9Nl9y\nTqnpVW1Nt2RwSl351fJfpExWy9tGMKvc9ebiHhx67BQ+E3UzaXJVcbsL9CCM\n6j4aS8zgs+21SpqnVjQ8teKon0gL4CzNVS1fL2Ol7oIwMlxHi2j18BlbyAh+\nkD7TMp4ng1m7uKQGLDs16Pe7pTkRbZF6vdOCd1dKUum+c8K/rOnr4oMPI5HF\ndrdtbzGil2AjOCPOm9fKG9nmQv8mKe/jfB0wKI29vHd00LGGhHzaMGjs7Xso\ny1Vv1IoDB3lH2GQuF23XpT2BTwA9veZQ+CiiWdZ2AWd79T4Q/hT0vqvKPK4+\nVW2QBHB8EbXlRZvqi1zc5qHhZ/2KcaHbJ5FD57G6Rio9dLLtNGFndiETANhO\nD48bf0uA500j14c4UpSXnCJJPoBmPWNc0zhCG2ZpEd1nFIQwuq3TzT3Vnjnv\nOEwZYdkNPDqXH/CIkPiMUT9tS8/j5ipFZLLcisruWDAh21FAD3t4IbbGRMeH\nsWfF/DA+TlH1dOr1EH02po1Q/KyIgrhqE3qnKaM7x4k/Z9QNSPfMqODzHfL+\n5R3u9okjpXgnKsiK0I6mv2IViuF73tVQkEhif34mAWVESuOC0MSe02eI6QmT\numeXGiS3e1eQ0lKi//g1ftddZR670YILzK7YwSfsFu9lQ+UGifAu9X0Bz8vb\n+euZ\r\n=FoJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTev/h2UwDFjsKgW6AevUAISnicoAqp6o3Ra6VE642IAIgde7cHcLYwmvIv5W5TCk7Dfq2U7mZegCi1bKkGMhF2ls="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_0.14.0-alpha.68_1549656373143_0.8108949283734241"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"0.13.5":{"name":"gatsby-theme-docz","version":"0.13.5","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@emotion/core":"^10.0.7","@emotion/styled":"^10.0.7","babel-plugin-export-metadata":"0.13.4","change-case":"^3.1.0","chokidar":"^2.1.0","docz":"0.13.5","docz-core":"0.13.5","docz-theme-default":"0.13.5","fs-extra":"^7.0.1","gatsby":"^2.0.117","gatsby-mdx":"^0.3.5","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.17","gatsby-plugin-react-helmet":"^3.0.6","prop-types":"^15.6.2","react":"^16.8.1","react-dom":"^16.8.1","react-helmet":"^5.2.0","rehype-docz":"0.13.5","rehype-slug":"^2.0.2","remark-docz":"0.13.3","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^12.0.5"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.13.0","eslint-config-react-app":"^3.0.6","eslint-plugin-flowtype":"3.2.1","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"a8e4237701628cd9483e09a04f335968d5c3da41","_id":"gatsby-theme-docz@0.13.5","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.11.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-VpYapZRCZFkdn7yMgsW18b5c6uNnyz9Yf+2Rhs2rSiYS9818N2OL8tHvxxVlS+fFXVlRidRZY1AwDBOIOfb6zA==","shasum":"a9f82c4c28fd4ad9c2ab441ad696988c83a70671","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-0.13.5.tgz","fileCount":598,"unpackedSize":238257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXe6TCRA9TVsSAnZWagAA9tUP/jA8dwlKHprKFR4oiyqi\nBIzkM5sjzYh6pmZxFJ18Pn5hyspkxxSB2D4Nc2t5y1wcJCnzmM4JVzN1HirN\nuch67koJAdOCW2XFrYw7rGqruflVCol4/O9xSQlvizeAZD3ErwdiSWmd9ArF\nFMonmEMXIkHToasr7dJE4ucPW6S06fyLrGLV1Ehi1Q/gpEmgywKJEf+PHMyr\n4SagGOXJBGBi4ttpOpDlsU25IAZ5jP+v7ZfxffkpnMu8HMdjwd3MYQOTLZWR\nw+BX9Oq6tpuS9mi3XLEEU8n3S3PAt3aweUOzulNI5e0YgyOSNdLT3nlReBGk\ndtz7htfpd+tlqdTvuK0k7/kcvQ6PsjpBQiBktDT9u9yn6uRp96L+yQB5+l8X\nIIhAL8gex2kF9bfXYP8/1aaN5nwvJvHraT7Y0EKvR0tMiZ4ex/WjDw6I6llN\nbCETPMshQNJPDaPzXun44kfUOMnOqR0Ly7iYVn7ipbmbKxatsqz/KVl5QHe7\nW8izH3aYqi3fZOi107KtLUrfGmq6JWSH2c5uGmvw04H7MK7p/zC55LKp82lq\nKU8V/0qMPduRwtH06BJHrLhxMUixeqfbHASR4PdDahZXJ9R16H75CU1VLVE8\nGkWnSgp/QsdZAMffbm8ZtB6/QSpQGYKe99mQQ0EneomrzygJDPpt2ohn38TD\nEGlr\r\n=DcYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/42KVcyrczDlDpiltZZICeaNZHow327TisEkkRABKSwIgN4y6gb3Xv4uhj6+CS9PPByjW8wfYje/jBw7ifHJ6SDk="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_0.13.5_1549659794494_0.8093461638649064"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"0.13.6-alpha.67":{"name":"gatsby-theme-docz","version":"0.13.6-alpha.67","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@emotion/core":"^10.0.7","@emotion/styled":"^10.0.7","babel-plugin-export-metadata":"0.13.6-alpha.67+a8e4237","change-case":"^3.1.0","chokidar":"^2.1.0","docz":"0.13.6-alpha.67+a8e4237","docz-core":"0.13.6-alpha.67+a8e4237","docz-theme-default":"0.13.6-alpha.67+a8e4237","fs-extra":"^7.0.1","gatsby":"^2.0.117","gatsby-mdx":"^0.3.5","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.17","gatsby-plugin-react-helmet":"^3.0.6","prop-types":"^15.6.2","react":"^16.8.1","react-dom":"^16.8.1","react-helmet":"^5.2.0","rehype-docz":"0.13.6-alpha.67+a8e4237","rehype-slug":"^2.0.2","remark-docz":"0.13.6-alpha.67+a8e4237","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^12.0.5"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.13.0","eslint-config-react-app":"^3.0.6","eslint-plugin-flowtype":"3.2.1","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"a8e4237701628cd9483e09a04f335968d5c3da41","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n        options: {\n          base: '/docs'\n          themeConfig: {\n            mode: 'dark'\n          }\n        }\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@0.13.6-alpha.67","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.11.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-pYrcJAgSQlSBCuXPaKQrzQlPc+858fL0GD6APZEpzv9PG3nNpfuwO0OQ9d4gVkL/8HAHhptQPbEthfOs71IMEQ==","shasum":"a1acdd328802b0c738a9ecece65786f52f120534","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-0.13.6-alpha.67.tgz","fileCount":598,"unpackedSize":238376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXe9UCRA9TVsSAnZWagAAl50P/R1aIh5nlEzSCp0rVy55\n+MdcsdJxyZgfJs1NB7odY8BXdxHWUZHXx5XEmx6VUfV2NVTf0SZ8d6gnnBP2\nWwXlgkyeDcxZUz7h45WgYtvzI0koswQBTnV2gjZL6LdQZZBT+jHRIE7blu4R\nJGZ+FKaFxZJwSODgH0c73Uapjws0vCD46UAbkgOFaIymkr99Wl6InUI58lAx\nogIWiItHm7T2d793On8Y58URy+s8CWwmSDK4XmT839R3rAgTK1TtBrPnObUT\n8QrfK9OA/g9/Ag4JxDW508nUCLX5JIcoxpZfKSsH5x2AXoLni3aOF5YEidUb\nr787nnuGFWDd/R6sEgTk/qmBtZ209cfXxlIoN+nQCr2T2tdkeu3Jb6ICi2xC\nQFiqu2/5oTP1ekjaDoVl/yS/BZjTp96XWbaTS+RWTYPoCcmu7bL3RAUxINrQ\npNzDuN9CN0kuvhYuQZPqDYo6m06werKEHlKA9XfmXr32JHOT9+WD2sq5R5n3\ndf+NESl2jymQKCdo3ynr4JhhWyLjezRAxdRr6LCBUvv0a9u9vrg+AInvvnf9\nTYb6Ff6o4MdbGxunXcacWi4rebrwV6xULOp4KNWoNhvJul7u+kfqchti07XK\nhcq8InTLTe1PPk8X/uMmCZRApqTl1OIw+YQ7h/1tTnpEMrtqrNadS9oR9N5n\nYtKx\r\n=QFyv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0A/TP5VnzuiQi8cwvdtPDz8jnsDglavkm8MmxZ0yZxAiEA038eP8lmoEPINc6rs5ZNaRoPJNrnqF2NPgVQ/wszTvE="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_0.13.6-alpha.67_1549659988225_0.680477062028134"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.76":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.76","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.17.5","babel-plugin-export-metadata":"1.0.0-alpha.76+2fee5ef","change-case":"^3.1.0","chokidar":"^2.1.1","docz":"1.0.0-alpha.76+2fee5ef","docz-core":"1.0.0-alpha.76+2fee5ef","docz-theme-default":"1.0.0-alpha.76+2fee5ef","docz-utils":"1.0.0-alpha.76+2fee5ef","fs-extra":"^7.0.1","gatsby":"^2.1.4","gatsby-mdx":"^0.3.6","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.17","gatsby-plugin-react-helmet":"^3.0.6","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.2","react-dom":"^16.8.2","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.76+2fee5ef","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.76+2fee5ef","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.0","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"2fee5ef75dc760ce14ee2ed9c6833db7c5b590ae","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n        options: {\n          base: '/docs'\n          themeConfig: {\n            mode: 'dark'\n          }\n        }\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.76","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-guLdPBVu4E4PRSjuFmj8tKpLzAuanYTaHCFm9Tny0gwopqv6pdptqwL7weM0ItCHSBYDoi4m4D1cQPLX81KQew==","shasum":"b77f65659df13d3220645e025bd047ad4179fba3","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.76.tgz","fileCount":602,"unpackedSize":244181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbE/2CRA9TVsSAnZWagAAMmMP/1BQj+XVnrfgi7Q2rSEt\nQYG9L2kU8lXp2JpK9n3eJJKZplb7FPx/GGETT1/PldYRM+yp4KVGbxPLapXJ\nKeaheZFLjVpkcDoxV6MWsl1aNnIjHeKBh/u/hiSTK86assT1obTlAJi3c9tY\nbKMztDNU6lRIMY7NCA4JDNdj+IhXLGJnzwgNcQuDX7xMccZprv8Lmfwrwobw\nM5rOOFgLTHaAFZmFQ2d2LbkkYWv/CEhNbBOU90VxhFZPutYAD3GWUcej3i4i\n0rctHj4WVo6u+FL2Qx5TAbDre2baBjOfCM5+asqzKmC4Dhq5I9rDeBv/hHvC\ni1NStPHokEAg10S0QBR9MakKsqAPTI36IjdkPn+IAlWYOwfvtgfjlpdDXks6\ng+Hd175NSVpJoCkdyUAhE+2CkIiHjEVmdAI9YXDjh1QaiX0rgVKdNznFrNBi\n/2Ds3L17w8TroI6uq9++VYsKvu4Xl388WA4e5KmFFfNet0mgzFOCBwqELqep\nrkW80XU+b5twlOCUQLrhmPqFdSMEG9w5EPaJmWr9zr5epSsWY38guqJL0cm/\ndn0gCB1oPa13i+vf4ihdwKAu/0JpKrrIGjwGTk2V/OIJPM4XiLXWMDj5h5yy\nBYvl+P3h9i07dBoVA7NpU6/3r0KYo2CascKTiLDDNJE5eNgGc/6kBpUWAvxq\nQuIE\r\n=jNT4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLSYOF2WULU1L/+Oqahtkhg9geWRRAjJ6lF2jSa34d0AiBIsGoe1zvNjKOk7Fa/SBY6ss3DfPpVBdsHKxdC/LNpZQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.76_1550602229980_0.903825998366721"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-rc.1.84":{"name":"gatsby-theme-docz","version":"1.0.0-rc.1.84","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.17.5","babel-plugin-export-metadata":"1.0.0-rc.1.84+f597731","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-rc.1.84+f597731","docz-core":"1.0.0-rc.1.84+f597731","docz-theme-default":"1.0.0-rc.1.84+f597731","docz-utils":"1.0.0-rc.1.84+f597731","fs-extra":"^7.0.1","gatsby":"^2.1.17","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.6","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.1.84+f597731","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.1.84+f597731","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"f5977315a525ae109c2e753405d06c88610910d5","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n        options: {\n          base: '/docs'\n          themeConfig: {\n            mode: 'dark'\n          }\n        }\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.1.84","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-5qZx01ZnyplL2ElRIjrMOeJcI5860i6Xibjs4y81VYKqte+9ej/C7dQFVXYrLjlatP0H/8u8ejEC0kuExktB0Q==","shasum":"4856692ed1f00d37678e965049f12cf4bcde9e65","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.1.84.tgz","fileCount":602,"unpackedSize":244174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccHT+CRA9TVsSAnZWagAAcQUP/j93kEYZPBTR5fRC6hOl\nCUrgSvkcBsW0Kc39LxVKa0rCrHyDxYmkqheRrQe/Ijony+HlIpI0wxI2jtZe\nY41nTEeoIB1941fhvwH23E2xO/UYrNFt7NvZOwaANSDHlbfQdt4oos1wLP1C\nuoWUz21F4PoGNBxcx7CrF1LMEQzMY9/Oc9gfzl0eEgGCPvyjHHYRJBusdoSe\n0lQvsAG9zGBbzENPxJlG4p2kREwQFWLVp2iZi3ShZztpncPvWfgOsBPelej3\nrpwfGP9KKCOC6Z4UsgQKVBrWMctytDQ6+tBeDjCLBdqslo9nd39ciNS5Hr88\nTMdHZ5q75Jhtl1R9CXHjNdPyIobrwi9GU7oTEOiRABBhbSGHqWKyxT7oLt8m\nTKs0jhN/pet+U96akcAORsNV5XBnwxUf8XGSTRFyx3YSAHwJ/oZtIZuKfZat\nuA4Ww/dVhuyVmYgxhKflQJ7XR8gT7/cqvYKcst2olU61RKm1zo6lqDbmDb02\nYadnITj6iFq8dKpQRqu5w8lipezX2db1M/aRcFQefQ/+YbK4BYCCOCWVCMKC\n2Dha4MWUEAJ/ctKeI8+WgPHmpV9uiZUsWvOyOkHRT2xkdcIElEjRS0f/VkEh\nTuKL3t69ewzpTcOO2QNw4TGVIC8BXoxRIx5aXNGVMWdUTRHHLrl8zGLo8L0f\nLA01\r\n=+izG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6ynyOg4QEbmKf0F7oL6q37zzKkiTgGq3ECjM7Xt5WNAIhAOjnQ+xXKPkaNq0y+i9jk9My2DXLwPIgkc2h7/QqAgYX"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.1.84_1550873853632_0.1538660158730989"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-rc.1.88":{"name":"gatsby-theme-docz","version":"1.0.0-rc.1.88","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.17.5","babel-plugin-export-metadata":"1.0.0-rc.1.88+69b4cbe","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-rc.1.88+69b4cbe","docz-core":"1.0.0-rc.1.88+69b4cbe","docz-theme-default":"1.0.0-rc.1.88+69b4cbe","docz-utils":"1.0.0-rc.1.88+69b4cbe","fs-extra":"^7.0.1","gatsby":"^2.1.17","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.6","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.1.88+69b4cbe","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.1.88+69b4cbe","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"69b4cbe1d5f6a74c7aba339ff0dabfd2baf8d7fe","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.1.88","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-z5AD3yiH+iqtmPlj6UQQc8ooDzLSeewfrivHccoB7TPeGcmucjkT4V5zoAE/qo9OqLfyjNhip6PfZNII3v1wQA==","shasum":"120fa3474671b90c34cdda5148767a494959a5c3","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.1.88.tgz","fileCount":602,"unpackedSize":244059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccIVYCRA9TVsSAnZWagAAxbsP/0RzeqlZojnH6L/OfUv+\nrjfsXKMdjh5hfG2GT++lNnAG6qx2ZfBnT8OkTpqy6DXR7KOlncQYvaR0BLzG\n1GCArKul4WasxoJzsjz0gNGmr02raEE14J0TKnGKZ7IDpPqnOlFGOcC/EuBQ\ndkNjbSUG3HfVT2VItXfRAWzSyAPTKGGpcyN0ziMm4ob30wuzyFE6MhCRIR3k\nFTbPL0thHsFcvlBMKjvMs9GZe0HIcPyBtQeKjI66h7LfQ/rpsEf3yqeri9ds\nZYjYjXUodUWQXkrCapxdCNOzWHOLGbCAOiiLfwQvRnP2GkndG2mx1rw766QQ\nrlo2pDOL6KYthagMEa+4xkXp9m7b9yVc2am3k+uwIZrB8neahxPAq3rz/BSc\nMnf0AASOaD4IZEaOxFnHtOOur5gknn6qRPkJO71WaJ3MqHrlIUN0aQ1VWyUc\nRe7U6/lsALtPhoPka6qwktcj3CiE9+evMajKYWSWECBBQctgSFnU0dqK2E1v\nWwWwopCtc4LrfqKxlzWt4fds0gf2y/d2KqR7iDpGvlPmwOBs1OqS785IeXQj\nFMvZR2vcInVAdsJkmN+sLpadDSPLbxW0ZGhYR1mSEf5PRDO/QyGwkoRy5Aqj\noK0dD+wzMpB/drgJv49wvmcyiRjdifkC/pAgAaq2WO3VOdKecMIm4M2oGg8W\nsRVq\r\n=xkj8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvknul25w10oLkwr0nM0xORKyQ6m7uQjy41K5FLb0fswIhAJ5JEYaHI3b+t6TYanpbPp9EDmkQNTXIvw9WjajCNnLo"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.1.88_1550878039905_0.5284624073225723"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.91":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.91","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"gatsby-config.js","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.17.5","babel-plugin-export-metadata":"1.0.0-alpha.91+3cfe073","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.91+3cfe073","docz-core":"1.0.0-alpha.91+3cfe073","docz-theme-default":"1.0.0-alpha.91+3cfe073","docz-utils":"1.0.0-alpha.91+3cfe073","fs-extra":"^7.0.1","gatsby":"^2.1.17","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.6","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.91+3cfe073","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.91+3cfe073","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"3cfe073da5cd8ea3a1d250bd37c43ed96e3b5a26","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.91","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.0/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-s4U1Glg0AlSJ9NkxxCfEwTGYLVdUTieEjzW6jSaRpp14/STurui8FJj6CnE5wAII8k61R4KkLgDH1YzRhW07Xw==","shasum":"6e9cd7139a369df6958783b8fa707129f369cc6c","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.91.tgz","fileCount":602,"unpackedSize":244067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdGcMCRA9TVsSAnZWagAA0vgP/1RwsTNYr2pRyeNbP6ym\nFmoiKh2u+/QodpwF9uYIvRcg2HnejcsYlqE8wsbiN9J8UjLUwsOmyp7Wk0Nv\nUkQOWrUiJ7pFLU+fIIq1PZn4/wecxAZMxZr3EPfLIXxP0eRRoKZd2VgUVbPd\n36ZlxIgbqhApBf4Ub7opYageMrKP8TmO07lrpBAiYkgFHlgvpC9PYNY3z3QT\nSyAJGWJi58e0o37PQ1pAV5FBBzkRF4Nhn8NkIBs4FGsreoK19B1I1q9o8T5K\nNCNbN++cjOPEKCRkPcbBNgoOfPfvePDLBRZ3aKyYSbd1PunVutiqiU1WGy9F\nwdPJDECQAcrLkNAJs43v8ZJGd7wzBqFNkMijThGZbNgGFIOxdkiRBtfKAUY9\npqgp/XGW/rJtn5EFMYTloDlMvaNhhOYCBaocAuvg9NwdO4AVnQ0nuN7gUq7D\nlpVlmOCeu9ef3KSGlqO5Owpy2FE0+/IaLg/ke4c9ErjHjAZkQAC584a1fLCg\ntIhUA8IGQ5KBmhl4UtnbgpOaYyrwfHMe2s0w6j3LoV7VQ2Drx+WJ8Q8ZutMC\n6CXuvpGX9U8rxPiOWZ9BEc83WtfMvDEnadvcBoPu0+GXTbPFQNAP+SS7zfZi\nNNRr1cQ3rbHbrJRElJr1vr+HFSa9SK1QnLuIhXvfGn11a77V6QJdwZYGVNZe\nHKAt\r\n=7suS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJn63os5dDVETm0bovCzUpYcShBYFmmSNR5VPNizHLnwIgPMpZWMWxC7Gt7azkgJzTHJAZmzBF/9lkHBFmtgk5Zt0="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.91_1551132427876_0.17210011100707012"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.98":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.98","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.98+da9fb4b","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.98+da9fb4b","docz-core":"1.0.0-alpha.98+da9fb4b","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.98+da9fb4b","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.98+da9fb4b","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.98+da9fb4b","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"da9fb4b4bcd01cfbda8fadf86aaead61a90b8399","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.98","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-X/pX15F1cToiT52IovX2ElcDQlJZNMiff+QUP46WV78N4zz3y4qMeQFfushsdLJquCzXWnN09tIw6m4aOrDm2g==","shasum":"4008ef718884e09d41aac4a0da8bd36ff795f7bd","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.98.tgz","fileCount":603,"unpackedSize":243229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdtxACRA9TVsSAnZWagAAIl4P/2QxrcPgdqHyc4jcc170\nzK2ZvIX/EidDu8c0UaLmjwI+gsdIfBHHZqdbii7H8bmn62JKf4tfbJJaPlmc\npRLFt2FhhGOh4xI2IqClVD74L7OZDzSrC3WRpnYMTNNopTlY729ozvllIcLD\nkRvmxyFFRhjlEJ7cTvBCaJ5Eemzdp8C3z13h3vlK/6HSIeEZ+srCrCYPmEix\nAIHVKtRALXWiliP4u6tFmSMea3smuzg/LFZVjwxoC4+JNT0B+/Bm8GNtqx3p\nbLIK+AAu5eRWjxxvG4mcMF1xKLBuGlR0evSRhdn5waDUdRRX+eKRIrOe27fe\n9+TxIAXZVSNy3R8tH335Sx+VMhD2EGJ6vAKezpNfkAP6neZhDkLAuhFkRL/U\nd7jmlZZBF/MME/NDKy+8qZ9xm9UL5rrFwWd+r3BEUx6wrrCvloLf6VsfFYzt\nph8k77ud9zaDQZof66KKA42IT0ELXX2KHN59pbgDu3Jndin/QmwqhCM5UlvL\n/Bb4s88BuUKJ1Yn2nWKC+hA18IoeN/p7+1hY6Htyge25M+5rnTQPx6SCUcYj\nGKPfThhZMwvotUA98Lyi1mSo5s82F0RJPLTKB0ejHTS3LFlLgI3qzEcJePuk\new4m3tDuQnAqM1NbzgkxLb5YF46l4YqiSj8RzXvPSs2WkJ92rEB6W6jwXlAF\nHKzl\r\n=Iz5j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcBw6X8hRI5DPlogdyaHF50gucAHRWRLxU8HvasyEOywIgf/EKsUh31CXkRTJ6TzRP/I5elXjIFMsgR7algWgnZ+A="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.98_1551293503857_0.6511087451102231"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.100":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.100","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.100+26f7f90","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.100+26f7f90","docz-core":"1.0.0-alpha.100+26f7f90","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.100+26f7f90","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.100+26f7f90","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.100+26f7f90","remark-frontmatter":"^1.3.1","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"26f7f90bdb074c1bf82463790cdecfc0bc4aca79","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.100","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-J0D76bhn9AaQJydb9uNk4seVGeBzj0dSduhRbeeo6GBf/U6g615Pa3cUJjefFP9q66sZgYLtx0DjeLbaunWmng==","shasum":"68aed4c037be9672d0de996eb53aefbf16197c07","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.100.tgz","fileCount":603,"unpackedSize":243880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdum0CRA9TVsSAnZWagAAev8P/3seWijU0AwtPkn5+/vq\nm/7Ox6ydbiceIN/CVPpscqyijRT192ptJCefWZBo78IaUr85w4F3mzCpW/Sq\nP97/SoUkX7kynUUGTa7Em1qR5Ujk70eA4CIunn2MHxhBWoqS5xUSoJnuGndR\n6OCejroTPfUZEn+g50XIGx9Xw4KMDDntVbG1BBuYR4PIJaGyhvfCT6zJKx4O\nMiuqGOQSpcHnUVV9KwfucZ6RIOEfL0VOgwIoZd5GtdIDkDFAJJcYpP9cvTUX\nhP+dTy91Z9i3DKq0NgQj42LJherKEuRHK182WOUdei7A8Ul8tsedtQydmRvv\nIxM8Dg+WmnFCVst+hUiE/+RrBMi+AebSk3TUWh30DF65P54Wae1QJbFgJiVE\nFDAJMZ1wVEicSgHg/bmImnV72vBnRv1vP6EHOgHsasGQDA9v7e6yKekys41E\nC//odi++XOX8sKlJ692hE0vPKoDJIIsuYVVggalaYMUry8LUOtdwhlxcaiLM\nVVqkpfx2o4hY0khOL+0NX0CUY3X8STWHk+oSM3IYs1l50OA04aNxy734PXtD\nE3luMwrJaBrgg2FPdENxFLEH+DMLIGhicl2Vv+HrfN1ZxQ759Tn1HgWFSWzu\nJW7PqMEDYa7mUFGjW9FF9KAQdZF1uqsZq1NNGfYfBQIdVijXGd/p5ixPKNK9\n60k2\r\n=cAsn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCg9jn1/PLqRIOjsKQlmgBiBV7+vVA1Baro0+KH0PXhLwIhAJdYa16usa3OD6MJkfeVTRgiVsipkoE341GzI974c7bV"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.100_1551296948241_0.1569417304584051"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.102":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.102","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.102+d1e148f","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.102+d1e148f","docz-core":"1.0.0-alpha.102+d1e148f","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.102+d1e148f","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.6","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.102+d1e148f","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.102+d1e148f","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"d1e148f84abdd15bf9a982e0b2d6ee8f0fd7ecb8","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.102","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-Y3hFvkINSnkCTTgUlf3P3TQkT0l6/0loygN9f2TOrRKu/5vWRR+dzgQB8g0NNDSbN5POqONzrUNKeDW1jvZytQ==","shasum":"c5eae7a7e08ee4c3317e5950e540dc619f996994","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.102.tgz","fileCount":603,"unpackedSize":244033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdu42CRA9TVsSAnZWagAAbEIP/R4rM7hNi2i3LXacNY/s\nN8pZrGZrDj8ILM0DxYByTHiPx/m7jyShUd1WcEfuUJZZ5A90Aum8riW/GXyX\nZDPZmcaKZV2R1WEXNqbvBKFU/K2NIN6wdeQtpIUnIrvOQx7NeXJVVMky6zYZ\nUrb+QPjJ+yf5cNQeUlQnEfWwXu74iZcLmOglSuyPWo33IIGeyh11IGzJ4wcl\n77Op1MmaMqhRJN1KStFduMXkQWqLjBhpaSiIuOwI1h/lMIqE70i61rnLcxaE\n67NWwqFlrLt9Qw1kViY8SaeldhPB+p9++PscP1MUVNqhc6vm8mtnXTzyLdgG\npzpTsLsXDmMiyO6uJ/7a1H6bTVaL8F14b5iyzfUgD4KAnfJNJnZtUqkoZ70M\nhTCQGyhF2F8enxmC15DDMlNizsVT6canRhxRuN3nv5W52GyMPXKRus2AiidZ\n4KeyjVIsaTYDPuXfQUIwBsSMFOCIU9hZMzqaKdgkbudE/B6dne3Rhsv8yi1K\n9y3P6xmCkLDzBwL64Gpy/N/Gi8U8ndPC7yHw7WvMNyV8gYiOa1HkfIkG17v8\nM5MlOU0DF5HvJ9qfLRNH+SUIl5RgE5AdKPIPcbBz7GfTx73i2JdY9q8lD7xP\nIkZx11WwGi3Pa3qMe24wGIpP6GPT4tTdhkuPRkZtCLev3Q3js6iUg+vPksVx\nbDLq\r\n=fRq7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICK+C3p94pHuAUqb+qtDuepf61GLG6jrwsNDNbJqn8ifAiBD3w4Zc/f4clsjhBLn+JoBBZEMnEVUPcwqYz1xRliiVw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.102_1551298101677_0.2967647012837602"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.103":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.103","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.103+8f8ed12","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.103+8f8ed12","docz-core":"1.0.0-alpha.103+8f8ed12","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.103+8f8ed12","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.6","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.103+8f8ed12","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.103+8f8ed12","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"8f8ed12c9feaf89f4e13028798ea47abc088b1c7","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.103","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-7SCgCwDqkAXAQug4ttvQrh73e3ZMmxIOrt0Vv9rmLlqBMebmab2ADN2520UjjcKyH6jtFSmq46BMBFtkO2gKIQ==","shasum":"654ce6ce4b40f7e9748e74c30fdf4923ba3b18a4","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.103.tgz","fileCount":603,"unpackedSize":244041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdw+8CRA9TVsSAnZWagAAZaUP/RLMkcLIZl5dHT2yonpU\nBV1ZPY1SRGYe6PIXUxKnlQR8xyKCbqoP1QDoEQv+HOKzHkSM918JRlVXntIn\ntiGu9kWrI908byh25n2QQYx0uLwMnMoR+9Zg9EF/qgras+zj5xLl8JGJdFcu\nbk8v8d3hPXp6CAtbfjWiYpnX24i9Zm9PJ5s3W1bl7RyTCOgAacVZs24tQ+c0\n+nIkU9oHQaqvNym1LB6NTf3sopqAaG7NOdOw6klkFgcM0Q+tEqaWs0Zs1lnF\njkPIrukNkW+5YDlMtFRSkqFiTM1x3mQ1+8gliNq9864q02hk3hOxOoz8qpV5\nXUv2p5qWMrCYZwX7yGqaTeySskT8XQpaZeeflKbyUs6abwV/JNfBM/BqjQYs\nt7wULZMs6ZZf8wqhixN+K+VEhxoaFQt2V7ZQVyFhYYs9t3Kg6XAOQ+6drBMm\npGJ6FT0AsKR5Rfg1bii0O6XuZ/ixRWh+43okIRCfdiXiA19x3v6uYF1EdmnT\ne0//SKBDMM2/T3l2RaslM2wD/+FI81R1wTcKaSApF52B2Yu8bWOWJPjfKuj/\nxOgJ+dq/fRr/9tTYr8eIi11bf5NO7UHxPM0tVSICn/+kKav6LcemClqeZUj/\n0xiyZTHVMx/z/bz3733cZE4vaeA3qzTiosaUCxvKH6IKJWgAiGVpAEcS9Zfb\nymvz\r\n=wHnQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0w++App5IV+KT7UpBLeNXOSIR1+MiBsiMMLbXU/8vuQIhANpvXg71kR21MRvyuQzGNhzvNf+LEHCUotTQ6ssdvOH1"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.103_1551306683475_0.4836025900722063"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.104":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.104","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.104+571ffcd","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.104+571ffcd","docz-core":"1.0.0-alpha.104+571ffcd","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.104+571ffcd","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.6","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.104+571ffcd","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.104+571ffcd","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"571ffcd71d2b07fbf914931dc6f2e71f9d646dc6","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.104","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-qnJgaR0Rkj1ckRRUaKgHVU6xeIUQH+1xp1IV1NUMrgo+no9bjwrtNSxrQqLW/URqDWmtkBYHPAnk2psDfbu0ZQ==","shasum":"6ae804ae56d25da6d8c35e0b9faff08ab5914bb5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.104.tgz","fileCount":603,"unpackedSize":244041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdxjtCRA9TVsSAnZWagAAWXoQAJ+1CrUJGN0HLIDQ2fXR\nZ9sS4f5rZaI3S1pFvtKLhnFFhKRA/c6aumtRNnzgyxs1uu6x8ZNPSc5Bkd6t\n8kAFOsVziZMFf9cr7wG49zGUX/ZtSY1NZZpHe4/AJxQg+LnWSBe5wZroYURS\nHdXYBnJURoMdQK0PKMnWernMNwjPD4DYYJKICJ8TW+iusxBOjYuHEM5LigSL\nWsf1Gw67lwux/8FNosalM7DZusAsL7YoYn3t/JOQ/LQwcsApE0H4J7q+0cgr\ni5+e8+/RTbluFTrvjGC+5rcjk5oPUwyAxWyOgkPWWKdEbTiGA3raa/O98eO4\nJK7C1syOgnWBBads6zutW711SMKRQy34Bm67uZV0fjWOnJiwzSQVLtB8WZlL\nHhIwedutVHNMTHwpvIUz5Aq6aKa1rYcjYvSF2L4BI2ykKmwVE1o1XUKiz4Cj\nubY/FX5tkIX6pwrnlk4aPiDJBGmR2qnGOJx3/cjjBLF2GZwsXXVOAAYuTMFp\nyjfWC1AGN/5G9D4RR8ojSyp3QVL/OdSbXrsIY1qaU8frWb8tfspi0HIRwAbV\nZ/TjPn16/MBuUewgrr08tyvs9ms8AOzzGW6Up8AWzzxsd0pj2CLC/Iyt6SvQ\nMJ1ZbpDx7vcUvmwHPsbSAUn6j4a7NiD6ni3h6r9MXgq9GgMuejeyUm+aeC7h\n6L7i\r\n=kZPf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE0xIz3QaQtvcvIMX06ps0z+ZDAn3qU8JxQxKR+XrU2AIhAI2cjxemCOF/WOx6v62NnGM6mfEz46st/NYWUbrxRaMu"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.104_1551309036841_0.6339601085826161"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.106":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.106","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.106+e12c37d","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.106+e12c37d","docz-core":"1.0.0-alpha.106+e12c37d","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.106+e12c37d","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.6","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.106+e12c37d","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.106+e12c37d","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"e12c37d9851568061798168f0338d15972a7fba7","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.106","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-9y7WZNwkGqYQGkDEI/krLdI/AjldxzmLUxdCnKfwC2TyoxO2hyaw+ewFWRlifZ3b4mgxFK+QnUUlOaActRumaQ==","shasum":"8426273a3d7df90723564ed8264836366fe029bd","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.106.tgz","fileCount":603,"unpackedSize":244041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdxy7CRA9TVsSAnZWagAAyYUP/juyMXb9Q6vqX1V8DJRX\ntCxtyCa3a2Mg/EyrEHnYvGHRFUcsop1M3fSK8lrnfHvt1VUnvUZhtgPt+MdM\nb320O1Cvl/HemmbNf0DFHIsVPTIo7QDXK508+eLByTgGuMGLcv7+Bq7QIbw0\nxD/cYl/08mVMgC/XMYeV3KSD2NgF7GryLevbeUbDSr7YO4dZDRFlNCUScrPz\ngEs6yvq/BxACD0JBzDkSTVsYQKm1rxMKPvJ/c7MvTqDfJjMQmQpxNDJsIaOT\nzs9rLs/CrsGda+ahGf2XmL4+bqEDIDF42YWHqtegv3M2hc4oYLiWlolXdsOW\n5o1y+jVNtUqNHyt3JrTCbJtk6S40eFO2N1hhdqGWDDtAgUJFyLjGj0jwtEBV\n7CdUxNHM2S8evrNB5CXhFgnF7Vd5QbNZwML7jpiVsfh1lQ0HNGJMDRISS5ry\nCWPQ8xP65x+A3Yb6r5Gxb/R1zOTHl1Xns4u1akPLxMjoDoRQNSamsw9sD7Q7\nIGUWn/L1El7Rzmu3RDwFZfD/WhIPheDAnK/riVJZX+Hr8HQr4D3sVfdchMnX\nFHFwCtlWhdruU9zflzpmGwUUkhoUKAqal1nBYZYzIfy4Ky9dOvHONYOiegES\ne4VnZRX3RAGq8fvCHo5vr+HgeI+G1bd13XUtiOmPh2pYKVOzWf5c8U9V3yB8\nPnA5\r\n=Ej4G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7sdp8x2gsgdaSqD6eFmhcAIV/cinhjgKJDTy2yMGkZAIhALKHPVA27/qI/OYoD0PkR1Vv2qDl0U0+8Y/BtdsFx6yE"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.106_1551310011267_0.8738024533466133"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.107":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.107","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/tag":"^0.18.0","babel-plugin-export-metadata":"1.0.0-alpha.107+d3b4bc6","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.107+d3b4bc6","docz-core":"1.0.0-alpha.107+d3b4bc6","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.107+d3b4bc6","fs-extra":"^7.0.1","gatsby":"^2.1.18","gatsby-mdx":"^0.4.0","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.19","gatsby-plugin-react-helmet":"^3.0.7","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.6","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.3","react-dom":"^16.8.3","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.107+d3b4bc6","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.107+d3b4bc6","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.1"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.14.1","eslint-config-react-app":"^3.0.7","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"d3b4bc6e8eaa6d7e167bb28926977a437b26d2e1","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.107","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-cnY5zCr7W4fBNV8XZP8sdhlDIDstErnmAbTbQNP8mWxNH1Mb5Llx3QtjKV++EHWRXLrNqLdWFcv3MHlIgOkAqA==","shasum":"f13682fa3530fa6c1de03773a08e98908378edd1","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.107.tgz","fileCount":603,"unpackedSize":244041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdx+rCRA9TVsSAnZWagAANkYP/17mLf8YVBF7VQy6jZU5\nPkIPv8pPV4x+QycngxezPKIxj3uXDRHWDQxQc4Qta0GeCqnZOcAkCm1NG2Ql\nHvMMG6YaUU1jxyg6vO9qwwqCo/PkvDtyu6jmhotcwC9LBxssHAAN9wMnkOO6\nTXR4iYUXoMSxHBbbWAFJ1VFUwH5xAdnqX0VbAzf8aBnOHFqouFhiMyJxLRC6\nVdgGouqddXpiuwbLmm5hXsGfpNXmHrFP0vb5MEukZXjZ3uG2pgiz1PY+N4Nd\nY9BTB5+0HNgZiYQYQ6nSpSnGm4xW6Cc63tOCY0PhkbVmjMp21W2yDLcFqsXS\n4RqRA14KguLtbr4icIgN4/rT9u+9Gn6NnZ3I1ZypvEtV5xkRfX4yA8yhXb+x\ndIzIQIlrxQERBb7A8T5g526V2SYug7XAeCUmtDZJk4V6H6nyZsXLinE7s578\n4ClCEhmTHexgSdCAvhYajglT3pmjihOgX1ftFmV6nslg3fYtk3YRKQJBaDh+\ndlTz1tOYmbzxoqAxyzmQ59A1/XEAB4NQqDU0Y4ufOUwAfxlpXyabybBgR5kB\nsOMeF9esYaH9B24k8w4vme7H57g+DVn/3sAt9j4lLHK/ubqQlVX08PMwHjzt\n6aj2xxFh8u9UCLBEJ2rvG+3gnpWPyLZrlWuyG/Pvk+SVZKPGLsNy7xGB6lnz\nX8sK\r\n=dEve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwH0GTKci+mEa/u8+lBh4ZRK9eGOhxBv3OnWD8KnPb0AiBpP3h9PQ48HHWoNoy276G1PHzhKD4GWQ12k9FiOCFu7w=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.107_1551310762667_0.3965314624307976"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.118":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.118","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.118+548f940","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.118+548f940","docz-core":"1.0.0-alpha.118+548f940","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.118+548f940","fs-extra":"^7.0.1","gatsby":"^2.1.30","gatsby-mdx":"^0.4.2","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.23","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.118+548f940","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.118+548f940","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.1","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"548f94061aee93c96a7883800a69e0d9006b8e92","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.118","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-jcQzAsVFipcUHQjfW8Q+FItu7hZLsNr72a5CIJQRWhEeXFvuIxiB6NZs7Fj+A6eaLM6KgNYq/5I0jbdJNkl56w==","shasum":"e89f82f1c522e7cdacf9dcc269f90cda303f8394","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.118.tgz","fileCount":603,"unpackedSize":244071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchwBQCRA9TVsSAnZWagAAUnAQAJ+kWYNFs7MRw09vtzdN\n16yJOaQWX/gz8VQs1kG0CK3qsWVaqm1cuq19WtyMXDErWLO2rEQqZrpr9XuD\nsfTJOVM9kBDyG42qffeheU1Z80XPYEq0jywkmitlyY61x+C2iOAnIJJ3KqK1\nQhVnhyCO9HapTI84tcj5cH3C7+bsqx7kwfUzolrlnIxlhESSNPOd65Fb9Opr\nonxLwKSA7CS4xCmerL4A0E5tbHbCKp+sDyVugdG3dKrsUkASG+CRV+t/ERau\nHKtm9mSAzWU04QW4G8sJRiCpE8uYi2Y2MoWwQSv4nHby3ydHK57NCFoucQhZ\nCjt60+C9VmsYQ1AsObg2ay6LVlC4LUyWG1G6Lp4/cAXWTYO/DUww5VD8+hMv\nEcciY6AKfnZXvev/wn0aq0adB/zckELxv0RUCJPd+z/4Ci9pB+3rXeYAPxAn\nXAlY2unJCXnnllQXhrzdYz44FfQKXKGju4Zrp+PER5+4JNkeCn2J0lmp32Z1\nvD2zKt2rHUMhzujO/d77htY5itB0NSMrNsJeHLOrqb4RypusF8UDyUXcBzGn\nGcbXoGGW1F83sOYuVCELk+HjP8LMzC2qvbvWQ2ZQ0QIxQG1XRF62f7HEeGIE\n/jpT6oQj4YNCm0zOkPkHFLcRzk6LJK3KF+nf+hWAWFda2TOTwT2sLWH6DuBw\ntBcM\r\n=B6gB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFlMa0ovSfNgUdp0v5E5+kS6II4tswxf+h/fbgZV3MqAiBwAOxB9BD2Lifr1L5Q3H4yON5oCHMMu6/mBTmHnakRGg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.118_1552351311373_0.5421901343796973"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.129":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.129","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.129+8565128a","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.129+8565128a","docz-core":"1.0.0-alpha.129+8565128a","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.129+8565128a","fs-extra":"^7.0.1","gatsby":"^2.1.35","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.129+8565128a","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.129+8565128a","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"8565128a9b00cacab6e0df8f63f464c3bd297bcc","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.129","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-KRt4PpqLSARnl+eM7UAk4xjbmlFzti2/i8YqAyDrCq4TA1xL5PxJgTC4bh2Lw7Qaub6WbamIznEr+OcKeNB4Xg==","shasum":"55b55ec0c4b5d519a79a604983bd0ae7216fe5ab","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.129.tgz","fileCount":603,"unpackedSize":244062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJci/fdCRA9TVsSAnZWagAANvQP/3UzG/PUUeenfzKp6EJi\nmTOruzxqu8bx2dWMlYNmU6/ZK2hO2fsvU5bKIfRKnpuPe1z3Uj96LkbW6KGK\nnSVdmNiakTTvuQkah5thCCM4XE42RSKwYKSZt+vTZDp8ClMK7Bj08ttPcAig\nGTfSv7gTd31iEVvFsdv6pZ7QQ3GbvhurILo5QaXMo98rWk0MqopXe/7eCHDM\nycgBtwGxfY5xRKD8nBUVm7gWnAgWDGWYHMS6uqUZL/9/UNDdCkO++SOUj8yT\nLdF3VC5nsgN+Hnx/5gpk5cFNoVl6T3TasMUvn3/r/zuX61O6iHYaqUkunTEd\nr8pFZZmBhTggM32kd9CbOOZptR8nBGcRgcqbkRR5LtX0diTtmCfR47z8fKoE\ndl1SKmBAktkNCFqTnRp1iFUfrrU/+Xb4vhVvatDXyoiIr33of6zBATnH+obi\n+qZeFdwfP1qAoIXwpVWuG+PrXClmWwCqYbLJTcuhLskwN03wJ46gvsFA8Lq5\ngXNzqPv7DNsLpFLgv4HJRV8lYEYf0/AmWD8hSBLFGdDPctSx6omWESKGy0QK\nTZ0mG4Y/1v8Fy+E4p7XQ/dWd74BsVohMk0hvfH6epmyYLowyHLyG8dshTWgj\nllXYMx+E8t10/0IJ6RSVCE6/UwDmAOFg/cfwxGDYjvrNfQuMfM6NecpQm6np\nRSIY\r\n=B0lD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH7fo6GMn3J1AJGi726EtXbljaR/lCIqcKIgz4p+8F4QIgeqgw9bQXfiBOjdhVEyAp6uTe4/p7+LiR8MnMfogaJhM="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.129_1552676828606_0.11951964573253582"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.132":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.132","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.132+b856168c","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.132+b856168c","docz-core":"1.0.0-alpha.132+b856168c","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.132+b856168c","fs-extra":"^7.0.1","gatsby":"^2.1.35","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.132+b856168c","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.132+b856168c","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"b856168c2a7276cb0d02de484782292cd5ee396a","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.132","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-b9EyGBMIVKhIadpzJ9fySNFW/IpWYFlVTDI2ihYcvGsGO+0gJlE7CUqNBbZyh8YD9CZChJxry7LDkzeW6HDO3g==","shasum":"c67d02983479dabdc2b2f46e177385a1650edf39","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.132.tgz","fileCount":603,"unpackedSize":244093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjA5fCRA9TVsSAnZWagAAkEQP/0yDLh9vQ73SmO/b3VRj\nflMtPBpMN7FRE8+QjlPzUB7LG7t8Jr+8coP9vUR0DPrDQotY9IdctNGsyKcc\nZeVpV5tf8yoFz4fuUgh9WSuCX1EY5j6INdehxYBAwleufreLBjE1X2n3nNI/\nUKxwXaIAynifx8kccUs81hnqkSOAnG3DFaqg0zqsHHE875tjG11aB6xlbOsA\nW8ZUe5uvA3ErUJNs91fE4DaZ9hIs2HW1DYBdxaQvnhp7jDFQnAdehnBjRyB9\noDWfeclPqKD3EO63B03B1aUBk2chbcOkTSvYnoNaaV5Elwhvkhbk5icsLsYE\nNHB/sclLW2qQe1v6OLzAWjrbD7pWLALJ9FY1rbwCm5OQb2BbsWxkXQBzBmHl\np/eJv/lqkupkx6hQ3RefMuLCnuSBDhVp5BoTONFVadsRlLHknmSbo5Gv5e5m\nVPufDbBFdj7W6ho5WP6fcLNFnIMadlallecGDV5un8EBAMTjb6tkzjsKSy/+\ngcAA0+/uBRBsqCvrJUa6NQFFqDOM7vcHaOrGHnkbHgKi1E2n30Z8I6WqpHRw\nQASvJSDWjpNRf9x9wFYhXtdjVr4YPzTTnc5JEVomjB/e5q1zyf+vzHz2r2cp\nX2tJHYMJFZBpsWR5evogBaMMgcqnqBMckeNtkTIaSonvJ6oyAiv873i8K+vS\nLU1d\r\n=26M/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9FNQntBDxqidLeGHJd/PAiPNCplizs1Y0KpghCljoHwIgZKTNPRVxYUoA6eT6x4TYMsubGDan70PljVZnjB3Gqp4="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.132_1552682590695_0.6912766245046167"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.133":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.133","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.133+5bbbbb3a","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.133+5bbbbb3a","docz-core":"1.0.0-alpha.133+5bbbbb3a","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.133+5bbbbb3a","fs-extra":"^7.0.1","gatsby":"^2.1.35","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.133+5bbbbb3a","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.133+5bbbbb3a","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"5bbbbb3a46d85326d30a2cff47c3f1c1434b3711","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.133","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-qBz0zvpJOwZVmMS/loGr9R8Q/F9PLscNIxStJoJDCofPAKHFYyaOhy6p0JmgKZ8dl/eSjSMQm79ivH27f9lsxA==","shasum":"6f615d0355bfada8649f42ab57fdf49431452bd5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.133.tgz","fileCount":603,"unpackedSize":244093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjosyCRA9TVsSAnZWagAAXYQP/0p4ueb9lcw6YJcmfMre\n07HR2GW3APtaeio/FU6t7g5OrRcyHz5mTEY/tSYxNAHVVbRjosE0DJsuAdeN\nMzdHy5Pqu2NKHtKRUoEvzuzwVlsZyliM4kpW9szgLGld3PMvTWFvG5ogf++6\nBe1rutNXJ4fLyB2Nl1u94VcLSYIQxzszHybXVPJq5zb+WQj2q+VDwZeQYpnL\nGCjEZUkbehtywTS3idgJcwCAXdy9fE2lKlJkSnU4IYpfN2s+Z6wJOURIUlFy\noPiaPpMKyAuM0+rTycL6vRtn9hNwewKVZumanq+zjILDFOwwLL+vI5UbIKNF\nFyz8n6XUOq7RdbuEYXE6cHh3F5MsdVWp5Ubm5Ymcs0JTXP8NB7aylb9ZtBiw\ni5NVr93urEsLVK9eVA4GenLWoBfXRRb7P9n7gEDf8A38ChZBTaK9O+GonDxH\n8Urfmu2cloJawZxZWUdEc8GSH3nzdZBb7qivyVUK3xXYUqewoqG4vULEaokx\n5/FCc6Dcoh/Wl6MNHNg29pHyU9crTNLnwuWL4vI5bRnHBpn5DIo/K3ASof+2\nKYtx5sjlrI99kLzwR2iKhVDvSP7Mdj3yCcSxjwCwFUh8hxx60h9FUVetLp8e\nJbuIv+L+ribpDPKzaXH/u6GPC5ztmch3ZeSKtAM55TDt3zSjbVqp3kFFp9Ti\nGR57\r\n=v0Ad\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNi8TN0pgDYrZ6yEFqJyqH3QaJV7FvJfC8kFRWkwxpCgIhAOAqwID8Ht0DxsRXo3D6S6hZZnEXIMIAhXTUKpzphMYg"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.133_1552845617703_0.5882350286719791"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.134":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.134","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.134+7f2e0ff3","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.134+7f2e0ff3","docz-core":"1.0.0-alpha.134+7f2e0ff3","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.134+7f2e0ff3","fs-extra":"^7.0.1","gatsby":"^2.1.35","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.134+7f2e0ff3","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.134+7f2e0ff3","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"7f2e0ff3ed33412bc98e7b67da7a0eb389675451","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  return {\n    __experimentalThemes: [\n      {\n        resolve: 'gatsby-theme-docs',\n      }\n    ]\n  }\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.134","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-sw4t76JnDdHPhQmHi+4L9DH4CQLFwNnSciVmPOLADSO2xlE+sqKWF6+QXARBrBCoXWZS6KshtgYsr+zR7S1nhg==","shasum":"06affc6eb30e9e9c603a90aac6d7d7fe452c79f9","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.134.tgz","fileCount":603,"unpackedSize":244093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjpFwCRA9TVsSAnZWagAA8JQP/jIsyzm/6nTfmBxcvvd3\ndYw50tS6fv8k+WZF8lGRIbNnkfiHJ6HbFEkadTJFqinRK1nSkCL8sedCQXCd\ntCR1TI0aYsgTwkcQCdQpXKZW2MeE5HEk6JuY43Q56u/OfhVcrJxOQJ0jizWI\ngcoNXc0KDeSP4Uoh9OIhYVlc6f6dlf3YoUOfWL5vXbZzz1/S+KmsRE4svOn4\nY8YJsuEK3AYqT1mnTNZaiVJnpMbk6dC/74s3I0OaEjSS/dRYK1AQvs6c4jyR\nhYTv7qnnCrK9regrk29qrCBijKdlhNoQHAyRQrMLgV7xXMW1rfgFBAXvkLZR\nH40pokeZ/J2q5roL0OcfcOuXp0gJmQ90id8/5omH5kNponCzhtE09B7Ltb7l\n9weJzlqxSFxdgwvooGBOyQ1JTgFo5yAcyexFjufl0u7bmrHrwqUTrtifhDID\n7UFpvCbnHFsc/TCWa2/xQKwoSrH3eOR/zAHSibpb7TBNuh/rwQXlPikJV3/+\nNV1rHEyQ1If0ubAeo5p2raP4DfR/Iq0GiDi/JW63+Jmkd7MKJDxbZ26Zp5ET\n4ZqueKyHM/3I0c+zvTcX45ZXDIYJjfCNDWpbUg/3Hv9RJ6WQvEa4uNGY27L+\n2mByP87px1pNFay9ciAZGe89SleL+7HSQURnNEPffn9GpZOMy9hvz4urvspP\nthsN\r\n=hx2f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKTzC3wy5rOpyRcAFiR7hoTJ9mLDP9qkQMCXYnhdTeowIgM8m0fSXvciPCosc5f+ZT9RzZPasdHesAmjCeFS0QL/A="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.134_1552847216100_0.6749500921830611"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.139":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.139","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.139+b0409a83","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.139+b0409a83","docz-core":"1.0.0-alpha.139+b0409a83","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.139+b0409a83","fs-extra":"^7.0.1","gatsby":"^2.1.35","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.139+b0409a83","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.139+b0409a83","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","ulid":"^2.3.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"b0409a83b11fa0c74bea41de3b0b31d58482a8fa","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.139","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-LM/7vr9Ab0O/ADtwj5v0qjPt24X83aDsZOnD2i2WbVLBvP/rP5xNW1nFlQayeRTaXx019qcCLRxGs0cTD4ZNVg==","shasum":"c03f07df6f3fd9c9cc463c1ec57970281771b066","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.139.tgz","fileCount":603,"unpackedSize":244067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjumJCRA9TVsSAnZWagAAmhwQAKLiVmpmAZPUIOsDBmGy\nvgWbwNboFjEkDhjgTpTK5CfIq6LLvsNW00NlVY7am1sWQnloBue02CCXY9/n\nuLJ4ZPfko+k8c5/ozsBQRcB7BmpEUL1n+sXyzPJ7r2WMC5cHWIkqEaDruOTy\n4RSolvBg/Dy1x4LDkelUYNuYiRM786cfW39ccvIkGIXs9m4XT90Mxg3m9xql\nhIq11YodmN9kAtdMI//HQ0d3b0nVYQCzZOyKv4oUBHgkzBEA2jBu7LDQFZs5\nLO1/+CkJBzrY343vB7yvqAtnMtE+GKxSEuOpnh1lbWAsbueUQYErtlji0CzZ\nedGuFmmrMIJ03EdLPi6PhrqGmVZt+mKl74g0uX8O9L6k6VsBYMSg17mMHLm2\n7Zkk5eMmt+2BVzu3MNlfA4AkW3Hb9/PM1N3eW1tWFH5Rs5Klb7zR+SWOaMxv\ngP6t09GeylRCu2RmZpASUDjQcW94G/KkW/DjeR575T2kgoTPmWOCBXVQd0GI\nbETPphGINdzYSgcVtV6l9vPf+fcMcqeNK9HuwSDnys1xevKM9RUO+OUMTQcO\nyS8lxzb3vHbOS/aT6aiD1EHVgZQO7cpjwZvTESiIurG8/boKfSZ81ANsMM9/\n0sS/6h/b1/fNv0Bwr9sIgJ/+SE8taNwAsgrC/OfsrH6NvyljAAOtuoBw4bH+\nurTv\r\n=HxbW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK5JHi0ERE7XIFjag0pdJ+NnBKjHlcAhzQiei63KlIsQIgISoX6wOMciS2dARrxhpib7FYb2v7VgA/GY0ayorTbfA="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.139_1552869768905_0.9090715097219904"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.140":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.140","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-alpha.140+2f5765ed","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"1.0.0-alpha.140+2f5765ed","docz-core":"1.0.0-alpha.140+2f5765ed","docz-theme-default":"^0.13.6","docz-utils":"1.0.0-alpha.140+2f5765ed","fs-extra":"^7.0.1","gatsby":"^2.1.35","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.9","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"1.0.0-alpha.140+2f5765ed","rehype-slug":"^2.0.2","remark-docz":"1.0.0-alpha.140+2f5765ed","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"2f5765ede5a0214501c10d9fa3474f011f9183b6","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.140","_nodeVersion":"11.6.0","_npmVersion":"lerna/3.13.1/node@v11.6.0+x64 (darwin)","dist":{"integrity":"sha512-LfUOhZn0cbtRRsqZLEd30oAyM2K8afzbQKx2gQ3fNZMBVSiZS100bMtio15ErfPuJAVsWoRs3f+Y9PX50Qy2dQ==","shasum":"b410fa778b4f8811b8331d77c3bab6d5c838c258","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.140.tgz","fileCount":603,"unpackedSize":244059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcju71CRA9TVsSAnZWagAAy1kP/2qPH+aS68l7V58UX24m\n6KHl9Q4+iKvpp3Nr3AaE7KeTwZOSNY3TQmWW3G7mxjm4RliP3L/IIJhHSiU3\nXfI0I4gd9AXSEV9jOfidLk/J8745OcnphgZ9OTuBnKNue2YX520zkUI/b2vd\n4b77TD1vuN0av49FU9vJMMAclCx7KcfU2puVgJnyNZErgCz2mYShx4CpuXHC\nxqrsHNld6s2ci/5K5e1cP1Jkeb/dpO/58aNBfirCAkbRw++1RUMWti1gZefo\n1ooi2phdAFCXkjvYWhiH5EGja8Kt3TyRri3hi+frAMic+tC0mI3JblOucu1B\n4DYBc36ttSgjXpnP4ZtcxrjiC6uHfk7eFSpJOD50Ju0RcHKr5zbxADPBq5R3\nTxBa9lOAfGjBIfqkMNpu5Z6ORBOhnLvRpxLSscmthiKbf09ym4kRqo+5UH7o\nkb+AF4l8fbaF9k5DlElLyYh21N2I57QZESejN9YG2nPnhpOMjEuOJziax+5i\nrHRV3IfihNCP5OqNG7K0doEY+vaWPi1J8QNKHoQz31x7l0BHmJYTRd3Z2adv\n6VdrRqlObAM6zwtdIkSYOERtzerMpnbsDKgjJkZSufZwBqR7Hesp+n6NIIF8\nqbxRXs8W2DN7yY1vowsknfgclPoMUcfcsu33NaOmMtQ8QF9/CEPpyBLufapD\n90Fi\r\n=A2+5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzP8Ys+uwgnk1lqZlOEbe61ysBKRd/ZW05f3kRm+gJCgIhAOixIqAzE8y3BFFbSfDtyBsF/a/2zbeIj5Fu5w/KDPQ9"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.140_1552871156866_0.7747501008037341"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.0":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-alpha.0","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"^1.0.0-alpha.0","docz-core":"^1.0.0-alpha.0","docz-theme-default":"^0.13.6","docz-utils":"^1.0.0-alpha.0","fs-extra":"^7.0.1","gatsby":"^2.2.1","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.10","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-alpha.0","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-alpha.0","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"c47c134a009089ba82e1b105974bca0305990036","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-qQO9UbIZDXQ+UZ6sW6h/CS9HLZnZ1rgFvw35vGTzwCdiWyWhdDFPYZcdjsJdvrBExNp7PBv3MdaLwY0ezycK8w==","shasum":"e4cb36a8a9520f30ea3f73708a8e15945ead1f41","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.0.tgz","fileCount":604,"unpackedSize":246426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckVdlCRA9TVsSAnZWagAAJcQP/2YVjjX7cpmjayeZHF/H\nsDgJs/6XAtQ6HMdZRA9PBZW2I2UwY/XJ28Jef9T09g573qlMDJ2MvENp8SD+\nspk/u/GqUXhQdAxXjyPHbZ9GYIO4vjZ7K968SCULHM/FgURpBSCmN1gnZkO/\ngeAIqdMN1oh/+kk2IUAjkqiOqwBYrJfdg88hXvLsA9Cca/92Lze/LRPZXL4P\nMNTVcIfECOrKKMxYoB5+7YQ82pEQ8uWbr2XhWOOMovRXps2M+DMgxRv/eyiN\nRKOo7Gpjltq+oLf68gNfSmOKzEgRl4I6qeqJkSMVeNsAmUrCz1DJm5sJ5U95\neexTU7EA+jvVCrhhvM4CTuT9r7gU83rrMjrFNBbVEoQnsj41jxmvjoFELDxC\norh04Zt4p7rW4lge1ATcmwV6HpXSWtSkiyqH4CrF2KBMsMdaBwkT8hX8bhY/\n5YWic9g3vE57FijeMKPP/sS9agPyDoL9iLlHOY2S7WkYVbF3xbBPcg+2tENN\nWxzowDSRtOrDZl7hlUNOgL4rXE65toL/cdAn/6fKBOa0P5NkeiTf/8EiEcBL\nHLxKqJZx0E3xGRm/Kj6TjzlfnN+oO026cSLnQCooyuyHN5aqJ2uKsJ1qEyr5\nO1ql7U1xGPBpMOt8gy1RRAtl9njH/NMBWsXM1qpgSWRDFFdRc2ZwVnUW38z9\nwp6M\r\n=X1bf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5yIuzljBwgj497ZpsqL7caGaodYL091dZ3z3mrhtdOAIhAInnja3sMnH6DUF3RNVHiQCqJZ6ovWEK2luxffOQNinL"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.0_1553028964938_0.10986511827277545"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-alpha.1":{"name":"gatsby-theme-docz","version":"1.0.0-alpha.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-alpha.0","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"^1.0.0-alpha.0","docz-core":"^1.0.0-alpha.0","docz-theme-default":"^1.0.0-alpha.0","docz-utils":"^1.0.0-alpha.0","fs-extra":"^7.0.1","gatsby":"^2.2.1","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.10","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-alpha.0","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-alpha.0","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"709f6c17f4b3dbb4b47265b7554a281dbadb88e8","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-alpha.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-JpUdhhrzHJ2PLnjyPO2wMerlx77bWFK3DgMZSEE7NP3sPyRCIyIGOzCgrVWX+PDsDoeUGKjEe1S4Hgme+wyaSQ==","shasum":"f16b67c98fe88212ae45d52ef804c94635443058","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-alpha.1.tgz","fileCount":604,"unpackedSize":246650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckWPpCRA9TVsSAnZWagAAQVEP/iCoWiUKi3ioNg8jB/E3\nQ3anqq4pDwYS08VA1t0NkIP/wLvEZSPnpSP8Wu/gY5+9NvX2r/CyTFBvgnOJ\nfs85WXqkpVThHzvuj91P4I0DAMqLnqFXavO6HlM0bBU9259HN7mAB9evuU0z\n8247SbJ3oy0CNTDjYqNS7ePbezvqntmL2X3cMBOpScjBHNqIU2K0yFiFhahg\ni1BDl7SbXWSlbbX8I2iiTdL/Lm/KPRh9WkvxWk7lzo6umD9vNtecwg4JdYx4\noohMoXEfBcVqk0Lx61lY9AJOtp1LyAyZLkIeFZsOIuM07Ch4DAbV+7M3XuOQ\npqkWwHYtmg14WKJiryI9oeMQZGyfSKrwU44H0NepBotXkzJoh1wAXb3wBPYe\nLo+Pjtl2txgndkmnlbIZFvqfktij85vRSpyngsTZD8Ba4LLe48i57Ri9iDQ1\nx5y1OskJxrhDcRiprCPGyrUhQkTakZU/PI6f1w/F67dlklSzm8YpRc+42hhb\nk7B++UB5KDme4yrXiv9Uhfg3Fux4RFf8sCQA0WY6Rmi6AZka8LFQ23U49Wzm\nq0r6IDP8ti9dhJK4Pc7Rrx2c3c3e8feM0gr6RcFW/VWu4sSBHKpQ7vpkCsrH\nYzQqvKYQBy93DTWGUlnhOHUHxlRM2HnmARU3SAmPK6gPd7unKaimfurLK1r6\nTwvX\r\n=ZxKl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlX9cPmDhJpR7ue/sdoygpV4osHSoYNrdMKjz0We0QgAiBtzEldNRIgL3RQwueHSDH3o3pSQuPRzQ6h9676By8Tmw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-alpha.1_1553032168770_0.5147491273076548"},"_hasShrinkwrap":false,"deprecated":"this version is deprecated"},"1.0.0-beta.0":{"name":"gatsby-theme-docz","version":"1.0.0-beta.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-beta.0","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"^1.0.0-beta.0","docz-core":"^1.0.0-beta.0","docz-theme-default":"^1.0.0-beta.0","docz-utils":"^1.0.0-beta.0","fs-extra":"^7.0.1","gatsby":"^2.2.1","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.10","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-beta.0","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-alpha.0","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"1babd9fd53be4cd0bf126eda41609b6872052f65","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-beta.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-EChtLQwKqvDul1bQzGI1nXfYN4MCRHIjX+NvZxk8aW7ghwR+fLA+fKE3ufdmRkGD2UYMX7HTJWjKupXThgMhvg==","shasum":"e0ba68406cf78b621138230b3b079c8876e5943a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-beta.0.tgz","fileCount":604,"unpackedSize":246812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckWaoCRA9TVsSAnZWagAA46kP/RTRl6NICjWgsenZ32sx\nR+Hl0tWjzWXhg5uqUoY3M6tVnCg1TtOwKyR8rOaMAFX8W0zOfnBa1SBmCxnQ\n5TpofjN7wIIb5t3doKOGn0qLDB8wtKNk/1FhNzBBzlPwpK5sC13wo4DNBU/T\nRZceu+fA4HFBuxzqevkjCUVjwAaFYsIdFI0T4jkI3BTgyHfxwNpcKcDuiyb3\nGOkJ7N/XD0zYOIyG1B7yBPr01UMtiYb0JhV6v9VaheZlbWPV8OuMiPRibghb\nmLSI93eLkVYBhgMv5GRssSbGwA1aJKrG6i/X8Bo+nvK9xp6BJBHnf8x98ZXB\novXNQODMczWxKxWVyUqSTZ1hq5aiT4f/9A3Ki/etTMucIsoHTI9XBpFmjt3x\nH5OVbTG//yDfWF44CwVVBqSPUIMUXZ7+V1PeDTrnXYLnaTKwX/T/S4IrZryI\nVACd+XmKkOB9ejiaD8U77EOeNq4YLz1iDOndkNWSQhTCgzo2fbTqmAsHcRkc\nBJbJtXoxzLneZNf5u9RgXrf2I+ru9yynHPfzPiFRyVEj//Itd5lIPCdqsNei\nH+E3eF4u9nC42wUVGCcxF0mO8peHsAc0sioa8XkoxXeUMRy1AyZkkoLDA7/m\nrW+iHMDIq4SjN+6OkI6EDr/aRhcr/9wxp7dxrD4uB5KyBDcqXUzpztGdaI05\nKUKI\r\n=SA6Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+LN1bCEf7QfOT2izfMHiMk4sa1IpY93ySCBmW+YYklQIhAMLzO/F9IzZukxf0D+eRpV9e9v3uPN9duvPtkNjPLFiX"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-beta.0_1553032872404_0.7333079248715968"},"_hasShrinkwrap":false},"1.0.0-beta.1":{"name":"gatsby-theme-docz","version":"1.0.0-beta.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-beta.1","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"^1.0.0-beta.1","docz-core":"^1.0.0-beta.1","docz-theme-default":"^1.0.0-beta.1","docz-utils":"^1.0.0-beta.1","fs-extra":"^7.0.1","gatsby":"^2.2.1","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.10","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-beta.1","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-beta.1","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-beta.1","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-mtEIL0xSJU22OGInr4SllvC4HI1FSnsLQYxIvmNThKiw5910rDZaEys4dXsdvB+me2lOzbKosCkddEf3qLZyJQ==","shasum":"aae1769b149a29d4fff11b19ed63c567734456b7","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-beta.1.tgz","fileCount":603,"unpackedSize":245686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckYT6CRA9TVsSAnZWagAANIEP/jPWsDl0eO3QcQNctPVh\nUw0RaOi6RnCTIklLnEa1+ZrkbAKxQVdUcARCxe/GCX6YX/hzi1G2eks3teJH\nXfQFBPfcS/kqOALHdE3j3Jx3n3y3kUrGZD/tzocY74pnEU+k0MYJ/44YxH/d\njRvAFpr3vFV0Msoic1V5fADQBOcwfVzwDQy/Ka6vmiPBRivdYg7mLqlrIQYX\niFj2cRgZYi+dmPJsId5x9g9jpPjLeYbWCB9DqgjNlLsHQ2CLkJgJqfeUsAbs\n5LpiZYDOM16b71SjjFeCCuoSGm7EoIk4DXaOgm9njBCF7bbJfdFC/2Kw9RBV\n0Z22pXTkqy0n6ZwGjJUuA9HNWiBfYV5kJSF3X+njmcU6hnJ4WHWmBLCcgF42\nWbItKK3VeUPkrbKHZvA1WocSKFw/klUwOFTr/BMf+S7dW9T5Q/iZBEuatcHE\ntFqP0GtLGZys5XS6/acovMqwin6Mdf5GaGsgHLuxrBcnsLwZete8HCXrMSas\nKhg3B1RkZ0cQhsm/QLbTG5knBbVJxCpkr3e8z83qlASw4SqVEMYcIFDrr2JO\nEml6Eb4MsU87FKalc9arN6AkKXCzyln3TyvafXyjSg7Qdm6Fd7UsreWzkG8v\nQq65gEEl3nr5U1z+NHc0kemerhYfk60Dm55BMN/W+5JQl24gjI/kSouEl7bk\njxsU\r\n=0+2T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4s90ogC9pstBKIJGtAdm05qVaOOQXW9hdbErTB7s4YAiBxWVZaj+I2eLbJsZULsR6AaX9zFbHQmDsdDSYCMOgyAQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-beta.1_1553040633102_0.5540393886666313"},"_hasShrinkwrap":false},"1.0.0-rc.2":{"name":"gatsby-theme-docz","version":"1.0.0-rc.2","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-rc.2","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"^1.0.0-rc.2","docz-core":"^1.0.0-rc.2","docz-theme-default":"^1.0.0-rc.2","docz-utils":"^1.0.0-rc.2","fs-extra":"^7.0.1","gatsby":"^2.2.2","gatsby-mdx":"^0.4.3","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.10","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-rc.2","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-rc.2","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.2","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-IfB8tfcLs2wdRbU+gis4SmsYuyxtwfYgJ9ZAR724mHTxIejNhprl/kbmSSlDiTPabhrm5zlZBaV5xZYfxspC8Q==","shasum":"3d0a887c10d7f5f3c13c6c7c79fa7f15d825c62d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.2.tgz","fileCount":603,"unpackedSize":245670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckY2MCRA9TVsSAnZWagAAPngQAIBtYkFqrnzJ/iP6GJme\nLxeSrCOgvvoC9jKIO2VR3M8WmTLQ4bE3mLLGlh7GvDiaaDBShy/JVZ1nvmKv\nvxB7avQexQxGFRnXq1Twmi7gvh5mHRJiFBzjvC4fwgsfAeGJztQDXjxZwTHj\nwv9DiiWUpkDsjfu0R5P1XuizfTf9urvuz3IODbG5/JYotJ5Pz4fdi43kittw\n/kllqK7HgccPuq48mvfN3K5omUP62K1fQy9T3Dabf/Tf8rfbDRYuLhWOJNZK\nDgCS7hjrIRGGfHhkQt8PkGHPLSgM6WeRxsI8EBLviim8ewCKCRj0igTpyNVS\nLiZV6zz79ppJi8Li2DPxJV/L1xMmQ/dETyZZA/9fg08AFMTSqM1M3WY7zqpD\nG3tINGKdyNNoN/Zu6T9omXmbjfoPCgNTa89GqzcX8Q4TiWHHuBzstXGGz7Gf\n8Qd2NMimlOgNGI0Th5AdQMuJKR3iIwrMTN18fRtT1KKExAc/qVciua3wmS5F\nJmIzgMfjEurNLRq358v/lJgkIvLLOFlHqROJUEFfy4ti5cdQj35cTS+mDx+w\nYLrQG8dq8pUAdisyaT83lENZn4EUc9qnsUmhSd9j5vTJDiJ4HOhlqSDI9HPG\n6tz+Z4/y36X4mYojaHhoISxye/sJwBZa4Rs3YXzGlIhBTnEgZGyS/xXr/gG7\nq41G\r\n=wr4G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLlNRpQJGVf5tcx2T8MtDdh6zola7fftgxscghGGlOYAIgZ/B7m92k45hIS8iAXQvjxpeVJWooJ4SJ7/Nqd71mlUE="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.2_1553042826328_0.6921660970581753"},"_hasShrinkwrap":false},"1.0.0-rc.3":{"name":"gatsby-theme-docz","version":"1.0.0-rc.3","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-rc.2","change-case":"^3.1.0","chokidar":"^2.1.2","docz":"^1.0.0-rc.3","docz-core":"^1.0.0-rc.3","docz-theme-default":"^1.0.0-rc.3","docz-utils":"^1.0.0-rc.2","fs-extra":"^7.0.1","gatsby":"^2.2.5","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.0.6","gatsby-plugin-manifest":"^2.0.24","gatsby-plugin-react-helmet":"^3.0.10","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-rc.2","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-rc.2","remark-frontmatter":"^1.3.1","styled-components":"^4.1.3","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"351ff576c83f0feb48e578573ec335276a876cd6","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.3","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-YIFdG7DPJCC8hX+VTDVbYOUzpVLDFZ6p9jZLTcGfGCkV5CaslHPDhplHbiYed9zgvTuxPPXX29hDmwxUG86n+w==","shasum":"6c46120e00d4482f148e1aa9c746836ebd83ae51","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.3.tgz","fileCount":604,"unpackedSize":247594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJck6MACRA9TVsSAnZWagAA4S4P/iaHTQn1gCuEuBUXECJz\nNo9FafuTasC3qJwmFeezHyzUk912C7uWCQiKklKqdgpcYCwE4CDY2Ny0mvr9\noK59PQ6MHTeH6+SezWaOJifQdSw54xQp+WjHBMuBIuocFUjpcoO5VbwrjADY\nfFjalq3H7drV/ecgyEF9fh69UtQlvzFDFMhuEvpCHmYA9Bkv/iGp6JyXcUUq\njjAbXeaIQWqRjzDv1zI8mFhM7p1Bm857pycvTe/lkOTjAbk1qBo8BRCT/m3u\ndzRznnDMKAGP/mXSIrGyzI9FqEiiNfpenk7uLXPgzeE1QRoKjaNJm+0qtURJ\nc4nObpHd9JtZGaAXOY3dDgE0RzniVfDjiceUU80cFK7xibxq0lafewJAqL7h\nsfEiPIf4mUgPUCMGMtMF9U60icR8bynz6Ij7himfL6zd6fgZwquA0JSUhDzY\n5/T6jmLINlrTTHJAV+KAtFnb0xZHjv30C1hnWIAl0jOS56QfkayF/dhZcQdQ\ndtSlD2cUQkNJyIoxj/HcVqCp/HJT6V6frm+vRSOHXba4Ly8BieVNyDD1hILk\nW7uzp6vo8K56VLypMyabDklxlp5/3PFdaUMl+ttIzPeGLpD+7TljbZasISRo\nVwaeX8fGh6IW30qyG91J7Bjc+Op6bMSEfybwsOjDNAt98Pn/taq6yVXvKGeD\nRO6W\r\n=JpT1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDr9dBV4nrTwfZDH4CQ2OIi6awWA5JDzuIX9Dcugx05VAiA5MuJl4v1E4zwJlR6ZNYCA6ywkKGQtVQ7L7SgS9hUgTA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.3_1553179391511_0.5003805802074544"},"_hasShrinkwrap":false},"1.0.0-rc.20":{"name":"gatsby-theme-docz","version":"1.0.0-rc.20","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-rc.20+ad85e404","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.0-rc.20+ad85e404","docz-core":"^1.0.0-rc.20+ad85e404","docz-theme-default":"^1.0.0-rc.20+ad85e404","docz-utils":"^1.0.0-rc.20+ad85e404","fs-extra":"^7.0.1","gatsby":"^2.3.4","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.26","gatsby-plugin-react-helmet":"^3.0.11","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-rc.20+ad85e404","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-rc.20+ad85e404","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"ad85e40466c3b5646e2dac140952f8aa10be8653","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.20","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-VI2c+QuXod8cHqcuPAnaOQHwKcKLx70wz653cmCFRavWP0NE1ZfU8jlD+fKXm+qExXbp+xsxRRmemZyAa+5WCQ==","shasum":"c8fe976be1ea2ad677513f6765fe298aeb5fe37d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.20.tgz","fileCount":604,"unpackedSize":247674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnoToCRA9TVsSAnZWagAAKlgP/1iROG3dg9SiwLJf1tIe\nRKDdTKv2/ghQVtAoN6s/BtKFqeyn0/PRPntdbFp2iW2qR5fBL0xiQ1r5yq37\n5FqAp9kVHF883xTP+J4pj6qBBuY/+ZDRGSYLYsZeOE2tXdzyDNxVIIEu5BuC\n52xkWJRjnpa48x86oy88LdJf19C0o+DzT0kSfvHoVpZup1keggKa0XziO5hI\n0p8wYx3o4EbkaK7/ymFG04DnxG4RdmGDs7nact4l24cRmExj5fngB2FL379i\nXJOJCl9XudcGBKG0vcQbu2nmvLX8F93ssOhm3rw5d1fOivALnbSJPVdnTFVe\n3aL/DettUq5/EkZ2qJIy5Mdd42rNeWEZycEjq0+CKnte/ykP+tOPDefNKugJ\ndCecjkDfsNA2JDCDQDtVsnpGh41/R1lxiNDxeAGnkbpSAd6ezKNNnvjSALop\nRZUDjSNBWisMn17tjhxjzdeljGKWID6SBmMEwxjx5g0ujZRmwVw9Jn2Ph04k\nLyHufm4tlkt6+Ro2uRmzk7tUBa/hddzM4Y4aeT8L7pKOyBfZY2MXflX4Wkro\n7/e3Mlc/MvHxYVwGaKzs/2CIZCZg9T4tT3SrbAe2sPvhFIBT9kaLbsVdQ5tl\nK/eqrEsI5ZAI2GuPcW5qwqOqeoy9SXRhY4gbnZF4Glbg2fmBlOKjzeS8aakp\nSEWP\r\n=tiUP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAq6tW3b2HlIaqmkxFicQmpg8iRKi6LYI0SfwaI9CdbAIgKinHE6F94YIzqR5vEzhEskTe0fSFqV4ytWOHXPmYJ2g="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.20_1553892583451_0.5298177101824546"},"_hasShrinkwrap":false},"1.0.0-rc.21":{"name":"gatsby-theme-docz","version":"1.0.0-rc.21","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-rc.21+2bae93b5","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"1.0.0-rc.21+2bae93b5","docz-core":"1.0.0-rc.21+2bae93b5","docz-theme-default":"1.0.0-rc.21+2bae93b5","docz-utils":"1.0.0-rc.21+2bae93b5","fs-extra":"^7.0.1","gatsby":"^2.3.4","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.26","gatsby-plugin-react-helmet":"^3.0.11","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.21+2bae93b5","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.21+2bae93b5","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"2bae93b5cc966ab200a858faa2785a71397848e1","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.21","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-X7gtFHJD0IxAqvb8Hn6NrfHps3c/rS3t+YAFe7qjqYnwJGtD3PbRHPeG2lY0deJvdnplCmXRnukY4IJIVZxcww==","shasum":"aa664434920b7e2e47eb3d074fbca69fe10e4ec8","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.21.tgz","fileCount":604,"unpackedSize":247667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnpbECRA9TVsSAnZWagAAj0gP/1YuJkkGoemZrvLFbKKv\nqLd3WDmt0sBE1x9fIlF4cTuChGr7W5kiXciQSyU6VJzn55cp0hPgBc5yuS4j\nGMlEdnUYWUE0ck5e2KdBnbef0m4BrqDnuAl0yehGak+cISMzJUS8UApc7g7B\n8VvVtckUdzP3IWEZfzSFZNfOVCQCCFGjlwxfzQixhuTLBO6AqBIsi+xpF0gK\nL8itTRa1Q6s/NuQICd/nJZ4eOl2DoRxfvH+7/ZXreVzLsH0fCw7KA/ul86pl\nfrYEZgA7j3PKHG14DHZdmxj4mdKi9jI27ljLwK+vIxz1rIHO1qCftDQ6DH56\neMUksXnPw2InhcZQUmNGNdQKGpnThvzrKArc0mBAdNDSWWc0Eny5xyBEzBvH\n6211Iw2e9wizEfW1PV6gUf+L9V2VHtKmIVFjpS8PSu8xy12P0TB7+qMdIweD\n3sInGnKl8uY0Myxm5gtHfbufLcpto+SZFbxsOtKjbV002kGgXVGvddYwZvuK\nT9ktYikAsioq3kJjbNM7ukUS014UZPWAM2J4yNzoesbr9p2OBISFRP+b5Yqc\nD7jpgPxh/TTTZ5oK6rnioINBC7ve1McOL6q29KEaAiXNMMWa3ab4lBpQiNeS\nu2nNfKuZVHBJ1raZ7pIohblzkri/JyhL0NgXBfSYE1aCfi6Y0d3RutYBzJIf\nUF5J\r\n=yrgS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrv1yl4BB8onwQMZLV/Brz4Et9j/he0QW5u5fMxa3/hAiBwGBxT3UeqIZyM0yjeGRLunkoNGLgI8hD7Qiq9r5RAjg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.21_1553897156310_0.9871689765109175"},"_hasShrinkwrap":false},"1.0.0-rc.4":{"name":"gatsby-theme-docz","version":"1.0.0-rc.4","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0-rc.4","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.0-rc.4","docz-core":"^1.0.0-rc.4","docz-theme-default":"^1.0.0-rc.4","docz-utils":"^1.0.0-rc.4","fs-extra":"^7.0.1","gatsby":"^2.3.4","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.26","gatsby-plugin-react-helmet":"^3.0.11","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.0-rc.4","rehype-slug":"^2.0.2","remark-docz":"^1.0.0-rc.2","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.15.3","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"300826c1ee78130f0077b812fb9092c0950b56eb","readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.4","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-d4YPe6qve3+l22uTCKjy4qSk/jM1Bi2VudbWopXUGEjujMtmHza8MRMflfoBycR9ilMIdA5o1KoXMIH464Igow==","shasum":"57cced15c49728d2f1542edb6266847fd65ec6f5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.4.tgz","fileCount":604,"unpackedSize":247756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnplPCRA9TVsSAnZWagAAE7QP/RWqWm+rrHjZ7KKrKpF+\nZ4u6q5WCwxRXH3RAw1TnTqxTOlusmjQl4c6VLQEQZvz6xcfxBLRK2cKTsHJT\neyPk6oN6fqxcwgj/ryQb8G5qO3VGOFazNF51GOUKkqWDMAADsDoh7vyt9RWq\nkgCEIgHKooOVTOc4KI6xO1gjIa0vWrLwR9UZJrAsgoXnpqteh80hEcqM5Vgr\nHm+R90iySwprBmfZzqrhRFpaIgQLNMZ96aw+F6OuSEqXuB+nsicQJ4N7J7VJ\nJHKdVJx666BlcZZhO2BTlIRrZb+NnvWJUZhCIGkJQ+QsJyDdQgx+Aij7ysGC\n0YYkNcxUrQ4rIlDOeb9bRDnuNgeZLc+oMfYp3M5HL/ZRgizjn9YtV6HqQDCr\nRzieLGwRebYLyRmaqHkMMpOkSrAWVmSRmWZuxbzDgG1lY4IqjXSw8YTchnlu\n5pLSTh+8Cfy0e0mxqS1ScORPpJEG6vCHYnf33LZSMzaTDHgXmyhwX8aNOXoW\nIH+s0TsbrJZSloq/ejc0KpdKoLRJZp5aRmq/S06FBhLjZq/VEvqsCG0O1cPT\nCFkY3B5S6VbGUuSPjM0MLGsTnlxJ+O/cInQLJeQzzFjhhmkMdVNS3vhbiigl\nk08izZj8V2Fm/swQSq2pkqS38u4YZ/h3PVPr6jhTcRjMEAGLBLHlojLI4jPC\naT8I\r\n=Ba0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBt3plBloKZqI8AxLgs6/4RnelhYyQ6M8mZzOZ++b19pAiAX84t7CMoyD5gEINJOYp/SEEqU7MRgBLVxiVpwkJAciA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.4_1553897806864_0.09875371462531501"},"_hasShrinkwrap":false},"1.0.0-rc.6":{"name":"gatsby-theme-docz","version":"1.0.0-rc.6","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-rc.6","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"1.0.0-rc.6","docz-core":"1.0.0-rc.6","docz-theme-default":"1.0.0-rc.6","docz-utils":"1.0.0-rc.6","fs-extra":"^7.0.1","gatsby":"^2.3.4","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.26","gatsby-plugin-react-helmet":"^3.0.11","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.6","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.6","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.6","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-NMI16tQ5iBRF3R1HoeITfV2kKu8vs0a2CpC2mni5DPRb+p5eFJIUMnAgHVecJeEVsD7OgdO5fNjOKZg/4C/A8g==","shasum":"ec21c409717ce2a05f9626f965df4b404a86863e","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.6.tgz","fileCount":19,"unpackedSize":19766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoP+7CRA9TVsSAnZWagAAVigP/Rm0pXwnqn0HDzotPv9i\nkmUgGdsnmmjIQWaOUi6UrOS5gK1Pf57KKYjyGTwQUsyJjFSF2RJ6NaJ/Somg\n51TYmfowqvy2aQHxxVvDUYa2kT7If/PmcOpktAiQaI066ElrL7jYeviU14Re\nuWfd2kcr6+RCSbUSUN65CFEK4Q2uEs1ekPNpyB8ObXQ9Ej4TWfoQv62Ya64l\nBbI42XiHFNXt6NLD8CqvMfpQWhAETtnUvIKHBKL9qcu34+8WvUY4As6810dg\nhjWhk2TNEmEgfO9VUHHXEDBB8nMv3lJMhA9jQPNvNu50KDQ5Cj/+aLyMoeMw\nu39VM8whanSCCAS4fEvhRtSgl0b4NThOrlEKFKTYB4zfvCTEdxFBCPtEk27A\n1X/+9R4jMtE30WojNK5xXM3HcGtpCANDiyTGCA0xAKJvUzCsMqMpqLl/QHOB\nyb7o7M7z1qvvdyWFLrHY2wdYwm/AbMFZwbK00WYqldikbYS+MkTdvDZIctmv\nFf4XAKY/Bh4K3MVvmkKAptkzVzH9Pdon3upLwxgnwFXTj6fExgRA+PnUPHte\nuRVNpSyvMe8FWz6pFjqxg8ZOUbUlASQ4450GzQ98SVSIANkwMCN1qmT+gzlW\nCuGbmpZqGKbFaBafJ0iPlIhdqC3ovoS2n8/wZFWd6wyf1p9gAdz0icaH7Ng9\ncV2e\r\n=P0yj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEkU/R0Gb+oWkab9CuYX1d7GSAeAuBRo9n7usS0XU2tkAiEA0qgikOrm/391srdpgC+4nf3YExc213yepkirHNSk/60="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.6_1554055099003_0.47181371512670833"},"_hasShrinkwrap":false},"1.0.0-rc.7":{"name":"gatsby-theme-docz","version":"1.0.0-rc.7","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-rc.7","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"1.0.0-rc.7","docz-core":"1.0.0-rc.7","docz-theme-default":"1.0.0-rc.7","docz-utils":"1.0.0-rc.7","fs-extra":"^7.0.1","gatsby":"^2.3.4","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.26","gatsby-plugin-react-helmet":"^3.0.11","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.7","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.7","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.4.2","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.7","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-cZs9KXQx9u7lRdw0fPK+LyDHbfYBJHCCl1E9qwunOaWYqvphkpb4qz/hZf2PFvaxslspzLwV6EJ3W5P9MFj2lg==","shasum":"8a33e107436ac9f3ebad88ea191aa3c2629046a6","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.7.tgz","fileCount":19,"unpackedSize":19766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoSf9CRA9TVsSAnZWagAASD0QAJDVve+vqmit7b3UE5iV\nDeX0z286ef96bp4Sm6jqjOSetjcp9Dxf/ZDP6DlTZbTohD1YKWyJsnRodWos\nmvEHv1kHzkxIlgjAapaz5hnVsPh8bIZg5qDwspRrN7vAIxYYFRWTstYAHpkw\nQbyknMVIJVufYmdQdXANKTTKC2CprwJrkEcRRhY5eKbVzv9evHdSQO1yX11h\n2ZjnTHE+R3q243wOIx6PLkfxw1WiJNILmitCj0zIla/8GJnn9FSxjjYHno7a\nfqhunpOab50i5y0pExFek5HEqJPC3w9kKWFRnsacNnanrCHQ3L/2bX8HHSd0\nwLXu0gcYSDhzWON597ww5tNM5fuvkO6BbxlotSrJCbSEEqkwhFV2ARaUwQ9n\nNYAEc6qO9Qw3Cux8HBKojHV/X2Ivb9reeVFTutO8WZUOK/MyAA5REJTr7ZJW\n2DSkotKaZ5zsCN8eG1jA4ARvMB9gqnrusKWkITc2bN/aXhyYn7FmtXxDHVwu\neV1bVm/z7thL2du2LitI7MQfm2rglxYj/3Kspn50JBfUCD8+ouX834f4ZL9O\nz7Pjle0SZJwxZw0AWrx+PCA5cxbJOVVff+N/OuCXSFSDUqXmm1+OAw7xe/fL\nIQTBjx83IK2BwPpoOhMDCRarMwtf/koZYwh/SsdY185nTn9juENNA7JjMEDK\n9iRy\r\n=3yQS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjeEF7pZA22VrAdBKLm577K8t2ar1AE9FIicD9z2swhgIhAJPxmeVZwK483tGmIqd3h24uobPNo6FN6c+ARcBaE8Mu"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.7_1554065404994_0.5630439084329788"},"_hasShrinkwrap":false},"1.0.0-rc.8":{"name":"gatsby-theme-docz","version":"1.0.0-rc.8","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-rc.8","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"1.0.0-rc.8","docz-core":"1.0.0-rc.8","docz-theme-default":"1.0.0-rc.8","docz-utils":"1.0.0-rc.8","fs-extra":"^7.0.1","gatsby":"^2.3.13","gatsby-mdx":"^0.4.4","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.26","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.8","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.8","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.5.1","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.8","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-kMPVyH/OoYvHXeW4E62WeWnZViwpb1TiV1p7wGn2cU9ILbkoaGv+IfYVc2BCKGM1Mu6VpQHq/u2mKv6Ot5SFRQ==","shasum":"42e865ffebe37dcac1b82e09788dafd3cecdb624","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.8.tgz","fileCount":19,"unpackedSize":19648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcppuiCRA9TVsSAnZWagAAFW8P/3ILXHW6R/bTqJsOXhFD\nZl0bNOpmNsRw1jD7HiXTdDUyycPcqJa0xkwt5UmUof9H2iHCjEamG+DVcg0E\nmiaBBSo45JZYLCOeVcBSgWmA2uwngvkDu1oO/d09uy9XQ/W8skNLeZZaO632\nYpq3UMZIxTidth3HYAhXcqXyQA+c3X+1IEnREeO8A3uiflxDELGLtA6RmPQs\nAT40eDDdahPKSsBXxS7BgscbeMEddp2w2bGBX/Bid8NyVPWTfqEWp4emqWAx\ngbZg6yWOiy+5aTvqPyWgpzl/JXHAMc4n0Hplw5BapKfOfGTVvHzccZKbOO22\ni64qNXmFf0pvE87eVThfTrgA13TGmrGk8WNHfywDmMRykr/OghTzRzmbqTyS\nTnamT20YRnassFlLP3LepUnrNzNekweasOfScnXRfUCcuvY4nh7sEmW1EONO\nVDWnL7mv8sVM5aP5qyldcJSKT89a2G2m1tKXHA+BbgYs+O5HlzJkTTwDvh2l\nipiUV/154rBAL8QjlaMxqDeVFkCn8TYtL27Td6NKOnd9xLkCfhbwwcQ+tYgi\npSkasPUB63sBfDrDq4yyOKgYYFiRYsRYg0KL3fjVL1v5X6iIalUhpmYMe228\nuQfWd6jqm3rKjrq9l0sHFPmB7fkGfhjN9BeuL/fL1BnofwmucKOZB2bco7AD\nlJt3\r\n=8V2Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIQMTBdPv6CrP/FNIFOuDiNLj4A0jJ2azsdizmTxA5ZAiAmegZnOwOQEyAok3Zzj4+U/UWNvhot44Mnm9FeR83nDQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.8_1554422689955_0.23587932367126818"},"_hasShrinkwrap":false},"1.0.0-rc.9":{"name":"gatsby-theme-docz","version":"1.0.0-rc.9","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"1.0.0-rc.9","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"1.0.0-rc.9","docz-core":"1.0.0-rc.9","docz-theme-default":"1.0.0-rc.9","docz-utils":"1.0.0-rc.9","fs-extra":"^7.0.1","gatsby":"^2.3.17","gatsby-mdx":"^0.4.5","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"1.0.0-rc.9","rehype-slug":"^2.0.2","remark-docz":"1.0.0-rc.9","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"readme":"# gatsby-theme-docz\n\n> :warning: This is experimental and subject to breaking changes.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  __experimentalThemes: [\n    {\n      resolve: 'gatsby-theme-docz',\n    },\n  ],\n}\n```\n\n### Configuration\n\nYou can usually set your config using `doczrc.js` file ([see all available](https://github.com/pedronauck/docz/blob/master/core/docz-core/src/config/argv.ts#L54-L103)) or if you want to\nset some default options for your theme, you can set `options` on plugin definition.\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@1.0.0-rc.9","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-9XGbVHdMvvNtAi4xXNHlBVKxw0/JbJcLBHJIn/nwZD+5MsVC/HlVg5rU2kz+H8x5qh9qh6CTNbCpAKJ+yWX/5g==","shasum":"4f00c664b05bab993782636ab518cc3b0b67c995","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0-rc.9.tgz","fileCount":19,"unpackedSize":19637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrpf8CRA9TVsSAnZWagAAx6UP/0e4dOIZtnEc4B/YSsY/\nvGlNTu+XDzEB5qyyx9ogxCmbZEdcu49ltht92wJje47KaYm5HH46yFbk7Inv\nqfJ+W2V3BZczOLcTMX8ku7qWR1c8CaAaxv7qVAJBKB8lOtOf9tG5FWI+OVnV\njaEgrbqgglM23CFd/DM6fbPAmzLsoJwVd60WOjGtJzzjT0Vo++3U8cxSLC+F\nkdNGOdsTqALuDS/YjJJrFFZDUTsko6wPqf3bl9D0gIplXhjqgEA0vtofLjxe\n8IMHAeAoydfVXAiSAqjTJRvjXiPvG7VSNSh6b96dL72Vzpt+joik17K+S3pR\nyhE3j9CC8mXCU0PSdEqg2kbkFbmvxIlahg0G++giJgekfNG2/jpfkBrV6M9m\nD5Ro2dZ0gbodpzNEWPeTqCNOQhgtV/iKzZOrZD2bpsQHoKWSjHDv70jNSRg7\nshCfsIoal42n/oWbr7CelD6fMohDVDA9Eq1IhSNKohHwUUyWb37sWX1L7PdF\nBTWbu7U5BJgrvnDU12s+ayxlTm7cblLchrJnaF2Wc+cOAtxuDoPfK+sWh0on\nDaRtmArC0f+xNvBgA0gG3A/xUECpFGFo1o1a7ySlvnBwYtDUGffqmtfgcFQg\n6sa1H9qPwmlL9O5zbbzbrfV2C6YlfnEIp3Cj1r2UY88tMjqdBA6gJTJi/bG/\n2cOK\r\n=DiPr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEK2vAm+P8EiNijgXz5RX/z8/Pd4tRyiavO2BV4WC0UfAiBOZpN9kHwIz3GilQvEQ7g4rzbhHi9T7OBKrTwvERcVAA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0-rc.9_1554946044185_0.9676074374181767"},"_hasShrinkwrap":false},"1.0.0":{"name":"gatsby-theme-docz","version":"1.0.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^0.20.3","@mdx-js/tag":"^0.20.3","babel-plugin-export-metadata":"^1.0.0","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.0","docz-core":"^1.0.0","docz-theme-default":"^1.0.0","docz-utils":"^1.0.0","fs-extra":"^7.0.1","gatsby":"^2.3.17","gatsby-mdx":"^0.4.5","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.0","rehype-slug":"^2.0.2","remark-docz":"^1.0.0","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.16.0","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"7a15ac6a769bd92532b10ff85e8454c1166d94b7","_id":"gatsby-theme-docz@1.0.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-fWfh0bJl3Ce5B9fJpT9YdZIe8DS9acUz6KHIJPpZKcntT2hqM2UX5QjnX7M0I37FX8S9rKbpAGklXm8lVmdihw==","shasum":"d7efb503bfe46860f7cfae33268a97b1499d122b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.0.tgz","fileCount":21,"unpackedSize":27083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr4MgCRA9TVsSAnZWagAA6IUP/31YhLoRJAi+9VPI3XBH\nFsQvV6Jbf9TRZPrvdIsxIGXNLab/KX8/dVTndGqkU7HgH+qh216fqy9iIyDC\nv2hiSqmQbk6WHdoCSFUxpX7r2mUF46cVjQI+Fu3UvF2P7Cwnr4m568K5nuvP\n2SuemU+mN7wfA1XpUvHcTKG9HaC2oGHKTzcDnU4sErP6Q58Ou4BfNaaI/BBN\nDg5YYLBPSb6xHvaEvsntNT5N5SiPqk+WXNtVtNoQStgqiBLOvJ9Z286OywU4\ncWzPr8iqVmt3H+0pIJ3VS6oo77z673F50CjGg7Gcif8eR/sMbTpXKURO3GgT\nkm40c07zShxxrE4W0maRsRNEN61uXFaf7p2OTfdZdj8ZKc3ZksvKH/UfC2Sa\nBqroPBw4y99BJmwQuy8MFI/QVxjq8xmg97ISQXmnods3MCKOzHtHsg5tEaip\ntGkrtGWXrJe+pToSEs2zSdMYYAG9BQCHtLc5PuqMLhR/NhkNCUTWol6Xep7l\n52/Mu/VY5xpeNlMI/KI0SgqSWretNpkh9IQUQYFkEis2f+PSqOCeRNvdcTiq\nprLtFlhSRuUbn1tIIFH7ov3Usyf+1gxysEUMMK9K3aGN0ZXirUfqZ8mTh+kr\n75tJz0DsILG0yGYgwMdvZwdgPuW67R06m4Cf0hZj1lC/kURnmJb8QzmgXPZx\ngt1b\r\n=m3ta\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBekIpCpcSz+Hn6sHdlgjuSVgI/FSC1P5V0XW3QQNe7gIgXDpUcGIrsD/4iCPx3OEnbq0Lbyt0ofIG6PLb2XCgcQ8="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.0_1555006239415_0.4860581073895254"},"_hasShrinkwrap":false},"1.0.1":{"name":"gatsby-theme-docz","version":"1.0.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^1.0.4","@mdx-js/react":"^1.0.2","babel-plugin-export-metadata":"^1.0.1","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.1","docz-core":"^1.0.1","docz-theme-default":"^1.0.1","docz-utils":"^1.0.1","fs-extra":"^7.0.1","gatsby":"^2.3.22","gatsby-mdx":"^0.6.2","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.1","rehype-slug":"^2.0.2","remark-docz":"^1.0.1","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.17.1","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"8a9b88c6f07b099897668071c88fdbd0659c8fba","_id":"gatsby-theme-docz@1.0.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-mHdxpfE/shHuiKemKk/uEOq1XDK4lUFNFA1h7fxC4tm7IHo/LoJgDZU8Qv60kqftxlB4eZ4vbpYfQ5UGlJlpLA==","shasum":"55e642b06b71db41237009556c5c12046c3dbb64","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.1.tgz","fileCount":21,"unpackedSize":27241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcs6hqCRA9TVsSAnZWagAAZ9UP/ihqA6zCfywNTunRGI44\no40vsX5KKEnkoAy4J+gYgW2/+LXCEM/EJMWkgzOwEO25so1GSWRTVTLuP81U\nSNN2Ox4G8I6cqwWnlzpIVQsSoFU9d6RYkd3ovfXmIq18wZVGKFGqJzWAegAQ\nME6s6LkeCSdgwzoNW8Z8owo7FYjZHUI4pnC6BwHwh97/4IF+OS6WuQ1nF0tn\npuBNzDsiSbsF5Dje0TrIyPzDSHnIJQYcaVPPoBCNhafCvFis73Zg6yQOOcZF\nooPVddxmQ/WlC1sDCIi0icmyb2/sRbRwfj2ZG5NVcLZ1w3e4Huu5Jn9MTzIs\nCR+09xxoroFw5KzQu/8PlcOtqUBZ2hbNRF2cxi0ZCa0NH5nbVJCYRzjIIiYc\nhqnnVZHzKvk9uChQXUGGGfUI1I408QGFqyocHP10xLUDRx0cGW1YAEohgbJM\nkpyhUKa08tsA0RgqOxFLGHQ1sYWKa5FotpRqh7ZZpZpBKivuQcOX/lmTX8mP\nr/416j8tz/+pVb5An3PijXXBHGQwm1FDFz5GevRtMjnpgXR1lFzmcNlNwaPE\nEgVceeV3rxWT6J6T7CpWdG0+Ppu9iXMa+kYCKwhbDm79r6kIyyEAzmPNyv8+\nhNR5f+hyJfiwlFTIXckamQa4RTs5lP3r17DQHtHQ6Wsev3tGf5AyONZB5XLz\nA6rA\r\n=5WFR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpbDrlozPg42a1XJ4eCuecG7NR0dFBnY4gpVx8qL/hYQIgYuDhGnbPSMvpdcc2D2TPBc/p22gplfhe6emb1J+HcMA="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.1_1555277929957_0.5176874158846472"},"_hasShrinkwrap":false},"1.0.2":{"name":"gatsby-theme-docz","version":"1.0.2","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^1.0.5","@mdx-js/react":"^1.0.2","babel-plugin-export-metadata":"^1.0.2","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.2","docz-core":"^1.0.2","docz-theme-default":"^1.0.2","docz-utils":"^1.0.2","fs-extra":"^7.0.1","gatsby":"^2.3.23","gatsby-mdx":"^0.6.2","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.2","rehype-slug":"^2.0.2","remark-docz":"^1.0.2","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.17.1","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"d67429efff969ad44daea5ab6cbf28ff3fea15eb","_id":"gatsby-theme-docz@1.0.2","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-C0gYsvt3466jpGege4pTK4LzxiIaUxJaPNvN+9hsDK7tPyr/NtG8+aXeRX2OfJHEIT8fCqjL0pJ3waScVdPXiA==","shasum":"abc736892868b07212d042e7f93427032e88ee87","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.2.tgz","fileCount":21,"unpackedSize":27389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctM7JCRA9TVsSAnZWagAAl/cP/ArF7wo1sYPXqHDrjDTo\nio+PDulU180DhnyV2V5ZFO77W02rG16IwoHgFSImKYXDMDmWlmtKP+IW/1UV\nitOSPouZNk21+3txvY9TMpdctsIw8PRo7lsw6nPKrucC8xirZ5GmLMDJtdpt\nSUdcUpYcTZ5MXKQqKfqcipMclbIpjCg2rIxqeonWlfdHFrlu/sSfgq+LAAsB\nz204Ri+FIagoinsXSPlSrjpWV+PfhL7jhFn49stDO+owZ7DLwPar7wMhKJaY\np2dmWFJdEeOzY6DzNjLqhtZ96mmkif7VyvB6ecRjmTyw1llM8q80qV5YGCZ4\nyeB7BF5EmETr7y6XvOwJyPCQ+qce3MzIZiH4Teo3dQcWoIBVgI5BKMM4Pax7\nR6jGFfBUwJVaItxCo0/a9+GIwDUZxofofQuOy65U1d1I5MywopjfmSIAHTFX\nUE+zUKNtDo6dm27vVQEdttS2Ge+KFmSHCBy6ovQ6loqlcirNT/YsOo/J2XB0\nch8KuEG211z1uQVkCS4HZdAhal5zu4KmYDOqiLMjaFeEary6/o+alo9I7Yn4\nQm1txTbtgGVnUV4aFTzpseyu/ndjPT42tWffuIiWvvD2JtB6+tf50XO6lKII\nnjzplC+dkxCb6NKzj87bIQGzjwQfddSEuer7JvfxSIn6v8dL/dIDGgBjXO3f\n4PXe\r\n=x8IM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7wC4lVrLKtw2Wv2s8dQr22Q7zhTrgJQkwQNLg/Tpm4QIgBSF5IhRArq1bRkmmPkMXF/EKqLMvpP0o0WnbJeJN06M="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.2_1555353288959_0.709860597210231"},"_hasShrinkwrap":false},"1.0.3":{"name":"gatsby-theme-docz","version":"1.0.3","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^1.0.5","@mdx-js/react":"^1.0.2","babel-plugin-export-metadata":"^1.0.2","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.3","docz-core":"^1.0.2","docz-theme-default":"^1.0.3","docz-utils":"^1.0.2","fs-extra":"^7.0.1","gatsby":"^2.3.23","gatsby-mdx":"^0.6.2","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.2","rehype-slug":"^2.0.2","remark-docz":"^1.0.2","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.17.1","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"041d28fff6fae4749462453562da8bf08cd581b1","_id":"gatsby-theme-docz@1.0.3","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-n3E/mxNR8fUzPqEzXapz/3xGNdWi/Q1zLuoRDW6B1Rjw9zSyVRasBOFJIsdCFtm4d6SF2uXQ5EBNl+jMR23LOg==","shasum":"90e2de84c903fb3fdb37b74e8acfff683f8ddf03","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.3.tgz","fileCount":21,"unpackedSize":27537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctNNXCRA9TVsSAnZWagAA6OsQAINp7Q8OlTAGxfSnkjnX\nY6XODY0mKgnl+CQUPcxJIB/D+SlM1AufMdKis+W3ofsQ6Hz1VQGqW8eBpniT\nTLYTipcbb/EMCTUxz5LxhxBbIweud3opbSU19moJBa0ey7NwoExPu31g1RuF\nd2o3rRiOjgEgICNO+pZ7pzmklVnzInsEA5RvKUCVTrwGDXUoi47Rj4tG44nX\nTxj7IGEvo+xpt56KbzsTvm8jZWOncq8FNDOnaOQtMzYNNBD1fsH0Be0tmk1i\nmBApBhbAgcVXc3zJOp+4ZD0P43a+3mI6FoLNA3aMndaSlPTbSuRVnqN+9/sZ\nLrUmlaxzAoumlMIhOCYKx5mjxHr8EuJntCuzEbu1ZDV1Z8nAeBSYsy0TdmpR\n+lK7g5pbKszmH0tURZP5BF5DKF4sTek9P4WhSN/qLwkTKp+Pfd2LazR35GZr\n2ALODiyV/9TaYT1iVvgJ1PYF7LbenD+JAoX++WyvTKpBhfi91ivUtc+kvifr\nf0eb589Ptipfe75MGSYjvGlYlZWJ4jC3hyceyOjyGTcz5U8ZIp/GSF1V4aEu\nGWZuGlp5qjXLxDia/VNkmZRqMQSikw3nhvG6DAImy2CC1Hr/zkntB+XJzQ3K\nk99n4PSOpVtTifR5dOTD9mnMD1wAZj+WhZEFEX9IzQctxvc/rSozaQFp0qi0\nya7/\r\n=4TSE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqupvWG/5BINF3Ubj1XkebwUal51Qel4XCLzOd+jiawAiEAuuo6WsdyQpfMXHMjCSWpshJ4RWFAjyW406rTYBa7nuY="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.3_1555354454239_0.8783526210608585"},"_hasShrinkwrap":false},"1.0.4":{"name":"gatsby-theme-docz","version":"1.0.4","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"run-s fix:*","fix:prettier":"prettier \"src/**/*.{json,jsx,js}\" --write"},"dependencies":{"@mdx-js/mdx":"^1.0.10","@mdx-js/react":"^1.0.6","babel-plugin-export-metadata":"^1.0.4","change-case":"^3.1.0","chokidar":"^2.1.5","docz":"^1.0.4","docz-core":"^1.0.4","docz-theme-default":"^1.0.4","docz-utils":"^1.0.4","fs-extra":"^7.0.1","gatsby":"^2.3.23","gatsby-mdx":"^0.6.2","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.0","rehype-docz":"^1.0.4","rehype-slug":"^2.0.2","remark-docz":"^1.0.4","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^3.0.8","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.17.1","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x"},"gitHead":"4d96db60fa5d3b4600be465b46d4c1a82c3d8ff2","_id":"gatsby-theme-docz@1.0.4","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-wI2F/4Yx96RDXcPzbK2FHbt5Z7XlNH7HOzoHA7+V9u6K4E6ZKxrlw97ofIrK0LdnGgILK1dsk3O0gNF8Ltv4sw==","shasum":"c37c3224fb6b5b0b6ba172eee9bebf935267f6fe","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.0.4.tgz","fileCount":21,"unpackedSize":27686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuI5qCRA9TVsSAnZWagAATCUP/jmIrQCqvRp1CHCuEE4r\nCnRcc2OeL0vHjXGuiCnmY50goXtsCmoI6gZfrdL0aeJpAzG/gEtkulFlBi2X\nUdwkFYbNcNyO312G6PjZBUS6QKBLQ1ycEW/d7+fp+bZuWI8BKNJPov3HGZZX\nMTfpHxXjcSJTO3/rgUnjI6hJs87D62eW/dIPy52IxuNB7Vl/h4U2AGtmg/5v\nc5VU6uKjcAtqG1lJbBn7wHIOtoRpo+5QtxnBeBMEYTOV249d896PqNbqMUO7\nniWO86WhIIiqvf6xrvrmG8NGmU5BNxt+TItpaUa5qJ9cAGtGEqSOkI0ZjeO4\neG3cG4iTUWHBWPkcWO7VZGQgNtW4zuevwGqG/5MHNyM98Jqa265QSzObkTmp\nLlZEuDw25bnfnmR0ZhWipJs0Uk8Hup44vJhZt74pGLtDQYAXw7C8BJ1UBmKA\nHji/Sz8+ja+RsSMMRusxNCHkaxLgGzO0yTh2mjtnakll8Js0qSOKEvUGylfp\nhUkXvHxMuIRC2XNz0v+HAaCvsWvBvOFHgHaSYx5fKvid/EF10G2vFYdipBkP\n8o2GDqDDRH3si9E8uVQknE0ugdI4Oh5ZdUH/Uc76AmqISSSyZyahUyGf+mml\nv4aVP//EdiKVh9GLeXYXJZENZlt5VvwbOqKA50cWLgBEYswNTQNWjDfws6pv\nbNYJ\r\n=7Tpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrPtsI8SphqtrXk0D307amUXEv0pmj0c74X1kXsLE2kAiArib3ZluyA9oTPGH/4mK14j7kM5Uqv12WRQ35LmG36Mw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.0.4_1555598953697_0.2063305509288036"},"_hasShrinkwrap":false},"1.1.0":{"name":"gatsby-theme-docz","version":"1.1.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@mdx-js/mdx":"^1.0.16","@mdx-js/react":"^1.0.16","babel-plugin-export-metadata":"^1.1.0","change-case":"^3.1.0","chokidar":"^3.0.0","docz":"^1.1.0","docz-core":"^1.1.0","docz-theme-default":"^1.1.0","docz-utils":"^1.1.0","fs-extra":"^7.0.1","gatsby":"^2.3.34","gatsby-mdx":"^0.6.3","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.0.29","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.1","rehype-docz":"^1.1.0","rehype-slug":"^2.0.2","remark-docz":"^1.1.0","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^4.0.0","eslint-plugin-flowtype":"3.6.1","eslint-plugin-import":"2.17.2","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.x","eslint-plugin-react-hooks":"^1.6.0"},"gitHead":"84283f1d63ac40c0c1ee787db768c51945e4f79f","_id":"gatsby-theme-docz@1.1.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-8NlXy2eWauXgRP/JH1bKsz9GpxUolti3HJS+3ggDOUvVmh3ssSV5VIVTjJsyGrE602q3MKP/GfHc5g2a4P5Sxg==","shasum":"95a28ac498282de1296f09074f41f4e2a55f5015","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.1.0.tgz","fileCount":23,"unpackedSize":28173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyf9dCRA9TVsSAnZWagAAVpUP/RCsFbXMt+JkjoGajAhx\nL4OPpFAl2btl9PuIsPF/0U92NDsheXdA4PmDTJW6BfSsKaGKSLVmOCYRP/Wy\nDAIkS4f26WAl3cOj08Sv85hwA5Qf3qm3wqTyuDBgdQPYoBQjjkBdrksS9Uzb\n7chwhLuTaPNLHdTD/0u2Ma7m3FGb8cCgczxWnRRJXabDqKVqIubQdd0Os7+D\nmQyJ+v7/LH6FQItdQA2gYm+FbQlI29pNhetGh2UGMevvdlTxNcaNJRvZ5Y0l\nyvg6QWB2oJYrnmSpRVh7j35GWMiL73ypV37lapVuxyFROfp5bIQT9hZXPFD6\nXFTuPVT5GNc04XTlsSVBnNhg6zue/atJ4IeHOrkyWLeAe5GE71mxsAxzh5kI\ny3g2NgTQgnrR0o2p9dqewLGN3vF3uk3VZN1neNPZUHO80LHstFQQ5wF5T+j+\n5JWoVNNj28YijxlMTk4ai7lALE/HyHlo1J/zfZLWjyMXH83Qtc1lcGuSEclm\nznQOcHC1VmNIYaJATkWIB7NEg9UbOA+I75fFT3fogfruAtrY2mvEYGXGUhCC\npmjCdTrsKpU5R71u1IYZ3aQNq4yc4o5cCMIcmoBQxPpWckTOo2n6elhmK0Re\nKPNQ7o+A35/PWksIUMLsLrlebSjsA8CfoZd4x6PZWZTQHedoDQ05g90MbSyc\ncJ0o\r\n=lXuy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4yKdAdxucV+vkobtVF3OkTB0wkq/by1Jz06gmVwDECAIhAKS1gMZsepu4eej84s343UkuLzdSiWDcbXBmC+M2rqi6"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.1.0_1556741980391_0.146925275585698"},"_hasShrinkwrap":false},"1.2.0":{"name":"gatsby-theme-docz","version":"1.2.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"main":"n/a","keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@mdx-js/mdx":"^1.0.18","@mdx-js/react":"^1.0.16","babel-plugin-export-metadata":"^1.2.0","change-case":"^3.1.0","chokidar":"^3.0.0","docz":"^1.2.0","docz-core":"^1.2.0","docz-theme-default":"^1.2.0","docz-utils":"^1.2.0","fs-extra":"^7.0.1","gatsby":"^2.4.2","gatsby-mdx":"^0.6.3","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-manifest":"^2.1.1","gatsby-plugin-react-helmet":"^3.0.12","gatsby-plugin-root-import":"^2.0.5","gatsby-plugin-styled-components":"^3.0.7","lodash":"^4.17.11","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-helmet":"^5.2.1","rehype-docz":"^1.2.0","rehype-slug":"^2.0.2","remark-docz":"^1.2.0","remark-frontmatter":"^1.3.1","styled-components":"^4.2.0","yargs":"^13.2.2"},"devDependencies":{"babel-eslint":"10.0.1","eslint":"^5.16.0","eslint-config-react-app":"^4.0.1","eslint-plugin-flowtype":"3.8.1","eslint-plugin-import":"2.17.2","eslint-plugin-jsx-a11y":"6.2.1","eslint-plugin-react":"7.13.0","eslint-plugin-react-hooks":"^1.6.0"},"gitHead":"b2091fb1cf9ff3d2e648066a6ea0018df0ae57ae","_id":"gatsby-theme-docz@1.2.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.13.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-wtSNFR2jqt9qcqYLWRBYWbwTxusTu46eL48X9q9ZiT/YlPpdy2829PqMZXnriA29HXp9qisFQzA/qi660PSMdQ==","shasum":"cc8e6030ffe03f71694fce6df7c3192d087876fa","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-1.2.0.tgz","fileCount":23,"unpackedSize":28321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc00KGCRA9TVsSAnZWagAAIHgP/A2CtrcxXFgcrhdYxVUi\nWlebxzO/+WPn1cuNL8p82hD9L31X53QzpkwC/Wyrwi7QOSwPgEyeL+fp/E1k\nk5CNTsS7EmS4Gq5YLVxCpvJFtujlj0/V2DpHM9K8KZrhIWrLv4SSjL1OLIHJ\ntBpVnS8PFwCrEPHBj04xJntrtwLTwia+9Dyzy1014Qnu2yFDGkoAVE0ZNSKo\ny2w8Wcm7lvpxRpDstTv0Mbbnp1ueFzoWzO3Th4YCtj0p/lDoD753j0W2+R2V\njUvurGfJcjig7zPSMNSi2WQlt1tgi/iVRDZMH3bYJLZWDMH627ngsbK0Irbm\nPZ5JRe2r1Ju2qo6ysuIWE057pAjRgzA9TPfpVx6E2c+ZLYFQhEUEiAyj3Ril\n10QAeYqf1yl0oQ5Ns2I9LHw0FXgQ1r4y7/3uh9D31O555kBeEbZZ2HD/oCSo\nHbTbi+7MWsvBvj5TY7MJ2GWRPzAKchU7JzdRYL0k61urfOP6iyYSicoS4Lsw\nXQGEMOFk9QPkZc9XnebN95dRCKZFGrGXfIupRitiIS8D7lw+0XFP16GqzHJM\nrlc/S+xSRgCtHXyfqT9XkzEWL7S8Q0W9og/WKS+qBjYg4AB9R+UWWxK+jy/+\nJ1mFrMUBILW39ZDdfcXiGZ75oQ1VpXj91/LkB4D2ky7JjVvPIaaRe963Rqyi\nasyh\r\n=jRGg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwM5zGh0zuf2vLsiDud2n1aUAbynFmeq/TUzEKr91+lgIgKkLLFgLf8uSe5hG9aU3V5MoBQMiEpK2qFmQtq4IlQXE="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_1.2.0_1557348997744_0.19212110504152702"},"_hasShrinkwrap":false},"2.0.0-alpha.80":{"name":"gatsby-theme-docz","version":"2.0.0-alpha.80","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.1","@mdx-js/mdx":"^1.0.23","@mdx-js/react":"^1.0.23","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-alpha.80+7ff18b5e","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-alpha.80+7ff18b5e","docz-core":"2.0.0-alpha.80+7ff18b5e","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.14","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-emotion":"^4.1.1","gatsby-plugin-manifest":"^2.2.2","gatsby-plugin-mdx":"^1.0.10","gatsby-plugin-react-helmet":"^3.1.1","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-alpha.80+7ff18b5e","rehype-slug":"^2.0.3","remark-docz":"2.0.0-alpha.80+7ff18b5e","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.10","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.2.4"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^5.16.0","eslint-config-docz-js":"2.0.0-alpha.80+7ff18b5e"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"7ff18b5ea67dcec00c707628d6ff750637ae1d65","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to\nset some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace\ntheme files just by creating your own file following a file naming convetion.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js`\nyou can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component\nbut just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it.\nThe oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create\nyour own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script.\nYou can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n### Customizing design tokens\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps\nbased on constraint-based design principles. So, you can modify our based theme in order to make you own style and combining\nthese modifications with the component shadowing, you can create a totally differente documentation very quickly.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nYou can modify the theme object by using `doczrc.js` files and changing the `themeConfig` property:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code.\nIf you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-alpha.80","_nodeVersion":"12.6.0","_npmVersion":"lerna/3.15.0/node@v12.6.0+x64 (darwin)","dist":{"integrity":"sha512-23INpJdrLoTrOohGAOWqPlNQAbrnD0gBTargXUQ6Udjs8la1T4O2/Q/7jEtaudJ3WijG+FDbeG7GegkDKeC2cQ==","shasum":"81d67827852529dbe3ef00dc7c8696253a816b4e","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-alpha.80.tgz","fileCount":62,"unpackedSize":56654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKNn8CRA9TVsSAnZWagAAInwQAIiWmta7NQijvSctIOly\noycjyPwQZsVMr3oyA7Fy2kmHqjedJa8l1Bt2ZyCC51eW1UcPaAYbs2EmU+Zg\n5Sc6Vd9gtsU3bXe/4Yij2RjpsrJ0StNkqVCzHrOjgSPpoxJ/gg0uAfLsdkSu\ngw+6pdlZfOAffh3m7nnBgTAd/tQUv6vfjL1gB9PfH2lwoFb6rbB+07SMcbsf\nB5nEAsR36mJFrrQMrTQLdMlI5/S89SGkBOxSB631qtZiqYa9EzH3QsVxqyOx\nQ3fD9x9eQgw1HDKAxs9A+LhXZxdESdPZNi1dfToZeWoUeLxOQbeMUPkpG7Jb\nPjuslOsktgj0KPGFE+BgIf5j66nj8razxxTCJwwtN+rlnUPWi9WGKbFNyF3n\n0bwbLgi5w8nbYTzeM8/db29MB4DsxmmTgUZgU8bHLmV4rKeohSyq/tjd0BDN\nTpL3gBppH1PvzPplAR1aQRggJiBOpHUap+INNxEI9cpWHe4hVpsrzGwgb3k2\n68aexMnAi2mHzvDMb0V2wlldpix7+RjD6zbV7nhAhC8ACufd8Hp4Vori0c38\nvPMYjBQ9sVDOGqpor8WHU5oTsumzqHNZ+1lRne+00xpYUD62Pj2TISI5h29d\nBh0abfr2NcdQ/r98bT93BT92drqj39vV2Ibollh/H4VT/SYOINtNDamE3HV/\nbtSi\r\n=kmJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsrRTVsdAJo9dnIL3KFi5Mw8k0IDPGMSQ0wnOKhow+fwIgRg3qSsjy994HJq1F8H7I+ctY0+22dHosxJUlyLIXFOs="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-alpha.80_1562958332118_0.8152141088208777"},"_hasShrinkwrap":false},"2.0.0-alpha.87":{"name":"gatsby-theme-docz","version":"2.0.0-alpha.87","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.1","@mdx-js/mdx":"^1.0.25","@mdx-js/react":"^1.0.23","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-alpha.87+6fbd5a8b","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-alpha.87+6fbd5a8b","docz-core":"2.0.0-alpha.87+6fbd5a8b","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.18","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^1.1.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.12","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-alpha.87+6fbd5a8b","rehype-slug":"^2.0.3","remark-docz":"2.0.0-alpha.87+6fbd5a8b","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.13","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.2.4"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^5.16.0","eslint-config-docz-js":"2.0.0-alpha.87+6fbd5a8b"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"6fbd5a8b4a218b9f9984da6467cc72a9a771abe2","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to\nset some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace\ntheme files just by creating your own file following a file naming convetion.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js`\nyou can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component\nbut just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it.\nThe oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create\nyour own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script.\nYou can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n### Customizing design tokens\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps\nbased on constraint-based design principles. So, you can modify our based theme in order to make you own style and combining\nthese modifications with the component shadowing, you can create a totally differente documentation very quickly.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nYou can modify the theme object by using `doczrc.js` files and changing the `themeConfig` property:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code.\nIf you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-alpha.87","_nodeVersion":"12.6.0","_npmVersion":"lerna/3.15.0/node@v12.6.0+x64 (darwin)","dist":{"integrity":"sha512-XlfJs0jZ5OE+/VuWrw95rZSipf+leDMqy4Zfo0SOQ1DhCxL/ESogNr4GTsIEM9Sfn3z2YXkbJZf4FEGref2Zvg==","shasum":"7707e683e2788525c4759203ed24c7f864ba47cc","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-alpha.87.tgz","fileCount":61,"unpackedSize":56555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKPpSCRA9TVsSAnZWagAADc4P/1dcM1/wqn+sWEXNoLd8\nNMCerYrr9L23Ji96OSMffWmXbxsX2j+qKw697LhYccLXMrgdRqSbewi3C32+\nxRQEG9lPA4nQYLez1vIejXzOydTZHbBIEcciRyNByJt29/doTbzM7yIBMEuO\nLKYhM18KpnbPVinB/ZVmBRyqfbPmg1AbNrtCudBuTu8nCLo+66i9fc5XBTio\nKTA2izdGmyaF4+xcal2/lyYnSOYBPp5Pem6fyuMCXFCf4wsAtDsCIBM1Qyhm\nn7I+ukFQstn/RkA0RkGbCj1s2qhJ95KwO4W+dKzoqLR8LMTVvJiXwM6W7iAL\nSOOW8bOJoc17yOsa94bvGS+A2J37JeVCfYs4s5zTysxBQM5Dc4vy089vXG3l\nP/3UtrxZWe3mgWSvTWGmp4uG85rbiqcF+v2r//kt1uROJCjXkSfLgF1NsMFR\nUueMK3FOWYtW1ecoM078SHpOAjYI20jpllTiAVB6UWkUYoY7PcDu8TOGbgyW\nfFgQFfAnlGgWphgtStcr3RaUZSSWhzU0IuL3DvmlqmoTL4Tqm0tp9zGAaFIE\nD12W0LVDRex9M2hYeyi6DN8t/NahoXBwzZmu6cb/HGVaKgiD+pcg6STdcpCN\nM4UMduMsh0XqQ0Ld1Xo1R2mQWc388Gii4jhD43NDAAAYeFHGwvnCGnjUk8Io\n2kXC\r\n=Msth\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJKs4miD1nNLjOBrFJFFXtw6QorujUIwVSzGg0hlHQfgIgYHO0YlPkqYZegZkVx/noCRtOl0a132HTZmZd4awdD/s="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-alpha.87_1562966609972_0.5667664870537359"},"_hasShrinkwrap":false},"2.0.0-rc.0":{"name":"gatsby-theme-docz","version":"2.0.0-rc.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.0","copy-text-to-clipboard":"^2.1.0","docz":"^2.0.0-rc.0","docz-core":"^2.0.0-rc.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.0","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.0"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"3903880f07281bc0cc0f95f59f9286bcff9bf5d9","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.0","_nodeVersion":"12.6.0","_npmVersion":"lerna/3.15.0/node@v12.6.0+x64 (darwin)","dist":{"integrity":"sha512-+AJg6hN9FDAJQPtNv+L0G5MM6lkJCtSOT4qKEURv5YACGVUfPIDfwP6p3froZrVI3zHxAEzQ/Oirr6N33wExrw==","shasum":"45fc2e8284d275300718d06ac8efd3d54695c8a9","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.0.tgz","fileCount":61,"unpackedSize":57431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMK+jCRA9TVsSAnZWagAArhYQAIxHVXvmRluW3xpkWhn0\n2gBzd9Pocsnci66rxY8OxrbrEd/EjQQzaqAHMfSugHHNX1NHsT8gm0dJSYh+\n2Iq3mDZNW66P5RVOnyef2Nf66XCMhL04ri3q4/mAeBOfpX/ze9gPG7PJDbg+\nY/y9HCUxSZg53V01xgc74fQhsN8YcLd6fA0BbIbnVQToPuVPoi4S9KeQxuRD\n/YdtbemQkeD6cwT0c4xqB5rIQIZh3Uk45OOCp6xI344I+Yy/FIb5SPrWHAaV\nEKtlxF3c8s/cKBFDdNm1i26F7/bDIX94qIxgC/kGJpD546vQpas3fXjcMkRl\nnc6nVzNGeCxchWoTrGeogPDb4Oklu0nNRCeliwu3XyjAEtlyRIv9cRkWvoOv\nAEyFk0XZaNYvw/D26o+FKwrmw8+rd6H4l7Tob1i/m25jX+fKEWX9HqLMy3VL\n5DWKS8cE+HEvtpCnYcZ4IvR7t4/YPInNLzlkeCNJ9wUh3Hz7NAUJArqsU3Ig\nLpLly+BiFNtcQ9gtNlmHrIwfxAXluP0nLzdn18vPevGBBHvwcDjQVx1dHNGY\nZsZjbGR3oeOhKWBTl7LFjI6xFfXI+jRD1L7As6xn6nSzqmtYGdhnhwQYLT6F\nVedKpGCqWTSsPPrmQjo6M6I+owtUKHwyORfyCyLwfUjjqwVv7a/XGE4hPS1M\nYWnh\r\n=vmKS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1l/hRAN0njAj+JZcmSgi5gb/jE1+SOn+x4Ur0M7/qFAiEA16UPkRWx1tId1LDVmppXIKs+fKscjF4iSgizwtsSjls="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.0_1563471778955_0.8158396910762853"},"_hasShrinkwrap":false},"2.0.0-rc.1":{"name":"gatsby-theme-docz","version":"2.0.0-rc.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"^2.0.0-rc.1","docz-core":"^2.0.0-rc.1","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"0d24d0c83606f8fd786b8b7d902c589c68011b07","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.1","_nodeVersion":"12.6.0","_npmVersion":"lerna/3.15.0/node@v12.6.0+x64 (darwin)","dist":{"integrity":"sha512-RAPCDy0zZPkagy+ZOfWV+UElnpIekrnFkzQZty9GF9RPQSbhjfLuamAOMlrXzbrMDssndD3TtyBk5aRc/y3J2w==","shasum":"76a8f253c54265f8404b31a82b08829b1e85061b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.1.tgz","fileCount":61,"unpackedSize":60316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMLNJCRA9TVsSAnZWagAAMwUP/2uVjUkS8KraocnrTMEW\nu96nvuFpuQNcFMqGdc75YIKBFWPnb2ob3iDjNHMaQpafdtMqoLCgQXKsO1Gi\noMRvohgc/n8JGJdbSSH1bPcIAOvelEnlVVW7wIG4TU+XMbcY61Hqrqytr1gg\ntqd7wQUtBHYQbjPQ+dZhjC1IeFxTh7x7mibrCJ5VlQOi7dFxdoEhxhfqoLKA\n64UsOyRfdjAmOVTznztN7NJej0U6p2keSrqLeKsmqKxXOHr7wfa2PpoVvY+G\nP0s4zR6IbQm2zGBw2fDJUHo4ID92orTMWhIA87/52J863fQlhDHkbqDZ1Mjk\nKJE9+dL1MUFlGn8iAmYx/O8D0zBu80x7F9wNeMTeXbFUlUR+4SbT+NsJNwJX\nCpvyybbqjbu0FiLqadMiDqQUCiy857diDfMihpw7XyaagKs2bYBfRSIit97c\nmFAfdczQnAr3/zvN1EvjtJEtKnGc5PyGsYet5YS0JttGtlQVkTsCfX6SucEo\nvkU7rkjS/Oqs9cFph82iRUzsb4YrDRIMyXDxwbcbgimGTLV11pxV/zbiKEoN\nTIq2dgrP2hnFNUjw3TxXTIsY98Fmkln0xA6kRFiUHv0sKfvDyN1kC3kbATEQ\naUkxs8gxaNqQuDsYntE0qZP2iyNdqoxIeKSn6tG3ab2mpiEpJTVnedvBL8ef\nyy99\r\n=DEM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDINX7qQx1JgytaVZV36tEjm/gQ69VxhsFUkfd/qs//kgIhAN6fspEZM1vA3h6BTXG1+gvvs6+Wbn3bggo+JBQvfTvV"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"pedronauck","email":"pedronauck@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.1_1563472713160_0.5102168192369798"},"_hasShrinkwrap":false},"2.0.0-rc.3":{"name":"gatsby-theme-docz","version":"2.0.0-rc.3","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.2","docz-core":"2.0.0-rc.2","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.3","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-xTUBICJmyWkPYRECVDL5Szr8KSRQnODTKh9n4vlHoBNs6BvKvMMS5ZWqlkpPJxJBwf/SDgbLi4S2FfpPSm0rAw==","shasum":"1a1b02bce5d856fa08688eb8b17f445a38bd0cd8","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.3.tgz","fileCount":61,"unpackedSize":60801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZp1MCRA9TVsSAnZWagAAFZUQAJHG0a4dueoxXkCAq0jr\n5A2/cXzyoJ8SvQcWSVwMFbAnafl9oXm5lr5DpbsX/sKeTWC74Tx8oODZ3elA\nF1wF26ssC2gCTfmW52H/aWYLx5Qoop9pqH5/a8AnsapGzV+d2AgT/+Qj5l22\nuaY1nWrKo9RHNcS7uSiKdgFeuFKuggAGFcYwonG8KuVrDF9fBwf7d/0Fiki/\n7P+bBp9ipf5tVr8zcZSIQvIEk1LcC/ZbBx5NnU7kBS/of75yUgKmmoXUFnhm\n60ZuvUVJ4beS96E40N0V/aHiPl2rmTR2n33jkh9twzwpQLcH6nEv1cOoYOy7\nJzYpeV9ELqpv6K/azIYvqECcmyH4xErbFSoEj/1tFfzKikFsqGUMHqP2G33v\nhQrYsN97onv4RhD0zWs0BiQmNI9xMNuDyiL/zDrUdedYsuv2fOZj/zl9C+5b\ncU/8/KPyBzgQbxtVTdGObJulHkNHvLJKRBcBkgLBHdn2BtXX12Zfcp6CbWFp\niWNoBM98g9kSRvzTyxZbz3jP3mLZDRhEoz4XAY2D5/YCKVOPEEChxyrcYjOu\nvJs0fiDc26xjzaQYGgZEjl4eciZIW8z+h+xXg8W+T8TssIZIWk1nJMtImWGI\nKo5S0GHjwo+jeKpLqmK8oBRMntt/u9PiLURW3+5bq4z/czUnIJ0eWfxyIPsy\nrOyI\r\n=3OnE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAcsiou4xaJITKP+cnyG1MBE89nCZayXKe9zd0+dHdrAAiBRSS6mqjX7YBRdNG9bZ9SBR6RgHEGiDwarpc8Jwpiu5w=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.3_1567006027751_0.4400654387874774"},"_hasShrinkwrap":false},"2.0.0-rc.4":{"name":"gatsby-theme-docz","version":"2.0.0-rc.4","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.2","docz-core":"2.0.0-rc.2","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.4","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-i2cOzKE1W/pOidqMqE+9AzmAYNoQiTXiOM/hcsPRJyQnWZE9TdRYSZFyJrPJbOm4JFvLV+29O6L10NpRoI4g8g==","shasum":"68b1a2d7dc4276dc91c0ed5fcd6937e0ab4ce28e","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.4.tgz","fileCount":61,"unpackedSize":60855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZqLgCRA9TVsSAnZWagAAjHwP/RncL4e+TB+4Ejg3cRkG\nW5nRPFGp+W70Ug+CLVQBuKWWO7w3p67apnjg9RfRkY6ZhUgcPyryKlg7xEs6\neebKtT2VEA06wQquo+9HGWEbYBasNWuD39nY16vdPpnMkbNKr34w+WHGcIbR\n3xql/03pK1uVLqyqaMyBltWX8gLsq2qJ/NPPWL2bmXPwsgn9rQvnN4JsAc/7\nzuIqepexGYy28J0+VYP1G9aIReckOn5PJGhMijL1grAVaKWCXHUlWL0TiLH7\nZIC+0pWme274lH/jLmik+WnOx1wb1VqDF41QG39CyjOYg/8b9Lgz4zM8He66\nN7Z42m/2II2p3PnzprPCfiLXClyjS9nmLCcBEAvmUUrc6GB+JCl5tmtAwCJo\nVmQj3ArtQ4sa+5wZPuXY8UFjOWJjUlq8TRghaYkQfJlwg7AFL65r0HU0G0B5\nvDRXLtLPS3J2FHtbT0SvXovax6p3l/XQXn2Z+DFZjqBBW6gGplxwLVI6ERbo\n6Ase6UVskxHnxU77Jhm+f9bY02jGHR4IgjhJp3AnFNN24rzKaeKbB2NwAQOQ\nsYyyOb1Yl94dL3Q5nl428h7dEzoyrX/aoaCBAA2PDLjlEM8wKb1WO+JoWD5T\nlSXlwPa8bzQT8gcgjuvAwCU423OazNNs0qFtg9jknoJoQCUk16jFQIur8HUI\nqyyb\r\n=pURy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXAokYRbPoVLBaJf9teH+WomfNuP85QI5vXtIMfe2isAiEAuQr/LiqkkGn2kLoD+KaPaCwWRNmrf6bTzQYfAoGOZMo="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.4_1567007455892_0.6082697878988201"},"_hasShrinkwrap":false},"2.0.0-rc.5":{"name":"gatsby-theme-docz","version":"2.0.0-rc.5","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.2","docz-core":"2.0.0-rc.2","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.5","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-eY6a68J0xA2/EdJyTUauyjoUYMaIxgzVBXtF+DazFsRzctLTXKIV3p8yQo1cCNzacoG4ijV8PiuWoQeXDQUEWQ==","shasum":"b205b5a4969c9b64df1e6bc3250947a05b78f443","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.5.tgz","fileCount":61,"unpackedSize":60855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZrFcCRA9TVsSAnZWagAAD8gP/3XJu9a3K26sLXAK4kkp\n/OEbSYbDekVwHYNF+XIb0RHHOnMqCqBcAkG8C2h30cUK027YjrkE0DqLF4uB\n5W3o2CcbuOtXu+dXyNhH9WeD29doXJQGEPDNb3bSBxHly3ES4J1pGp+m2nwh\n/f/6FfEnzgZCqGxoVx+Ft2A3HQb+pTfQiE/W+tWa8mjrzKLE2/nq6RN689bi\nc8PmBahlvRolGPVaTFB3x4qJz2KVT6whau6TqIse7jvIhkDBj6/rzl0HvHyn\nYez3oJ3M2yecmEd/OYjmR0XNsjbFwxi5ejmC/A5uUk+AHrzURWZMR8CIyoSW\n71nWmw+25w786Mf08P+dufgjSRdrIEvS9fCa8y6D6QAifTbuA40MhlADSiRB\niauKFQjHfQDwF4KuqJnxoEadS9lqWAwVxnAcX9JN13/OxV2eP7Q38ryVqFUd\njfIjcJyeo4IFBjKjuPrX0k7VIXOSD3mm5brodFoa9R4Ohaa4I4Lz29+s4hay\np5xtQJ3UmMV1Qkpd5YsXP2scC8bLAJIYFKD24e5vspQraofjV100EmjoaTBt\nQh6nGNgMvPwH3V29eAFv4Ssp7zXCDgMGUW435l4WDkQTEvPxMxVSfY+GfKDP\nM4zuiEhS0StJ6rPCsPmoIeJhfKl9cxmfxJvQeJx1j0pWtxhbhpGiIH8wgFK0\nTpox\r\n=t6pI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZTyylR1kU+OTMWxgN64Dexv8CY/qf4aOOQN24ZCQm2AiAnHaWgKmQL4ec02VYPEv9T+vATfWpxD9MufEzO2Zlrvg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.5_1567011163754_0.06514366321986742"},"_hasShrinkwrap":false},"2.0.0-rc.6":{"name":"gatsby-theme-docz","version":"2.0.0-rc.6","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.2","docz-core":"2.0.0-rc.2","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"f1dccb5fcc6b2a7374982e34f2847918a3b6b927","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.6","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-dYQG0deWm8Ig6pUhtM4bh5MXq6cHF4wJRpu48O476JCCvr3D/3xockWhINuiWZph01wXs3C/JHaQw8vLbSXR7A==","shasum":"509f5a02f97ec9f6df4d5ccfcbe457ec3020deea","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.6.tgz","fileCount":61,"unpackedSize":59275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ5frCRA9TVsSAnZWagAArMcQAIaqscknTMrTl5bhfw7D\np2LV9WNwlOxbcSphw7xqRdBdJp66ew3x4X4tAvAlKRqsoQg49/ymJ41sNNPg\nFqT4P/Yly2L5jv5D64nXcEY6myt7/Dn0ZvIbOAUV2B4yKVG8lKDEF7R+IBmB\nA9qYYnDbEfzBdXdXCn/dgAvNiroRjrPGNwWFhHm5pGnG/UnyLdsSbPmFOHk5\n3bY/I57uZksTNjdiTGFpkYseTKdbL2oFdd9OVF+rpQNLj41q73rwsFYTR3Az\n7QCmtmcAnNwf+tYwBxqaT5QPMrzd2NFFhFeO8Dq0QXYuCcw5rzq+GnbGa8rC\nhVFBbBqYX5b7GnsIGwqS0u7ZWYniVX5/ZwDn96UfgcHFugTBOwgpj+dUkgY/\nb+eZriS62qLnU/asIyDcOzyzBPahLv6ZNrVqoKcezl95b3o7TIT2qgD6/Kc9\nY1GV+bcr21NO7reXPtCkGmSmx2zh5yLxAkgXvXee/lC1pWjoFDuCg/FnibQB\nwjGj+VkyQLEqgWhOQt8rSCdqkMfTGzyHN22Qr3uP27NphfLOX/9IDjPLbnBL\nyk8qK66dJu7L3ye4ZMUpz/9y050waaN1iWW/2cNBbaHv2N41jMTSS/aXzK0Q\nPmFPatYfxlKIB3xK14dLx21GUf01h6sHUYNpL5k9bu4SRkAxgO4cVYenl66l\n3siV\r\n=Pu3d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcKLaSasSFzjlR1b51106qz1gF+9eaMalOteBLV1ZCjQIgTP7PP2SPKQVKkB72ifDd3+gY5sYrK8+HL5v0Wo6943A="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.6_1567070187082_0.5992236669652011"},"_hasShrinkwrap":false},"2.0.0-rc.8":{"name":"gatsby-theme-docz","version":"2.0.0-rc.8","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.2","docz-core":"2.0.0-rc.2","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.8","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ZGM9aq5qpccEM2oUqwpZs2RuYNB2Cc6ptchb90TxlFtYqfDW1MX8dYVBoM6HPkYwaN7pr6p9fjLO8O7evdksCw==","shasum":"317dc3925c4eadf4c2cf3a3535891d398ad233d1","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.8.tgz","fileCount":61,"unpackedSize":59275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ9rmCRA9TVsSAnZWagAA740P/2bXniWVKtFHAQq5kJ5e\n6GtCH/cnM72JeFoqfWDcS03qwyP/5qvzg2g1MrDzs+uIQBaunOUflbYHeyuw\n0YCQauW8nG1hcJQ7xSn/gIfOXGE0r/XgS+f2RR90XXhg99Fwk8jt6P6XDRuD\n3fGHVALjMBdHZl0aPuLzOPmRpAOlhD4MQg+4nuycy6NWJSpjqzwEYmEIXU2U\n9diaUbZ55cjZmDJJ6dbbM/a3uL3jcOoxbFL1NZ0qzKPx7JWRvBuvmi0wcKJo\npZEt4PXFxkm3WHaUNJaUn1F4u4cKJwhsGU4goIiqgAKiNrP+P29/28XI+shp\nCsxJGPqQK78vHvGkb3eGP1VbBEY/2MHaefcZmZTF12RVsVF4Bhk5VkFc2WYN\nBrXEkKzwGLFIxEY9mO05XVoMwCOs5jg6mrM/nb046DO2bRrbP21MJUd/zze8\nsitthH/PX9E14FFU1DX11ToST+R2R6/QFrrOGEWEXAxHal0xOVi75Vxky0LT\nWy7AawnXM/rjtsCsuti+OyMMO1VOfPF0wsi2tEQVLOIr8BGwS0exZHpUrdA/\nQswcpxQNv7VoK4LbEfVOKQuKP3eubWXfw9iU3g82gxri9LbX6W5OzBKXCgch\nHSTb302b5eR3yiSzGNQwuy39aC39L+WXEUynBv7gvSZdSRgbZdGd6J/ck4ve\n4ca5\r\n=PfCD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH0fJ880O970fX0YSo6vXMTGj5FWl3Q7U3CcazOCO9lQCIQDOy/abAwBnTL6/r3tEzQz+MTH7ZwuQmjHU2n7bxPs0bw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.8_1567087333459_0.11954793493146765"},"_hasShrinkwrap":false},"2.0.0-rc.9":{"name":"gatsby-theme-docz","version":"2.0.0-rc.9","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.6","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.9","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-LyEEZx4z7tp2VBqN71eDlwevqQYjTQGk5NLrSTRqHt+UoG35CJGLINSW0XZtnJVGTQtk3RhWZM+jR4ZhbkV40g==","shasum":"6d38fb9a6bc63ac562a262ab077c1cc5dbcc460d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.9.tgz","fileCount":61,"unpackedSize":59437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaQKjCRA9TVsSAnZWagAAJZUP/0DVrqfvM2KaqUkXlwfs\ncppnSNQ6RZ+FLkZLiQqf/keORyZDYhEzWEAB+m6Jdi5ggA1QiZ4Isu27AVKJ\n96EkkysRoeFDX8eeWtyqMJEQn8kspAOU+k5OBpoqURorcL2vIDAa8xDSJA3a\nCZvtsAIwKChjDDKDnU0fB0ujljm5QIsFYTRtIxKS0keA3IB8i0Bf8oXavXOC\n3GODnyU02bW5K0qyatC09LOC7iNDldiLpG4truSCIx5/iZxjH2gJ9kpCA2GX\nsUHCpm/zXTd5C8UiJpBD3/Y6xEIatWiTKZJ0t6Q5yAtN0wzVkNcmEvtCCkLG\nMVexaUuA6E7m/EYXzKy7kke+65m1xrWsNbDKxPQUFxOLt7W+pPyEcx/hu9bc\nFNrR4k0D01ERQh6w+KZa8cWSwguGr6MAD0cHzeaDV94Kw8irBgvcAEAyEuzz\njUxUJFgerDZ2M+6/I8Dc4mIa93dDPfISTEZpGCne2Si8swMU/JYEZ942QL7z\nbtHFYjobLW+RTct1DQUci7xUSv6+ajz0DZ+kppcek9feyg77/ZVNr4A1bjJp\nI/58Ze1/WPpw2rgdpy0u9YWNu+jdW+Oev/t2mBfZVihWmaPMsFUWCz+gyiIh\no43R3FEleDg1pVXglZv+SLRV6nHxQGgVTpvnFbTNnoOIf7f9aof8DiaGI2wp\nYsdI\r\n=IfiM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICS+pyA2uf1ps+d1wqm2ZVl/KCg+6sbl7QH7Y/bKkziFAiEAo75dcneokxOX9SoaGaN9H8xoIK5SeKTmGBkubBA7v5M="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.9_1567163042970_0.25428773152731265"},"_hasShrinkwrap":false},"2.0.0-rc.12":{"name":"gatsby-theme-docz","version":"2.0.0-rc.12","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.12","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-RDudRYWyciYkNRcEJlN2L+5IlLFKlRurRRiuZEmCAiC+iTEaI/prq2tj85nVtQfe9KlpwqVZW9NaFD+6KVUpOA==","shasum":"b5dfd2a5316d9570f3c7f2350f579cc8a8dc9813","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.12.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdas0fCRA9TVsSAnZWagAAsikP/0SIvYAHFvypSBYVzEmV\n8mtFxQAbNIdJBmtGgDRalcHP59QzB466KXXl8S6s4kC5JjPcxWiBgVHk6NVi\nbiIs1QKeGddzqrgdLCaRHGEXc4dD0751+gdYbjUsbmsBvhSFy6dUrzmrLBy7\nMmjO6zHnuqWmgglONiHgHoLenccSPCHd7zW5iFYskL79l9Vq+vmiMaTunJ1B\nY0KXL+qxi/3WBv3DVA0S0rUDda7/qDj1jzk9Hw/rCZNNkSxIRCD4rW9CMi1m\nzNUtzn3UXjEejhFIDHnDJrxhPOMs7eD4G8ivy8SFUy5LFyHMdMszWdK5IzdO\ntf4uTnXQK6szm8nIRoLu139qtdfAPE8J5XeastQWJIDT9ZHpqU5XkcgKKz7x\ngD1Bv7QYXkP7IYqky0zlJVBqa+GlQR2kU//EsoaSKLHdJTQuQINMxwb3AyeN\nf6UWzD+nt0OcV4pP8zJbMFak1VZm+ZkEqwJFw4w+ISifJ8sNYGbqESK1DrwQ\nPiFdjM9zCJo1gH30015EBnP3IQQHNgwljaPTJShXATnRfe5nrCqshbSQxkMI\njMVbvQP6uqM13paocy506S+Qk9FcLxO04nvFil3kL2tPYSPwHZI3+zR5ybEg\nr8Glu7X8Y5cRLp1V79JpX2PkbCnQFiwZFNmFz9yVzT0jHH4QPO4/+H5WV8No\nYoVH\r\n=PRqX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX9HVi/BFqNvDAl6UXPUaqzfiUnvIvWsN0uyptxOECugIgcqFZmvYrITKeZ+pmOwdcsF7OgmQx0EE3bd3rWefqYl4="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.12_1567280415247_0.3579718806947487"},"_hasShrinkwrap":false},"2.0.0-rc.13":{"name":"gatsby-theme-docz","version":"2.0.0-rc.13","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.14","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.13","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-hEqr8Kg7HDNyOsqonh4q+g17GBwqSsoPOUY3NgkXFZBfNUBDveB2r8fr+YP9hvpyevOiWfXvH3IWUZwPxXIUZw==","shasum":"554783c374bb100804a738cead9ae4852267dce8","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.13.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdatQ6CRA9TVsSAnZWagAAho0P/3GLY4/i2T71ECS9Sgqv\nCDMupPg62sms3XBmLBCTwzH0fjmnPdja/P45GOEHl/+THL6wF8gzWhFJtwfj\n/ifUi2oTmfIcUsGBp8Znc3vpEjlBMxZIe7WfvyjUyGRP2hkMS8bb2W41Wkoh\nZCPMoIZy/bXM4bJ6e2Xf+lfR7rQ52MWc8EduXLR2sq63Ah/+VpS2hlHSrDov\nD5QtEgfbrQ3nFFQpB0jjXLbgtzob+FQKEbgaBe8QWMo/8UiDNF39sVJ+7OEM\nXl2NjfCHWOKbxcyIM4Yv+NcgjDChPgse9tN2W2fX5mv/Tv1zpahvgAncBhIH\nynAU8bZhLJGOBzFZSnJtuE0VEnGVxwFZqaJI69upd6veLrzIsvrNpZg9YuSz\n8NffBPbrfsK0pT3IbXlVc65fbt6ZnmNWFi89OoyeVFWHKb1YXPF0mXb/vlQA\n0Y+wfooewOSmNeRhS+1gCCRmILdgo/FzwjLAZnPSQw2ZRA7o8RIF2OZeEzOy\nWQdjqx5kZlscrkf7ItYf2fwd/PLeil25mLP3SZz+zmSXh539tUeo4TqFZnOD\nYgO9H/IKJiKTFwlByamdzVS8DTopppsra+zW48AI6/SJV6q9+x7UUzxVvSMh\nBlcTSBKuBNvTAyl629++Zm1tyPKLKKQXOP1G89l3sB00oJS69gq/xzl2m18g\naJ5i\r\n=X4pl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdgOtsoGaAseKzqLD/ZQ8+fPdzzDIzfjISnCQUUqE1WAiBRvv9sPxisq0oC+8+UMwQwaA1L7Lz2/RGZFqmoixocsw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.13_1567282234127_0.9824579573418892"},"_hasShrinkwrap":false},"2.0.0-rc.14":{"name":"gatsby-theme-docz","version":"2.0.0-rc.14","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.14","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-fRUTG24CV3VL/VuQ1qDhsapaZWzt0D7aDNCnqUnAsHnY0PGob4P10+v89JuAK8n4WLxJPFBqZLP5v2IOsp9Qmg==","shasum":"74db9ff6f60dff14fabc9b5eb8f20dc192617b67","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.14.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdauRtCRA9TVsSAnZWagAAiHQP+QFmNnw7E9jePQEN/Ygs\nRje1JSm8ZbdfTJLhJF/hN02tWyQKzC6ZdzvKNxIefYPVkmBVNz/63vISYy6r\nYQ8zwQAeLOtvUJB9b4jH7j8xSPegDCoPu1009mumotQhYnGPtQ5A9TRIeH1j\nOCK2/Sd553KLGDE+qf/CQjkweoiW3Hwz7YWgYvNEIlR5+AB8zzAs8UL47XsA\nooeuqm7gYg/+6HbhmieI5E4DVPz6FV783vL/dcU3nQrdtpCvk5X8OTQldhqy\npmxQ+jTKvvEGcSXdAAYWk7ssvmadMhyaB+C7LV0LrOUamQBAe+78Lpnm+MjW\nt2c31s19VLn1csFzTs3ZMrSS7ernyCnPdj7sGN8Hpqxf9EXI56xrDOJENuyL\ntlthhaZGotmomV/rsCyqBQkwBTbz/ms7UwImUYTDppUDuxS8SOiatv6wv8I7\nauw8RkMcnQY+B+40TO4rCemjYI3DvYbWATHvF1RqCuhCuruAJP4fUGWp0IKv\nNGIzAl7iDN95g7flinzA9l6/8PSrXqxwN0AhzW67GnhL9535OofpZzFc+zCS\nIr9T63ZxDXoenGs0hwJmCk37aJKfuGUmh0q1t1m20xdiyCIG2UQEw+5vZWwz\n1N6TpxlW5YS+M+DOgv80YKpqajdwHWy3uQ3wimn1wDkS12f16Wu8ayLnceu1\nvUwQ\r\n=tCHw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvedQegVBoiYX5gKg5wNPShqSbXSNqV6N6tWmR4g9h7AiAfACtsdrMgvnP+fFdAe0ZKmPBf4JF5/ulQ6tBws0mRKg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.14_1567286380782_0.13709502764666004"},"_hasShrinkwrap":false},"2.0.0-rc.15":{"name":"gatsby-theme-docz","version":"2.0.0-rc.15","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.15","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-/vreJCwCqhUMKbUdvcwnbCWxVWbOYapwDyMmxH8NJEixPCtM7NlpiIQpSqyTYAYQ/06Bpru/hlPzI1WycpDPig==","shasum":"93370cf86ac27da93706ca998939ccd9a73320de","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.15.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdauVRCRA9TVsSAnZWagAAhosP/3BTOOV3Fp0/DogVVu2y\nZJ4/XhpjolXuow6qRS3iMy8j+Mw+vFZTxuz8qYnVPgEJCaZwFodn1zugNLB6\nGUlkdPFRpl/drSuJxdYKvgM38rUv9NM+s7l63AQxpFBSA3e4R4pQ3ayi877j\nEdxLJ6/CqhwlSUsRi6+mBJBSRJZipiI7BVg8EwEgziLKFQorGxjjDgEvLcLi\ng9ktw6ykdtfoOxWnbFDpjeEr6oL+3nB9cZ6ySqNeQmnHAU1760ohRBDDbAjX\nUp5nTcL04YbXTzk0mDg2CDu/vl127BwuAyUvmWxwxgjxFWNZATPBwh3qq/Bc\nlhugmyDRfRMecII3eL3iGNSWQ49My3HfyHCww8ck5uq5XR2nXdaT0FM8/1Aw\n5x7ntUQVUiMLBHXaA6AujbM4brT2PaRamdYId4ZPWJ/TVv0QjnzCFuhwVqzD\nozNw+I6HQh34ebXyQu9pRvaIiNjvYCWiQgWTor4tA5R9BUPw566bRf6R5MtP\n/EeYy0WeFiy1ygA3Rt/a+x+acBEF9HTSvpAHwvwQyx0CQ74Z8iXM6AIh8q38\nSPSbTIu+u80SdcgZCqryjuGH8vW7eMfENdzYqJzx5X9A4DJXh3pdPpzKPdEV\n0mosJlyyMP7Iqk+Ewj3yJFJGt6ecJ8cz6osxMD/vh7UPCBtbupgSgES8HxmI\nlA0I\r\n=GsHU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD07fgnjlrMYK9VCEfaTkRVL/Imnm9jed8aqNGxkMDjCgIhAMBTYHKSmRlmKtLwYP7m5jVm+dvhgvS+9wsLskA2dzbs"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.15_1567286608466_0.1922673054901416"},"_hasShrinkwrap":false},"2.0.0-rc.17":{"name":"gatsby-theme-docz","version":"2.0.0-rc.17","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.17","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-xnfTydPWbPXl+34AdpAWgEnUZjyXq46oFeI0hdLZrkllB4iQtcG+DBb3rsQU3tO+/B+Oyq9zAPvHYMfTV14voQ==","shasum":"ed0b2fc427ced2b2eb4430fc7c06ef55c5f9b4ff","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.17.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdauagCRA9TVsSAnZWagAAQ58P/1URY4eQARvzAt8ILUGf\nTINjMVszJgj8ncpBH7wCIRljM6qW/MZqzjwFeB4RsoL7Dek0/MmAYHtZH6wr\ncD2Dk8JD24nICDcZpLti56KqMPTXsJxz8UjJ2vIqC07bL1yGrMusqJTzeQCm\nuwbq0re4dVvVumZ4b8VH0n/XvErx1JINs7c2/eWseDdjK/7927DOYMYH921G\nZSsXV2G/h5gppeWMPv6kW1jzy97SNQI3Xvy4aWRQyJTsvsqLahei2VbegB2L\nYRKKyVAhKJFlFGMbG76TQ1Tf/cplxBpXtWCEgIBOe6L9JtDUARJy4ErLa8kF\nfSDO4U9pTqU+2+JANV4tbaMDzMJH0Ef1r4SY0PzXdiMyg0UnXIiK6lNnJP2J\nLnjGdDlIGhg4Srvg0dfKRwmac/xC/C9M0n4QBBoBWDSKsdZj8Tmiwp/x+Vda\n3xVdFXGTkuZ4atiQA3FkR5UeIY9tH6dvvxMQgyZu7rWHFwgvYKRuOPiBvgI6\njnb4c9oVD1K9hZ5E/dUkfwqK5hEbvz/vi26uP/rIr7xKb5YS2djl1+FV94gm\nf5LJH6VKRZsP2AxZdoZWi4WA2L8IZtOXNROTk0Wz121SfA4lqVbffI/ZUdKq\n7xClNTrJHnJCgHj/uwp/zwmhcIrcYUrmrQanR6YgyNYWBYT27LXFSHPU7oOA\nvyOv\r\n=Xe7y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEguoAwFJqE+yDwBwUfNAM5XNACrJFONV7elubAi8eJAiB2BLS5RQzt4xJGWbMM+q2tgMDM2Csbpf5NX4Oym2YCvA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.17_1567286943841_0.06996957844825635"},"_hasShrinkwrap":false},"2.0.0-rc.18":{"name":"gatsby-theme-docz","version":"2.0.0-rc.18","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.18","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-U/+UD/XqVh4AqlAxQSQmL1eMxamCn+E0+jyiUZPzoudmbXETHK3SJa2kb1x3zwmroI8fkiF/hPJ24S8MF1URFg==","shasum":"8f377132d90f93b98cb2633b0a2025c39e3dd0ca","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.18.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaujLCRA9TVsSAnZWagAAwMMP/2KvifI4iCvsaPaI4Lgy\n+d2amzIRP3fwK0qbXjpgipbFTYz1wDYnCC2YrAAw02bi0/cYWOfB2SzZ4WNm\na+NpvmktETvJH6VBlLCXIXC0e5C+GkOYsCeZrXaGesh37DcXzIpCBp1SLVMa\n2B2UUZMi/saw2nfC7avtIO+gqIdPnvKc6hsuSw7RnEtEeYxbO70wEab2f01j\nCRb2AQVh/YKpeUQIuuHJU+BhrN/MhgLHjtqN7B0ohAAtTvi1glREDpXr5k86\n9DiKToOhN/OXeR1ltaNSYMT7k+RVbR9jbKEXwGrRO2QqpFzEJkyv5ospOO+f\nc+jRvGPkhglhB3kjSJ9jw8JpOvMvN7SGGw83lVo4l0vFBBszYYYLoZsuwyN4\n4hN6I2hgd06wkyU3eQkDkAmW2bkIy69llb0b6hU/3Vjm3u7A1jwfdJ38iGCf\ne56ng3c5cjPaJ12LANE2NEe5YLjCbfvStsZU406WHYoMcl3M95cMD3yWM++k\nEZJFYm3m0yZKOkNQI7TArW/N9XufJ6zWzCqQHQWXHJj4JSCyiRT4/HlEMJme\ndsZ+C+OdPYsQmz/kWgvUm/H/eEY1N7VhhLi/0ql7Z5yTojhAIdGsgJzN0B9U\ngXjc/BFoy+Rq/812Zp0T7ydfbXXFLM+4Ge7pPhq/34MhfBrxrLx/M9/blSpp\nGlOq\r\n=vM78\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlEGyUpvYgshN3s9LL/++2fsjXWKf5wzlDu9lTKMhdjAiEAgd1xKHyqHf/XG13j9PHL6H9e2jaMzFPg+vDU/+jOHlI="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.18_1567287499044_0.4101004407332891"},"_hasShrinkwrap":false},"2.0.0-rc.19":{"name":"gatsby-theme-docz","version":"2.0.0-rc.19","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.19","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-MYYfFQSMgFYLBK/fFbYEEj0YmcWtC3PmaIAifwZe7zN5vFmEogcBoX1i16Rcqmk4N8kfuuySfefcAXSu38mxsA==","shasum":"e10f0d6579fbc8b4b3d9da8ec6f1810cc7d837b2","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.19.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda2YkCRA9TVsSAnZWagAAKpkP/i5fxzXAbxhyFnJZ8a1r\nGGIvFZi7yaU3kVp8+rvPkey4se1UEGsyeif+yqjnH6yUG10YOCzqK4Ui12UZ\nt6Hs1Sj/xvcrs6l+uSNvblacIYnYNUkW9EoVgceeLTMgxJrIktwz02IA+deo\n1YuD93DIM/gKDaihjS/6Iy/6/D/PulyubTxvn4NkgSGuDScKOUwu2XIniM8K\nkJuLFiDxyfsWiKEY4eti7CD621l6JmttfGq8aWTPjnV3nGxwNxpOCnu8mfDQ\nto+Rca0tLoONXb5zDrogrGB2644CmYknfniEcz4EMEzhgZekS3SR+tR8lbge\n7ITtE0SwkN+LmSmL8srH/JnGGvddlZs3SqCPyahMv3ToNi92BWV6BN7tBqo1\n8Ncv+dLDAT4mteA6YpZA6fy/LjlRBuwY5LQIbL5ZmqDkBQ0JzLj/pgW6bVVs\npDNxZaiVilE24/rj7TPhAZM4+9CfcGtWwSm2uN0mMyiK2/me9yNadPlpN+w3\nZVM1pNOtdSki0Du0KehTVHgxKTj37Islqu5ON7/+hJU0sDEk28CeZU0pTAGr\nAW+h8HjQWh+lMUClEs+oruQU/2GGQWFJI4umMswfTCGrOEE58KqQbMLKd5Wy\njkWyVn/rzSJ4YEFneGc/x+Y57E4Ocn+xrnmkUMm23PCbyuZWg455PY+TPkY4\nicLe\r\n=lW+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGE8rgIvFuoJadrmXcqg5/r4eQONAPjmxvLP93PS53xjAiByO4vgSLkVUzoGT9fEZPYuO1TI2JjigLu+FZescSdPug=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.19_1567319587871_0.8618252775240787"},"_hasShrinkwrap":false},"2.0.0-rc.20":{"name":"gatsby-theme-docz","version":"2.0.0-rc.20","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.20","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ql+sSoaERPRQVDlfBASttPr92WJ+0nTJin7wNwZ/VYjkyBz0nQ9o82HYKhaY5G5hY8IBi28/+lmNFFnIfoQXtA==","shasum":"414c90a9c2d2682f36abd8e5c6b1c2f7ffb6e7a7","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.20.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda2hmCRA9TVsSAnZWagAAH28QAIY0IU/ZFLW7DqDRo4Hr\nhxt482THAEp7Q9MoOCTYLngJhu17EyGtkF2MQ1z6wWIIHVtG1enbBYzFEad+\ncKEvLIiQ1PHAM+5l1KaWPFMksTiV+XPee6/tA6MmnzD3SQUk7bCHaRvneMnM\nLsP/jfVjOgXbb04Zu6PKwO83ntQ+cd1IZvVtzRLv+MoJbSBfZod7FukYDL3W\n+IG89088yRZYS6bT6OkfwhjVm/dJ5yYf1dv19QMZagwJ6Gl5dVjqlEk/eZaa\nUqX4EEYCBWUb99sVVuWcLLPVlCns6Q4sVO83PG2g4N31QAqZT7Lxc4GglL90\ni1Gdfx3Fgw9Z9CTP8/qBkKC1KJ2yXPA6oOEZVkxmTxbO8l34uYCBCBvBkEBN\n4rRduBnab5psZrLVeqSkAckP2Cvga16KhxmGU0RrFdGX4VhV7aI2TrZBbjsM\nmC8A74pjSXeNjGLQ5tOXb0GBlVI3GXik1h5PEzsTT0kSvrvpU1OEj6+x4bwI\n6D9wb3xF0iE7UHeSIlLRdB751v3mnUfbHa3J5c2aKiEQTy444/YJ+AzJPHmu\nrNj/aVFDBo5TwpriPjfEJiKW2FGQnxpqQYPBipcx5KJSNNlqmCAUKHmXM2M+\n3/9RTP7rrMswNF+Op+DClqMi6HuiVUDwJZtI9W5C7Y8w4qpP1zCZ/mVZGhge\nljNP\r\n=XzeG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARA2hWzl83WvOSiBqhmbUkqbczI7OCBysQrghMcapvOAiEA4XxVDquQhe7T9CjxdaVxl+j46/2zxLkuRstkIj2Xac4="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.20_1567320165811_0.6834373296456548"},"_hasShrinkwrap":false},"2.0.0-rc.21":{"name":"gatsby-theme-docz","version":"2.0.0-rc.21","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.21","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-N7Nso4UaOlyZkRyuvEFOz/aKT00ImHDt5oOV+snfhehTZVQFZrG3mLuKL6wyznncv56QgUOZ7QJBPQ9aKUVAWw==","shasum":"e753d415b28358110290db05d1d336d2d4eb11c9","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.21.tgz","fileCount":61,"unpackedSize":59440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda2x9CRA9TVsSAnZWagAATYMP/Rj3v10u45cEFAg8p2+T\n+OdB3XgrZ2NTNATnJwqjaKf9ZC3ANWRUTm/ErRBwx/R3HPP/0w9Ty3n11diT\nxKBLh7VFIeSgsO3ZIjMN9WuXv30hPYteXVhBCtTj5mIS5cxsdgx0TZxNYj06\nETh4JPAAwkAzUknF6cfoMNeXhGV4avui+koa7VdTo8Yphz1aY15HDUchQavP\nH2mv9UgiQr6RAI85kgZFRF30yD7MxtsPw3h0wjSQ88N9U+JQGpC485iqNjo8\nEDoo3CQYAZ8p0qoVPSM5VDO5Z+vB4RVShu8Vt/+4QZ0mNGt8wAyrYueA/gGv\nuTxNmcdD14pA7RLrwt7m26xhjrycYurvFcjEInZHvUh4GH+oz/urZueBWI/e\n5wPetTNU8RXb+enwOOZVvI8VfgFyBOhwW0nG/47GZMx3fsIWd4P2GsEBlN54\n7Wpbs2CEAvF/u/AtkTtb4XA2gBGonKinJYZAgY3FLC6etTIQbwDgMtg/4BZX\n194cFDKsHoknwP5/IgCc7Kb3hqUKNScX7JiOwPAx6kftr/MzM/JUfD7UrN7L\nkYkijVXVE28mDqxOPauNnoi4hw6ThhM7O+aeYe4MMwqQ9jVZtzkbg/6RAHCF\nKVm6pP8sAqE3EI4WdcUMOMOXB/iAjKSS8LfsUn9EmvZVkaIvg2ZoO1YfhfCl\nn/e0\r\n=EhNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKvQfHdTznZmGpUO4ohZkwjLLg2+lVxr6hO/uwX27o2gIhAKYtWPLFBYluCjV9wdtMYe9jAD9UXZvoLxUj09ToJriY"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.21_1567321213109_0.7214149124572702"},"_hasShrinkwrap":false},"2.0.0-rc.23":{"name":"gatsby-theme-docz","version":"2.0.0-rc.23","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.23","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vp59L9M3V7CsoUh/9zn3Acuhbvgmj2eW9z6CCvGnFprHn25+CdA1pXluJJU6rNdV5y9xqH9IXprKuGFLazX6Ig==","shasum":"d222e83d199ad4810588b0fd59e1bba659b32a82","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.23.tgz","fileCount":61,"unpackedSize":59417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbNvDCRA9TVsSAnZWagAAcrEP/14GB4HSg/hzeFNbYUAN\ndoc1IId7TMDST/xWHdVzxvXMQtu8vKrCE/xajsoMCBmyXtY/H9CJ8uQKh4fa\njSdHiUPUJpb/xzzfo+4Ry/tzS0avFW71idrefW4tG/s/yEBEwZAQymnBDpCh\nm8YHQNSBsH9Nq2D1MVVPf6AQ70ao5dPSk5FMqM1yfZ44/bNN+2UUYgCnmVeZ\nagSKvsF+nRnYG8g8m0nPxt0nNt8uz7Sao4MP5uP0vsnzhnX3WrBhDHJzCsk0\nTEAEE1OzJhawTn2zPg/Gr7e/YJvxI3qpneNsniCHCaL48SgUt+j8KepEt6Ig\nwhY/0ZulgnOI32u0zdm2LOkxwSD0s7k4wGBUhv4s3+JeQEO2U4vHw2BJK1Vx\nEDnYxXu0/OvNLYVf+cEScU4t9Jl4eQpYPS6/B/fZtBx6D9111CBLFJa5kjGa\nXQKcknwxG78bsk1lFQ7iP9GFQ+V9i6r8gzmZvWVE1DbOzTf9sQ5sAPVr6Hfj\nRtqI8adQHak5+P3aBfq6GSfRfNPqxC/jGxoLKdnoGmRmeq6Amn7B7r8QiQPz\n00PBuZ3gloA9EJPSdqECtgwQsj32QFJ6EmBzSFcZvqg1uwSc82MdHwiEby6E\nunj0XWx7RajLEXG0Io2updwYtg3Le4nzTZUDoGm7KYcIfi4Y2LxnegvcnPmb\nej2i\r\n=MLqS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYdrTRssNyLbVZ2O8YMgow+OsYFrgZk/F1CJupMc5xNAIgIb+3MAwmH3VWHXTDPwEY+Ob8cPjGnidnz62GSk6mm3o="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.23_1567415234586_0.8068925931595705"},"_hasShrinkwrap":false},"2.0.0-rc.24":{"name":"gatsby-theme-docz","version":"2.0.0-rc.24","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.24","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-9Vfb8/zAVKDiYoh7SGILtwZqr1nrn8LWj0afkgWs8UJt/oA3q9Q4np6MNNN1uXnAp+XmNyiWA7YIa3Nwo+AlLQ==","shasum":"e461abd955bf8b49ae63ae3f82507288cbafa087","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.24.tgz","fileCount":61,"unpackedSize":59417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbN/0CRA9TVsSAnZWagAATswP/Aot5YU6vNYOc+0+5SfA\nR+yXBIDoptB/SAo8VTnTOI5v8Es4IRuGHjaL4M66ywgSkp61uvpHLIEi4KFe\n+xYr7gnjyunBg+UvJdOL/WKqhvjJ9CTq3jUwM/rSMO4V4LXVHV/odu0Xy+1G\n7FwLPM62KmXTFwKJKBoQ42bhQsQYXE4yqtCGaCrbas8C90ufiQ+zfmLH9WDY\n5zfylXWSLw7pxul8TcP/KEfpFnNfZP6cOzbzzupWScNjQmJAuH6mbumB9DMh\neHxEPgRX9+2cgDygUThGe0w8yCussWpZfRwA6UC7XrVfC8UoeSg3Q7B4NlO8\nM0JItJ5BQhA8hf6A/R9Thp0owUYN0d/nfFCI+pyjYfbNzkAh2Hgb9MSjm48u\nzNQKUecxPkC5/X+PgOhRZU+F6BAkH8cxjboDf6HPib2aNYl+IrFYT+4cqnx6\n/G6cM7uLbeZprJtPJOFCc2QW5ShMs+YW7gbV7xLIPWUuOvWt1Y5jVDmw1PzC\nJneaiU9swqHlD0ybuSecWLf23obIJhLDqxPbMcnJrivZ8ZOdmmDpElrLcRc/\ntasrkXbSFPvTO5aaq9pmLGzHiplwuuw6IYAlOW3Eb4vQspOxnHE4pD1BMYl9\nfxqQxj96H6cQPowv4wLVjZAorcBA8O+WpDgRT6zOkeRm2NXhRffMfvLQWPrz\nZYcD\r\n=SFEA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHS/R9sSQ5sBU9Gn3I3uiU66GRsTSWnr7Cyz1urXRXnPAiEA9OLLhu+JkMV3yhIjysYB+Ir7gkRgN8IERrngqVYdgWw="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.24_1567416307863_0.06335115184841311"},"_hasShrinkwrap":false},"2.0.0-rc.25":{"name":"gatsby-theme-docz","version":"2.0.0-rc.25","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"^2.0.0-rc.12","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.25","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-NhF8+b5eI2lmPHFBqtQVA0fPxr21ZsiCCXAT1VMTlQEiet0BkY6AYbR6S+DC15NjoPV1ZmUoNG5fV8/fnsYdUA==","shasum":"04019076bbe39d69d0af721bb33adf7eeda329a5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.25.tgz","fileCount":61,"unpackedSize":59417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbOB/CRA9TVsSAnZWagAAlZ0P/0kOge2bX7NzyBc8hZd+\ny+SkCPwxHKmlmvM1dIDAJdjLF2megOQXu2TrzPyQF+FYAJcre9DktaMVhM/u\n+ari8T8KsxdhZHKxxxVk28lQ8I0CBCxNUl3P6GxIb9Whk494uOHiKex6U2La\ndcKMZX9yHgW1MWQZpAWOreFL8WGCHZKS5/bkw2Rm6IVhwYeWAfNs3+RLRTof\nfQO4izPY1MnScLEd5ThXIyRRDMiiQtAAWPV6sHzS6Uq5JmDrpGjGcRzk9uIW\nvdLIG4mGE7hhAx0c8OwTKNWrXnXxaAP+NIHd0/DkvLUvXWHR97gpEToiTdyX\nKM9BGbDgzmJHmmCjOqHgFIXvHWDLk1kD0rGrHsgqIwI/ooXXn5bdHnZ1A4XT\nIRSaj9N9UAtFWIQRDntFmo9gcUJ95bHLx/+JVLyFmAntIvjYGkFI4GkiiInF\n5iVqHgVT9g47QiN6pUuIRf+09+kfKpQTsDz5yXwSkaKyNR8kGWrq4BMKnyHZ\nIQp+XffTz7qqR80zymjDVDPecbqI4FqPHQ7OdX0deXDKouBUQ6U25WA32Isy\nJFuOxrDHmx6ZMNBdsVY/t+IEgMbnrK6ZUIZ44WH359S6/mW/CzzrTO9CKvH+\nhfQigjOu6hIFk0TzdTwDftvGZfuK7RahklEFnm2C0AFsreJdqPjZaXyikqs9\nLgEo\r\n=oIei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDQjry4asCOM3acMc+NZamJalsi22bySZcVQVzrh+7CAiANxnFBtKNcO+qSpHo5sqHCfJEA4R0IVj1SCAKzMSqQLA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.25_1567416447023_0.05404734457261218"},"_hasShrinkwrap":false},"2.0.0-rc.27":{"name":"gatsby-theme-docz","version":"2.0.0-rc.27","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.27","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"249992de96c835137dc6b00c0544450c212b3711","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.27","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-TM/3KGP16bM3bes0U+R/sxcwHLEOIuCZXrP5MkcysFOoP369NiTtFW7KYThx8G3iTcRL69XzjpR2Avv4SkqSiw==","shasum":"0422d37494af60852dd228ff438e63fe02044ea5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.27.tgz","fileCount":61,"unpackedSize":60076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbOh1CRA9TVsSAnZWagAAjTUP/3YXjBjzw9gqlJXqxjhm\nT9QXkSkqf74VRchySWt33ykTFhujwiY/x1PFEgiZKGXgshn+ridkDTNWAPqN\nE8eZuE1WHQRpBF5bzuHQcuwwMBNvl2DNCPEc4WBq4fCOuI2nnlQOqMcbPsFl\nINQk8ZR9R8usNJf3sQGf/17EcBBKj94OD3bEFEriHtCqQmqEfG3SBTG5TwUe\nWo8Np5/gqQGp+Zw7JK1H3Ggntane+1VY1ihxy929MUKPDLblke1ynLvHkHTX\nwtG8zkzHbP8ymDGVSf9Iv5S2TCrnfZcEAj0jlw1CdBz3jRBcZE4I4GteC3wZ\noqnbDQMoMSwjgthMW56Ym646mO1aW7sE80qfatwg/fGyjbywZRZuC9FzdlGU\n/cyKcAAWaVrLNAr79uX6uaMqEGH4M43Eea5Gedvc1n2MzgrIEMrAWiAtDW4c\nbRXzORGRAAzozOae+g1+EXP0Kv2QNGmOWi2YXflxbTc51RMcDjpj/KffFjjL\nuRMt0KQYW18u45zp4UqV2a5SU6GO+dMUtRWpYjrLeE0k5FK1C1Rs2vLz6QZk\nELstR13O3GKYNFzfsStVQPSWh38VcDst6W5OBvoROaDmMzaQ7JwwABIUxVdR\n8E4HQtk4pVxk6QiHqGKaw54Si1yoUu5Bht6Td6FNcHznGXB9te4beYywZ68i\nPfoI\r\n=4jJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN9uLXlw8cZcpwLuexIJbOUuqYG395VGsC0ygfZgQK+gIhAMfH2+zciTtlu85HPn3Zna4uqhsSRHutYfWMEu6XwYPv"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.27_1567418484840_0.1597407288536563"},"_hasShrinkwrap":false},"2.0.0-rc.28":{"name":"gatsby-theme-docz","version":"2.0.0-rc.28","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.28","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"be1306384fc5ed32e9213a01a3d01a287db75c95","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.28","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-XvM3yQ6GX5MsvPcepo3qHp8YHejNmrr1NmN1g1IN0h8WFgMkBpCq8MOWkuvRrpn9DOZ16FCLF5Y1t7ChNZkyag==","shasum":"abb73aa7ac8bfd48fe5ceae7e7d82b8dbf74af3a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.28.tgz","fileCount":61,"unpackedSize":60736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbQQQCRA9TVsSAnZWagAAl48P/j9y5e+5WXHFzgv5B3tf\nBh8y5aOj653g26tbkfwrYVtG1D/LFqT/7ninC2tNkzh9QT7iY+ybKjs7//Uo\nZBTYXyH6SKhGLRHdmR4TFMgbKQv+7w52T/FD7mqoGAlAb9e2FETNq/vtKECL\nWxkUU9g5WV6nQs9HJenrTk2n+5xm/DiRh6qE8Zt7pImoxTtdnoTWynGQT4N1\n38PDdq/Vk4Q2IM0lTlIs+l3SvWOAREB7ujIrsISK/ZCG6hJTVWPssZgJ+HWs\nc56+JU+zi1IBXmDv408DJKSu9gSOn9EpZp1YHCt7YQ+oa4SHXcAMmPt5L1Me\n+TH6y3spN1cO+/lcaVOJRYd/LVzvWB3xc3cYvE6tWxn8MoD1qYsfMOyjwB+Q\nnmV7niVIXwsDIXzP6WvbhFioIYWKNiU3NJ+Ela7u8oGFhRKhfgoTHcPaGVHK\nqq/+fAS+VN9WWckXCSz4hR8KMm5KhCdMKo2Vuyy/dix8ASWhqgOU9eJajGha\nnLhxFp4rqnICScu/KJvEo/4KeuK3y/15tKfWyY3eosZRT4BhoH2cjz/YQWDB\ncPp+9zEJeY3GDWqIpJNBV84IbWVz2DirBFYO3oHj/SHog9VAMGQw9BLp7ug4\n2EsOmscHR8HAjkGDyX4H1QuJeDnxf69Dr4jb6j0P1BTlukKtLXlq4PwGQQRM\nqz2w\r\n=SYhF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWU2R7LxoPEeDOanVdm3/BpDFB4PEh9sZeXs0kgCYbVAIhAIC6+HsxD2a/KxUIBmxIH0Ou/ata8yKymAwHRZPoR81a"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.28_1567425552141_0.08046475196816272"},"_hasShrinkwrap":false},"2.0.0-rc.29":{"name":"gatsby-theme-docz","version":"2.0.0-rc.29","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.29","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"46748a3d97e7782c47e9ed196c0be21e7a3d6f03","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.29","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-JHF/c8hgCuEkHukf0yeRvjEh5XZLu1ueIuMfh4Xn1P55F8uYwN1zouFejgKk6HqCjC/I04TqP00VTM6j8/98hA==","shasum":"6ab1ec6f8be309df47811ab66f8cae4088f3b261","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.29.tgz","fileCount":61,"unpackedSize":61311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbm+rCRA9TVsSAnZWagAAAAkP+QFxnpK7BfbissCoFxIM\npMaaQTBkehsTNhkhtrpz4cyDtonUk7QmObfzIeA3m1cxuppXck3ft4VuGvGB\npZd2rWGypQ3I3hRQ04IIZ/+Nn4XSlZW+SWgCE9O/KS38TEpgZ2lat0cCxTZt\nkoDLwim24Fu3N2giMUWEh0w9hy1/HC9y1SbFngM09x371xfnXXNF/YOVvMJ+\nySMf5pAXB6eMRC3qUULz2OuXDk77MCvsPo6QbJyZAJcD8LGT21XCYCVhmsgG\nL9yck7sC4/fVgMUGKRjEYrTTVz93UqNs+GXznbXqOXu9WgayHqAI2jCKFyBF\neMWD/DyRqQxaElwLsCrS+nbhU9qUDl0m4/qMyenv7+Xpuy1kqfN1sdR3R9Sb\nnK6zAqit/vF2lVQ380MPUEN6Sj2LVjFTHTxaf8CSi0qVLpRcX+XPFJa7uKyk\nS4vNtmjwMiFh6qmqGm4MMrDJMF6ZZHFCjjJgA0yj+Fa4idU6qlkIzk2d++MT\nsf5Rs7YD4d7jspXx2h1Z8iFs29DrWXMSBmAjeYVS8iY92KW2bmGM66H0u3TP\nZ7pcp6c5GlnAzpAqv7TFSbSO2+3takObXsJ8qfe/QNLSO6Q4a8RnvZEOkrJw\nutDItZFwXajWvd2GE+ETHUFqTycoC3lnl8E+1Up39BIEcY8CcpN75xKPicM3\nnghW\r\n=+vrz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw21bev/FnFgt5pyf+34qPTHNzLIcZF5XR32RdmPj3CAIgW5C7gD1Nb0pbw45M/0tSu4vvUINS6d5FOF5X1uCSZ7M="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.29_1567518634776_0.005700373284486471"},"_hasShrinkwrap":false},"2.0.0-rc.30":{"name":"gatsby-theme-docz","version":"2.0.0-rc.30","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.30","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"95f31f87a763957888356af16adae438319675d0","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.30","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-w9chHDlNkORSfoHeNUCKTHrZfYOSpjH79Wct4vchLdNWYb7RHDPacQWJGPlbIz85CXz2nB7rmdK99jC2vX7cWg==","shasum":"acf62b0bf1d8b5e4f39c8b8a3633525622727a98","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.30.tgz","fileCount":61,"unpackedSize":61472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbnnPCRA9TVsSAnZWagAA1fkP+wVZFVfhoH2lCpwi+PM4\nBQ5xYIV7wAtNrzWg7PgaOEJYkWTnQPEygrMvykYKxpghK+DoL3OgC4O6ij+F\nhmSfD108KmU7vVo4Bw4dgI6H/3jaONU07Yov2OemnloL0YQ+mXK1od/u6X+1\n7qXSa8tJOukyvgnfZrhfTEGJsUsyzM+3E5LiBwrJ+IsI3DsK9vZDfr9/amNI\nhVxBCjwh+/7n1FAdpyclZ07xQEnwlyRB2s8H34IRltRSHL4/sCMMC9g9IouW\nGfSZ0Qq/lWPOF5GMEYZQV4NuUYClrfBG6+HX2TQfwSzZPl9WRVYPTa+csQ3G\nkxjTU8gptIhUfmc96zT/d0TkfLnyTB7xaGRMtLstpl1G5ZQNBKwJmKJvzNBK\nbZQp1mDjxTRa/FL37vY8h5DfGog/tTJHBRoSKqXj8mnN5c8fRnO3CBaK8yTN\n4JV2xR5s0aXd0nES4W59YxaBYzFR6bksGk57XMgF8sjsI0cWk/Zy35zGfYDT\npHvcYFbxIq4dXMRgOMOAW8EQBddYLMax9w2+caBB2pfUmO0RYMadzo6jrH+D\n21iuFzJ5FMPSti8Ys7k5ZXM2pUWTzmmyJ1p9IJ1I1W3Q1BJ7n5wFpqeVjm2V\nH4hw6FXbP67Yf2FzHy5L/cMnbbgBgZHU2VUU7LSi5V1MC+x5J7LGDbEMKCJp\nHVR5\r\n=+Ati\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErHTSd3kgBgNsoTIkk18Oq6azAui5yXaZz8dOHh5XEWAiEAw9HsXun57hFJgl8DlV1mAheUpOXr0aAM+2sTx6TotZk="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.30_1567521230595_0.2517268189682844"},"_hasShrinkwrap":false},"2.0.0-rc.31":{"name":"gatsby-theme-docz","version":"2.0.0-rc.31","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.31","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"e3d721039b7e89fad1a6a277f431bb9eab9e8b5f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.31","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-0T+OdkfhAN6BiMDY155hk1vS1fNBuEdaQd4C981afoKpET4lxos4mwBOG5azKoNVwtGl67LyKkkn6nDmW4VIXA==","shasum":"8e06c3af9677a1894daba1ddbcf5c09fc5c2c153","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.31.tgz","fileCount":61,"unpackedSize":62672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdboHOCRA9TVsSAnZWagAAvhwP/0S1yIN0LX4kbhsCu3Z+\nmGUVM6IGwJ9Pn3B1UhdnBWFl7U8ZK+cXwa8sLcCwwCv/y03IlUqGp9I8VtoF\ntdxKF4rpyErFzYC5wjinTJjgGHtg9YYU/QWAVeUcSgWdbHsl+Ua5RnZYract\nclIwwPQw2u9WwL0Jvqfn6Se6toOittjnRV4Jxye2pDBajXT5VzU9VuaOmCFs\ngZYVdnf6Lw58aWOJMIQRX/NVd+VPEg4IgVWxBXlcrj/PDfx9E3R3ORdLFU+M\nVMNtkZih22ghoI1/uDBHjXzynlh0BNQSWiN9oyqGKZmetYukqEIi7gypXKDg\nfJQFLqs/zueeH1vT+eOzGLP/RaZMoGFxeSZ5PZ5Uz7Eqpdf9hZZrJTdwp48F\nN6GtqxNHsSr4cSlTABwBFYL7zm4RPvyEl+3I/RlCr1YouCNbve70BI9FLpJ8\naPFVbAahDVZ3cyVxGpgzTyBRcGrOKk77to25pkDTlWQB20Ld/Wi5npRXhyMr\nKYvzh70Xgu25bb26muDI3Q4Ndwjn4OGwnOpiirtHUqVGTLedewh8xnJKlFZZ\nBbG/xn5CoP+ctbLVjXDAw4S9RKp9p+v9IZQw3HTprYxs0ZcxO70+mcvtDE4L\ncwFCT7x5gUFIULKkSHBqd+IzxA7C76NkeYW7dlrAHtS+Wlg0PRD08aYoBtl5\nuE+P\r\n=fzU+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBIFeqSLj3d5G+Kf8VhIac3F/xqSxA7zRR6PZmIV0VBMAiAjtmFSH9C59Y5xTR2wDuT2gxEc+PXSEEy+G+/7amwAwQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.31_1567523278186_0.1907327552394391"},"_hasShrinkwrap":false},"2.0.0-rc.32":{"name":"gatsby-theme-docz","version":"2.0.0-rc.32","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.32","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"b24fa6e523a0bc513585dda900f035ea415ee3ca","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.32","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-kudfF0gdVkIkZFtSiQugXdP29YV+hMDLTmOQ6vsJS9dFYX/JbAVl+hgfemm5/IREd4Bpbo75P1JpgwN7+7V53A==","shasum":"435b3ea6c6fe174ce263c682c9794f948dd1145f","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.32.tgz","fileCount":61,"unpackedSize":63456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb2KuCRA9TVsSAnZWagAARSIP/352fNtlbRHUeHfC46ED\nQOQKUFzyJMB+DluEqP5HSv3k/S/clW7GKxOqMful2pdK6Me+5ExCI3lbgOsl\nfEJk65ViQjQ+/a1GdybADSdbcYShIRVmV4cwnRWgoszdw9oNEn0j44U1Fxx9\njIUMEhKKrJqlMgYWActvfw+PCKRLr3HNg1pzm1aJ/FJJOVV58yRVn8wHaKTX\nz549drONyOROWZIAx50w89miWbFTWNLE3zFP2To+tMbXgSGhdOQYgpG8nmwM\nUsthUNRp+E+Ra3/CG5/Sl3w0K9v5ho0qpJPOo5LUsDwPAUIP/PnS9jRSF1lE\n6Nt0fuBbZcUJOyCW+LvtLo4Jg2yGM1NO+dxnNPACt2IwdXJ4Dl/kQsdO3daO\nVOaV8A9rgKY0bosQREe+SGwKblQfvMnp3Yfo2FBVrDlRrCi9uTrPrx2I75lA\nxuvZHZotzg+i8TvzfyaC8AyIJnXdQip6wY/2zBI5v8vtgt2gxJJWirG8VT2w\nWEX3KJtVKTMFTz104Ds54rMNvJ4pAGPN7q5MZ/YViDYZGnPxd4xV1gBkuaDC\npZ3m8vB3yuJb9k93bLs7E/aKVhxhyWqjKRWE+pRF22emPQryhTDEApa5zUk6\n7uGcw/wgMk2WeiCgMI8vV6ZkPIk9rDKmNwIy9YOfLQa7Thuvrfo5TiK+YNBN\nFy8n\r\n=RjBg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAqkLV1r7X2SjYUsY6fyUmbc9Q0qDKz8iI2NDKDdfzxAiEA+YDk9i6SGQ4Fjyq3RUKJFmKo1PDTHlBvZiaUl/YHQ+E="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.32_1567580846326_0.8557176200854979"},"_hasShrinkwrap":false},"2.0.0-rc.33":{"name":"gatsby-theme-docz","version":"2.0.0-rc.33","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.33","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"634e193916a88edd8c14cce11e0293ffed884b27","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.33","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-gKAklL9ABZ27B9/iI/F+r0nAgNRmMteeWQjeRso4MwTpPPfpFJ2CDzc5Sj3VJX1nBkkxF2TyNSuaRB7VWcMDCg==","shasum":"bb0bc027e42adc55e72bb797847aab467301fd61","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.33.tgz","fileCount":61,"unpackedSize":63621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb6URCRA9TVsSAnZWagAA27wP/iyflEiFrD9YGdQZ/whB\nsxdO8PlStylL+ouMcU29CthQsr+f2nvbmJCgdoHoHcn6KhImewdXsHzhmwk0\njLeLCQHQ4VRcavfvKdsk6sVhD3R9I3FUHuHYRsvLylinP4zGTtx5313PeJIH\nXI0HNxe1qi0sJec6wJRNRs0G41o46Iyk5DmnCcDUdJPx7CAwKg40LI2AKi37\nOuu2SuEEe1c5OQdR1OB+wSZrZIR30W3M9a5WKWCXFF7WgjrmZ7+PAQk7a6sP\nXUw7WkAmoh6sDWKbxxIhAu49/DFtwu5hq75cFnVGs2rFptUSuO8s8PBm9Srm\nhFtxQUwe2Dvo0OagaXXWA3sbenWVXmUfoMc6TKOm+Mt3aKOkpRjd41z6YQgs\nPpibQcy51kWW4zfZE9w/1+gR1PBeJ0nffIsDMXCpmrKWhY62p75ycStoH4kc\nCEe+awcV1DPRt2mPB7mw94bvpimHH86iVMTRQonsybFAMs6CKLUZ/0bqkmlt\n/0c1M+fSWtSZesr61x4y4NGVKNvy8/mV5d2cwZj7I8PQSe6KM+WWwlDHBugl\nJURXs9vmJWrxZCoCELUADtI+avzXk9Cf5IxJMN+IxDbVV/ynInEmKiPp/fLJ\nVmjZfBWQDjFhMN2FUAy/4TNP+/tY4TfxLujk5AEW2BbjJ4ueEdqPWfDLfkG+\nPqgm\r\n=/Bfb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOoMzVBWZo5b7Iff6HPrPfU1ymvmEe8BaSiAnOVOM+9AiEAmzkIOaItRTYIu1JUYvL2YZaztJ+R6fMqdMLW8vRhGHo="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.33_1567597841335_0.49108765734574744"},"_hasShrinkwrap":false},"2.0.0-rc.34":{"name":"gatsby-theme-docz","version":"2.0.0-rc.34","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.34","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"6b9d0337526b21c3affa400d4af1cfeb6d25b6cd","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.34","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-n0QRRP5Pi9ooRVSkFbUCKgxObfCR+sNJmpyi+wwoqdQyTGpjvq/JekkJ7VL+vDXujxhhqn1Am2iY0+JagC0muA==","shasum":"c1ee752d50b0305afba5c2d460b99a37bc277fc2","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.34.tgz","fileCount":61,"unpackedSize":64401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb8kKCRA9TVsSAnZWagAAPRMQAJsCJyObyUmkl3NM8S+z\nF60SKoEf+ngrWZkoq5hyI0yydrkFT3x4t60PPi9sL7dmE3EDItG/8jF+04PB\nnSAK9njklbSIHM2iHbyVIY3xHrh1s25LVual/B3Pf0e61Cqtsqi5/LoMfvT7\nTKbK7noT4vBWlh85HmCnx2Ia5gdVqdxS8Qx3cPwbiuatfcr/DqZAHRXFwDsj\nN9VuKW5pOMYga2K//edX3u9XfB+d2OgDJaZOQT6xzLvTH1UhiXQhP8WzLBVy\nhwrsjSpWt1HcMn96AsKB7zZCT4D6sdZFc87lHWSlorNdFtYC5nkQKIumyxkv\nDdqjGhKdvZ6gKhyleaa1RHoIPQezRLsQ9msVgtMyYW5EwDcSZZI3h7thnP6q\nT11F4u/k7ur70czyur5CimY87/DkVYAbpbTudOxo1CmrZPnyeOo47F8Vr0Ea\nHErslisKG2BWhfv5Pz3Qhyhzann1hhCbYFS7Y57A8ZvMZoWqJ87Nz5l7WRjz\n9hNDs1RKacrL061tzmhq54fYFj6BV9F25nbZ8ImZlvvJkp9oLrYRLbobgbrp\nHMObrL7pu8NY471XH/xDgkeAt7tkOXLcfXDy50RCO2cVgkQm2dR5XZ8ziQo0\ndYxTUU7Ea5BkgWz++TjATLhiV42XJzaw4a12r/lH/8Z5bxXbYPHhYHh/ri4w\nRkdm\r\n=hN02\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpC9VhfgDkFAhZ0kr1SCC4EjiMRYZGxLMkwhrdnwcgWAiAYklCFBmhAVmaVAeUqYl+WSEFB/+l+zwDsunpc2ytE9w=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.34_1567607049728_0.7393078827065758"},"_hasShrinkwrap":false},"2.0.0-rc.35":{"name":"gatsby-theme-docz","version":"2.0.0-rc.35","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.34","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"bc0dbd8b24d5524aceb732c3e3176f55a721361b","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.35","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-a0TdA/uVio9ETjlbZOASHaHLfeOCBnhAlfPTmDsGKX0yvl/2r4nulRDpT7Iz/ksI4a6CFPlGoNtGQyxtlHsSLA==","shasum":"f30b5451d8ecfca7df0eac8fc7ae07d631940da7","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.35.tgz","fileCount":61,"unpackedSize":64655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb80pCRA9TVsSAnZWagAAkMwP/1J4UIziqDPWc+VaKcsS\ngWsAjOzlIuVAIz3FfdSH8HAVJvYUWkJ22X9lvoTWGhSq6Lgxd48dzhOXfFcC\naSETeruAPbQzig0ewl4CY+SW9n/g3cSTxkQmIz9V2ZLL7I6ONcHQlJNOQnTP\nAE80XbY4YIfD2n7Gdz1it497/9S4h6wcUwRXIQaRKKgqvfohopqtoox7pqQq\nOtswvkVlqVboZSxAx0hhNjDgHLHpcplzbRoPLcxHWw3eUxuvAxax/vtmg/Q9\nhsnYTanEfPiBfuJkIvZB5u9/cZJhBqCFU4Hotek7SHIi5MCEehf+Jr8B481A\npAQUzLNQ6OILVOvucau/ZG74b7pMrpBSrQujxOGIqNbC/ZISjm/bPia6LANg\nLszWBVOf1J9Zm2nI1Ze+LkGATlhjGZRUj+YSyaFmGDYm3yGRzuGCJNYezTnm\n/OOvV3IfcZvnCasK+mBMZPS7nGPT/lpwciAyJLjmRkmEe6FoSCEmN6fP6yRA\n7lrmPLhLWJ8+hDuVLiqqB54ksDvkrhHsz24OUSx+enST4ZbH5dlHYzGQPZZr\nHzy1VjcyRnfBXjsMMLBs4grTsDE+8Ph5Ov1tA18WHud7hbWCwRo8blrqEwhS\n66RPks3sGcT/gu3tDoVIqCuGgx2hbFcZWX3jKOvlRlzhIxQln9Yn0Oryv/3L\nXVYh\r\n=2m29\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfA1hcqTKsP3MGIH2WAOn8Q8ad5RQHJNkIatanGx6thAiA2pbB5ZbV1NU6nY/efwcyCWnralgVxeFxiDkbHdQMfcg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.35_1567608105460_0.9677203762791102"},"_hasShrinkwrap":false},"2.0.0-rc.36":{"name":"gatsby-theme-docz","version":"2.0.0-rc.36","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.36","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"ad6065e5c0952e452108be24b74b112f4fe0c1e6","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.36","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-v5H1zaFKQoWtjg+I5nuckAoS5k8ipZ6c5WE/PbQMWgkSQEJbwcLR0avmtpYRIUpZlQx9a651T/DPx2AZdpdhQg==","shasum":"b9f1d9fbbd6f7921530b6128ba8b69cfad37f5b9","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.36.tgz","fileCount":61,"unpackedSize":64628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddersCRA9TVsSAnZWagAAlJAP/AgEk7fdCgHIvWxOy8JQ\nxf1jE1fXHokL0JvTNpxNLj4ymQ/Ljt6JJPOtfAlQX7Jg1ndjD9lvnEoT0IYY\nTj+Dne5KFx6hTD+WoSPLnCPrpqWVpr3OmUZOL9q7+oQfteJzdpXlxyajX5G3\n8ZaGnAXbCpHtSwjk04+Tl6RscqVR2uh4DwP7vkAvjbhCmN3ayWBf+EAP4DjZ\n1gRlowDrfuG8IA5ArwlVGYLmJbvZ7Q3qA2pF3gKnQ18EUSxxl9LawZRhGIxB\nFQ2R+4oXlRivUFd1FWYedKJsoabEo3eeinq7fiXAywK5aXzEinYQyGssRxk0\nIPV8gsJ5LjBKAxgtlRVfG7DlP6R5rwyjznh9Ww4rNBZWOjVvHwMs2JYBcWS4\nBAD37Ln2AWRd2VejC8C1rzLIL14A+XzkEfN72y5bK8boAAoesG+JWVPlYD7w\nfM527Wian7LamcALTjph1KscCsNPEjprqJsZs06j0Zd0hFD5Eyl3Hpz+dkpu\n9BaOfPXaALsbGICTREd8Vh9cwkHFBdOCZaDRaK7NJRbqUrQ/B+9EAjrnZign\nWXGzQabXFkQknmoIRNEG8VkKdNTbV6mhEaPGRUzRMDblkAJ5bBRG66eEgQ5H\nISm8N13YXPyN9tYCih2374M46RQ6pKresHcUvfnWTzGtg0QyEsnwdiTfiziQ\nnwgU\r\n=i1C/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYCQQHxpdy4WyTi7DYEYoOP69xlg5zsIePsbTF839gRAiAWOO6umi1KgfVCV56RKaSXtlZXz7Qq5bN7mjUUgXOnNQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.36_1568008939713_0.8227409088463453"},"_hasShrinkwrap":false},"2.0.0-rc.37":{"name":"gatsby-theme-docz","version":"2.0.0-rc.37","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.36","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"51cd3d886bf804ddef826631b66587ba00fad8d2","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.37","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-5WnhIcp90t9SyLkecZDh1Q/P0zJcRGwgLThMvNZacaR0MP0C68bIo8SEetmkLr4/GIIn14gx/5FwPV++ftMJJw==","shasum":"18f28e70e83a0d96103e4bd1d89eb933aa272b37","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.37.tgz","fileCount":61,"unpackedSize":64598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddfHBCRA9TVsSAnZWagAA4nEP/1vYvX0kDmjerljDaV+9\nZ7HnQyDPCLY/OCT55ztsk3MlO57DTXlW7Dy2RDIoIS8hy6+ZQmtGUC8xAlUR\ngOPhwaM1t78j2zYAppE64nFy1P67GcyzO2cl5mlo5yeOt+qV1qfiptLuB52E\nRPkQOVjrbaoSaGV9bk28JvIqpRkGFyPYGJB+RTZdZfCE/YI5yKq6Od5ZxWlK\nKAUwcCQthk1kg7NGH7nhlieDVxtaW5WSGz+r10+hRXGSnlbbBvSoZqxJQHaV\nzyfvJiB3qXBlkQC+SLrs+Ub4eXdAj5Uz2elbUHEAzA+5LJ5lk0vj0/lV9Og6\nT7jm1yl3UHjBlUVeU911lOxdB8yiZPNdtDNwkx3Zo6LhGnfkPfpgLo3tRa4X\nSNCvQzABmGwFt8V1vg+ueuCA9hLmn0rnq/KI6Ltvw8kNxgdm3Ba8gQcW02Fz\n8YnxV4uSBjhMkwoiqNo1Cwqf6tvJNFvNwiy/Ddn9fhk0si0vESF7Dzvy7nnm\n1oBkYtPY03rcADFm0Dklf4gCIxS5QRTafrudvDUuhmFmx8c3vkESrwBvA6Vk\nUSrECmGy343DMQ7T1D/Z7yIqwftW1kKACwH+7OYJL8MTqWKMmz1uNsMSDXGB\npe9xyHcpxUvSFsYBo4VnohVDK16xmMxElVCcjUXrv2F0kob8EwpPif559bPJ\n7vTv\r\n=PiSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMpAvotCaGB/RBdfCo65leRqbObdAKaU3zGDOmVwtylAiACev1HXQWx4E5iK5baREKUhPnoXvmuymyzhRPTlNZynA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.37_1568010689074_0.4954326320992375"},"_hasShrinkwrap":false},"2.0.0-rc.38":{"name":"gatsby-theme-docz","version":"2.0.0-rc.38","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.9","docz-core":"2.0.0-rc.38","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"f374f231c8de70ccfe4736f283ab4c9985a2048b","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.38","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-i8JexOVMz1ZSOuPyOS/XC4tpwUQH/4DVGuMveFvRohZH/r2O7L7V1HeQnfuK6vRP8xsWYeFtLICgJ0Jsz5YEHw==","shasum":"274c613c7a175f3ff19ff3653f13736a547a3ffa","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.38.tgz","fileCount":61,"unpackedSize":65202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddhhPCRA9TVsSAnZWagAATFoP/10jW0vzYm2tkkxBhI0K\nsFTeTFOTlk3Eh4dyBmuK+tMFew2DswkPxYeHhjDQxGi+UFpqBuwTcFP1CI3f\nMzfqsv3EzCuYQ8WeH2+kn72Wtb3RkbGPlSHwk7rLAdiALxTAtxU08wsyPV4I\ngVbzLSvZHTXUbqJMiVPoAN1BoE07drIMzAb8pkYzzXTBSEmESHyB8UZS26BU\nLsgtp1bPEoYEbCoaoPcvlbnk+F5sov5oBnheyE0lRyk8sOSIxiPD0TZfGNDL\nSOcDcW3JKs7s37Hxc8vUC0a7Q65CwdvmlCMD3EVweIQJGGj6qSNE6133A/3X\ntevPjeh4KZowpxUyZ7DjD+CCZ0L1EyLnxxiYWaT9xreC1IF18xkzuxBI9EBl\n/7eLP0ulxuVRCYUgClSOQx/Xe90mahG44vN2MfJKRXE6aGvVd1OYynNRS5Iy\noZQa7yl3BVnOwwgUJ1saBGXOs3nm9q+9zPp7KdxE46jLdyW6pfGHCR7EQVBV\nkuMtdAMO2t6WiQ4FHHKcuL8ZaUSju0+QoLuPT00LTqjEXPj4dpTS39CICFUL\nmjQPGJv1JdClzO2vTwAnqyZQUljPveqVd7jjs1wezTEVWdjmZ7TVDDBMNEa7\ns/1n1s6SPWyWMVjBqOpFtMIARMqSRJGyhXYqYwETkaHJMB+gVB0Rl7K2lXag\n1lBx\r\n=DLLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB06YdpKUE49L9zWiqblVKCjT5AcYL+uMdp6qp2U9VREAiEAzcPy5MmpO5zLqFNZm7Rz68j1R+IcyDInsIJM2i22BAY="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.38_1568020558359_0.7802353059761138"},"_hasShrinkwrap":false},"2.0.0-rc.39":{"name":"gatsby-theme-docz","version":"2.0.0-rc.39","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.39","docz-core":"2.0.0-rc.39","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"b5d712e3c7c6e5910a0b47f8197557987fffef14","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.39","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-ekmwE7hHulEsBGZvJiRITyFv9wBeVAFhBlxBqTmkG48Tnb78WuBgCAW2yimZrtxfBm0pJNiYZfik9rl1TduMAw==","shasum":"64e044e0d19edd3a61ff665f5860866b3f177f98","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.39.tgz","fileCount":61,"unpackedSize":65201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdehQ6CRA9TVsSAnZWagAAhv8P/3MkrfPKKI5UFZTE4yqd\nMTpJ2FVrq0Ii2N99ek5tIXe9nKMux3VafU4SW4fkF7HUtTEwmeHFrEHUIBU5\n08iLAWO+Q3rKzqGKpSMedoJNDReyODneZcCbHbjQKCdC0E+K12madgyZwB8K\nVf+SXCMDImWFUbjJEIpp7oAWkP/CLaH8xbCqHbFPh0nN8JXoYY9yJXrVjThH\nXnPCwYzSwHQaDyRFkqNgwfEOBTdG90PDIz3btuCIysiVAor/lWZ9d7A/RUnZ\n2DdIm2grp7L0X6KQshnJK3Hed0GLdoSH1RcIHKCaQ9qXOv6MyIllw6Z0IKXo\n+05n2nsdvknGfHWvn5gio2U8mAeqGYvFou8rAbsZ5tUC6QbQd6tJTa6KCYuh\ndj23gdej+dXR89ZrwdFUYpWzC3i05LrpKQJG94b7THYpx4T4uyoDpfxSwh60\ni2Vq5doVZAm6XEhIXN62o38z3hInUCdYKQ1qIZKFz2HHDDq6VfFCZTDB9Bh6\nuLOgyqOukbsN9RgBvsTESphNpCnDN1H6nsEXdp0uQv8POm3EVzRcNU6nzzxN\nJyiqm1Z357nMpaW1A11J2CMrksBOaCGmfqsb5kxA236XWdlqmUVOyDynS5zP\nnJwFZrlbSqgk3Lh+BSwsmpo56PUh2g/IMbZxCYz671TYgmrvAhSdxKmcyeTm\nXKIt\r\n=uK8a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0orcXCl13qxOAwMou0BW/GH2i/WF1mDZG9blPQdj7OAiAWp4yGhfFuMJxVHqrQFoRBjBH8vguY1OWxQRAkk2iMNg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.39_1568281658264_0.36223535581480926"},"_hasShrinkwrap":false},"2.0.0-rc.40":{"name":"gatsby-theme-docz","version":"2.0.0-rc.40","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.40","docz-core":"2.0.0-rc.40","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"a20e92743ef24f75cf0edde8cebd58cbcd8066aa","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.40","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-shwAdbOzyshZf59qrBussAq2YIWqseT8dA3CtF7TrybkdnP/P+KEECBbArEPg0zVH06SYSI9Iw5c2hKq5LytIQ==","shasum":"b66afc75be034e9a0aee9914c5a167bf5943b58b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.40.tgz","fileCount":61,"unpackedSize":65531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdezAaCRA9TVsSAnZWagAA3ngP/AwIiNjNojwOm5K5XI/y\n8vdkRomDILJh+EPptvTHJ8/IUy48SadGdWIhTNI3iqLV/IYRI32XCtWF80Hn\n39woXV5P1ZxQE1RiRPsdWjIa0lazV/zApbgFgQc5bBtaaIyR0SoPMlGF636b\n/NTZlgR65lDTTK+s0xjx9oDk6+XI/sULHbxaieKce3uTfFdWq9mKXBKzVNo5\nC4PwZbBmF2hNEUkN+SgOjjGdmlJ8pcd3sB0oxdNTKZkfRo0lsbeSZkSUApfP\n4V3U57/RTRrE+kCtUdksrDyMxTrN32Hz9XxESJ8oZYYySoVuDm/pcX4a/ypB\nx2mB+o3qygcVtabCe+gGHdacpTx6VCt0agSVLt3NJM6UfNHWiVXP+6PWw0BY\nfTkcKOPdB9I/SzfFRDmHh6fyP2Y6n8r8pdpmZfyLES2YNUWcjUxK/f/Y2cjg\nJ5EtO5rB/TYGIoZ5flnv+LL9Wb0saOC7qgcNNlRgXEtPvMgnuAzgPZMee+rx\ntfMx4FSx0nDqyaUKUHohF1c/6Yrk/RqSp+PNukklX4i1M67X+gZzJDMGsmkP\nZV0kYOf7MWuLrLqNBKHtFQs/Jf3jq6I8ftV7pEhZtqqQwcBlOk371yIlE38n\n2NiPaZvx5aIWW9BgS1T2E86jkhp0BUlkzC/PR7enO2wE9hFLrv3to4ITGehg\nDNMv\r\n=+zG6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4CMPJti1i163zfytyrnIcqoX0/rFKQFhT2ZRLYZtnxAiBTNVdqmLP+mGirclWePb+wAZppvjRuPZqyPF4zaZkrTQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.40_1568354329955_0.30210098319077217"},"_hasShrinkwrap":false},"2.0.0-rc.41":{"name":"gatsby-theme-docz","version":"2.0.0-rc.41","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.41","docz-core":"2.0.0-rc.41","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"05b44675f968e9c51e22091623adc04274a33b65","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.41","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-zVFZcT/ahD1q9p8A68VNcEAJB/bo9h8wijoDuIviWEHpJPag2ha4WspPppqV8hskWmkolYK9lp66SsyV5vm7Tg==","shasum":"71bd9d4233b2be9492b55a16cd57fc3afd05ada7","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.41.tgz","fileCount":61,"unpackedSize":65531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf5MBCRA9TVsSAnZWagAAdR4P/AuIronHzF//vfM3ONS9\nDEADDaHbFheJj43eU/DrtAQ6vEv9z2HertqasRJmauC12cSowT1xUKVWnVvf\n9Xj7mHA8jmSn9zyoxSvlQnq8RVKrxsKV4w7S1j6I3ukrLBx039ZwuxmEEYOv\nA0xuR0xvQEejLS/cBYOBcP9cO+PAeiETxkix5Go3NXrGvK0rY3/gF3AAlIwz\n5JT7r5hbvNA3R7KxY2QuAZzXLjbznN1lSimSo+Sq7jYMwTI0TZvg53MC50gQ\nK8D4QVj3S9sVgNKeVA+s8Tg/KFuZqshlsmAwNRolREZcdZRUHDmieEU2EcdD\nGFDNIj0YeX3iTjUXGPe7V5vs6z3mg7BF4B5fy3CXTSNG3KGwHyJUY0BBFRaV\ndVY4MIVwljZxiKHkjesMwRdx27EaRxsRt1K+uhy90MdhX7Tc9jApX25V/XTL\ncYPWXmwMBKI5hrA4mn+ZtZ3D9m3FfDzekBgrvSQIUCnRixn8nH5GZm+5/LvR\nSlMmbZYesY5v7JZnQHUbbeW5IXR94eW7FrNIGTzYzSqgsZkx2N3oQZRkQiIc\nQ7KKuubexSxvOSfGtuE8hp7xeDKa/Yv2tK60SRh9wEF28dgLqhUGAeBMeytV\nUfSw7FeN9wBi9eeVPPYK24UUyfRB9agMQUzBXImaJniyRJSdAbVVfyDuABdP\n53Z3\r\n=Pfmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6gwY/KNnFhPQEPLs9tnASzAhxJQ/2Da5Byk/tyvU3FgIhAKUgk1hoVJaHPBiyND4lObT5f1m2ADPbixJDaZ9eP8vN"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.41_1568641792532_0.35383243099182815"},"_hasShrinkwrap":false},"2.0.0-rc.42":{"name":"gatsby-theme-docz","version":"2.0.0-rc.42","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.42","docz-core":"2.0.0-rc.42","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"97c3a7f68d832b34256d00562edc1946bf088fd2","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.42","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-tBpq6ppco7ob8WTqOOQ8gSdv6xvTtmpq94X7U8OHd7JLJqje6e/BhdAJXL6XulTcUg7aTr7UW/kE4mQOVvzE9g==","shasum":"20b82cd36eea876d93a0cdcd3ab9d55dde8b1e9e","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.42.tgz","fileCount":62,"unpackedSize":1270530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiqx3CRA9TVsSAnZWagAAqFMP/2sKOFFgXz6M5yhAXuqz\n17Tdl9nd15PhrXnzwS5250sgUkvMyVuOCiXcS5BsKh45PCmrImoF3BQVRTUd\ngExCL6PyN1wluQ2mOmjccd4R1idpBQSA7vODzMqXuwTrIYtp12e1JpZi3P9z\nwhLEDGtbw12GpluWvrpca9SqFF2MuCBAU9Q6JGGQ6ooDPWCwupCtKpsb373D\nLpWvvUxyW23zaCAp1k7IHBIfv0IJ0i+0QackbmOUkDOQsKV5vIBvUdGEmqyC\nvxWdLtzoeOVZRma1Qwps/SfGDVNIijSxfsBGWyp1F8WjBLOeeyTcIXyu2Wz5\nAJDt7rJsaAGn/gNCI8C89z5sus+nKwclP17h0DnJiKf5nENha2avd4TY/wtn\nP7m7zBuiiBPgcODVgwVkMX3b409GbZFWG2WIp68lGoO1/mE7huWlTMtFo0ZP\nIrZXREtbVCOFhHDdSKiLu+eoevIDu/wzLGlmieTvzAj1lbaOFm/FEMafhkhr\n5ivcnqMWiKRL7L0BEghPSMo1gEk+BBCDrbB9HzLRU/7SoanFKnSAmuyW8vWy\n1kW5bfp2HonBsTSNYr/t9PK/Dr7kZ7ORq9PlW+AZATr1Kj03dMgaE94Orft5\nLxlwj1TlCR3Enl7F27rXUo/Akmk7HNeJShn1HWxMzLnGL9pltdC0FU+OXQ8W\n82+O\r\n=Mbqo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSR2RnuPUMkYrzOmCpt+9EanUEl4XHtiR+9bSZAQxBvgIhALiCUFk19YdqAM2YIRkLPAOvChAoj0SYgBeqBJ4ojiMO"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.42_1569369206410_0.08566558922912848"},"_hasShrinkwrap":false},"2.0.0-rc.43":{"name":"gatsby-theme-docz","version":"2.0.0-rc.43","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.43","docz-core":"2.0.0-rc.43","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"607259be4221ff2d3f7eca40797979066390b12f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.43","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-KaBXSQyJDZjihYdOOD39tjFTKXX/BOxETRMC2hnFpDj3b5sqNhOzZp+qEG4lIjvaDY1UJI27VteuoxjpxkHAqw==","shasum":"3547e2a1cc0a9e8d0cf8fcaa81df31f0500c8ca3","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.43.tgz","fileCount":62,"unpackedSize":1270530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjTb/CRA9TVsSAnZWagAAhoIP/izy4iFcUwHvOTii8Zut\nuftAPWx5IOkdg4GsYS8zOlkvIOEtWnPzyjO6nKnkKT++gQ8fU9TSEMCsMzy+\nuDXGQ9YJ7rr86Vd1wyhK58EEfc95MsD3iV3p44fPLq3x2Dt3WPfy31xoxZSa\n02JXRvhMy/mF4jeBUKcxy0ewQM8kWph1JNKJCdUoMugw+qh59vd09AN8UCSK\nhzPXyKDBFOCFCkoOmkFFr/Hqy/+L6z2u77EzdiE3Cv5EoA3iH/3P9vXqOqLF\ngDsPVT5tQpO0k5NTUUxd9FS3k0NCXkvRyTR8AWfRammg0SeTruudgoikh6zU\nVms0n/xuCIW38CcjKmUD1Lay3yMMPqIRBhmAnVUx36S4zm4+8MCoau5Ul9vi\nN3/DuvIn68Hbtak3ctNTgt7dWRU+0kch5v4WLjklfwo4cM+h7KnRk5Opo6eW\nwJv1ZrWUYDJ+jgS7i+dihfcMR8R/k698/4A0JxT4ztmE/+58AbDmAvSxN97L\ntyfhTvP2TR5mXPXgz5uvJ/IpfsBzcYGv0SDBuUfjlDmC5wYPCVInlUwBOxWP\nLTa8H218lc0BQBxdZTMJTw5xhKSPdFmrF8hHtOb/F77yVTGS8qzdAR5eJbNV\nNjYyqiDCVd2vqvmssQaCqWe7t9cFqx+I9H7rXtRt/bSrAOSWQs6REIfHb1Uv\nlQwB\r\n=pvsH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcHkL2IkMD8cuH0HNS+Sx0fD058WY/v90yIFk7i/IbSAiB1L1URIAAHcFD/LeJC02IL/lOG4g1ehUPkhcHoOKhZ8Q=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.43_1569535742464_0.06996721133699801"},"_hasShrinkwrap":false},"2.0.0-rc.44":{"name":"gatsby-theme-docz","version":"2.0.0-rc.44","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.44","docz-core":"2.0.0-rc.44","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"^2.0.0-rc.1","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"486ca761eb5f4f765c66b241e93f4df40863e8e4","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.44","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-RgObhW9NB7AGdQWy165yVVd/oThbAaZx8CWfblhJCd/LjMiqqAk1Y06s4w8JKaCbiYCfohTR5GeXfUib0Z0s1A==","shasum":"c67af17155f15d94df2d17f09dac6a1fc8dcb35b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.44.tgz","fileCount":62,"unpackedSize":1270530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjUwGCRA9TVsSAnZWagAAzJMP/2fJx3grpPi/vLYDKi3q\nUuXd6EFXq5AlF9/2XDY/D2b8+iRVCxo9davioSMuBw11FB7VNBv5e6hhJPcl\nh+yZS+miSvGb4TOFU+KnVpP9LVOJVy+sSD4SPpis5a7/NTaU5QJEiTH79WDa\nUB+eDBdNEPUqFIUj/S8wtAjm3TuO5XbKWl74HbfBYz1m5BI7FNB3Sw9mU+J0\n2Y4u+87VkfJZ4otbi8iyzk4CcHPgzs3gFYh9mbxIZC09ysBZBhTJu2nqtgj1\nyIoAOCNiijEFvuiA9BGNHbkEIXnceoII0rWoyL9RfimLANdD57OhloVzqNgn\nXNX8cHNJBheIgQlJvBhNk3yRBcCwhCQhMDu0bpbXFlE327SQmxYIg2/q447P\n7PiHjDXjB2mWK+d0XFAez37E+U+Ip5EXNCIlbuwgD70d8MtTzuhQZoybkOGu\nHWn1ezhZB3O6uoQ/kLxIdF2RozzHVdN8+VkHaz0cPTfbDStvyyVoWtLJuR7m\nrd7sA5KHM008CWb5m6WIdqRu0oy9CVZ645kAp62/ZaBTqqpoKZQhgl6MXfZ6\nrfJVW103VyaoMOnT6Z2uGG/DRq3zUFARPNRXjZtWiWk+IrUoRChQq6FqAy00\nC6BcxpKAfG7fRkWDwfK/oxbYgy1AEGrrCW4dj7nneGwFIG4sqwKHzkFJZQic\nGC+a\r\n=94TN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjUQLBWY2TFFD6fGP16jQsoZ3/goP194L0Q8F+QM5h4AiEA1PM3VNdCyTkKhSxu3oYAIQYAjyJ2T98f6QAS8SPiBnU="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.44_1569541125747_0.9849133053999133"},"_hasShrinkwrap":false},"2.0.0-rc.45":{"name":"gatsby-theme-docz","version":"2.0.0-rc.45","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.45","docz-core":"2.0.0-rc.45","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.45","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"5cd8e67e5723fc694f2b3cdad939ac2172ceb016","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.45","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-hMLeuXvuQ/rPFIWGZ7VzbwxnCgt+X7C4Ut0rQyZShWlDSLozBY49mpbsbjRzIChUXJ7R1L7liUKHPzEWb9I2Bg==","shasum":"5a91f842f44402c8c4246f27e494b2cc7b5ba03d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.45.tgz","fileCount":61,"unpackedSize":65833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjn32CRA9TVsSAnZWagAAP/IP/0QhTgLBqh31vFEGuP9C\nvyzxdDe74/BTY6OvLsRmEAQi0Xs1cwjFMmwP+KeAl2ZzFA6wjZZUEz0oYV1z\nLWmBqvnTVYXbhgRhwXR1H66MdCwovNPIasm6U4rfPykb8KXivi8zz4iCs0Su\nI4bI2EIlOyOWkLs/sfv8TEOyZqQ4JawswqBcF8w8UU+YIRP4du/+6dYvI3FZ\nQSNmZZ3KpYga+lLuNfhBhcxAOPHDkd+q5lJqffZRIwyvdqBBBJCJbhDEiOPj\n8t9ADp+tcIg7Qgr+YiBs9m1DjnHzuGJwje/6sW61cOcuPll9r/9dVPFhgUoV\ncMAcf4Hej0yHJ1SBFJ5CSiGq4sq5Vo8chOoQagSeaOlCK6LznvYO8K845PIP\nv6sJX2NE0n9311ITiwMS5UwknnSxeNlfC3tT/sYUkNPNqWS15V9dhPKOIxWw\n2nizCP1uSWiP3cG8rsQcMCdCcwjHWFG9SE534RcxO2gqhAcfz+T415MbMkwj\nclyZUVF1AHNEsxvpmtqlsYzwueYRhnGez+qnrnYyiLzlY0w5C/DT5Fk2p677\nqgNfkoNMKgaUxHuVxGWNYWJ/mtHzOfNvidYGQVVZv/N4FlLxPUmdvpZy2bOK\nKOfx+OoZDlmaEzNAU7r/9Gimd2jLL4WHUJ4ewERsO6ExneFoyXCihV7W47BU\nDsPa\r\n=L01i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyUMVu8E07ErefujUDZEXemeozB6xpSuaUgjw8DJn5QAiAeLyLXqKmwDVFbPwCayWUhFwZk836ek9UWGncr6izcSQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.45_1569619445715_0.03927086486927189"},"_hasShrinkwrap":false},"2.0.0-rc.46":{"name":"gatsby-theme-docz","version":"2.0.0-rc.46","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.46","docz-core":"2.0.0-rc.46","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.46","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"af59e3424734e6a439f7148887fd1e44b0f5ae2d","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.46","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-D87BeghEw/09PBugwXaJ2P3WVeIyPnCzqART76/O6ZPFa4488qxdglwqsjQkTTtn/U7YeoCtUCUiQLTjNxiu1A==","shasum":"4cbd62814e6f412d02c0953b20ab7bbb07c1ebd2","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.46.tgz","fileCount":62,"unpackedSize":1271474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkBtlCRA9TVsSAnZWagAA1uAP/jy8sGWzu1k9qaROsHbh\n8CLqNIG9oUzv7PUhoeepPChEjgokut+BTzwj0NRdDdR+4jT826g7yIAS5lO5\na/Vc7g9FZ6P+cx0EoxHx/eC91v4IYDmISFsnljIJ+Zfjss0embE9JbsHEVty\nVYCysl3I0oY633kzs5KzHdhyWx4PbGm4GFfzmocGMQO09NcfI5Cusa5FmObr\nOcHb5JW81jFeZHdnDZt8Ahu66o1tEITm154Gi5F9m7SZDtnUQk0uohk/cGNd\nbP4HJWwygO7CF69QmVZrdEjFJyuhwtMYriBS09w23xg9b/khY5KDDYzTXcU3\noQXu8jEc8IioRr6+U95oqu+XUtuy2M4pWZr0+rlqOMAXcV9YA5zE6nnaeyGP\nC8mt+OoTlTHX3pvrytpaomS8gshjtREZ/V81xHg9Wcek0AO7nzKwoTBOUNjm\nK+cHO2e6dYXgwo56mjwrMxU1IlQdqYxmVVnygQn3UsY4CwY9zrGZVxSr1CQ2\n9iS7p1VZaJ8V+R85IRg+10GAhgAhcSPq7d5vU/jpZUuQApMYNWNl4UM6sNzx\nUS/97m7PRWUXwvoH1o0YIoUlHfy169pCB7cQaDp7bAHYyFUFD6uC82f37YQU\n1v4u4G8Gmy5u4lSYRz5uomcCA4v5aIvrOCN+F9dNyqmWBSfMYhvifM4KS80b\nBuP9\r\n=TlRh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQpbjlzpEqX1/cMjExACA/c1l+DVJSHbNlp8TOQU11lwIhALsXC2HnKyIKVdbCkVeZXcCpu4oodOqwDSHBVD3mQmzn"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.46_1569725284453_0.3342888257972918"},"_hasShrinkwrap":false},"2.0.0-rc.47":{"name":"gatsby-theme-docz","version":"2.0.0-rc.47","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.47","docz-core":"2.0.0-rc.46","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.46","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"b40d969be417b5d95176efed82d2558ebaa910a3","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.47","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-H6Jr0liQEYb/iQ6PteSjmApAtva4Fo1GbLAhBYNk6p3W/nRk6F2WtQ6ARijOIZU3uGRY6iDR5Z2Ne4cpnCfT8w==","shasum":"e46ddc3c695eaef4eb5c6a177b05e9d9de5c6a55","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.47.tgz","fileCount":62,"unpackedSize":1271561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkK2QCRA9TVsSAnZWagAANzgP/1kOB7IxDjX6zPPYK2MA\nSjJ3B4yhJ3eMEhR/z3s0cRa5BybhA1KqYMN6sC5gueN4prBmn12eKGg+JtIa\nofNRwu+Fz2NXFqHcJrjy0zKsAypKq1wQTD0YkJUM6CwTp9sNonhBPow9etjl\nhHPpBtz+3GVCozAvc9H8b7AduPs9GCoUXxlHqCOX5qhygSKH2f5FeIU6cYhL\nXXlid/1GgNRKCp802auZflFyC5BnQgduLFrS7SwLD9A6luvCWEf7l/oAXhfl\nJGmKTwEzLWrt9YfuULnBsZ3mj6clAyb/tz2sH7WFykAgM4b+xOihbVJ5kzvJ\n6+DHiWyABfxMOiZ45UnPeZFfONhbdIgeQnAnyhYGFl1kOmYPJQVq8LqMgPJL\nm6ff/3PSAFGpA08GUfH64LNodkKKk3D5Le5CzsxbN3Bkkv5WIlsZqH98xtLn\nTB+sXPbS/OEBoQw3ZJA8W2E80QJH4klKzPyFvnD5rcxFQ5Us86NAj5ZsQBFM\nxmi1qdhgvxGBIzfe0TqHzEy/AFcbkqwijOWFmM3k+gQAqlEGtXXhSoO0Y0+w\n9JxDbQiqHR95CxACig65tM9UxpOSwzhL4uRC4ffGCgY6lFEgvq5/QRV9AjaR\nBA7rf023Z5X8M7Z1wb3b5MiVrofoGXjqw8B6Jb9FmqdcpnWy4iLHcEZqXUmu\npnRw\r\n=f3Cm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkAskXsGp0r9I3VcSdFPhxIa7gCbQ22szPbZ0V2O8Z9gIgDJM+5UHdYJZ8V7oTMP93/Zg7f1YwtxYVaZygM5DAhlM="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.47_1569762703731_0.5432971581211736"},"_hasShrinkwrap":false},"2.0.0-rc.48":{"name":"gatsby-theme-docz","version":"2.0.0-rc.48","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.48","docz-core":"2.0.0-rc.48","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.48","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"8003df2b2bf3a792fb667f9d94adcd5b3ea080e0","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.48","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-bQBZZXdro1VlB4f+H8xkrsMXyrqa5bLC2bmq20FNhNzCOaaGy0eFoXyB4R+g+b7gPdK2XAYTWQNMelNqZdY+iw==","shasum":"181b69564ba3032418690754c450b884365ae47d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.48.tgz","fileCount":62,"unpackedSize":1271574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkSCPCRA9TVsSAnZWagAAKVcP/0OUFfiopq+I/QtIFdQq\nxaj9U4XfGZ9W7uS1jVUm88CKCf0TNvYKAmM1y48GI+vHQ6hw1ySuA1hOKOk1\nyGj24ck99E18G2UeRp2mHwxVrKCN5LfsJB5Ov30APwTddxn6s7I5/3JkG5z2\nMElRy4VuQsT5R9auRxfTdpFHg4H+f2IHXlxK4Ano/Dkz/eKIauGcodFCRnEU\nm20+hzvxvtpcMeVR5uruXhbcj+qa+dzDjms55pOK0uyqN6Ogat800Rxlv/ie\n3xwRRJgogEsi+nTdEEaoBLkjK/AC+1diYXhdeMCsoB0ZEXMrCf6+jANqU5uF\nI57qbOS0mpXcTHXeGI1XX4n9W6mmaPoTRDyxzORqQHcfm/HyXzuvSj2LFThj\nJYARSPHlvW8LamqwIy62jgJWnw2RwySGMbabIl/SnYPDHmF9W4LrqvBkS+dY\nL1LhznPILQ7WylJclw97v19kRy8rHHT140JcACJW5KNqj8gLCq6k1Y3JyweH\nyCPJbBK1pN3remPpWcqOcx9Sv8Tmy/9TKW+9ueE/VPmqGnsT9iNDPqF3vw7n\n4LjqJ0uHLDvdN5qao/h2HCi1kHFWvOU520muOMX03gNuq5j1ij9hicXHdhjp\nJILXfetVm4UPjB+SEj7bDj49CiY+AyRz+L43wU61xlXADcjPnfVWW0tY+7v1\nlHIh\r\n=HH4n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGmcnl28dmbHBFFNaPn7pOuRsitLlAgp64Pt3sRJ4uXAiEAgAgndueIqKVJzBylxrE8c/78gMiEcdoWQRt8Aw/V9F8="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.48_1569792142623_0.9039453716822416"},"_hasShrinkwrap":false},"2.0.0-rc.49":{"name":"gatsby-theme-docz","version":"2.0.0-rc.49","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.49","docz-core":"2.0.0-rc.48","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.48","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"bf4b652f3c53eb3d5caff47526e13bfbf14852a1","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.49","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-u5+fkEJLPVE4wllGJjTTj3EL9OVKxPyHjhQBl9T/mf1ldHPkwFkxKHI9TlCJhkOBUC3EIbnCPXAEKwCfdoeRjA==","shasum":"b66513ecfc35578983c2696b5b9e904dc81247c5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.49.tgz","fileCount":62,"unpackedSize":1272558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkhe3CRA9TVsSAnZWagAAct0QAIYHg6bjI+QoNmGylkqo\nky/Xg1BBEUn8qyelGS4gK9ed+lDnfPucD3YZC1K3V9zxvjfpAopTrzuk2e1y\n1/vQOcGBwu1lcNpDU23SBl+BEG/vBxP+xQz54v1ZHIAztF/g2G9FIQxTUWBI\nGcfHjCjxbWRnuoyEy789DcbyaoBhchp6vGRDTqD3NTgwabDkOU1dqupGeJ7D\nZxLlUjq3FP6f+KOcQhW/mvHihI1OwlMX4ijt5Yeromg/KrUA9fIwseUnfzl/\n4Mayqu94ZVmjxx4FGswtUTR4nGnGIuz7uAXqhLKWzgs0GKyhZC3+/nSHH68M\n7CUiBbbz6YL9zScIwguoo8HlEvP8UrNTWaduS6oGDQtc891Ve/60A4+mqUw9\n92uVT7eAGuHjeQZvNW8+QwXJuCRGURXfncr9ao3RRbv3990I1KaMxTaltRIA\nYfe0214HVnOLm96ObaUTP7iIlPlmXrmhq1JVBDJz6Q395Z8la9lPnuA5Hhfx\nZlu5t1JhtehQlnjjpi1Tto0/9vmQKbSK9ySpPPuBN5XAOjWpNSRTDS2K2BAa\nbP8b/fXa2yZIBeo8rdphxLrBOQFnqO8YV/HRRY84avl8U+fc0DnEvu9FQXwF\n9tK2egP7V+/L8H59uBom7WIMXLPp47+ly4NM5Gfto9gV3M6WidQUunloF8Ey\n8M9+\r\n=CpmO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHb7viDtYICt/aQZuXqmQE7qVgEL/6xbZHxYBp5OOnCAiEA+sgAJEMO6OC6oSZCGMQ7xyo7FtiqPkWAf3PUZ47/EHk="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.49_1569855414921_0.18513392180542043"},"_hasShrinkwrap":false},"2.0.0-rc.50":{"name":"gatsby-theme-docz","version":"2.0.0-rc.50","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.50","docz-core":"2.0.0-rc.48","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.48","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"f61894b0f7a8c6616b9722866b5978d6a1bb3d82","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.50","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-bBfNevBigQ9LPdurc4N6y5m1naTzfFftet46GA8y2840g8XLsOYklgTARmKynxRn1/9IfcjaruNDr8b1mR57YQ==","shasum":"53d6bf902b3c80c7822f727e85ced0b5af5c8f59","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.50.tgz","fileCount":62,"unpackedSize":1272689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkmB6CRA9TVsSAnZWagAAN1cP/jqilqFVmgbrBhK+644g\nt+wCx9CFbJfCKA5e9fSioYbAbI01I55daMZx0vRz0pYVwDhhgCmdX51ZqeBN\nRvt4IUw2nmW8Ua4k/qoVg7I/Nzys5Y2EWgMrHbNyHa8IYxUUEfQHtGG4l9S8\nrio1agp10DczYCPCpBXOwk4ecdVcojNNok7VW6m777BmA4IcKCkJIHCGX4lW\n9uQMzV/Vuqth5AmIgIY1zzOlOn39dCDdoAt7hpgrVG9ozLttQ0snuk4+oYVM\noiYKjKYqn8AfSoh0UthAlpo6UEoIFPiVAnirBH5GX5I4hahqEQtMtbwQyNMj\nSU2Ef0gk7YYdx91Q5A+EOOSwp12FOQLeYoXGZBfHRnIs0Y6fGj4Mn+vLmkCJ\nALaf7yUy1+3yaiua55bAHdLG+PDADTQO0nEGXBNJ89p/DYDzTlihjGX+HmnX\nBxnVGgXEJqLx/N6lsuZZ9yjC4YtpCXaTo8iNinpB0qaMW3d6MH9iOkMfRblN\niGDBtKjZ4ZHuhyqBEdqaTYl9tGDixu+myPql0gMW8duYSA6QSejAZsKpJTBp\nQENNU2I+PqVcm0Wpd0HE9JHR5p8zlnsgmw2bMmIqoXcGjjoWvRKuFh4cUnOK\nJra+OkS3cQPz63yvJXxQ7cGCU2ecdLKJvZ1m520G0viL1Aw2Ed2rNRDsT68w\nJwNh\r\n=1Vrr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZE/NJWldDFfnFrwpLiAJREL0tayPbmmUrOgqu+XQdBAiBCNvc0UICl2DsvHO0BoUkkqeETGisUnYkL+Ha6xBoDiA=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.50_1569874041448_0.3728275810745021"},"_hasShrinkwrap":false},"2.0.0-rc.51":{"name":"gatsby-theme-docz","version":"2.0.0-rc.51","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.51","docz-core":"2.0.0-rc.51","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.48","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"7eb819b02b8f490a1044d25544a39d63c844bf16","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.51","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-H9lGGqQMbF/L7Ns0pdQO2/dyzq1owyUqdXx05ryNegrquXWt59HOy/NEN6heGGTonGwLNV0Gir5IzFUQd0IFNg==","shasum":"3f7d71adfd1dd46e6de9ae57f94cb1aa79c2b84a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.51.tgz","fileCount":62,"unpackedSize":1272689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkmk3CRA9TVsSAnZWagAAmmcP/A0cC60B7g/SdtbevN3H\n1HvZf0+RLiNU4lQEozeXNVb2axGLoJeooozmYyCLLVo2ML0iVt795qy4LNZT\nkT9h/FFbpolX/vUHAQuFxmuk0X42qlNDEl01f8C/yajBiElhYJIXTTW5lGkH\nOIy/0ZfoFygle8p/O4ZsJByeplTKtnPJNo9hmmfR22VAKKaMJQrnY3BBTHLR\nc8e0V/1az71wrhgVeyKaNV4hz3C3VcuDDGIapcxFYnEd7GuzYePOfP54LhPn\nABqed2IE7GP2rQ8WZNLNbYJl1A1XA7sUJwFNZCLa021VAFVwSdlSAq9cmy1m\nh3Y8MsMCwtNTwyCkwVxKUUaw34cTfhpCFS2UrX0EWNB6DEOcJt4uoX3AIehT\nHLUusP42uEQyLCX22e54p5IJCK5mfi5Zjzg8ZVnRl/u3Z3DmFcud4r54QkhC\nfT7KI3zBQ5Gz9lkGVyj6TT7dMVJjvkj++ajJ8X2GrsT3qcmkdwJxoVzICfwn\nFSSDWcXfkNeB4p9zgV1NVbo+rt0nFXN2eq1rmA/rmAVHA8O/8vUpBfCw3ecN\nGeRz+RquhR0RJpM4OcNrOEyRZcpsWvxxwA9KP3fzQGCOy2JL7+L8zdnO6pNA\njrHx0Xt6rYI3lVHWvDMVZ/nKXb/98ExYkPn70m5EzMy1LGYe4QsCaL0kviUK\n/qXK\r\n=USpT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2j2ZAoTmAUbJvpO4+QW40EURp/VscUgUbsmkEEywQbgIgWuD+Q8//7/tLlqvOnpfW2RCzgxDMBLt1Bz8F0KXbdFY="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.51_1569876278365_0.5009021849506989"},"_hasShrinkwrap":false},"2.0.0-rc.52":{"name":"gatsby-theme-docz","version":"2.0.0-rc.52","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.52","docz-core":"2.0.0-rc.51","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.48","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"a5430330b186be3f354d727889e6f8fe58ed4978","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.52","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-PxskzmNfkZRszfmZuI/Ax+VYorUAw+V7vQpca/XlUrNqmpKHU3wngCyf8iH15kd9RCtHs2dpuBcVvrIHCCxEzA==","shasum":"208d75327924f52226c22ef923121733e5862a37","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.52.tgz","fileCount":62,"unpackedSize":1272704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdksfMCRA9TVsSAnZWagAAu5sP+wdA7/ZbQk7UFHC8nFYY\nihLqwOV3LqFx8XC/TApk2mg9SfGIgAEV6jmfkRluhAcNrolyCAUL6CQvVd4V\n6pm2ldOgQnsxJfffxA9vG+oqkiskSBppXFzEsqaa1Z2p91WvmO9/C1Ke74gK\n+I7xM54PC6QJ6cR7V45UN6JdNO+qzH5uetJewYt+8h0gK4g1YlqdkQmeqFA5\nkXY8anfPkCF2WWRz1uNunWgG8FXhf5YmQJrSMR6MuW34CdHS/XPI5ov99Drp\nxm3gS9dzSk0XH+IOcV9Z7Oglijk/kmI7KEt0031+vqPoIWS7R6VKDoY4d/no\nnogs3TuQMkkEoiF/c6HdthXJHKh1O4JT7InxtrThOC9dGXE7ffHBXuinyied\n2m4S9dHapBzDBKBJPq7xbFqYuBXTfqBADbTVISnLal9FevJQiD/2o2jcz6AI\nPqqpAkHF/LHupZTKGQKspR6PkaWh49GYkIlCbFnb9QVuZ0AjLlYZekj8pSZB\nyU+Oem4GVMqK763R/p7X3nUtr4+i+RhqZrUaFYFuRGpQjCA1wz18RDU9aubO\ny+VQ5ZhRBu/SVTSJPurnH5JG0JXp/eIpILsJP7YfL+SVY1ReSuEZYYRjnFzU\nPr5hIZN6clU3Ju9VSzlxnUoHfTBsMNPIfnvsJ0BFKHufLPvtizQZNaiUA2Ld\nt97d\r\n=AF5t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6DmvGX7C+vI2yR5z47H0pRChcBoJwAd4wS11QEGcaTAiEApeydOqbcTSrR42jp5BMKmK/X0yXF1hv0u2370oLggSY="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.52_1569900491716_0.3880274983571328"},"_hasShrinkwrap":false},"2.0.0-rc.53":{"name":"gatsby-theme-docz","version":"2.0.0-rc.53","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.0.0-rc.1","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.53","docz-core":"2.0.0-rc.53","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.48","rehype-slug":"^2.0.3","remark-docz":"^2.0.0-rc.1","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"869fc129232e24c272788031d8410cd4b598f543","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.53","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-VGvcPLTh8FSIdGN6a7FpM9m2gttAue8IO43ZhEXZ5uX2QLlwNjxftwe0Ssv0O8kZRsh4wak7iT+rH6zU9CkjPw==","shasum":"8a62e8ebfb25c1b574fd56cc96f979b9aeec7629","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.53.tgz","fileCount":62,"unpackedSize":1272726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmNpfCRA9TVsSAnZWagAAdoIP/jY3AgO8oKnU++JcQc7S\nBCLQ2lU1cg4Y9POPiVSYpWLWFdl3c5l/BV0LBc/t5MYSt0LtDcGN4+kWYSSs\nfZu8V9c6+7kOt+/KfHKvUamMf61/PZ6RR/jFTlstXW1C95bN0rAuH1WrkIZG\nVn1MD+afe0CgZgFPA2ntfqGh8yKPRNa7d5CDWyennf+8QjdF3piP8kKCUXXE\n4sRQkaYT4TOArBYOmaYfaQUbNWKW13RyOPMUxUTOAFkK5gmVUdZAMlu454fW\n/wQzGnOjRJK2F1opzup8S0MpwHsCF/y3mqxhyPCMS8tc+izePdeQ+t7gb4jt\nSSJnjQ1yMk+qY+GkiB+42Dh3mSSjzv1EtWRJ+KHWef60eKem6WRm0hLPt/E/\n7QwtvSNr3Vd7AQauvsnwtuWbG36j8OA8vmdTgmr/8Vlm0IOx3EuNVetIG6el\nrCUbkcgkZqkczwFwZXV9+3WvYPbuVI9BV49p/fr5i/qx8i1TKTpiNNAruZYr\nWzOlXKol2ULhZ8EizzRIB3hH2DJDxRJyCHUb5+APPjzb+r5c9HlDqmvornu/\nSWvAkdgDe55kIrtdk44XqSaHYO4PXp3ptnPWXXePpyIw4WJt875h/4ukI+8b\nHVIUYBkIV9kO98Z42+x+QbxmPRgQ4urJThzPu0MIZTa9a89yaGx3xe/8iq9H\naQRS\r\n=pnem\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4sD51dLxwOvT2mqUpWxah4qyZK0rP7fNBlff572NFdgIhANO5G78c2wODfk6oXTkYMCoEGM45/niYmtSH6kf45/Wa"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.53_1570298462418_0.32887398682460267"},"_hasShrinkwrap":false},"2.0.0-rc.54":{"name":"gatsby-theme-docz","version":"2.0.0-rc.54","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.54","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.54","docz-core":"2.0.0-rc.54","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"2f12854a9e10677684ccef40cb14381a7d23dc7e","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.54","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-s/lxBA8xxfngp2yC3nuEjGcSVHWpBtShRCESV3TmPZI1p/kO5iU7jowTJOLJ4e3J3TB4lh1Rt2NdZFb7DXbTDA==","shasum":"c8e98d6a54b974141aba08e231390673f839002d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.54.tgz","fileCount":62,"unpackedSize":1272757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnMxnCRA9TVsSAnZWagAA55cP/i39O9N74vPa/ki1V3ak\nodFzfZzF7GG6I/VWCVcT4DDlo4vJNThAbrCYrBFkCPq1l8Y/xFprN5Qvg/OE\n1jPSC5ICbVgFC2AlZKkCR2p3+nBxPSkFt/kG6SCSURSHpggWnrS6lWhiTK4A\ntnwrj4ka7CZ7orKsTnMvOp9oYAUXJisDqODuGJGxyuwTe6dNMQOaRO5/Zfe9\nodyaU6v/qaQuBlGagVCXoNdPccJhl34Rvbg17x5+WAWb5yr3ZMR7+xPFHtBw\nMjcU0f4uLe5qltWFaR8Qps4tQmWdLLEgZATlJh1BhizN18EqMK/18a4FKZKf\n95vqV19uCXULrNXMRwTEWp8a6lUIDQEsadjiXlveB3osDvGT0jwS/lCxiUxd\ncRHDJsXaBX3a1s1ZfoVvJPMffu1pPafXLySP34crbuk2EmwStUWFzoLZY2z4\nCraashNzVosT+mrQZxJAb/RE0v6HO1rB0QRlxTSQ0UhKpgT4se0ApUri9jTP\n4b8kgBNTPZ2xBr5xC7VRw1YWy1H6yFxzZOKM8yLCZ/Ywxxh0nXuKyoLL3n0U\n2eu1/9aBjGwe2CFkT3h8h9bSTKXKaUtuKjp9ZaXzfkIWO7/ZZgSe8uMcL1T/\ndN6gzJsH2v1WhCBu4RMnVwzkfvR48PFEPA2m2Aei5sRTRguSzN90/31W/Lqt\nukrZ\r\n=M37S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPkzjbBgDFbthoJdcwXMWDLeRMRGpzT7Rsw0E6SvbbqAiAoeg3L6uuPu05a/1R93aP+0yurdMWjtksaviruPPYVKw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.54_1570557031139_0.916025625078476"},"_hasShrinkwrap":false},"2.0.0-rc.55":{"name":"gatsby-theme-docz","version":"2.0.0-rc.55","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.54","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.55","docz-core":"2.0.0-rc.55","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"8e197a2a921b351b5ded1608833dd5d185c9118c","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.55","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-WLGT5i9GhtVVHCvfttPsILNxKh4vu06vGXzE1LevA7VgBLXSvTN0bmPmBf4dJz9+OlSjkUy9qck/JKEhAj45DA==","shasum":"428220ae7205a198862c14f2ed2badfe8a0af76c","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.55.tgz","fileCount":62,"unpackedSize":1272757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnhTmCRA9TVsSAnZWagAAK+cQAI8j3Ml7HT91vlZ1RbS4\nMP9trNADTo51N2Vefs9wYQSya+DUnlNFQYXRyRyzJM/6Df4wA4MdWb5AA9wQ\nk6QU62dZLfuUPb2MmwwcD6GVl5aIM4gy4giVmwygwIGP6WlIpk2cu1j2E472\ng26G54z7mYYWB9i0VRMrCc6XRJ9h3t1hdZaKvQC3LIPoyqLbHADqcXiBiGES\nOPLLWJLeHBGU6OONdz/viZff1DTlJuF/OiCb8zltZMQ8w2e9Fif7ERBMV24C\nNywOiWVQb/PGqVDTKG6HpcwjHDe3nr09FeAMg0Y7MkgRTx5qBOf+Q7ZuUwqK\n1BrnnZ/cIYcwoe7X4OyVQTOfXaxJgbJiMEAwxXPH7zdipJ3nTzF7DHcKeHhT\ngP8Dukj/tmR23o9wOXZ2CKArNVe2wcpRxmu3hgOdG1nIEoxXQQkan5nl+rMJ\n2AvhuAmBz8iQMRmNlF/V9VNmQVwiEa1E5Tyem/J3TQ7YFddBAawzxSkNnZRP\n6N3hgO0zDU/sMaRTNhPYFAIx0xtWf2N0GIphvhS0Jdgmshyq6GhGaVxSXDz7\nhyGbH47XTCVyXLS+9Ya4pJfARm5hrz/SjHrqdqQ2ddn793r9q0WCj3H76UEl\na26o2nBOQMmmJBKHcBrl9y5bcQ57qZrkJwbqCidbRC98b2vw37z7+W0z6XkL\nFf70\r\n=X2RF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuA0JfQzK1txjdNDW6JeISQKH6HAZQ/TtkTRdVFQlM0AiEA5K+m6XXPl6/rKezml6bgRhto0bQ8pabY3XVkFxX3Fwg="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.55_1570641125263_0.12721742396788938"},"_hasShrinkwrap":false},"2.0.0-rc.56":{"name":"gatsby-theme-docz","version":"2.0.0-rc.56","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.56","docz-core":"2.0.0-rc.56","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"4faf77a35f03e12a42d3b1f9491bfbf43881da05","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.56","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-Rysye+jVCYuVDqVBVqW9+0//kfc/TBdi00YDgbjedjixFBILPwtLHTMKH3jZvnhoYUtXKAV8u+eDYx5m98FNcw==","shasum":"4db9f0852b1e7a188446afbde89bc204681c5836","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.56.tgz","fileCount":62,"unpackedSize":1272757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpLvXCRA9TVsSAnZWagAAsm8P/jrsA2wjhxsF6IIvGJQ+\njOaD9PVPQPN7SkfUYvqg+d+EOT2+gPH7jnQqL/Cwq+gJGRkHIzQVKyFjmasE\nvx8QRwND0PJ6oBuug7Jb8IXvMEy/B22VH5L8UQz0y6cWQuAocfaQ9++r8LGi\nRnVviwh7VrU9LQndAb3OkHT4CndlYYLzBDj/XOWv06pEVy1RoEVlJ7XRTudS\npMtdaPuJEn56kwlkLbD+SZrU5qtuiZUI2Icc35pa4NYcl9katgOhhRrEeplU\nTpCaadrapjJeXxzlVtm1AECl64RtZ5CGnAiZo2eic2f8gR7xYDNMWx5rO5XJ\nvGD0zyIfnASi2AJp1WKYeb2HUlPEg2Uh9xl/xjnR0VdApcOPeXCYQ1HWwjiE\nqcEGgWAYgbo6+x2o1G817eLugSV1Ul5XlhcLPT02QhWjM8ZD3ABodgUihk5l\nFuofZoRa3xidgs4svCk4TuEgQBK4TuIkQkMXNHmaZbYRwOOxtwyJB/ouSmhw\nfyBe4bmdLfztz9cA8N6RjQk9asHXhNXrBidUuoyJBrSDKQtrNpIctLa/5xef\noNdRF2mNd0fyJ+/D5H77QfYrah4SJGD5GGMPUN7HGRPo3LfiLxGTcozHHMD8\nuCC3j/N1cFF4zHsOhhf0EcWDkI7kNqV1vmFnr0o3srYwJ1t2BCNQNR2C+MGy\nuTYM\r\n=388b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfjiVtcZrg8h8H4umkG0fJ4JYTE8DXuId6/A8bhOJMzAiBTq8IVMFXWuBIS19I+rQ/YntQK3tpjShwNtiHDNsOLJQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.56_1571077078966_0.06150256041635371"},"_hasShrinkwrap":false},"2.0.0-rc.57":{"name":"gatsby-theme-docz","version":"2.0.0-rc.57","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.57","docz-core":"2.0.0-rc.57","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^5.0.1","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"277da0acee9733058ab47d409e1fc57961cffb0d","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.57","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-dtFYcj1pWgeRymJPhrMDvMowZOgt4i0b5NLv4q11X5YgULUmbWy9SKrwoJz8xpMKfLcgAn1lDwGm3NJo4D2Vmw==","shasum":"a09f7a751b00d9a39262aba08afdfd4fc4690dd9","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.57.tgz","fileCount":62,"unpackedSize":1272757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpRRpCRA9TVsSAnZWagAA3DsP/i3fzPIXL5lKQoP7SNCV\nVMaC0AOn2bt+yCFKTDQO0Az5BKV25pkk1Rihmx00XzEJem63ChZ7yDE4zS77\n2X8F/yUSjtg/NiAu0pdt8ESGTjC+pX2WPKrTwCFdQRjCYi/xesfVpY4xuzxd\nqPJ+eEEdch7mpnt1vTvtlyxS/AqUm8wO08G5hLE1yyLh/U5NfDZAsDXqslGm\n1vQdwqZygXRN3ec8Kp9Dxuo2fB/7aBh/WDiqWETb+IiInaUVetyLXgWJ1G4b\nQds7x+dCeY+XRNflyPkQbIYHoQ1XL2T4LwEmh6pYg2i5eFJ25BBSy4en5hg0\nS1q8g5kkQHgqMt5JgMIHH0Q1aybfu2YgQXrEIqTnTK3GsWcXyCTX95PlGVfp\nTFAyz7Rrx0H1L+ae07i7T7biT4K74xzpI2itoZZY50+NE6xtaQ9Rjt1p/5rL\nDNdxZxPEmdkbsEaHVw/G/alemJNspxE8L0m1+Z/NU748NXv/9MHMQv6MqJiA\nhBVhPep5nKfNZ2MnJYwYdEESAkhZuRC4Sczegehh9S5CnpwcWk0vmD0OpZcy\nNOZs0G2SmPijm4ndx5VIJe61RWTqL/RsiWbZxegKYshRFSYltPduYRv+18Bx\nMYEIuCvQJuLKk7irL7NIloIUAVSbkVqkiNgDVlMxfg+iMkePIBII6n1+aWPk\n0kOY\r\n=p7aS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeNu35IFvBYR/7mvZPNbRKb750weNHF9Heteu8PQr0QAIgFZixvaqQQR2WhxmHDaRq3gxcqR7V5Y+atvhYxlee5nY="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.57_1571099752680_0.3326231699503448"},"_hasShrinkwrap":false},"2.0.0-rc.58":{"name":"gatsby-theme-docz","version":"2.0.0-rc.58","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.58","docz-core":"2.0.0-rc.57","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"91ce45e0e3885ed912f09494d41578cb6308c5b8","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.58","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-P1L3sRxoW+4R5w2GpfsQ+X2rqfjgCVX/a/2cFT1yL3b0lK75poC9T87pljlGz1Div7qAe5MCU9ldfrmnyPfDUg==","shasum":"75f2cefca94b4b42e7ebd28718f678aeb3ad88f1","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.58.tgz","fileCount":62,"unpackedSize":1272775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqKvCCRA9TVsSAnZWagAA5GcP/RZbisIQ4CL0VXalNoPF\nVZeBlv+B8Pqz1fooWwJXcHMjiOkKYpD2VdG4EkQVVDFzJyLdNJHHZuyIK0Q1\nKeSRB7o0mdZdDX5wNl2nHUenHqlZUt3GgfOUDhUf5Hnk2VROUooJEy24wes/\n6JpMLCmcOEAzN6jzKI+mKT1k2/OOz/DsIowsiOxX8I4ZyGkZ61R4c75J/3Jg\ndlAv8l/eTgdv7Em/rbLZu4dQ9etJesq0IkIsfgPLnbHM18OE8k1TvR2HuCWa\nrOa8BvNCm8d6yle9bDIsOn12uCoMt58ES8RM5vCBX4K/NNXEcF543sIneDdx\nAwz/bv86dJet1iZdgDQRHVd+GCvsqdA8Yp5S1+K/b3RGGS/qDk3/Xp0ZiIK1\n8MyUN9+vzxwnipZ2TJ6LChyykgYPp6cGEPLn6vwEkP1NcUJKV2oHX3NUlLF/\nHRlWTtMXcemGE/ewQ4xZJ4HmZdd5+tfNrL3BH9e+993csUx+x6yY9utWhULt\nBkVx9SL7GzaUHzokrBmRVfloAK722Ywqr5UfkK3HrSqB22hLQlxlij4fjJHm\n4zxu13t9SmnOCR7o4bwC8IfLZVU8ARe/Rx2cqVoYmAhbe679jI0uPp+ZaUUv\n3e3oAKKALLJ52sp2nlg6AUYngvfCK54tJDoOLJyMFu16BtYuKMzafR8l5bUu\nHFLa\r\n=cZ+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEm++aN3Gv3cknQULmmEI/v4LFANJrjnwGWMGyv5xwhAiAN3mjZvqwkI5IG9AkBFEarVbhKWGlZ5gVrPq8xXRaNVg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.58_1571335105919_0.7347713152058559"},"_hasShrinkwrap":false},"2.0.0-rc.59":{"name":"gatsby-theme-docz","version":"2.0.0-rc.59","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.59","docz-core":"2.0.0-rc.59","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.59","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-+HMZZ25v8IuKylEuoiv0IaviZ3ls4TLVo4r2+ikpqKG+tbk52XXI0IQqvq+kTErANFNYjFSXHY8RMaXvPeLsPQ==","shasum":"7828f90d5dfb2c19f9f19880a4c38c19742ee754","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.59.tgz","fileCount":62,"unpackedSize":1272775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdreQfCRA9TVsSAnZWagAAu7IP/0DXkRaVRwfMvQTyzkPI\n1oT+qeS4kcRwrKAsALj0M4wxqIKMQo5IdWING4AdkWalzY85lf6GCz1qCzdL\n8PpuUBVWsT0bPDRDuqOMKPgtLod7KdLnQCvxpP5bKPHWshSnwmVXCbIfLE3w\nk+0UtCs3aNveY7Pes6HC3qE2KJDjIA2rynrdeIoBWfwdLLT28qq9CsTt3p1B\nhatueBWu3Crf96QbLyYV+2jh/imQm1oAbQ3ByXuRcDvBg+Rspi78jz6We8ii\nvDQceG1u8cqDuFfdpJMyEQ3lI65AkXgoWHH13DmhXb60tm+7a4U2lcH+xbBw\niTh2p+O4V3mJ4Qmc41cEqOgJhb9oGUI3eQZ2IFUsYZD8rA53t3JVgSs/e7Vc\nSBVsCb9X7ypleE7bIGf4Xwa/KD2y8u7IdHrxTuGaZg7/4ILPsRJiZojchzTw\nC7eqIJVCXWmY7IgAcJIVVEKMQ/2gvxXDQGYE6zSGGq93zqD8YksnNPlTbQky\noHMsvsLTSuhp6T+c0F2nGmOklI7PbgviXJtxYmnxFCsMS/qGy/350fUYJ1Om\nlS/jbRHJ1oBqU5yoaHspnaDFhOGnC2iqWiCP8K0UEsNLKvrcbPBbwNNFFAPZ\nl9B05UNYPbgySAL+Bb3gVfGp3WapSCGkKo8E5+Gl0zepFq0Od/+vnOt7bJZK\ntCOq\r\n=kYMj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaE24AAifTDaxC1WRg+qAgEWpNa+p2PRq9rCSzHq9D5AiEA/GHPUaRLAN2GyytRABtJqIMNxOTL5h7Vyd69mmY2KRA="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.59_1571677214390_0.08493561626837032"},"_hasShrinkwrap":false},"2.0.0-rc.60":{"name":"gatsby-theme-docz","version":"2.0.0-rc.60","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.60","docz-core":"2.0.0-rc.60","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"1baf748a0851623f673af69ba090902555b2727c","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.60","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-7SH1OZ5ih1zK8hPz2gET2Qha4jAfVZ1g91eJW+85NvSffkBaM3YlVcuqiSFp/+7vFPrD/fcigwtzynFFsAwFJA==","shasum":"bef5fe4df35c1cc243fdd32b5b0f081e866c0d32","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.60.tgz","fileCount":62,"unpackedSize":1272775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrhaxCRA9TVsSAnZWagAAeFoP/1JpEovuuSaQMpbm0myJ\nAkS2qL8nFEA+z1qADem1lXMxP/cEsj3WbG6rl3mB4YyqmyzcuBI1qGBnAW8Y\nNmeQgG8elAQ01WO+FPUY9YjcmE7wN0hvHmOE/E9o4GapC4m+s5PN2qEnW2gx\nQ1Hph5vHFTLeI227sIvCD2hNil0seBCsd4LJQ3WrqpJlQiGz2PMvbFGxJ3bW\nEDVVCBY2PnsewiCpCsXg6Ao1Y82fhZfpg61W9no+VjBR5VERTntvYxa63owl\nbmYNU8+lFUsaqCpYEh5WZDnjcHTIqIIhjrDjbosc0Vc0KuszypAhmZWtgtcN\noLTd/iQjpnJnGhK9dpWKTamK3PgUsFpzdHUlJhzFVu8zmh50/GtGpKdTPkLm\n5C51Pu2aUtN8jW/cFrVRk2GoocOjn+ORo6doSiVgIBpO8wNK9K4scHtlBu+5\nHPrJ1T1fseHLF7WS7ZsKEdcP8VlvMfmeEbPF2Q7f7VGaOj7jcfvJ6j8bb6oG\nBzGwxKArkF/Hg+eQI0WaxWzKlUbBgPCpl3dQkNCvG6Zw28zwURMmPgnY1s3E\nADJXddWzo0dKJjjQvNT9FFZDOWVJm1HGFdBeUfoe/16x0qMb602qTUoOWuoN\npqrVp5QeHqrRMPEhlMELZwdFpQxSBd+0gmt3JUSdcyQFiPPL4ri+EWn0mUJ+\nHeb8\r\n=lf7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAv6XAFc8sCwCW8Lto/Gd96j9n3oqyhm0Ge5vcXe/DIFAiEAxkuCxdVlVGrqAiIjCxA1B52S6+3yHNo3HkZj1pTZirw="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.60_1571690160882_0.028004440022032284"},"_hasShrinkwrap":false},"2.0.0-rc.61":{"name":"gatsby-theme-docz","version":"2.0.0-rc.61","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.61","docz-core":"2.0.0-rc.60","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"b3b0d9ff50384cc254151ed869bab5554aa1625e","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.61","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-DPzlpV2fTZoeWC2mi9/D0fwYlg8O4Aoq94p0QTK+qMmNhRCLwpcwptO7ebuvwGAL8w5Md3L0XPGW++W9rr5gMw==","shasum":"ce03b6378389f132b68846e9576ba4d192285a5a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.61.tgz","fileCount":62,"unpackedSize":1272775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrhiVCRA9TVsSAnZWagAApzsP/0ti1MqvA/3Nb/tPjGTF\nUX3EHws4SXpuzWH85rXSTIp/gxrsdNgxHYxcCt1HF7E1bJB81ziVdJmODWJB\nj4zmCYLyev7g3ul0Clw0d7UyNxLGt53mUKT+i2cNRHxjkg1hnzMeMHSD+M+d\n6ulXUX59KK+DPhysIwYwpWajxT4INzc448jJmrymbvR9imNpKhh8QE7PO5bl\nmf+EMtTV1wfA2hGiZF2c3dp48977EQOZ+bwvQ7p4V25pTN4IaFDFqaTRCoY/\nLpxMt1l6ILpZTd1ecrK0bUiT2g41bYlvfry3XYelMa1F6+GqAAdY+WlRwbhG\nTnupZrLwysjCZcxeIpMkpxTi+qM/SgonpdZhAlZLKqbrMRao1B2Btobnl86j\ngXYqz+hnNzZQ5ZmMlGWw4qiZ1sy/GYTTpBAHEVL5uU7G+VPsPdEJami+OE5V\npeZBFJb/EmPl3CoHLfzovkvV0URxcA0en5cW49zqlICBhKnjUErziFgmqsJK\nGzlsgEXH6gycujFaZKkoqUMFFH+2eYw/pYb1VXGi0W0r1crs2Fyb2FUJqDlA\nY3uMGcQcAgwLmb4AvGS7Dn5Kiqo8E82burTMEUZ9hf5ksw/r0jxl6aYeTMMP\nV8vYUHHk0RzVyKraRcmNz0kvodXeqmKAFmqa2VeJU/1ZBFb9md6lAr4DnD0y\nAU//\r\n=z2XV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAL3gd7hBKETXy0rm1DlYAVBojHGxdrl8TGkdnLq2QpAiBWCJKR7dJUh4D+1e85L4DdVuW1WaNGMfiimc1qk7huxQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.61_1571690645011_0.715869188346844"},"_hasShrinkwrap":false},"2.0.0-rc.62":{"name":"gatsby-theme-docz","version":"2.0.0-rc.62","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.62","docz-core":"2.0.0-rc.60","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"1bcbe1ebb52d94a9aadbad86cf255d56b16e0567","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.62","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-M5dktiGRHUsA7dPxBxCj6u0VMgUgJYmY7m9/6qHvxH51hLdlQtmeGYQJMpxKJiQN2l6KlsfrTYRZPx23ZkFowA==","shasum":"7d064d2ae25c7d9d730ee6b99bfeefc9aaabc0a9","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.62.tgz","fileCount":63,"unpackedSize":1272658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdriccCRA9TVsSAnZWagAAnFYP/01YV/4clsV5d07bnVvb\n21vRz0vIPqY523nDsw36qQd02KhHYxW3XIn0HGwFWlyxpiMfri0CNfeYH6up\neC+JXv8Ky5jb51wPUUlhZxiYn3Bsyd/lmUTHbOeqsfUJhnTaCjTuK23a/+io\nhh69XEXs3Z0iTUJTXJu5vlCRpWZ3zQqYIeWQq51ygHwNfoFkekihSIXyJMyk\ncysP1dlIi9abGxUHNJ5Ns+GsrHSyN8W3LapFwwA4NG/xcbFC5xIn1w9DOOrF\nnsmbN8b3iXmwb0Ca505mdFa8pOuHVhsNqGL2y00ZJlyIP5tZLM78LQQ+yeQ6\nmzGKXZrn/h51knL7tw5S2orFf03WToNvWMviS5GZX66e0qXdpooNGHfIsH6F\nD3zXfqolQk6XpW7BNefveyt+mPsjf8S//pCrVTwVi7/1s6aEy38mdhFK0qrj\nAqx9tdcIj8p1xxu7BzBb9XXjw1QnP8EgUbVHIEgR9SGTeiMasglxfToLp6zt\nvhH+mJIO1WSa69mI43n4I/nNDOqdBD5bCK38TDb6GDE/iUwdOA9TBr/lBn9v\nzrl/XPc8jwTh8ZBcTy0OlCvAApa9s4MsHuezsspk8nzfxDdEDAXdmF8yxwml\nziCdq57J++RtwutY2SBLNkTP4S7EpYSsjelGNudu3vaQ9iFtgmU5Afj2PFQd\nkqMt\r\n=gt/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpfyhPLVA8MvujiSLPIcVtVrCGZg9pzRw1usmHHksgvQIhAOmhvILlT2TBQJEbp6oBx9vsEDitqNJ2LMr2ER3UpIzk"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.62_1571694363571_0.3776980305939375"},"_hasShrinkwrap":false},"2.0.0-rc.63":{"name":"gatsby-theme-docz","version":"2.0.0-rc.63","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.56","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.63","docz-core":"2.0.0-rc.63","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.54","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.54","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.0.1","eslint-config-docz-js":"^2.0.0-rc.1"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"06311d03c03114c68e792383264425dafac91e6b","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.63","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-ThP7IUDWi9c6kPPvPwSsDu5fWqAZOqcUxYbc7SpgA6mVXn9PSbXuykSavUoNNoKJKDNcvY5wAOleXbtmYx7lNw==","shasum":"14e6fe156a3e4b1f11e4391ac4fb247654ca48b3","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.63.tgz","fileCount":63,"unpackedSize":1272658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdryFzCRA9TVsSAnZWagAAPysP/jZw/Mq3TX5VqytzX16O\nUEEXst63EWLY69c2FXrEar0ps1ve5Qj5LQcs9/g+quApqMC6VVJyZpR1UKC4\nqjVEufWjOwtY8Xu0tJvKzwAIUZouaB3fUO7SEmo7x7qUCHYMlSLJxEF0S2k/\nBl3E5BynjrhA750wKgOHBsUBnLoLoeBbsUHpWixMDiSC9dme2Il4LTs4iVIS\n8O78CNKmaGK1Wo76coLvF/MO0mb9qPkKIjLXc13jufjiaHIx2tR+eaoco+7w\nUBhrP6Xns+KdU0DIRHFmotBQBKxXvufm4FoY+zc85Lpi25D9wboqqSbREGbc\nnbG/qE6k4/IijHN/OTfWDU1SFCBAvq4MPwnNujlNfGf/DV+OlVfDgIiNRk4n\nx1kqdSyqzZmoRhJ2q7LbfvUfxYihOlizzJp20eLKKsezcPLAlD4zycBWtjYh\nvZ4Arw/R175SaMHbiipcriVQBWAIE0Reb7neZCx7VvTLGXe+jObI7lGVnHXG\nyTZr7KxxRNodAEDvBrMgW3NdKMElskEY99Y9nNVy9N8I7dVn2MOZLtF5VGqR\nNsphVusD5oZeZQF1WOu1NFyHHJ5YW+uYL/5ikMIyBxQiW/9OI4Cj6ePRwd3/\n0rWVHhCdVwRR9oE4NCva7nIhw0bhAgaFoN/CAumSnMsWfP2Tu+416WwtBg//\n/J9E\r\n=rtfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg5E6KfD8XnP6E0sExUx2ZdrI7TeNfEG5umzaodvizBQIgR44V0bdryI9P0cTwSJ9kSirkilTF7T1ioJUY5uZqVgc="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.63_1571758450950_0.5871490909378785"},"_hasShrinkwrap":false},"2.0.0-rc.64":{"name":"gatsby-theme-docz","version":"2.0.0-rc.64","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.64","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.64","docz-core":"2.0.0-rc.64","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.64","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.64","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.64"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"93ed9e7f593a0ef67d44a06d6cf1b1b9c0ccdc37","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.64","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-7Z5CZLAQgiXjqolec53Gt4hdt1AzkBJ2x7Kz+fPRbflJ/LWdTexqTm0CzmPze0PC2BqHhSDVK82AoKnEa3lGuw==","shasum":"9d135d9f7c2e445a906a04e51d83f37f16b4fdf7","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.64.tgz","fileCount":62,"unpackedSize":1272194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdscQqCRA9TVsSAnZWagAAeQMP/1rEAUUI0q/2c06AobbF\nQb1ASZ9zhQx0gYIo52MvGhH/qeFvnjjAW0PQOJt2C688eDgnv9FThfXgrr/f\n34AN8L3Z9GG/vdpMjnZSeYArNVyGmXWQpPn1u6G8bTKhcw/KG1s0doJQ68UJ\nlqB62gHmTrWmO/4gg5a9/yhrSmUhO+CtRi7Ynnvjh3jP9UCBWm5fRhKy4z9+\nYtja4RDBigP4dXc22WozU1boXQIhP4QXJHk5r/ve/M72TM8+db9aU0u7Ke3B\ncXMFW9Sknf4f/5IuprCI5gXD4lFr66omYXSn4pwf2cx88HvwJPs307N/8y+J\nCAjpmAmzCSBEJkBzvrpuGZHrTFwrkDquBaRQQUCVlbCF51dSugu7MdyGpbG6\nfXa3wa/1UCrNyRAOYhtZ79RZEbVsEo2db+Of/Fsa25n8jNDIfLtNW0G7AxIX\nSwQFGDQrvi5EAkt/EGWfq4lnFYiW+WOlAJvwM51sd52eKaQmUUN67lS4pxdM\nvOMmKjg9Ut7njYDdmNxkt3yev+70UlxtR/3RQAnLf/WaQWSVhKGPBLCugeMI\nEmdvNtvthK9fVaCiLejG7cUw9O0QgGVx1mM8ccBujhL38qsZOiQbjQkLC8/t\nuxl8m+RD9VpFqc9f3wgqB32OkvMwKOLSvEMwc1w1HqTpRznhdm5A5OzUyyi8\nhG3G\r\n=CFhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOv0MXAUf3TDGRB2KEToTP7vw8aEBLD2IU4PnKMCJQUAiEAySEh65mDX/8ZQA+ZIGObGhwe1l7qezWrZ+hwr2iB2i4="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.64_1571931178330_0.9012723511525846"},"_hasShrinkwrap":false},"2.0.0-rc.65":{"name":"gatsby-theme-docz","version":"2.0.0-rc.65","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.64","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.65","docz-core":"2.0.0-rc.65","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.64","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.64","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.64"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"98a003667e66787d4300bbdf6d67dc16df4a0c6b","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.65","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-I/SoUaC2QTvlyuXlLi/WNNUg+cPM7fF1uhc2dEgV+mFE6WJh1WaJ31yIgizIePLxIpNy3gNd2XBH1S3mpox1pA==","shasum":"fc94954c016b4f5604bc876eff085ae0137baa54","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.65.tgz","fileCount":62,"unpackedSize":1272015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtwKTCRA9TVsSAnZWagAAsrgP/jaUqKsK0qpDm1xMyRnF\n4622gCTywJeIv2CJvU9TbM19fKeW7nJSPAuh0uUEmIb9oSc5gGG1NiV6XheL\nwg1dSrd6R1xSZU1AacI53NrgrpijQ1Nlxhr5pwa3cHjkwwYDVG5tjkjbeS/H\nMdBR3RCBdgxQtac/dqdq0xzGaFW/LBFw3Ucc3UO/SIfNW6AlkEJNggzUZAMj\ns8rp+jVsjh97GAwpUCYKnAi+NsynQPgFrHzztrYKmBvl6fNuqxcd+ZQ2N/dy\n5OWToMiDndr4CptbgvhYpGDwrks/LAXLgqhGlMHpXbm3YHOQ5A/oOsbzPlde\n72IO+HXHeMQ7FxGBnXoHeejXawPfP8meHK4fb53rN2UTXwfYOoLgDA9XJlpx\n3mz229iP3EZ3s9g6LAgxdWM3MVi4HaL4MXpXSeddmarfbuhcWtbPjAaR0AyM\n/YIJ5F02ghkOVcatyh1qHTiOOszp/esHxtgsM7+3v4lVHanVWCuGdJVdygCx\n2ft1ycaOM1C6Nz9WIJxLTWI0qQotZb99GaIUIxhddadhZLCYPJ79KxJKfGpQ\nYnGxEEh1KvMo1S6q9tICgw8UqvlIfhtX4PY7abE5zAiGkpogiLyp4ClEhad7\n6EBYfkoD2VuklbEgarsf3j5lmQDegKZ4PzVyYgzzwsMpUeRCXK9/HeHo1Q0w\nKpo2\r\n=k6pm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0k2iCiOTzdcdFY2Axv6Imb7eYrCjXG50n2CK0WYtpbAIhALuBgJmqIvMmlL9LBnhIXdRPCdqjP6I0LgV8fClRfHlj"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.65_1572274835041_0.064250667498301"},"_hasShrinkwrap":false},"2.0.0-rc.66":{"name":"gatsby-theme-docz","version":"2.0.0-rc.66","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.64","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.66","docz-core":"2.0.0-rc.66","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.64","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.64","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.64"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"485b8433ca056de41d500e6c17d362f6ee56702f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.66","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-eoQdJSZWoVSh6Vbo17usTpGBS2PAqQnuFZWWGGoiwF3I7iPomyr3fT5iXCkAfjBEDpEI0/k7ak7HpLkx7Ix3Zg==","shasum":"fad0e6842b12446c6f4ea7a8cbb30991dac5c337","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.66.tgz","fileCount":62,"unpackedSize":1272116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduFZiCRA9TVsSAnZWagAArPoP/AmTxIcZpKz6uiQM7B6b\n+Zb6ZTE4/M/Ch2Ra5LQW2qR8XqiN4wMq9MZbYfKYOl6CUfjl5+wgQWXzyiXV\nNZONuq/VAuVzfpFmDyODqI39YTi8XyVQJSjMss4Vb39Kpm0+9VJYOnOpRBLR\nU0aX9x6SrRCD4+8bBhK8D5/5dXayekqnrSEZ90gSk++1sWDqunEAYw83sW7M\nDf5bqcn7YKXsQexwxiOvu1Epxm3QwOlmElYlP4Yq+Qk9d7vb+mRsebKnjJiw\nyZWpBqKYPFvsoFpkX4vurYqbU0hoSzJmHpCzRwcGJ9zkzSst32/FffHMYn1P\nvXkAlZNG60BNd2G/Xz2zD/2eRHtdAxEMsHhVG9DT+Mw5EdMRuWzx5gJs6/Dw\nZaUbcl4BMhcyxKE5bnO4nSjbd1xdMJG+GjF24d5KlaZloiCwvX0C01lMUY2m\nt7BFMa8LCEC3sfXegKFfoUrdXh3wfA5o2hJetg77KLIEEQ4dxiuw2E8iotDP\nvr6+i4WHrC91Y4UizUZt2RM0mroluN+KWfjRO0p4ylCACltrwivYBB5ilV3W\nFmhfqTioa+xLa/G0hjots1/VcYB0EZZSMom/IMid8ScXTNjB0bk2W7d11Coy\n8mIJ0r2VT2G/r97cO7bohAw08JCdTlNtEkpx2f6P4BblnUYj0PHkt59drJmv\nFt9f\r\n=4gCD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXCw1GK4mq624fg/MhfDJfZm7E9n4yB+04io/7hphGxgIhAMvELO/xLJBwwknAZBZdUVMd8EU/bHphzR30nmxKPjhm"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.66_1572361825482_0.5179460436825791"},"_hasShrinkwrap":false},"2.0.0-rc.67":{"name":"gatsby-theme-docz","version":"2.0.0-rc.67","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.64","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.67","docz-core":"2.0.0-rc.67","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.64","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.64","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.64"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"3b9d9d4859d3176a9a56261057a21eb5ea3f1fd0","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.67","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-R6ettItQcYjGf5MFg8qS218vfnDBv9yndjQwtd5rTId26raA4daacXsT5SHxD4XqJPMoDVwrG6Kflp/I/bgbOQ==","shasum":"b96669a89259b69944b04037b360b971c569576b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.67.tgz","fileCount":62,"unpackedSize":1272116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduWA+CRA9TVsSAnZWagAAXxEP/1vGex7u3WCTNa4Hyhxf\n8iYFrbLaytQBkotZqfHaWaJGr2l+Fv5QpLAUCMKT2SXlb8E8MyavGjqmt1vd\nZgCn6rl4E+PTTr1otNiFWFJQJJb8xiqFWO6krHnfxYxNI4BM1S94Qz2OzeiV\nj8avsi8rUMFwld/xngJFgas+Ac0Hml9w890wBqETdlgQ2jZ4x+3THN4W8OvI\n3vf4FttSlXxYJMcBX/BlM1Jd18Wiseu/QsxTfv1kgyaDiLNubfVoImu1pzUx\ngRfsYeZl+NK4LJLnQ9TQFeGxexOYgkMvhFxkAvOPqk8zNC5Vxkc77+OYUR3Z\nhM/IeZXVtGCUthijTMZpUOscJGzlkQNIZWdXcztDGNXYxwtawBpeQ0OFB2z+\nybGADHOiUKihKMkEyoGoTqlj/h4X6d8ATNaRdoRLRVjQr8XwU+Dqd1FxdY2/\nQobeXq8Pp/sN2BkSuijeBp2x8giJTX5YEePpRPHDkk4lwnO92qhCT+yErQI+\n6v6tHCx3WqGFhXS05UUp/JdVeV6tjnZzqQVxTtsJ65pMe9InSkpmqlvORpV+\nbhD8gZMrRP0gGiIOB0ibM3FmPHTgDLkeeUrtChqSLYSisBhiqCjM44Cd51Jy\nIaA+Zr6tlEL8aLDZjD7iyUkDG8KKyA+AGa/4L99XA/sYAgj39X1oy/kWQdIP\n2/6x\r\n=iap5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSsJz7VxQShh1muE2E2DKj3lUcQq2f8+afyY9I/HNFwgIgGcmUznKA+D3RtyN3afY0Gm/DGGNPZo7pXh/BZeeeZYk="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.67_1572429886360_0.3408250322790536"},"_hasShrinkwrap":false},"2.0.0-rc.68":{"name":"gatsby-theme-docz","version":"2.0.0-rc.68","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.64","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.68","docz-core":"2.0.0-rc.68","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.64","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.64","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.64"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"9ade05ae4a54d3c741174e0103b6b8dc3b1f4af4","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.68","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-viFGwzAAlD2d20dEA575xD3gyKgafvCiMvz3vhGGRVk4ovS+3wEhaAra/N0rtucTapZ6YYxzphcrXyHkgM7LJA==","shasum":"1d4433026b7479b65e114cbb950a81790a0c6cc3","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.68.tgz","fileCount":62,"unpackedSize":1272116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvDqzCRA9TVsSAnZWagAAyRoQAJeQ2IOG3j8UvvREJanw\nvYn0sqarJ0wX1ThkXpHLgJgRtEAn72KE9DxM4ksmNPQFEOlQFkdByfzwvZ1p\nlW9+b8OrxN0j9w731W8VRd0VjLLZHsyXbdrnj6Ra/AHCu7HA/A8Znbe2HuNq\nwuXnDloOWwPpm1uqKjMkIniJm9AojTVTzc2k2TvOUI5vXdH/cRN3w8vV122u\nJdhHBkVzDSVV6R/VftEpzOpf9ndK1UCNHCCA5+MOdayR1XZOlZ15J4unVR/A\nthrVOVyEbQSnLzf/8V+QkOO85GAsjWJLql1yDnhMfW+6YNqApKt7z2pPz3/+\nKcGWdDi0PHYrq0VUbNgDDYBMxdRRiMKM5zZ+7qg4rGZe0736/SzhfY636ezY\ncyGBokgfny06AmDHKex4uspf8qyHtc3VyPN7NBEJGk4LyavyxE6OF0AS+BFf\nmbWPbilNZzvG7UVrCDQka87+WEivdDhVhJc5TYRxfei7bqMNlLhFjzX/Vi5a\nNLsMyVPA19YBLqgf+LL/ecR+GznZnuonHuef+PBLrA/WJJHHdkHD1AyEQUUi\n10cCCiat/SIEcXVMNBNC3AB/s6sXCufHTm4yPFSew0fJ6FVMp3adP8809CtB\nLpcrQpQUA5299kseKD9TogpUxLaF/88yyRHaGZafZVe4BHDibKXk7ZBgoZZo\nKNaj\r\n=K9rD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvenLfG4KfAOjFD/DDs9X1g5nMDWZpPefPmGB/j7sq6AiEAwtamndyzK7IL68om3tr0KFJ9nxrWnPHRTznRhCtpJyc="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.68_1572616883330_0.7599234075901433"},"_hasShrinkwrap":false},"2.0.0-rc.69":{"name":"gatsby-theme-docz","version":"2.0.0-rc.69","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.69","docz-core":"2.0.0-rc.69","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet":"^3.1.2","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet":"^5.2.1","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"0f52aeec3bc150270fd6c960a0be49607ad1522f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.69","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-TOaknV7Ff9/zFhhQGhSmOod3t/0ZQwizBtqncmt2GrtXEv+524DL7Y5be5uHXOOqvP47/u8G17QRVVf9+SBDxw==","shasum":"ed4cf30bfe65093c2016379b8fd3972869963d8a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.69.tgz","fileCount":62,"unpackedSize":1272116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvvUUCRA9TVsSAnZWagAAnf8P/03QSkLyYF+7XZl3r82b\n+ByWpVvVCQb5ls8F/dEl4mjQnr5847SiqhQrtZAbDSO9ZVYgpWX/loCQfo9t\nYOxjvl52YHfh6vmE+AzNSmFf6kb00hEO0gLipU58Asp5EOf9JmdvjmsgJvvr\nU38OUqnkOdBQ9SsDiZZvktpsohkKpW9J3UjZKledzYE80jxRH+sPJAMlEzFX\nI4nKoQ9Pxu3OiLUNi7wdphgCDkMzWUdFizliBnYU7w4b+CQOFCKMYbFkzt+v\nHjN7BSHQFiIG5tpfYqowvi2atm3psDOAvpAfqF+YDPeU8E/7batPhvrrtllw\nyuoXiipwuRRgdPm5wWq+4TycDZpqQi6718p0SxLsWvuY2hz+yrYwyiMBKirQ\nAFJ09YjE4wcQF3P+/6VArS1Tv2sJEc4p2yxcdDWEVWG65cqEV/VR9MSE2r/p\n4QtRYzGzBqbbH1ykNa4t0pbAA+a9hR521Jj/Grbi8gruSkF2jbIrh23BxBPC\n2lMYhvRZENn66KHk4z6+IxAjJn9TwJBMWPeilK2iyRclB4HQnpQqvRZLwqwr\n4jFYRWgyVdO1akPA5F674pLOvMCg8mxnWwg8FHuiPEe0nWaknGVRameTR9Is\nfqFtkMWV/pXPFw8If3SOgsSrWdWP4/cNOdR8pR7s8EMtMSYWqKjWOKPsGqwD\niHt9\r\n=JO8Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCoqeSCTadsr2wveh+rYdleRpOGn1YzwkNSXQe0FtjcAiEAiKBwn4jR5eVZc0L4iwcyIUm7IzmZBvzuHjHJAP8Y0O4="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.69_1572795667849_0.2139403889517959"},"_hasShrinkwrap":false},"2.0.0-rc.70":{"name":"gatsby-theme-docz","version":"2.0.0-rc.70","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.70","docz-core":"2.0.0-rc.69","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"755de48d18dfb6858cd6d356329525279f90a46f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.70","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-fM0x6H/W/WaJ0SxpsWV07QyMp+qn44bhcuXg2RdarZthyOiy6N6NTK3QqFQ6wwNfgTZmaBZ9kPZTrilk0H/I1g==","shasum":"adc3f641917a7c0e50f380fe82bcd5c73021ec85","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.70.tgz","fileCount":62,"unpackedSize":1273190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwYfDCRA9TVsSAnZWagAABfwP/3Aj16b88sKfjYa3fugR\nPSRunj6T2w9qTCpR1pRBEXFXz/gtsDrGcHpZrfK1zqHSVKtnxYs9s53C9fEe\nRmp3CRZGFXNkHltzPZZH/9znlGWQEWb0OyEj+5kj3M6JIs4LxJo1PaBJ3UqO\nj6Lv9kpidkscxDam4TLeFflBLg0SyoxnfSBnkBjJvjEmrrz8oomapWBRUJA0\nqfSo+hXvfzal9qIi/mPlL85AvVOwZAmJdCCropESDkPDuCWDDS7i9MMROvPc\npKzkdxhdAAIfco7ocB/+UUNxYTzOU4CVwA+avBjzsRj8v9GQPt7GdIYnirMy\napOUXJXYpnNez8EILl4zK+qJVhFgNUQE7q3RT6KOxEmFzQvSscDPG9bvU8C9\ntliggIccIhwGV+vmwbDjvwSYvxgJLSwK40eG1yPXmfozstLvuTbSwvO1/LBE\n1VonO+8//z7s8sUgOgAME60eCpPsxeveiixxFQIzsqN2cc4AJHJ1z4lW42nc\nr0zNQYawJTeUGC7F0x5YcwOesN7ZXIQkBBl0EfcgFN01mKuP8ut6qSnO5wMM\n3UXHKWgXnqt2WS3qHXjszGOyxwksiyOLoRuMCeyPQUovJxCn1OYqlIHQXC27\n6coMfB+kaq9+CBr14dDLqVkkRzflJ5TZgq4HgOCSDsRzkO0O/wS72FkoTCkq\nl/Ee\r\n=Jfhm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY5p03gVgI2lU5JaLopDPNHRS7LE9IU8iHPGno4iHY8QIgTlxUGSlzzCgT8FXVk0oTTP3A8scnAgfk+GfAxEkbtfA="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.70_1572964290410_0.899864396983947"},"_hasShrinkwrap":false},"2.0.0-rc.71":{"name":"gatsby-theme-docz","version":"2.0.0-rc.71","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.71","docz-core":"2.0.0-rc.69","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"307485ec8418240ccf57785f428da90fc1c9b7b5","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.71","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-DPGH8uOiFWsL6enKTrN+7VfIQd4uryPxLonkaRXF853ydaCvYoUrkZgp4esIRmjtO72oAF8DZ4MSUe9wseDRwA==","shasum":"61e97f3815517b1213c7e76e40df62baff31a931","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.71.tgz","fileCount":62,"unpackedSize":1273873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdws4uCRA9TVsSAnZWagAA4L8P/RKXOzUujjQTn1YFZEIg\n8/GnCQ2jDoC/IF6XKQUttkrjvCVGj9IDqE/bNdqTDr5cWaAX8Y/NYFCYiF5a\n7xdDWJS19M8xgw9Fc5oAuBiu4kZsOEN1ddkTXaI9rK03Z2ZIxsHUQAOrQ2YA\n5wbto+mjGxedRmBbsqCt5EDdjR2vogzXZcmWIP8pYFNtJj0RekTdl6hOjG4O\n5coCB92z5fGk73V7jSk+00KjkGdi3Mt4X03gJ9XuNf6YPItItHuj7OGqs3Go\ni1Nb5w1tWl0/1KViEg1M1nyRmUGLAe0APFZWkx3Oi7/bb+drtrSpbi/at/y0\nchUJkvnpLJ4A7LQ7jR7NC1gvdzt32PMt2wr7Wsq0JI/9HOlrUpJsONS6zlz6\nNhtBdup3fjOWweyXCcUjECL04C7ksu9+1SHoeyAcqeYBajMcWodeuyQjknO9\nrxeLkmtN7T5W2S/5GSR/xwuYNXC1EgXmKNvuPdr8trLlSZrxd6Lu5nREIoSZ\nf7Fk2UI6+OvWJ9YC+Vfdg3QGpTaGUdHThfhnC7MZX3GhuvpnMBTdrVKeoBK9\n2qbNxZlxQdxBns4sM3V8hR9NRgfoe/qCP1O8fXEkfBVgz/TP+EWskZ+Xn2+G\nisQONDlvNcuAFMeV6LyCDh2XdpUGLCcBhQjIuBfa8cf/svX3ooCnPcBdlAft\n4G8E\r\n=ffd5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFTPmEE1xcc7ljBDKNXEA1VelIhABqqEmqFaeVXJ54xwIgcA+LbkZQ01L8vwaXv30+vO6JWcWj+XBZGqAJmJBLWQY="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.71_1573047853563_0.2570686532446622"},"_hasShrinkwrap":false},"2.0.0-rc.72":{"name":"gatsby-theme-docz","version":"2.0.0-rc.72","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.72","docz-core":"2.0.0-rc.72","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"ecb4ef41d8c41f785c26dbe134c6c4bd71dc8adc","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.72","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-iwSP0g6BSu8jdU3F7mglS085eUDZrNthn80Gr2t544/zRma5bLOonbE9CTGE3XwVUU28aWClZ6BSDa9DgWveQw==","shasum":"dd51cc40ef1c1c32c7e8435d6274306e0aed7cc6","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.72.tgz","fileCount":62,"unpackedSize":1273887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxfXgCRA9TVsSAnZWagAA2X0P/0zcCqGTv1gWPWTaCVBK\ncVDYniLPENseXG33mE6a8aE2liQN2j2fZNfjYtVhWOxL/WKTQ65oIU1WwKdx\n07c/TaJ0LPV5Iy+62VvjA4TCDTcx47t2boIU4MqpSuQy5Rb928VxenlnA46Z\nb1Xjv24UpXB4TAOsHBShSjjsAcQhQd2TpZ9H60to04qrgWqo33NUlIWcoaX4\neyyMpWQzgrnyv9BR3uuFAsu7KREC3FcZpOYYaYUnS9sbJQhEUBDt4oQZqsZ+\ny9HE8BU2emONKHrmMFyEf+i0Fd6xvowJyT/pES+mjftoY8PcUKtWLqyLEjjE\nsUnygTRo18ifJGXQPE+OYpJDsL7i6UvqgB9iyloBoX8P2E12Dol5kGKCksYS\nEEjKdwWyM2pXrpQYDyXIEovq6IRTARs+IoYhUwjnd4dY/nIkYZ6KvW++n3Yw\ncoKgYdbJ6exqfcnbo9L+sMVtGtLJKTMcaShd7jadUwlCNbAO6Ag56+9eLHWu\nof3FsLdKyPEmo5JYsur3Lj6b8m6oSrUrN11JqyyyhpBMoZDSFSxchzMxPsZU\nXCR/AiIev3eyyCU9joNNCSr+XEbdQTvVjWRh9l7rlpGuBaC7xQOdE2cAmH2U\nEh2hu54qLLe31cg9w2Y28o8BCpfqI4SRKBrdIft3TW2YYfWy0PibWkVLLYn/\nxRIa\r\n=JpE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsjcrGmiOrLwuQ1HawY3jvSYDznLUGXl31oPxbDsRQrgIgGA0Wzh5g3ARdwwdQYfJTiFYco0dDUHjuYUeIljvmy3s="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.72_1573254624413_0.12515569849285457"},"_hasShrinkwrap":false},"2.0.0-rc.73":{"name":"gatsby-theme-docz","version":"2.0.0-rc.73","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.73","docz-core":"2.0.0-rc.73","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"f8c228f6033ec204684993d84108f6db787a0611","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.73","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-2jCU+lciD43LIgs9uzWLHNIsaQHUKBxjDVmWpE4ucG+EA/fmsNfofiPQ2Af70cr0IdGiu7YqAGf46iovEAXhNg==","shasum":"0ffec23755af0216d45b4b51611f97dcc0aab030","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.73.tgz","fileCount":62,"unpackedSize":1273887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyXIiCRA9TVsSAnZWagAAXdwQAIclx9mkoeMm6d7YXD4p\nSE3pIBmRkmFWqssnKJLoE9LLmf9FKU29ktRQD7fApHKllG7ngIfDdZEpMf8H\n0yy6Ke0O2HtbKw/s3VRVw8ZemybAZ+1olxSHokAAiu+TA4En/gGKIfmqzTnY\nztE0GHscKBPx+U8xx4y+kL3Uc9MwCB4XNsD4Ym+8oa3wlnIbNqrNb4rjhnaq\ngrXL9j0IGeIgKzXjTNm1ESOKdoZ+tQC35C7z2sXIxdhOAkZSkRUk/z/S8KlH\ny4okhAGcyLtxNcooLuIy36yOYNnw5/3fjRA48SvS8K98W+ILXcXFf/iEzNV/\nP0WhwbC9vkQM2l2YAFIE9SNzWbffSAJPB2vxcX50lmn3QSSC+oZnMtjlmDfL\nNMFdUOUdkcqxT8Eu6Yh798tmS49TzpJn2v0Lmt7XdZibjM+rpZQPE2BnZ0Iw\n9SJHFm+gpn3vozs6xQOZ1fgglRUKYhhsVLMFjohkjYtAKvQOd473ZYjgyK+c\nPfxSQ7hWeWgYXb1wqdZkoSO4WIYTVHpNEf5cgSHv7BgXgQ0viOpnSu8dUzQE\nyWFP+KBFoobSRF8ypZOmqZX3zFuCkluybMb7alKMQ6ZsuQC3xVkCPz6tFFSz\nYAbCKZjn93tob1iNRje6Y9mF8lwZDA/k+pUDjxZ8+M8hitJcHGW1lxqurNne\n8np2\r\n=IStd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSBfisdF7CJV0Aw55P6pJJbInYPfb0tL12h36FhgMwiAiA+NutJ3uOnJfrCq3R3Eqjo3uKO/nb9P+3kcPu0kbs5Gw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.73_1573483041703_0.6142369776381962"},"_hasShrinkwrap":false},"2.0.0-rc.74":{"name":"gatsby-theme-docz","version":"2.0.0-rc.74","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.74","docz-core":"2.0.0-rc.74","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"427b38105ebb2dc492577451642583fb93ced21d","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.74","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-SGET6EoDDGNIYN+UaImM5ewAu/qjvx6ZQN+KNK3lamFQwy1SYULuUj2UAprmb3+LptbchHfwFA5g7r5PzrILCQ==","shasum":"d5d87f2e5ca15066be795beda53df5609e260453","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.74.tgz","fileCount":61,"unpackedSize":68958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzP4YCRA9TVsSAnZWagAAtHwP/ikbFk98elyuEkdf/e6h\neIBEsc52YFA5z8KIqGfGK4xWAXJARksghPH7EwRIljg4gEZ/JDmFwYQyBHVK\nKTP3kdxRW1bilNURimsxwAbSXmhkS6sA0qwmdAOReI99Q/AUfWuqMrg5j96d\nozdCDOooAvMtZ42QV8iu8Usf0O0CL+eX8OWsYD50Gr6M+znRg80nbSd/GQhW\nKTvD0UZ/6XjBxwh/rKZ6ckUW9icwI6/LWF6VU3/VKkcYRj4b999yxiJjLjFA\nNrsNte+/PUe7hW7P0zOIgmHM4IV0SR6gyZGIQmyl2zsQxlqC6IT6iNCTcq5L\nHJv3mHJw+HlMWX0PhsWAzdzpeUW2tEJWFHoEz7+OLHGMqfoAKip19ypkQeAP\ngPv/O3EidXUOvAfW88f2CEhjhDs50q5rU2BVctkaQGqFumX3/TCpPNDfN6of\nS4jjC+3LKTT6of+QmNr05PIymbDuW5qXP6AcBRVYFCIjmDG12JrZsAWwflg4\n1Tv89yzfh4NuVJVwbPIXxNtyb0vXRVdKKz7FrSil9H8Gd7KrpsLg8QqUqPSq\nmgXYY+8cISAbyek2kRveeEoz7ZmKCOo/G63SkU+0yKNotmfb8E0liqe3IXET\nU9t/PatLGB1koR1Aimk2pcyXbqcJseZzJo+VCFAkbnCVUOlxutq21F13GXGw\nIM5w\r\n=OmZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8B2io48zsXWVGrJVO1992RuOGvrtt1O8tcFTmTDkrDQIhAJSPzDCeyeXHQk/GwsbkIUpmSol6RaG7+zxCT8GfFMON"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.74_1573715480535_0.9323779825568703"},"_hasShrinkwrap":false},"2.0.0-rc.75":{"name":"gatsby-theme-docz","version":"2.0.0-rc.75","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.75","docz-core":"2.0.0-rc.75","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"3064af431b5155b5823f926c8272b99a47ffa333","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.75","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-f/6g1QqCvoMjtKcMvEuiFVaqA44rE1SONxzgMZOQE6VVvY1yzs8BLdPtUZf3PGtEYK3R39bVsNRmZyEtTUXhRQ==","shasum":"e96163a49147a5c00dbf75a401f9a4f2a97877c2","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.75.tgz","fileCount":61,"unpackedSize":69026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdznaACRA9TVsSAnZWagAA3+gQAJireFamt+zCzO8tAg9k\n98APUxW/vuo/ZNsmyYVAtcOb2ZXmmKTyHLx3vc4jCDU/oPgSqi6mrA76kLHy\nNIfqc0HwGVfS4wPU5WH9FAjxJlPfGnpUAKVaxjLI1TUSFDaeBB/KvXS/X3e0\nmXlKPVSbNbDLxRUqkQiXd/WajQfASJ+g7sz5noV0cvgKV6j78S3ClXgFOp31\n6WCwakmDK2GbaNrnBnBySf0RqftEq9lBFb7aNQjh4ghXk05prF1f6hya2Nod\n4Nv7DSzhXxCIwjaWmejZRtiUV2KKYn7+w11Nsx55D0v5mVZ9VsR1tdyGVQcj\nP2nd1IaccJdpjp6ghe5RvmO8/gV9Do1NIe86f5jAJVGZZxXn2THqj6Re+2yy\nCwGx/gJmEyHnLglG9ApUfmiWDxT6l7827tWbYkPS9gAyV1Bk4sb/m0yID7Xr\nEKjEnmUa6dv9WFXKVyRy/lMxGJKflIGjY+l+eABQo/R0qBOeYk+Vr7QfmOw7\nXlpz3aYxO8P5p/Z4eGDqL2VSHcxzw++3NuPLueoEzcmVJTTwKmS1eBAv/Coz\nnQD8pJVUgAEz6S6EyQJw4TV2wSFY+pt3KiUs+1IKLq49j/ZK2FKf2yLDJOAP\nCuwzf5wnB5arQAwk8pw9UejoqJaHSUv9hv/eKJAkNfFe9vqzw2zHVnd2ZgWX\nxonv\r\n=32lU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcwFjFZv3YfBAPksMuqT6M4nLnUrhDFKOdQXL/cVR4jAiEAkeCikyeFx+EZ0LXCffYQ2hkd/QMXuQkUrUhqEja5Fvw="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.75_1573811840175_0.7738442464749631"},"_hasShrinkwrap":false},"2.0.0-rc.76":{"name":"gatsby-theme-docz","version":"2.0.0-rc.76","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","docz":"2.0.0-rc.76","docz-core":"2.0.0-rc.75","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"bb0a111a9bf4e9078deb5491a5994e77c1bbdc7c","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.76","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-I7y68YZWhV971aWmaPvMjbuKqA4dk0n3pqrt+PElRpD30XnrRs3fieCRY8NVzwLzJ0FRdKMNiQwi9ATxQlluyA==","shasum":"bd917d77f96a4d89acd460a2e120e7ff55b8682b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.76.tgz","fileCount":61,"unpackedSize":69103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2lZOCRA9TVsSAnZWagAAEMsQAJS34pVJ/gdMyt4NnHlP\nvBa7Mjac9g5AWBu127C6XrlmK8FBuAN10DqCaK2OT0cn/YNgzWmCE4OXrjAj\n9sZwh9Dpx/mUbWBBs/4qplXQKbYhRT1kZ7Tk8NrbqPaqbyLprYAPZCqYbxnm\n8U+rKQDDg5S2DAJ+/gkMxeJtAHs3WgDmz03b7+IzT2JtEaZGvMJkT27rEFP5\njfEwNIqH8qi9MxVAYF4dBGfic13BhgyrBViDkTPKSvUGoxlhTxLJiGG9JC6e\n7Yqw0u722pF1KNafJ78RwVO6YEGH/iK16NbK1AYK9P07YDYRVpV5fm1e8ohG\nP5juvH+LWwsmdXFii8oEbHiRPSzaUWUGPr+zTW186UmD+GtdnTKjeVFuWMP1\nRF0Ylb8GAquxhXILTpczO4VN0vEBZCFEoyYi4wpOikBmXcyUGqxSO6ZzAS/R\ns4gsAI24+HXHK48uaaJNSEhPkhozCx8dU/X6o9+Np+r1SDRXit8zPjS2rb5X\nTM7S9RPjX63TTY09XEXzwaJF8i6JgHzFczNvQ0f8cGbgOBawDtSRdHf6sc+f\nUpXtx0HNuhiBv3wsS/FULVHwB/8F00petCSRuCNpSW9tYVxosvNtUCk/lExP\n2//p/qiGs90TdtGU3plOLs1OyQcAsuY9hhUicwMCRUqtkugkoo5qZdVS/rDq\n5lcN\r\n=KCaT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEp3FSnWlsUoVWsvwWzB+zvyNjSfsVckS5FsV1KUgRlsAiEA58zPlcjg+zwT6oFHGxFeXgamt5BGdC0D0X7SYpZYYvo="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.76_1574590030193_0.16888520036591315"},"_hasShrinkwrap":false},"2.0.0-rc.77":{"name":"gatsby-theme-docz","version":"2.0.0-rc.77","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0-rc.69","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0-rc.69","rehype-slug":"^2.0.3","remark-docz":"2.0.0-rc.69","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0-rc.69"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"b9b55169a07469b7122e3936dc99058aaa267bc0","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.0.0-rc.77","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-HMnG8nSoqQuFiVeMFceT01UaQ2J8Zm7/A5mnFXHgmudRddLSaeSzpaHhy9YFVdln84pVloyo1Pyz+FXmVGaV5A==","shasum":"923a4ea747d86fb02a325d6fc8dbaeaa03ffbeb5","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0-rc.77.tgz","fileCount":61,"unpackedSize":68653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2+KdCRA9TVsSAnZWagAA0mwQAIdNnHcngAmiOB6frpDd\nV6VyPBFeRBIgUdUPUCxXOJtq8gviTyGggq7qnE0/SCaftzzPBldDxmVBYKGd\nNFzJW/gHnwkbZfg/XXMy6yfCdy/iEYF3u+0q1uUBxfJOrBTmC6iHOdV0wYiD\nAjPO7ROgxikfrS+U55VpEGzLox0XuDYr9shGa7fU8BCpbPsrsS43DbRDmvIr\nB6P7X+tMDTuZLUo7n1suX2ZMgFfNkpHwzrfBBjwfFfkIGW3OipODVG5agxQo\nHbzqDLFmrWEQUFAubTv//qQCxxNIdCsOPbHZB7XVf0j7T80xaiVSYEcLxflF\n0MjxeSYXFgI5q9llbNdskmolZVwv6an7PrrGFgjnI/sfr64LkNeSvMDqc3B1\nNCE1FCR0vjSoaOwkIWXJfADIVUsGJ+8bEFiHr3tsKcCteNYTmKHtdMzmhC3j\nf30uhbvluj0YytSJkztFU/aowc6TrWbMs/DJveoc53trUTtRvPIGdU7WGHiM\nDu4f/Vsb4FoSj/uAG4P4UleW2DqiuXIy4/aM2jA9qlwiFtF00Bake0cAZmZv\nl3lT5LWpPwK4jcDAxDW3fSgHHmIuv/jeNtWkRKpaRsQRj9Fy/E7+d2SJyyx9\nKwb8LNcEUs2jFKUH78G6xqrADaJDr1WFdBUNrH0nG4qJg+NUOcuU7Z67dk5V\no3a6\r\n=di/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm0rjDxMxaHGh5AgWHzzgU/QO3uo0vutG0jap97HxXJgIgF1hkn89EhkropqaDIEomD4/dmImC/xtmRhW/lW2qbFM="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0-rc.77_1574691485218_0.12477536728747363"},"_hasShrinkwrap":false},"2.0.0":{"name":"gatsby-theme-docz","version":"2.0.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.0.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"2.0.0","rehype-slug":"^2.0.3","remark-docz":"2.0.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"2.0.0"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","docz":">=2.0.0"},"gitHead":"74932cd67112bacd1e29780a202d466acdd79535","_id":"gatsby-theme-docz@2.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-piX9SjAMyi+jurqa2dBfdpx2q6Y0kuVRKeZ9rbgFfoH9mZkwWu4Yik+4pVMbqnhOOOorg2Jm1dzyYp/d4xM+VQ==","shasum":"5e4313af44da67c32fdccd39e9195577f7591fdb","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.0.0.tgz","fileCount":61,"unpackedSize":68623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2/p8CRA9TVsSAnZWagAAdMUP/RKD1Bar4bRFg/CnaBVM\nY2jUj5qGOxpQDBeC+TBFtNkahXuntLoNJcHY0dT7YoSHJF1Jz3ty14kHOGXP\nXIGkxYNiAeFINqCPDREiSEBQCi9sUqzgN6nbwLDLtfO5ZXFceiI35t+o/7zd\nPKgOXQ6oBbhVmODRp/3PBL63m5AMQnNKcr+j472DUtSWp8Z8/MuAkeUObbDd\nkJQ5plC+wUl2383IWGALzqSQ3uesj2KQMMD/2VNU3/xAFDH7LFP79Qw2vhNA\n8Inis6rZOOYSCV7So3RG1xWNNnXJ4hrashphpjzlBj14o71dDR/mSOzK4kmF\n5WbWBp93B5T3T28QP3/c8W0f4hRtWUy0jRIiTgVh3R/wKhKnlvZUEGz60ccW\npgi+qfvQcuszRqOv/eVWoWglgDkxclBTuyUJWQLt4WoyKRDDM/Io1aVKdvzh\naI1TKTmss93JFLmg8KtNSqPSLZlYg01EK3FjOvng31+nvUSlZjWIHBpxhl12\nXSW3rXEx8Nj/Z/7Gn3VRMwQY8NFavOijXnrvt2jf+RJlcog1kraPsgai58zO\n3olsNUTChpYlft7APOXkMkoFtFmf8HdLeS30WetuhUaCZrakmcoURy/rI2dc\n4x4vfSRZdasRuPofWAbJWk/xdzV1n1V0DFpGWgMcyZLE1axektuKwVZp658S\npswZ\r\n=eq/C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA003R8W4VtOpv3HquAzwiVv02TamGTD6t7U3PEWcNqgIhAJfPFgNL5w4NT6FIwasrR3RMk/+R6zMj7sZd0D/GD50M"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.0.0_1574697596334_0.8532703167204096"},"_hasShrinkwrap":false},"2.1.0":{"name":"gatsby-theme-docz","version":"2.1.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"6847b0235180c10c54c249ba91d31322d88511bb","_id":"gatsby-theme-docz@2.1.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-oyiDQqwKCUFulaDUwz0Kzcmxq9jlLEYdo7IE0KDn0jpCn3g0qhNuvhcvXw0LrLeqDHV9ZbPfc8bwWVT61TYg+Q==","shasum":"5033d2d4225146034bc0875d9d583511cf822779","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.1.0.tgz","fileCount":61,"unpackedSize":69124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3lnpCRA9TVsSAnZWagAANgYP/3KJfCZNsWpS31Gei4oR\nf4M/T/VPggd0kVgxKoEeuk//dsfTiA/RTjWcL6kYxzQI2dEhrvbCGsbxy2+L\nN5xQHt0mbA9Wtnd1qMQp9TrO/5BhxpEq4/OFTjGuko/invMng4HjIPiK/cNQ\nYOSDfoY0ArrEC9PECSiC1p2OXyTULSNScDm8OIahWLoijoOLaiiJlqRtrN2+\nQ6PHZMr6PNqJ6ExGAFvVRuzW9lP/SEsBfnXwVHYtiFPllZNNVDU5jWN2NZUC\nZ0ttqossxnn2LaPICQvF3KjTZAOgFdsBReIFXD0iUAns8DfWMKwnlw3CAjYX\n4cxRshZlO7tRN+TFTt+giPI12iFZh33KCcgA9PJvvtuZ+11/0MMYhjE7pje3\n0+VWC7+xNdXLMaCxIVm2e+IuwQAQlBafKIVao7qViomeWlRaLi6ui/ZNeivp\nl+5T2c6zDNjNFOBIPG23maoOIanwzVKX19yxtj2RshXtTigGn7nrzbFKFqVm\n3o17H7FG8RU+/CMrLaYkCpPn7DMq+wsYj1/On+De9BiYAczk5lAS3Gw271xQ\nX+Z1vYDoxE580qbaEIMTrTn2okrle0Q8FJUMRXXZKmgpSeiZO5Ke5M6MBDk6\nmbl8fK5K6QYjYfjz1Q1gD3DXvs32CeA3aRFdDPJeMNqpA4kYCR9dDVczQshX\nYuPg\r\n=Cjam\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrCLgUqboOWWWrdz2N+IZ1sldgUNRa/Ulvsah8oa0bogIgGbnGuwh7l5i+6s08A1GSR21YsedRWpW8NMwwTYrBs0g="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.1.0_1574853097436_0.19986905496136642"},"_hasShrinkwrap":false},"2.2.0-alpha.0":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"f09d74334b5b8ab1376d5321c105f1a5545b32e7","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-ZwYbbYVuYhboV87TesZG6oqD3k7hYn7RR28VyOEDb7dnrf5RQHqRb5LADOaRQmOhsO/iuEn85XkwuBlGrGy68w==","shasum":"4d7d5f35b7a94aa21a1a42867e1c82ced075f28f","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.0.tgz","fileCount":61,"unpackedSize":69391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd38l2CRA9TVsSAnZWagAAAzkP/AunzHdYnpQIoG4Jkbu4\n2CLP6nAwTgzSe20iDw97N65TQsSPk4cPM1gCOVyG+F+B/ieC0RPYV8Bvxodt\nIF3oa6bRLwgTbqA8VZAFzVJzygmoGp7SN14vHgSgRiMYe1Z65+hnpy0iiKzp\nyw2ypb7+JqM/Gzbr9nd5UATpj2sgoChPwlzndEdGYZujx/UoS5tK9Cohq52/\nuwq58nBBgNQ9ruhWMbTsjtcIWqfiF37azkOsm+pxyb8xirs2kWX4S9B0yltB\nvwSYTsGaeLAENFn7oy8WzVF5uwY0qIvROZjMUl1W3v3jyg0MvJzPvCNnm/hj\n1wf5ly83TinZlidGvQiV8rdDcRIW9eYXzjJehn337BUPZ6cXwnTyiRGfiZ5J\nfaLlrBa2ftmTqtTfJQYfm9iU9pR8sNg+5b28+1xZx0pS8JYSkKm8muMdbZDV\nmXK2BThsmeT5bpJ30xjBrsSufqLAL/ja+dNAM5zMBa3r5kHwMkB0qIm41Mxy\nUmb8v5Mkxr1n9xjhNCwgoJlXGSzvZamzanyiRkywFUrTTt1D/XiWodicHx+1\npZv8R+372VbdM0aTKYWFmbsyKYgQu0fmqPZiV20CoJck5o82em2SXWKAuJUz\nWSTkMNOvDRJYI9gT0oz+ahStjTiXQRd2Ge1hBxMldVWrcg37o+MVPIOfLGNw\nVvWH\r\n=DTna\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIVh13Owejh64llnZRVFJ6DfUcTZeYE118QkIA1dU+cAiEA0aqdthV46jsVTW4GQHxOfbrP8QU2adG2nTJsqBjQ1XU="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.0_1574947189957_0.41867499156418475"},"_hasShrinkwrap":false},"2.2.0-alpha.1":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"1f5c56365f58422eb7a9ad127d84a74e79c2923f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.1","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-cRmNjunD4UXi6ILNYbN8eK+eka8i3QxHQxreAZUgz9Dv98oAt8mAm43HefwgamNHYr32PQ4hS9qbcCXJzpnIlQ==","shasum":"0b05eb59bebde718858dad11e093648da7ebef14","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.1.tgz","fileCount":61,"unpackedSize":69635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3+vwCRA9TVsSAnZWagAAHbsP/j0KbPB0F6wvTg3Uns6+\n4gDv/IswMGWyTWJhCfJrOlr8+yVhuplZL3qVJh/RpcWecf+egjIHdGuFn7PF\n+i0+ZdI7G/joeJYKG9JYhEcW6VcW6aLkIngZdve4r0kJxndwJjk2kp/TyKiK\nN2F+8B8gofKWkjXcSUfu4WHTtrie3sXroB5BHaXD0U3VggAorfFq2yCKM2pc\nIk5f+FlG8BfJ6AY9qwHp+KLGihDHphkiHuwA7iJcCxg4sMBB7s7PFlA70y1D\nBadJtC+eUDq7nYUXwV/q5m+vc1Zc/R9l73x7z9wwRHF7P1p/L9ntHA3v3bbD\nx9POemQx3CBDo8Cuy1Vtf/zCYwPvXobf2x5xAjXushY1glEBbr5igdXm7mu/\nq/0+RQRbHR/9AGMoDbngGnnlLiH4pw5+3wWoQ3E/Vo0LlvxCp6zMCwIGIaJA\nmRCj578TsV/yxnoK3ADay+LhGJpn3XeTwRNKDZ3JrMERnCm6NRT7IbECCKES\n0TuxSGRU5T1WRNLFQbuvTwNIVaIiMDHrRA7dUglVKgHFlWeQJf1JUhQFA0k9\nrN/A9n/fXwSMDym4+UPcspo1VQRawcp2BRP64/NID/L671M1RtxlMhMVRXtK\njdBrJEnrFC74B0yFZ5zptotNTPpqnNUHJr+Eoj08tdb9BISYycy8Xn9ueAxM\ng64Z\r\n=ePBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0HEesOQKpUn1gGqIlOiimBo+eghCodvZ2LffR2cG86QIhAK4RF5qhg32QiJ04hPjV7GzTdOi66QXa8fG5dhI9V3uP"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.1_1574956008819_0.5230889438406987"},"_hasShrinkwrap":false},"2.2.0-alpha.4":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.4","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.1.2","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"47e55ad705ef033ed5fa0acfb94b6ec5561c9fd5","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.4","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-hjA8MqZV3y5/l6GChtJMsETfta1oOle2V/hNYIV5aoMPMTd1tbgMsImARcLq+NvJZOXG2u9eip8hQj1rR6jMyw==","shasum":"d3ec386638dad847a7710ea039d1716eaf9b1ab6","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.4.tgz","fileCount":61,"unpackedSize":70252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4it7CRA9TVsSAnZWagAAcCMP/RcrIFowd0jfTVicHPnk\nGhL+bWbuwVtqf2PvrJqQbMbwJa3fvjtyykJ6Fg31C2lQn47GWRaFcX6bU6Pi\n2oOcUBMPRJ3QCoHIIn2buwiH+ePapwYQX1UVlhHPYVufqeEdQhRQp3cQCXgp\nhBe2RXYg4tEAhcM+2i44ONP9rRQ8WjvTf9clEdlPr5+BnnIzTdCrtco9N5Ds\nlSrPsICEmGi59O5jKGubif5l09kSvJ3oxcvZmoJP8LPLi0BCsEBCiemDhZoE\ng7tVd/L4OTMeIIWPpzQqQuVpEL129CVjv3hu0LW8PmnDAHhXY72044YvVbvP\nMmU+MeHB0BbSxZrbYzSFrSJGZcIfW16QHLEbZhhBcCWmspNP6TZAZDV9rCpf\nTV+w7gOV917bp0UwL72foKVnCDFBnvsURYHZYC4LUGOlTBOroLUgiaGAzeUZ\nDdkcdmrijmUm0QHsTyVsE/vnIXf+30H+F/RQkCufftkMKq2U8iteu+GC8wgc\nJ96OEuAWw60C4aCeNycdNgf40pb3Hy5VOG6JtarzWbAHk+au7+ioAJ/LHbQr\n7+ZZCoftCauhVHEPFckYj3qAZ2/Do6iEWpvyyzt4ldl5DJEi27XyEvL2U2cs\ndmxGeic4AwSUZtlvfowGEJXY6M6ApfXL7EMjnAZmfsihqBvUOhHJmo566MXR\nqgeN\r\n=mkI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBZHeiKbQ2GQdS+XhTmeAG/7ffU5xAUBYV92Aday76pAiEAh7t3h5C4C7VhhWJrJ1RTs13Lx7mjmk1SSIUURDPeL9I="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.4_1575103355509_0.8530575986953017"},"_hasShrinkwrap":false},"2.2.0-alpha.5":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.5","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.2.1","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"a8452528ed34625ccc38e45cd88dd21042c814c1","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.5","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-5t8UFAzMA8t55NYze+NsRKjJJ0r1lUsTSn9mr4QDCYfBIujcZp7YAi6QWIiX4iv3GxTEhCz0M8B6KCm+JOgpng==","shasum":"751e11f50eeed8aaf10fb657d923a7d89c161867","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.5.tgz","fileCount":61,"unpackedSize":70530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd45glCRA9TVsSAnZWagAAUncP/3tHkOiJtPflUZAmzsbH\nTvwdQdd7o2LigkMrOL8Gpao78QbwnE5GD8yLognUOHij536L7hixFwoj8peB\nOkLaYFljXIdCfMrqZacbk4bFf3Wq0+gaTsYtL/6Zs7ZmObqcYaFYAJmxpBZV\nvcyr/D2HuPtc/JK8SZjb2JEGH2rJlqMPf8WKQVfoF4iPEL7HtQ8HEcULBDMD\n6KiRfDyfwEicEvxxco8d0Z1X4JgE1Aqvkur3Y1CKuytv2VZBjf3s9ZjJ1EMD\ngfWsQD4TFtIqj0XTZ/0RFcwFgoHGJ6eZ50f5tum53UvCcU0DFs2gj3IflfE0\nHkPR6bkRwpp12yKA94KruxgVRl8EJkK/3aEXiIHN2u1IbG9dRtFDklF33BQl\nDw3UG3WW6F0vVMHLpcg1Sg25SyFQUUdtvPJBUeRcsNdgYfADOWYtMDEQZa3g\nqzne+k/JPiLf9tsNZN76tZRkDNur2Hqfs0S/t729JahsZTBhlGviCLe4C3Az\nBdHyvc3DJVsHiTDuLrhaVBCiESJzUqBY1/fSP9y6dhqRmgxs6cxxgBRLIY9Q\nXanlJ21CVI+J1JNnhYPvEwN21NF0jNoURjvSTqYY1mIy1YL06R5CW3Vd7Nmu\nL1AziD+kDi3i5+hK29tnfU3a9t/9Em6C7tFlw/JeNU3uAST+VlsPM+ZTiOsa\nRkJC\r\n=7Tln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPie/4Ar6oUWq00HKw4jJqAwhH/PIazM+qN+DH4PCyWwIga35EHbAZAJtRnuTC9GOYiWkAc2N/nY7K0cKI8tZ40O4="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.5_1575196708523_0.4062416329306151"},"_hasShrinkwrap":false},"2.2.0-alpha.6":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.6","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.2.1","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"87cb335d28fff471c887c773a2c51bf0bc0c1e2a","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.6","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-/NT94OkqUm/ox6dMndChZRx1/h766kLYAwd7YxnStgTG61BLVsIUVVT+ZrZDH4MG/ZRcgMQu5BWRbDR+5ALGSQ==","shasum":"40db945112c73608eb282ad9c2acc755dc6d6b24","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.6.tgz","fileCount":61,"unpackedSize":70794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5kBfCRA9TVsSAnZWagAAImcP/03/d/imwc7nBfcrf6tF\npFSGe/JfcF5UC9ppvpr+30rQxVLRXUcfAeFKMtAzB0Ru0E2hsG+u+IZtwnJh\nbtWm7RGEMKIX0Lw+/JkFZQXW/I1ckwkvxelVVn24YXrC6ECUIDlYFyD084qC\naMEgSiVRWR+mHOwZg04bHweoTI+GgzfHfe7l0lOKv5AohEcr/OSz289s9P/S\noKuWDDJUEVpvbzr3xc+JXFC9iIOUIqH4Dscne4ZxIEh1/Ur0woM64avnSI7e\nR2WpjJVkkqjlFAPFrd3KLFObrei0MbOL2K3z4H5HcVzuxygIivgEKlO+kwhz\ndC1pNpUoRNRqyQ+xJ8FXwttFw9jWMU8Rn6VYYpNSt54ywuJsms616oLwFhUX\nPjWY1NPYnlvL73ZCNOT0PQcfNwaqNVaUehkbEBB3oDQH45+nCBNVEIqxP15O\nySrOtXnk5zmIgBG6jwuSYcQMjrWc35Dxv8MKRfhs4iZDst2CA5RWSfyIxTzg\nozBI0I76cvSSVdi7RjKjVtueDmnmK1dnZMLjnjqRoAyMVidfmzxazx8NCEum\n+o9C3xusuJMIGIRdZMdgt04KNJMvwBFIeJR58S9sfoWEh8V4Wrwh/q5xYi79\njdJCRfwxtj5VBz+6B3qkt66KkQajH6awNBvtfVNFBCVtrPls59/SBx7A3qrG\nXqx6\r\n=EBD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3RsfAgwBUsmJ151ZmHxKgfubgTKuM5BxjZP/ll9WxmAiEAgIYGmgHQCc6aPDrlvgcICr30uoX9ROwp3fg71M+sh8k="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.6_1575370846679_0.4320725943840418"},"_hasShrinkwrap":false},"2.2.0-alpha.7":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.7","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-helmet-async":"^1.0.4","react-live":"^2.2.1","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"8d1ae9ebedd476ea587f101b5f20a38cff1067ce","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.7","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-vX27jsJlLVdjaaB8BiizWLCbioWLcwV/fEq/GOWZCaZ2AFBvKLX4KcgffZLXLa7D+8o2pIQNsESxJ0k6txHsAA==","shasum":"dd137e35c96effeb74060064edc224be7b8c12bc","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.7.tgz","fileCount":61,"unpackedSize":71239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5pEZCRA9TVsSAnZWagAAUHYP/AtoJeWAjFz8YJ0DyWCe\nXuXEssF6Tt/xk/qYKw7U2TJirAtcoRa4YHslSV/UaLeAYawnj3hiV5HZpftH\nGqBoUMZY/rbyA+tUSEX6ZyLXlrRTQD6Mpu164VKf0vIC9QNUlDRaOGM6MNrL\nJpMmgGL3NUD0/QCsM9IZ5VSZNUXGweN41OjVd+Y3xUSooIUUYaZtIK2PuRdr\niVtgttQp6WgVgFjZUJm2gj5bV37PVYRfKwqzLoIsM7dIhDKjFKyaAB+dpNVT\n9eUBez9J9Xke9GuujMdnr8p+tX4uQTTGXI64xXBx3p1BoCphTCY2Irm03RKM\n9jkCT9I54Nuyl7s0k7kqOJvpVdtZtsoCWBU4M0rbOaNiL25m6cFlbGaWkdCS\nD1RChjM6w0KWB48mnyXywrsvzF7r5FcqMWSSbG5c5jlmt5s95jtuihDl3uzA\n6tJMc6jYW+MVD+EGuE/BZ0b3+SPBjy4Vl5JW+7xijP/jlJjouhOe0EavzI1n\n8rrYLoBIsCnLaQEij+CDmRtgJMMaax/BFQvQ6GIi1LGo+A+sNcGLwID0pvG2\nKwzUr3u7/8YPmI0eFu9MXUsyvccfrTRJrl5FRl2DLYjKYWfHoexVRXLOdwTn\nEYt1QfOmcqmEPIe26cbloIgvszFq8+A8VAJQfzzxTKsFZ1Qmi//CWU530Ikd\n79ri\r\n=emLb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6Gpq07pFDGf1y0WKyChOHySCLHJ67rWzsoXs0ATmXOAiB4JWm8bI6FbiSTzbouvADJiNUG1h2qhQdYU32d4LO3Lg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.7_1575391513030_0.4750533452082255"},"_hasShrinkwrap":false},"2.2.0-alpha.8":{"name":"gatsby-theme-docz","version":"2.2.0-alpha.8","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"3f751348147769ae06a6627709dcfcb9ea0cd9f7","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.0-alpha.8","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-O6qAszejAlpHfthhDKvQNIlfWOkY+VH+SrFL7GuFOlOsh2oxrp7zaR4Fjcp0Sxe9v+hM1mSFAzvu2XJ1pP8aAQ==","shasum":"35dd4cf60528fe45ad2021daa6e49dc21e2d874c","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0-alpha.8.tgz","fileCount":62,"unpackedSize":73435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6mzOCRA9TVsSAnZWagAAAM0P/0JNfUOPAWsubDtQKokG\nPJudtN0dUllbKPDkLfHKoFl2daWpmLaAb+FG/JGPjKlVEeUJd8KxzoSTmLjW\nWPQDGq2DlZTdWJoxIlvQ0qmumMg8qXhBn1eRdo1JxukvkDD07blZh8f2ARWA\n6hioKb7SSwmLAzpQQJZLEQhyDz1PUcPvZyl/e6gduZMFGSZ+VmKb2xfhI5Np\npS3yeW/7Pr72yYA9XXmdpmP8CoJsyr7T/VrxOqWJGIJndi95s6GRKejshw4q\nSfkEWYhH4qyvzUEr/63Hu3cu3WDmIHPBez+GWWMIpYmyBiO4lv1XASNVF6RR\nydFCYWi7zN5Qt62/t2qEpM8ieZL45g98dfdOMGzLNUj/3bGFxoO6laDaQKQD\nRFn3dAmioeJNQNFKm/TsvOOIUx+/eiV+etSWIZ1OdAqjqNgAT51gr6RYHey4\nsjrOyeHACRQYzEIR8SEGaR0t3bck5JG/S43UMYLwQuKsN+sePxre6ET8EMJr\n+JT1gwdVAfRyxIdZapSkHbo40gUpyLsaYuNFez33IQwuRk3zMKGgMZxVg2oH\nv0S/nS9nUdlfx9uRen+jlSbMIcRt6M/NzNcikdAUcAtl/5V3Ey6het90VSbL\nqq/5CI47s5nMHCHEFqjR+++TFHAYhS2RD9UJSrt4Lzsbya0NJtxLRFzFaIBs\n2YNV\r\n=64Wi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkfnWVzizjt8OFn+BbnYagG9VpcFgNQmLxLf/XYkOrQwIgaNOC6EqtNTbmxXV+sSwKeKtV1bz33HNhEwhBFKSPvgs="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0-alpha.8_1575644366359_0.35530477789108206"},"_hasShrinkwrap":false},"2.2.0":{"name":"gatsby-theme-docz","version":"2.2.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"20c6653816fe4ceed961a10771f003e611c5f491","_id":"gatsby-theme-docz@2.2.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-W/R0xSy8jopC1x4PHQneeu7/PUk7Ppp2b3RLep0l/YcaVDsoZFAO6zdeIqCSsYVqqGUMiDaOhvDzDvkT0KT0kQ==","shasum":"8fa586b1c16f74d4707fdd0de67384d192eee46d","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.0.tgz","fileCount":62,"unpackedSize":73578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8KpICRA9TVsSAnZWagAAaaQP+gIlh1BZFChIM4gxZpLp\nPEZ12lQXXXVTWdiID82lg878u+6e+f5fG/DeskzjMao117YFSvzgiteIz9kG\n+TpGTK/cQLpWC8p9bVJSvMi10X5d7GPxfNs90V+gBNnWMp8Xa8+xF1i3iIco\n9/+BBMScnzOyhOwQD7HaBZpf8jfOmDqxMatU2fuWjszow7DW7b2jRFBTdXcC\nKKFgNrpSNM0TnTHkGNIiPg+9E83Ae0jfkEM3fknpQ/jxqAl68aZZsY5hSkIE\nvHuK+MsaYkXEryqqOijyPEOczrHUcVroDCFoJfPaYUzsIjDljNMIKqfO2AG6\nlDxIqtTJLv0ROdBnX5OKrQeWvjzmhmqhwy0uPL5V/E8Lj/2GhZlML1XQ1iN7\nv8O9VNgUXECI9s/WnNW3ml/9aw/JINkZLi72fPkKuWlCmPyxZs+SfTImqAr2\n0xUI9eBZQ9t/qCi1RagyHaHMC2tmFvDNuznNyB5qJuGUmymGEiOxTdE5/gfw\nFnQLmCQfqhsEknOpGdmIOSGE/XrasS1SHgn5MGfjpAEqCooyCxSfx+14Q5SI\nHk/N7JxyMq+AnozQ/YDz8622Rg4dCaYgrRrNvrL0kZMo0iV8OVEP1bu9Umkk\nELJENDj9H+apCDAUxCRw78TYdzSqeUocA7sPiZQzd2TATlDV5kzDdiHiNg94\n7SEd\r\n=w+Aj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTkZFyA1FYhUeS9tQ+ANwhkk7abSvuhvLBDZS0+DVHDAIhAPOokPRsSQj+VRL/SVqRGSu1LsRbXSECzu07Bi8cbVY4"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.0_1576053319529_0.936660616271801"},"_hasShrinkwrap":false},"2.2.1-alpha.0":{"name":"gatsby-theme-docz","version":"2.2.1-alpha.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.1.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"fc595967115758578ba902d80e31e2e68d40d852","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.2.1-alpha.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-uJBmbihEDNVT2d+P11dMbhZCXxkEgP7vs8U/T4+brkrAPtpo9BuDfujxnJs3RcCY9yau9w9T4oMVz2L8L9q4FA==","shasum":"9ef1970bf86adfd0a5cec3f7dabf591ec6b1dbe3","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.2.1-alpha.0.tgz","fileCount":62,"unpackedSize":73800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8P1iCRA9TVsSAnZWagAAla8P/RFfklxsQDW5jLIvZH0Z\nM0Rt1JP/0MTQ+P6JKQTevPhsyXt36bc8GQ5uFbF2FcjhpuhFxjh2KeYl96Mp\n2UJJZVw//Y1mM4O0a95ENQBo59dqLD3PQRt5ly5nLFb87Bcd24uiPdwFyoqv\nALhhz/gC+SBgf+RDkf64h88pV1RCVTty6i7/YG41tsCg6IsM9dNFt1hx0ITI\nu36MLGx/gltyHT5StLJfRipHt0SoxR8NAvLvPbLCcSS8s/DkIf6Ee2T5I7tF\nnAfU/xRnxzwnO2liH0LT8eUFaSNd1ItaNqzlLZs7n6rUjwZVab/mlPidVAWb\nXKq/n3ZDRX5tuspgVMZjhc9ePPXMGD3ZOJPYtMslckx+yy7oGyJFgF0Icfwe\nERJ5e4Jfny2PDLAWNx4/ZNDLHa+m3OuQBdcUv8UJNL3tJ2QPiDsbWnzAvLaw\nkKxmv3x8SKoQkanBbd/s6h18T+LLEcAPn69LSvQ0tGrrgyTD2EQEouVJS1AA\nXpCKNNgk5JT2EJCe9KujfDEGsRe5lDI0+iIQqv6kvNDgyCr5WbJjIEsOeXlc\nwe0rvUpWVQRHgtOoqZICkN5RJfHKzM7P3oRhzQhqMpRmdAR5D5Km+4qPFSJD\nJnhU7oKvmBcMtDPkJfzzwLWllkrPQm1caK1ufjPUhushlo4+cj8dOLOYLW1u\nLwMR\r\n=9lCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdBYed/KzXYcVEnR5fLa52beKs8phub1fsZ74PEEL3xQIgLqv/f4+GNXE8iLp2rUF6GBZnP7mzhhNuQB4VT/Ff2KA="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.2.1-alpha.0_1576074594293_0.11887057625220221"},"_hasShrinkwrap":false},"2.3.0-alpha.1":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.1","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"5fc05276b867a636c096c4c05d4f19585e07357f","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.1","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-+qN7ReJhSSkkwl2zpMRRPcBWkbQxk5ISyGooA6Bn+B7mkaOwRCccrig1AKIV9rN3NhNaW2RxmJG804UhrtiKRQ==","shasum":"d675646654a6f94551e961997259c5ef5496aae7","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.1.tgz","fileCount":62,"unpackedSize":73975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd83kDCRA9TVsSAnZWagAAoREQAJ3L+o7f+jilTxH5Y2If\nz0eKVzzwuftW2qePJL1p5f5ylwBXFfwgP3NjoSmqjUtGQPfXNPnaa3lTqKNU\nCUej8EC2Xl5F0JmtIAcFFQOe/+5KiyrlD5t/ouTnvQszW1dmzD3UKnZUeTqQ\nrccwVpXVqp7MJ9f32x35lFLhtGmWJtJnGD0/g+FO1R5+Pftul+cFkgv4MrpI\nMvUQ3NDHG8nEaAdyF2E+p+Wo1sFvAR61XNM09xv/QVyaCh0riMCfRTt084Nx\nzzoOdCteDh7EGhCZ6Ode40YhyCcv5/rh/WRVCWvEACG6i8HjCQdXoCxtdGJ/\nlhkkcYp+s6BAChZutnIUD+0iVUQlUclJ3hOCMZ4DNfVUpTTDBPXxkfKKurMp\ndgWEW2sNwBZSD4d4D0WgVc9aFbj40jUQ5OsevtCGn9RcndQw9Kkis89/0FFZ\nUHw1ZIVTCPvzFRR2nHMjKD4NiG+n6UWeNfTurzumUd4u6HtvUUHa2wS2Ohqp\ndRQBcb6UvXo1jvpwPwFYPaIwqoQluaecp60WKdC5DtwsG+tEORWYFPzqMdMz\nZ1e9DCdMJpzAos/rdW8JkzDMTJStCXZrLkOxWGVOW47j/5IO/QtyhxK/vmme\n2EJqMnsvxDczuz0Ypybro+9O0mSvJGj1i8kwvfZ4cI1/Th4SuKaoUqCURzCW\nVUov\r\n=3CUP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdmBIhDoUKrhMSfBPcP0lThveurAJ9QwgKiI72PmT/1wIhALwMdw/QJG+1c2c4nBOkexVveraPpYGHbP1wf50WGSi8"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.1_1576237315248_0.46968088089591054"},"_hasShrinkwrap":false},"2.3.0-alpha.2":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.2","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"320f5c4ad8be1835cbc8498cee1dcb41afee0c85","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.2","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-h5KkjAziGkG9ZSGzFpKwRQrirVrny86ZCtPEwuJ1T9xAYkMEzX2OM5h/xS2DEU1LtP5pah9yUMmBkZlpy5tMog==","shasum":"3faef0ee6195eb44b1312cd5ab1a4ab1f10ec835","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.2.tgz","fileCount":62,"unpackedSize":74142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9M5zCRA9TVsSAnZWagAAERUQAJKp8M1nC+oY1mmsJuvz\nr9/xEMIhHkvqic4J5FGzYT+/EK25tzKt/J4rGaiGxmukobUINPXI0kZ9h4RB\nssVQH5usTU+iA8Y35f7PxtoJ2i4AODLFEGdZCPoolm0vvgn3Z1qdzrlGJLKb\nyHH6z/4HDL67IOOMJErBoiIS64bckpCAVJPfQb5odhzliF+9buSE2vdmUudY\nD3PvFvImlTbUbbbBtkxz5x3WcsmEdjXpkvqvp1oJqRNsKB5/6tLUiif4o8CY\nZm3igVzNdkFKcoZenfX0KRIKWwQfriAV9KMqGS+SdtpEcQ9ESSGuSAmvD0wg\nRGvHv+Z/rKaNeyiJeRLauxliW1mKb/1Og04M8Sp/KJJdqS37YjAO6tJAQsDc\ntFNPRVrVYFUwr0zEDZuvgf67Oa2t9fkBv0Swo5BmR499lWoSHgAbKRU38AAi\nVjMHkwaCmeSIKMky1/osPudpx00/f+NSN0F7rb4tgvNZo7UyfHzXU4pS7Jh3\n/x9jn1YqMOcNuU3fj2q2b035PeZQezXjTrfS5scK0Rrm1aNIKeHs9ZGv1Ddk\n3D8ODg88dpiG6j1DI9/2MBWqPgs06USyhfmLuYjRimMSxOzzytvKkwU3Bzmb\nEQdev0IBr3U8ReMx/lfGlWypXLeA0d3KdIrb24adsDCfjdm9rqGFTDzFDfSF\n4MVB\r\n=zg0H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGM4R9a3ZtiTXGK+EkdpUApxDvgev4E8bZHCRrQb1O6TAiEAt0awOmW7YBOSKrEoWSpq3ck7pNC6x0kEe++u0H1bP0k="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.2_1576324723289_0.258340516194413"},"_hasShrinkwrap":false},"2.3.0-alpha.3":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.3","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"a3f8d585826fb156947b46b43e826c3839876df4","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.3","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-2TsCkmo+VO57/TCyLfw120TJmvTWZfBnZeUvTwCCnvL78nv+XHia5So930iRP8E4tBgR4vjZ8y9Vij63ynNBEA==","shasum":"710e7a78907a0df157f8b0d072036bdfc6f67356","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.3.tgz","fileCount":62,"unpackedSize":74442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9zsUCRA9TVsSAnZWagAAocQP/37rH/SCiGtURXmp3uoI\np3+FX9TfDZ4NZgAuc2ZtcsB2c0Uv8GEd/tLX1n/pRz84lNLKr8Z/wQgzy096\nzP5eOMMOHmhI4XeWVSlIz7grnI1N1/S4DzDt2gXEFYMmZ6IktmGN8DUpCUBH\nLa878d4rvaLLGN1mYSWKIDl74r4zU/HVVRadK5V6cQVJ2z1x6fbb8+Uu4Qxn\nGOHWZFqqBTK4MAa5+RhgBtVlVOAognAOsSScr7OGZgAtYw+pq5X1v0fLg4hA\nlZJekL6J2sdkO9F/HElBiN4dwH2hb9AYaPgencca30OCgtKjGHQNNZtMBHVD\nGjJlN4/J8/+/+r34KBbzZxv3jfjXg0MAEwNfgAwaRwCuJq7lVeeaMmjMANj1\n4SGQo9AlF1m8IOn38iCAVdRYzTbs9DVpeie05HWnfhKmveL42rrYxjfaE49n\nEQjk+mp+zVyh0bxFNI1yZZ0idUxd4dXLjz64bEhfvNdZmDyyt8tnQeYqLPZP\nS+gNXFN32VSeDl9oC+TvJw15Ct0eQWjFMxCL9ohNX03DMVrj3n5+vT1/Jp7G\nk7e+guk04NyrbuZ8awotr9J5q9PcAXyfFLbaUJNTjD6sd52B1mkbmbdt3jnK\ntdYaqWbZNVnN/OSYdtKC4YpwU+LhhUXFmNXzeb3aKisUJ28R1gkWZst1PpFT\ns3tX\r\n=eDeR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh/4gmDk3Zc1Yit8zdvp90ev60HN1nhj5OS9JUUZzj9AIgSDkH+/5DuWjM/s8y6pa680M0FK20aElx2sw8KkoCAao="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.3_1576483603476_0.11730213538754297"},"_hasShrinkwrap":false},"2.3.0-alpha.4":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.4","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"c18749f7d242f1e3b128c68b6314d3341bfc88ef","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.4","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-5Xu0+M/qJQ+O1vIfMiMyXZxd4ZliCT4EiKZoWC8igGlEO3DujeYWUbgrMgneq4wkOAo70/cp9bL7riuyqca+cw==","shasum":"e0c2cc2724ead96a5d9d66be7da038cbcb87a54e","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.4.tgz","fileCount":62,"unpackedSize":74935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd93AQCRA9TVsSAnZWagAAp/kP/27ctf7VMHYFVWpbMm6F\nRH0JiTjmBYZrBJplKaZuVN23s6laqHKXSx5HnYXdRSplgWg5iYqv6vSsuX4R\n5h/xNnYKezEph7vcOVIpFjFcEvUEhqhJrEQGojbttcV+HT8IiOW1KOz3JFAu\nXtPVo0YOnDQ+Y4dpfoDM3GZ0IBhvomZQiMv1M9P8qIEmM7tj+TZNc/b6CQBg\n+nFGKrWZAwPsgRwS4uqNdGYCQugCspdRRzC4qqNt7nPbJSxnWOK5KOR8bE/I\nxDkg9KVip3/+NlQMe1rvWA7hTmvU+Oh62q0pQ6ZDz/FsBveHVGHhzSgHeD/f\nVRjfUwTTUbd//Qgculyek3Xb+KSjVr5zq3ygm6WaOs5fOHXlPD8VpxQxcxLn\nHLsxsT/ksYZSJ1YU5Hgl1sk97dJHaCwmdYjUeZSXgx3weDl1PrKWNOhkePG/\nMV7+uztTWDLQwZQtT/0V6qvTuDUYsB6biILcCAmpacemaMznKn6v1kIc2GPD\nZHLaYFlfaZcbZfrPv82iZUp+czKBtaDcPUxqZVweALiFTSDZW2bCiOs4MJox\nWNcbj8zaXF/emBigKPZTI7lmJ1+3APAV9OjLPHJEAemimU8fGICU0Nj5SoxK\nXHCmatVdJjq/gioTnDX6nj20Hv7d4LILPm3nHoEQiORTidjvyprTL5HGA/dn\n5EA0\r\n=I1F3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC08ElzUDVSNf6SRkog4Z/y1GyiSkbiIruDEb0c+zXOiAiB09Y0wq0inab+znwA532E04iss1YdUZ0uOPX6yPi8IWg=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.4_1576497168315_0.34856448118360994"},"_hasShrinkwrap":false},"2.3.0-alpha.5":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.5","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-manifest":"^2.2.3","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"64bf676ea2e534701373ca87ebae0237ad377b3b","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.5","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-fr8SLjD67G7wDi6hKHrHv0DpHvK30/DH3r1ulmxETCJSpJ66F0yctXnHSv68A2nOLVSywU0esY/bGrfgAVOwLA==","shasum":"10eb33c6ae54e1ecad44d2459ae6914b912b9523","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.5.tgz","fileCount":62,"unpackedSize":75192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KxwCRA9TVsSAnZWagAAlgUP+wSod9A5mPkRNdcu7xV+\nDcbSgzIETu71zQq9iG1Ud7h6Hp4icOD65nNEq/lxSU4OzC1Wx0mzOdL3Q5r6\nUhP9Sc/mzqp7HB/ZRZcK5y8+2UHCQ+Qjt8rHKkFQagVbrBb9W0T140fYIZ4H\nJzF9hV4L0Y8i5v4RGMWtLgbgAQoBqSMrbnMgCBOnBukfQ3dayLLk5Q3k0EqV\nQaz83IOXWaLzkrv69GZmYj/wvKw4QkqlDJ7SjxOZWbJTH8B4vvUfHdz4bMUR\nz6OHp1CFATyINddzmKRzsk6i9zJC+GrVkDBybKDkYO7IZczNE55l6He1UpQt\n0ONnWxFzy0jfPDizqc9q+fhEMAKB/xmGd0isXCj2QSa8tvXBLYXQ4vuv7GjE\nwE4t7QppZRne/Uo01ngqV2IBILm8dryLbwfF7pzWieQA1Mza0V/D7msE9/sr\nXoZQFGgFINqAlrZB5x9Y7+yuokr2c0dWchYVGWXVFJ4qc8q9MIriQ/p5rxlU\nyH1D7K4IpO0sx4Emu5XfLHFfCdHz7w+3sjdP8Gl4M7qGxXzpSWcCCtHLBeAm\n281aWfhNCtrQ63mfXMA5Brm37XjjKQhDxE2Cvqdmvyj7Ig1DQnG8/wRU1z9L\n1h8PySJUp1OMdXa6pwGYxZgv3Wr2k1afq+8RFqTW/UVVA3jkv3Udu7AaQbAG\nBfI5\r\n=PaHE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL/aUsodWeOoQH9cqGVLukdpQ8N196u40A0nDud1PpFgIhANdbB8BU6XrM2f6xDhcVZt6SAk+DSFdfc2yuYEg89rpA"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.5_1576578159756_0.37341220071377434"},"_hasShrinkwrap":false},"2.3.0-alpha.7":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.7","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"f84ea39a7cd1d34767aadd51287410468ebeceff","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.7","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-YJz1xR2wEpA5ZnsfN5bCK3DKC85uSP0ccL4PQjU6agZCZBnYXfWG7KJlOMvpqZRostgOQ+oBbloIPLP1i+7YDw==","shasum":"92823f11946669cdfb26de25c93ec7022a67c89e","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.7.tgz","fileCount":62,"unpackedSize":75851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOYycCRA9TVsSAnZWagAAofcQAJrIT7+QuRBnxvlYhR1k\nE9TjcVXKlAsSJf6jy1QyOT8POSmzRNXrSxYj+hBxSH/bI9G7k1KxoEgFJ5cV\njp32MHmQF9jnmUxhAyXdQRUJG6LQqW1WQV/QDdzrthS6vmzluU1QrFflHlrn\nZqSGTAfS2TH2/ImyXEywvwInw1CEweqYUoOKCe9emc+rXDIVkKsiNS6ltzhZ\nR5Aj1jnTNk/qithpRwacLYE5IHxDPcBBflqC6ickyE0fe0MzEr3mDbBDHwno\n6Lfl9J5Ty6WNqHRODtVN/ISYqXUgvFzkm12+bI89+mhFKhd8tczkVE7WGNjT\nmUggUPVThDIfXch0MxY0iGXDsBLQNm2h3bGVfE8YlpcPryi014wGFPrCSNSr\nwmKcD+ttq3ibCslJ6DGUAAEM4C45BzS5JnDBNWEHikRubdLQeZSBQcipwh3J\nXaDs11vR2jyJVViSvZ1tRQa8yLFewt4zDsxf08NdXdw9YU6nA7krvSG9tSEs\nWXj1ldKh9kha4idKQAmPpnMKDUYbXYPTIT1hS4IjmyPTbSTmo32QjiwgDVT8\nuhiMaS0W/Gm8FMTbMHr6+2p94Rba+spt2A+VHARNV50NhktJu8Sf4+9v4+1c\nNutldPlSyny4QNCVcqn+CZUI1EgDj3dtV5HlifgpWb8+4jGlmZ6DM7KnMFnC\nOmJG\r\n=e3Mt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDf++jMV6ptYryELc/ibC8Zy7RK2bnilfyps5TllDxxHAiAerqreYo4GCwQOXGS4UKhVzoQaDN5b1CP+a87FwbEUDw=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.7_1580829851637_0.5662181404112885"},"_hasShrinkwrap":false},"2.3.0-alpha.8":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.8","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"6d74f13234301235f5318574679c7be9b06020a1","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.8","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-IQizB9ZZ3fWxKc8npRBZJBfnWIxzc/kdHtWIOum+MPwhlbqQssr9y8xXhBzH5DCQbZhhjwaZ+b4Rs9dO/B4vKA==","shasum":"b3854f525a64bf7155479629ab4cc1c4f403fe9b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.8.tgz","fileCount":62,"unpackedSize":76096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO8NFCRA9TVsSAnZWagAAKFUQAIiIvF4nqEeu547bWlx0\nupsnarJhjpPfPt4AQxrdJ5swKHCDoXTJ9ptN1mNal/9VbcoA9jfxOadpKoTb\nvA1xAUxAbxPEsTNutH6492IcSuQQgMyRzHR0KUJHwwyP5NTx9ik9rPX+dM06\nyZTI5JuexVhxOJkTJ4/rL6tD0+Z3Tc7NfbEhs8m1bYh4IAfruKTXssNGDTyk\n7P7HDdz5GC2BTcZkrnCbnVZOvKDP6LE+OGKxq0JlO2dvEom/uT0HYw9ybLaO\nVS6pLhlDlKbK0+9w5sn8ekXblOxPBNxFMJYwaEhhjIkBvBRSH4fNk/fbQ6Kv\nU9TANSRho74ZpJrPzLv7zrcuefPlAigj1C/LkBpXMjmAjdpNPNOfuTnyWXzi\naCavQJBBL6S8SnyEfegx54c3tzOEOnJIBwa9xspvhOkgAFhckEJ8UsRBSTXI\nMcOaq2oR9c+RBFcSs7+IitGpRG2ZZ96FXyNQWmbZmnukb7IVGpS9kZiG4y/U\nY9ICcAcuooi0yxffECeiATpG9i2HshAaJDcg7FWSHy9DVukzYFrS9alpWJ9y\n6DvosoGosbwLdnT3QF06OQtNLyF8EA742i4taWz+HBQaja6rxI4lX+W1YEDu\navUnwbG253T9DB/Rf/nll2oxKOArzGF67VZ7+UJTnOw3D0ow+NJvcl0FZGOK\nWoFk\r\n=+fZV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHr7DdKGAc/OaWVfBTHTF6XL2EkLMm2UiNFsXQj1DcFAiAAjF9LmRAhQZ74Z1lgBCgj2xEcS/N5zO5vAqFy0yRpFQ=="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.8_1580974917189_0.7022257823627713"},"_hasShrinkwrap":false},"2.3.0-alpha.11":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.11","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"0ed0153a73ee91e9731847d4f8e8a7b26ea01a08","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.11","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-DrxIa8L7uTRIIaVfGDxAeVX3ouA9kgNi1bRq5bh8W5jjSt0i1Fjqn4GdUKL/6PwYAEfkc2M6fTRcu5NGy8NL6Q==","shasum":"795f8df5c62c22150d5e8f08fb36673deda46413","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.11.tgz","fileCount":64,"unpackedSize":76692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePX85CRA9TVsSAnZWagAAa1YP/3y/wfnN4Ba3kh7j3bYy\nUU19jZiNWgZiir2lifAOU1h0vH8P1arMZsX4kQaNv3XXV/QtxfAfQQbLEDqJ\nhlafelFlJZw3vIzMIIXYRGktSxa2mwZwZjpjdw1rGji3BTovyJbUsrCL5uZy\nfofU+MSWqEeo9vHViHBTh34rfBgvi0aZR5GWV4x0DDQtKEQVKkx48y+Wjfve\nssdddBRGlYaggE+Q0um1LcZSes2zXNM79mVaW8BTXFOjFQBFy6h2jGdXwIOs\nt4mGsaDSAuAdamlHPSeLuHm8S72N9yhxv1rGe/b31yTMxZsexzGOH/SbijMm\nTU3YjsJY+krLqNXcGbsq7PiaZW1ckULS5Kqiy2g2xj4y8uytI0wtQS9umblg\ngQorOCTuSDTP4NeGJZleReRbiHC/IQ1Jesy57zK/HgTVR46+6lfd8iilTPtO\ncEskFn1//D3X4yOEeJ029qsFahaMwgPBWeOro7sQCf0g3sb14RZlngcWeJ+S\nwhiQCe2CStNV+E7Oxv0E2LxfouezwXduUDaRC8J11TUkHylk/7rFmrvhoQJm\n3+Lt2+hZPyNvwcGcoOUQSlEqZNZjI7hus04WtPov17vI2GR8Sf9svqyBdJFU\n+889L4nHLcKl5pYNwfAHsq14Dgu05/V9R/CXrXe8ttbPgFRwSEnUU3rtAbre\n/Q9X\r\n=FPwb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAf6zSVTNTdEAy6Cil5cDFlZLICnr/23KAeaOKu0l6tKAiEAhwIZN+w7dbeWDWOz4BECjZqmEtEojiQ8Cp31zry8eAo="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.11_1581088569034_0.6081735143769749"},"_hasShrinkwrap":false},"2.3.0-alpha.12":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.12","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"079039e56bb15db436d2235c9b888159bdccc338","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.12","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-G+FU7FBpmawnfpbqewnR7aGZwDLO1Bs4elB4LPfsxL/h8tI/2il5MrJ1kKbL7yGHndg/xEYCIaeSjx1Hb/Mehg==","shasum":"211dde03e050d4f1d55160964df0e6731e65ea50","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.12.tgz","fileCount":64,"unpackedSize":77093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRA0fCRA9TVsSAnZWagAAHt4P/3a35gSNRJkTzygf8DBP\nZCoZkJSps3TqpLoxiZxn664CGDyQnU2LsFYVZ/E7kqLgX4rquEPrdmNF4UfO\nU9wVKdeVCWCIMNSuaGOKGX/Vxm+liJfZ56F8WkNsSnlyYLFajDedhHn3grkO\nx6i/r/ij4IcfSBScYBLcpYp4/7NTK8+Olf2OPUAtJEY2Xfk9CqU/FgZUTZNs\nzlDjHk9HGeGihSa32e9aZjZksFEqOyj3SEIP0f1/QlXyNRswngcXDaat6KD9\nTUYKqnqtKa+CEIQJB+NlDaDMcgK6bUvt6zm9VxpxvsQ3jQzPYD+FeXDBqGcA\np0atfTwc8aLNAfo9qhOW5apjHGFnWAwT5yAm3RSF+RQIVMTQrNrCo5nqeuIh\nQ3a48bKEzlZ4IiD50qLfc/wyyXkngKwsf7Mv6wsmOWYVvpHcNmQmm4VJe7KA\nNxLK9LL5DZnyD0seHtBMuTlZGu/qeg8GMvhD93zvlUcDPmlorDm2Ef4ie67x\nG5G9BRAL4rChpgEGFUFLc5IOMhCyhA8phBUi7gP8Hb8km2AB0/WbWTrsBkO6\nPiXTKYwEM+9ncC8z8vtTC+/yzWIAdRR/UFVMCHqiBGPFuEgpepTAQn8h4Sl+\nrw5JtQIpBO0LKRq3YxZyWx2+6WvQSiXA+HpGdYpR98ds6vi4oYFH5sd11dWF\nNPND\r\n=i1vI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3J8RQyOgMmbLjf4Kh97Sk+lseTXdoc69UnnCZ6SfYqAiEA7IV4KoqROxCwsnoCs2HpQADXhqAJ44UqfbkGWvKtBzk="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.12_1581518111074_0.9069945291076125"},"_hasShrinkwrap":false},"2.3.0-alpha.13":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.13","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.1.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"b1288bd9d45049875fc65db391c09d6543c0308d","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.13","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-UhaWEry5o7/7gv7VdFpUOmh+WadSGoZ+EE2seZqxHusXYQZeOvLOHRl+KTgmQFWznstAUI+W3HJ3Mtp3p27NbA==","shasum":"531e522a5d116b9bb627790218a62c13c8af82ca","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.13.tgz","fileCount":64,"unpackedSize":77399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRQ98CRA9TVsSAnZWagAAY2oQAJcHS+PDjDhICOUeRIAj\nm/WLmWXPV+vYgB//O17yG5CiTHz7c1G2FMUfutK7GTEN6BJUTLQTYAGS3BPA\nEvKPElvJkiI4DoCOwmF1sYMv98jWJENljyU3YT24YTjTRrAlu/SP9NmiY3IK\nm+TAPieq18Tdea4vHj04cVsERU2zlL5xpXnC9xN6dJVwtCFwC07HJD+kZ4d5\niGruXRoxXTRu2mNQT485tXQDD+FOpqjay4HN8f1ay88S0EEYEMQ1ctHPTnXD\np6iR0Mads3PTN42dse7prGEfuP6fs7nZ+5UdaicBOIxEOAYvvnm7mLwolTo/\n85V/pHWau/3GKidOkvw1CCOwR1DCqC85xVVDoeQEC1dcswPPAa43fQTDFRMp\nEKscWFXnnrXH9Sf9SYNMByrkm1GlF+NJ3Rk13K0V7ol35OqETt+cYlG7PMyr\n4Te7/iw3yDALFw6WO84auMrkbXxKX6mkD8ISkFFojETOFCEGdx/03SQ2iPr4\n8HJNDk3VzOmoCT04/JOOQz/+PUM2KfrvbgTTsseucfRc2tMmNZ5+ozW/NUG3\ngu4Ie6lRzcRZ8V9UeeCKn05HiYxM8MjQXwUD5HfnMdDIujqAuS7wo47qQphx\nCLnXoFJmH670V92AI0iYb4WHc/gNMw12CpgODegtHuSl31HByXSy8BVMP7Lm\nq3jn\r\n=t7mZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMSiWH65NJj+XIy9DXL18pbPaFhYZj1vd0XD/DRYzGdgIhAMwHQ4uyR9toawl435++5AlmXhskL82pn/DZwmcp4Ou/"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.13_1581584251852_0.657713774408508"},"_hasShrinkwrap":false},"2.3.0-alpha.14":{"name":"gatsby-theme-docz","version":"2.3.0-alpha.14","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.3.0-alpha.14","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0-alpha.2","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"d038374bcde2f39cd4d6860afdb54ea781c80970","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.0-alpha.14","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-kP2KPJsP/alJxDdJmOlu3sVme8gyEmxxmyFEqy6IYl3bAbSjDhWMhBXxMORMPL3PCkCkPEuJI0cIZAsfhwtw+w==","shasum":"1404ad01870e27d8d930ac6b99edbe7dacb7b5bc","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0-alpha.14.tgz","fileCount":64,"unpackedSize":78761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegxRICRA9TVsSAnZWagAAfPkP/39QrKahm/a6kHS2OJmz\nzRu9PAXZEHmnMKGNGsufk444jBZf1klXjqV0uC6kmr48gl0o7Bo9pxEWD/dM\n8qoCuMa7Zv3rnJJ4CMiC+ct1MmsZdOOwLNPFl7lDujQXaW9lmctXsmp0WeX9\nIxODEcL9NytJtd4C6oUeQw+TOje98M7b1d2cFYsHtpErbCLLCmDCXAotrXIv\nB1KeRuYvc5xMqkL6DMLrT6yFGv8Ain1Yv5td1ZUJaakM7INi7JF+G3GIzn3e\nCew8WXd4vXxU17SL3DZhpldsH0XKhsJi/JwoKLspMeZYzlQrWKkJ4+ZOf9R8\nDnI2EpR2fT3H47JeSpnhQ6HcETpGs7hO+IcymPd9Vn6qqvJGNELHmJeB191c\nBF4FdOiZfBSJG5YkaP4Gr/1TMS6iJCDVUhdm7EEvE0eVH0XcSaZZ8pb5rHgP\ncU7LeP/FF4gSmFv8yM0W4anvCEAQCIpFw5WXmbygCPFhrFsd4rFVroDjbhun\nqwKOexpXkBOagVgYfyxtayWebFNWVHo8s8FWmGAApwqthtPHeNUGKYtwhYPB\niu9O7QEP4jKFDSb6LtS4DO/qtajWcYGG6Mscx/dP3v3EZiJt8gzT/0VxmgoM\nIV8xfMarF0Oyi/u7mmnlQRwEYLPsbZjnq46y6Ug1y6l86gV5qXG+7TG9pVBI\nl2fK\r\n=rll+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgKRpl/ahyRERdcggXHS+ffmw2GpAvk+nbx+peBIcU6gIhAMm1pw1tLhrE82UtSQ83K9Fg+6DJzOLn1Z77jnnKvuY1"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0-alpha.14_1585648712181_0.8378171238653802"},"_hasShrinkwrap":false},"2.3.0":{"name":"gatsby-theme-docz","version":"2.3.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.3.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"c9a304f754adb5ad705ef0e2175e9a2263d84c48","_id":"gatsby-theme-docz@2.3.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-FB7jXziWqwVOhFsglB43PatqxCDm7ejRUYczjTp16ovLZX9d9nIWauwNUC+oNWPzeit/GNuA40eBuVUvddkvyg==","shasum":"570d1b971103b229b145bdf5a3552f6f99e6bcad","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.0.tgz","fileCount":64,"unpackedSize":78888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehZ6PCRA9TVsSAnZWagAAx5UP/RvnRkPVK74N8WyUG/Vd\nBIGuEUhAD+iBrVGoxz7jyJIHga6gnAAY40RuXi4lLA4x53WXV59PqtwIZG2S\noyaFTML6nlzqEu6pwbtW4soMt+IGPbCUtiXilEWRd/wdQSh23TjSUlzP7iBX\nJifHv6+/qIRy9aDXBsgaOZEzXyFxfSFC0SLfzNk7QPen9NxS0ES5Y1h3i0ug\nd0kS32IE/RfvhMwS/8g8fHUkLRaMWD/Pn9r/iknIDFDMQtVDn78oDXrr7eqG\nNOrAEAoNPJCATjvCIHYCmJnVOvH31lmA/3rWYI21OjTqMN31ecpj8OBEM3QX\n3dVv61L+qHPXyhbWiuL632rJZiGkFwEe3+mh28WRGk5YlgXcZq+FCvdEVITZ\nNN1h8ap0vsQcaqHLPgSuoezbRIvZN8sKFmjaDMAW3W+l59hTsP/otGO2oCog\nlcqp0I+rR9zFV5kvEiGDZw4AIPOyKuFhrmW4YyJRQNkRrjJ+449+UP51iHUv\n0jwlfA4GlqkoSwXX4/Ivti+dRD2cEL8HgW4ASVPM13PvtulVagXgKuCdKZ/Y\njKSHU+ILSW74xHaFvZIOYKw6LCfLTaxJo26cmjU1oyPG40MiyzDBrT6aeUTY\nNLdSLvMvSH4t84Be9fzJDSchsVRLXOOcRNlOzhRFxLyvK5UNhlcMDjhzm5lE\nyEud\r\n=nw+k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwe96ec/i47FM5UUgZ06SK8GS38wQIzgDDTaYhxRcbgwIhAOEw3z2hqcocbaXzxBufiOeFe51rwech5kEzh5g9ZvbX"}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.0_1585815183150_0.8762281408379886"},"_hasShrinkwrap":false},"2.3.1-alpha.0":{"name":"gatsby-theme-docz","version":"2.3.1-alpha.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.3.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"183e293196774427ca0ef4f3acba601835b7105b","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from 'emotion-theming'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.1-alpha.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-5eHVt63aoJdNp62fvJ3uL1WmPAciYi7IB6hJYkmcF9E/fehHZjS4Mk7pqgDBVUR4HvI+cagbI4svvwLg9MMZWw==","shasum":"dd000585ab361ebd6c62ee9c73fd2517ac35d17b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.1-alpha.0.tgz","fileCount":64,"unpackedSize":79224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiZoVCRA9TVsSAnZWagAA6X4P/2XoIuzaZGGu2wwaK5D4\n7LQ/5IlsoYH6wXNOX4tYgTo5oJKXxz50qrnPjMHmtex9Habr/N0m/GllbhRH\nX4xQgeX1n4R9XsZE45OBSdMGYQgT9xcueFCULwhWNPZ6Z8icUy5cYmm7l/zo\n0z1VwvFuaPTSGGW4QMlN4Og6XND2ddmzEyX8bOpe/qzny2VKg2o2bjwctZNw\nZdn6uyEs77uKj+oNYTvVIsfrQFf6f/RMVKYAwZV/Ov0Gds4x2z3tXU8dJDLx\nUTSnSrSw32OjeFbrRDUgl2jWalsj+Dml8HyhofDozJxYd2hxPFoMPHD7VlaH\nv0fT3sDP91ZzTs2jIwxZ6qctEvvFqRYAfvDW9McMszjEmpl+nDseOAOWTg4W\nb9AbxDeYPr1Dw5BSgz1USguxle8tIzJiG3dO+78pcfdkQKJScjojpDCal7By\naLj6TWRBlRsTfB9jeEySO9zMbUyy2oo1EKvVOOZUYkkiVYcbeaF4E0t9uTjo\n8yS/iubkFzIo/buBvBPcqt6HB/ok888gWBkmIjmXclV4QT7n5vFzKAoDmG2W\nfX4f0IjTfa1xSD39qDJyAYxjM43pDTgnLxAkxPn1gG/AORdMqEdiVVHCM2zb\nV4vNVrJQvr5M2rul882IbfFz6IiCxvKI9EiOGHCH4WOjDbcFdhTkBAtQL1lp\nbHPe\r\n=Sh7i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrIc1032gNcCWyA1uIC2PVnkMExcUcvtxhS9AQ7Hkt2AiEAv+9LAV7i11p46S7ZiGh5lLpqwOESXyAZ6SyoQZbFCbI="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.1-alpha.0_1586076181062_0.7534234465026084"},"_hasShrinkwrap":false},"2.3.1":{"name":"gatsby-theme-docz","version":"2.3.1","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/core":"^10.0.14","@emotion/styled":"^10.0.14","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.3.0","copy-text-to-clipboard":"^2.1.0","emotion-theming":"^10.0.14","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.3.0","rehype-slug":"^2.0.3","remark-docz":"^2.1.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","typescript":"3.5.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"devDependencies":{"babel-eslint":"10.0.2","eslint":"^6.5.1","eslint-config-docz-js":"^2.1.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"34ba273b8a054d4bdcda7e8ee523d3bed4f1a366","_id":"gatsby-theme-docz@2.3.1","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.15.0/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-26K/W4JkqlRTLjfFZfQQ0ioZiIaXm1Cx6bGp0zWbZgjzCc59K4mohiJ9eK75PcoGD7xe7g1oTjHAFsfjdXv71Q==","shasum":"196e91c3794d0237ec512b738f6e84146f87ea4b","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.1.tgz","fileCount":64,"unpackedSize":79368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiZypCRA9TVsSAnZWagAAolUP/RcfMObLWiQagfT6bnbq\nAh4T6sHIBe8Frd52Agyttinq9X5xc7V6OGhQFbrbX5YidrauNrkMnPLV+t/i\n+ZpPKwQPHgcCpjBSRhIarCVzEpDqJhrBUdgNEHTqp8S5fAChHAFcEnVIFoym\nOIS+sxIniNE28wMhbVGC8F4CLmF+uNx/hdI0dxSwLZ7E3fCZDSGarvRL5iui\n2tZv3ByctwoCzDVz5VV+WN9iHLTDWqpZMowSNkgyICy5C8uj97D0kDj+P2QH\nVgex/RezDgVHNIABcl6lk5wSdMY08q+GFv59DqYs85FTrpuDKUde6Wex7TBt\n0T4b1uCkb7xGzVEwQvrqjPNUlIGzQ4nVRTyx0Ppu+E9jSDvGIlwf1X6C9vKE\ndX8BHaOthKMG3k0YiU0Noswlm/Up662rSHgOB3HcNuy01g7Js1RYvGaCy7Ch\nWimJ+Z8BFGbPZNV7gLcp8rwZWrkaOSdhiJCvbCOt/x9uHrzk03rVHjFVOCjS\naCyeA1iv9B7AbsVfVo7ut+ScVOvXBctZwiiIoSWegfvTmotirNuoAQep/1qp\nEd0mHpbWy8Sym1vZcABONczaUKvalcF6X//s3Z5rapcJEbz9+2XE8gZzILoR\nvAQK6t+hWtwpJdO7qiS1G5tmYqHF0+Nhz9Wlef73dnGiZShkozWYyvQ+ga+K\nTp9w\r\n=QSaM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFE3ypAjxB0ydOOvkeC8VDUIZQIYIdLAgCaAkEgF7VuQIgWQL0IE4ZCdyRWUAiwxKtAhnO8FOdjf1Qqdh9bpvWIpQ="}]},"maintainers":[{"email":"chris@christopherbiscardi.com","name":"biscarch"},{"email":"pedronauck@gmail.com","name":"pedronauck"}],"_npmUser":{"name":"rakannimer","email":"rakannimer@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.1_1586076841358_0.1594194769017403"},"_hasShrinkwrap":false},"2.3.3-alpha.0":{"name":"gatsby-theme-docz","version":"2.3.3-alpha.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/react":"^11.1.1","@emotion/styled":"^11.0.0","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"2.3.3-alpha.0","copy-text-to-clipboard":"^2.1.0","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-catch-links":"^2.3.0","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"2.3.3-alpha.0","rehype-slug":"^2.0.3","remark-docz":"2.3.3-alpha.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","to-style":"^1.3.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0","react-dom":"^16.8.0"},"gitHead":"e4f292a3a8b580301b45ac28cc8ce8884969ace2","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from '@emotion/react'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","_id":"gatsby-theme-docz@2.3.3-alpha.0","_nodeVersion":"14.17.3","_npmVersion":"lerna/3.22.1/node@v14.17.3+x64 (darwin)","_npmUser":{"name":"renatobenks","email":"renatobenkendorfs@gmail.com"},"dist":{"integrity":"sha512-y9zCNAj2KTZ4/aTRjP0CXhiAEWc9mUoh+vgdfAMS5i8Jd8umrK9Xaodg/5/Bu5u2Yl8nHujiDjJXbHYgZNiPcA==","shasum":"2ec6cb2d59b6206a098a3baf3db4d0d9926a201a","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.3.3-alpha.0.tgz","fileCount":64,"unpackedSize":79319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO0tsCRA9TVsSAnZWagAA/HkP+wTabAOVOUe4FK37ZLAL\nivpoooxgL1Uk/rQHMNSemr85OBJb88Kl3jnX/jH9z00cXRzX7d7oLJspJ4XJ\njemjHz9J5LySoD/aXYI/7avRdpGvD5ODwP8uTTmFGHPJKOrt3mAay3rHyeSI\nLe/ZnH7kz3sG5zxtFx/YIqDDX4AmHjzjR9uqX9lNTJruJRDhrwsRWGo4WMCz\nEPS2guoYQ6FjL2WCva1X+9AXtDdH3iWMJLbY7x50+BpZQRID9RaY70HNBv4S\neGV6kZQ7W5sh2AxTTsdfQHynS0l2S7pxd7cxg+s4PrKFOlOBr+nZUvhZsebZ\nSdmUMMRzoeS0eFQGmkMNcvo5nS9rgeGBT9Eu0g3fXA1+2JBEVdbzwqRY35w+\n5HCXWhkJ/62x0j9ktEwU4XRl043PCt+ASQksZOvTNlhhFDhrkJtNHA1Xh/db\n1xqcM0X7bfGuvSv5i2Z9mcPoIdblp3LpwYHfDkRZj339ktr5U4Di3nzTFJw0\nJYCxZVvrFdtPnBEBEDrlZtcCq/1Ln7UGyTpGjwemldmp2xLM/3MLCH9b11y5\n34BZnpinh5RsZyIVPTQ39YLdvY9XGfCxN+Uz7fo8DAKBd1oxU/IgkXVCgO+9\nw+x6SrZL823c8SMkGwO8ggksZMbQKmS9pCM90Kauw1mO8AhENK3ylL59yMsj\nWAwj\r\n=BQbb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB75jI0km5ThScQcww2RM+3PyKF2WU821Xx/EIkv8mRMAiEAijMXVZPWuVV7wRy8Ny8xhWA0Tp88JrPxEL7tq3xkPgA="}]},"directories":{},"maintainers":[{"name":"pedronauck","email":"pedronauck@gmail.com"},{"name":"renatobenks","email":"renatobenkendorfs@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.3.3-alpha.0_1631275884007_0.6065286644493459"},"_hasShrinkwrap":false},"2.4.0":{"name":"gatsby-theme-docz","version":"2.4.0","description":"Gatsby theme created to use Docz","license":"MIT","author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"keywords":["gatsby","gatsby-theme","docz"],"repository":{"type":"git","url":"git+https://github.com/doczjs/docz.git","directory":"core/gatsby-theme-docz"},"scripts":{"dev":"echo noop","fix":"yarn lint --fix","lint":"eslint . --ext .js","precommit":"lint-staged"},"dependencies":{"@emotion/react":"^11.1.1","@emotion/styled":"^11.0.0","@loadable/component":"^5.10.2","@mdx-js/mdx":"^1.1.0","@mdx-js/react":"^1.0.27","@theme-ui/typography":"^0.2.5","babel-plugin-export-metadata":"^2.4.0","copy-text-to-clipboard":"^2.1.0","fs-extra":"^8.1.0","gatsby":"^2.13.27","gatsby-plugin-alias-imports":"^1.0.5","gatsby-plugin-catch-links":"^2.3.0","gatsby-plugin-compile-es6-packages":"^2.0.0","gatsby-plugin-emotion":"^4.1.2","gatsby-plugin-mdx":"^1.0.13","gatsby-plugin-react-helmet-async":"^1.0.5","gatsby-plugin-root-import":"^2.0.5","gatsby-source-filesystem":"^2.1.35","lodash":"^4.17.14","mdx-utils":"^0.2.0","prism-react-renderer":"^1.0.2","prop-types":"^15.7.2","re-resizable":"^6.1.0","react-feather":"^2.0.3","react-frame-component":"^4.1.1","react-helmet-async":"^1.0.4","react-live":"^2.2.1","react-resize-detector":"^4.2.1","rehype-docz":"^2.4.0","rehype-slug":"^2.0.3","remark-docz":"^2.4.0","remark-frontmatter":"^1.3.2","theme-ui":"^0.2.38","to-style":"^1.3.3","typography-theme-moraga":"^0.16.19","yargs":"^13.3.0"},"peerDependencies":{"docz":">=2.0.0","react":"^16.8.0 || ^17.0.2","react-dom":"^16.8.0 || ^17.0.2"},"gitHead":"9ec9a3c647d9991658c9fea3d36fd6b959f41de5","bugs":{"url":"https://github.com/doczjs/docz/issues"},"homepage":"https://github.com/doczjs/docz#readme","_id":"gatsby-theme-docz@2.4.0","_nodeVersion":"14.17.3","_npmVersion":"lerna/3.22.1/node@v14.17.3+x64 (darwin)","_npmUser":{"name":"renatobenks","email":"renatobenkendorfs@gmail.com"},"dist":{"integrity":"sha512-RsniNeuuouEin0SAxkr3dtWzZvjNUfcxEgEknQTh+IcwqaYCkjElqfM6kKTg4FGTm90k5/IxjBGut0IWpwvS9g==","shasum":"5f21e8f8801b44e6b20e37106b2dae9f951db658","tarball":"https://registry.npmjs.org/gatsby-theme-docz/-/gatsby-theme-docz-2.4.0.tgz","fileCount":64,"unpackedSize":80916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBm34CRA9TVsSAnZWagAAg/sP/0ed2XrLEetxbwycauib\nCceIVAdRZRHwHLbViIwfneIO3xU8McyKjNHoSqnss3pHxGZ+dnQ5fujOoxcU\nudqrhqcbO5EhwzKyxH3kNCQcD6jnz2rI6sLfvfEXpssdRfGfMg8JW4Uvo2uH\ndV9s8FLvdgO3FF6zsbd3RTkt+LwUzJgv1mH3EyYPYVd37TBOR5x8Ki3UGCEW\nowbsoRC8pVMPXSM/2VK2GClCh6UmNi/ydbPL72cQuMyjd0cLdq3pBXMw4iqf\n7u/umdEKE/9XRdCgzhSF8Uc0e/nx1MRdlgMaHiDuII71tN9GaCc0QPkdmNra\nsPzjosJyPuKM/mMEnRtympnGsSuJvt1TnLKzBiWKhr0tKwGyKevQDHv0/dtN\ngRyA+4TJmP2tLc4mJB0bKCQENjX4R0nLYvPngMz1ydxqRmsRz5ItDnAH0+ek\nKMTC+4N5Sb6l0uy5ve4AKPZtJ1JPse1673p+zFyZsUTqCVsCR2ql1KvD4qAU\nKzNGRqk3XDd5olTACozD4PHiksZUU/biRZCLsSjxsiIR/oqe1cSMEdgxmIdF\nRVOr+fuFU3AgJkWn0CVxtsRmj8Z0M0blBq8Lhl+LeVU9R8KOocpcOs9BpOKq\n3KgfdY0m0/2nW8VWjtCaDrsPlRHlKk3zZdzZKRDCNZxZgB7R+X8Wt8zOzOZx\nFE+I\r\n=C2Jv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC50ylwnFX8kzBy+riPq4JTte1beQO2L0XrXWqqWMw7wIgJF7ar2kEBzT3neo6pB+nXbge9CHKoFGwrhk8st2Hkmg="}]},"directories":{},"maintainers":[{"name":"pedronauck","email":"pedronauck@gmail.com"},{"name":"renatobenks","email":"renatobenkendorfs@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-docz_2.4.0_1644588536830_0.4711259242180852"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-16T10:16:41.722Z","0.0.1":"2018-11-16T10:16:42.232Z","modified":"2022-05-03T05:22:11.697Z","0.14.0-alpha.68":"2019-02-08T20:06:13.270Z","0.13.5":"2019-02-08T21:03:14.647Z","0.13.6-alpha.67":"2019-02-08T21:06:28.406Z","1.0.0-alpha.76":"2019-02-19T18:50:30.168Z","1.0.0-rc.1.84":"2019-02-22T22:17:33.768Z","1.0.0-rc.1.88":"2019-02-22T23:27:20.049Z","1.0.0-alpha.91":"2019-02-25T22:07:08.005Z","1.0.0-alpha.98":"2019-02-27T18:51:43.977Z","1.0.0-alpha.100":"2019-02-27T19:49:08.505Z","1.0.0-alpha.102":"2019-02-27T20:08:21.914Z","1.0.0-alpha.103":"2019-02-27T22:31:23.613Z","1.0.0-alpha.104":"2019-02-27T23:10:36.992Z","1.0.0-alpha.106":"2019-02-27T23:26:51.494Z","1.0.0-alpha.107":"2019-02-27T23:39:22.817Z","1.0.0-alpha.118":"2019-03-12T00:41:51.537Z","1.0.0-alpha.129":"2019-03-15T19:07:08.806Z","1.0.0-alpha.132":"2019-03-15T20:43:10.861Z","1.0.0-alpha.133":"2019-03-17T18:00:17.862Z","1.0.0-alpha.134":"2019-03-17T18:26:56.341Z","1.0.0-alpha.139":"2019-03-18T00:42:49.093Z","1.0.0-alpha.140":"2019-03-18T01:05:57.053Z","1.0.0-alpha.0":"2019-03-19T20:56:05.079Z","1.0.0-alpha.1":"2019-03-19T21:49:28.906Z","1.0.0-beta.0":"2019-03-19T22:01:12.614Z","1.0.0-beta.1":"2019-03-20T00:10:33.382Z","1.0.0-rc.2":"2019-03-20T00:47:06.573Z","1.0.0-rc.3":"2019-03-21T14:43:11.643Z","1.0.0-rc.20":"2019-03-29T20:49:43.917Z","1.0.0-rc.21":"2019-03-29T22:05:56.420Z","1.0.0-rc.4":"2019-03-29T22:16:47.027Z","1.0.0-rc.5":"2019-03-29T22:58:37.092Z","1.0.0-rc.6":"2019-03-31T17:58:19.142Z","1.0.0-rc.7":"2019-03-31T20:50:05.134Z","1.0.0-rc.8":"2019-04-05T00:04:50.076Z","1.0.0-rc.9":"2019-04-11T01:27:24.352Z","1.0.0":"2019-04-11T18:10:39.556Z","1.0.1":"2019-04-14T21:38:50.115Z","1.0.2":"2019-04-15T18:34:49.079Z","1.0.3":"2019-04-15T18:54:14.411Z","1.0.4":"2019-04-18T14:49:13.803Z","1.1.0":"2019-05-01T20:19:40.500Z","1.2.0":"2019-05-08T20:56:37.883Z","2.0.0-alpha.80":"2019-07-12T19:05:32.328Z","2.0.0-alpha.87":"2019-07-12T21:23:30.153Z","2.0.0-rc.0":"2019-07-18T17:42:59.124Z","2.0.0-rc.1":"2019-07-18T17:58:33.324Z","2.0.0-rc.3":"2019-08-28T15:27:07.922Z","2.0.0-rc.4":"2019-08-28T15:50:56.017Z","2.0.0-rc.5":"2019-08-28T16:52:43.968Z","2.0.0-rc.6":"2019-08-29T09:16:27.270Z","2.0.0-rc.8":"2019-08-29T14:02:13.607Z","2.0.0-rc.9":"2019-08-30T11:04:03.098Z","2.0.0-rc.12":"2019-08-31T19:40:15.470Z","2.0.0-rc.13":"2019-08-31T20:10:34.316Z","2.0.0-rc.14":"2019-08-31T21:19:41.024Z","2.0.0-rc.15":"2019-08-31T21:23:28.634Z","2.0.0-rc.17":"2019-08-31T21:29:04.044Z","2.0.0-rc.18":"2019-08-31T21:38:19.188Z","2.0.0-rc.19":"2019-09-01T06:33:08.029Z","2.0.0-rc.20":"2019-09-01T06:42:45.961Z","2.0.0-rc.21":"2019-09-01T07:00:13.249Z","2.0.0-rc.23":"2019-09-02T09:07:14.864Z","2.0.0-rc.24":"2019-09-02T09:25:08.007Z","2.0.0-rc.25":"2019-09-02T09:27:27.204Z","2.0.0-rc.27":"2019-09-02T10:01:24.966Z","2.0.0-rc.28":"2019-09-02T11:59:12.273Z","2.0.0-rc.29":"2019-09-03T13:50:34.915Z","2.0.0-rc.30":"2019-09-03T14:33:50.758Z","2.0.0-rc.31":"2019-09-03T15:07:58.357Z","2.0.0-rc.32":"2019-09-04T07:07:26.466Z","2.0.0-rc.33":"2019-09-04T11:50:41.454Z","2.0.0-rc.34":"2019-09-04T14:24:09.895Z","2.0.0-rc.35":"2019-09-04T14:41:45.577Z","2.0.0-rc.36":"2019-09-09T06:02:19.857Z","2.0.0-rc.37":"2019-09-09T06:31:29.208Z","2.0.0-rc.38":"2019-09-09T09:15:58.572Z","2.0.0-rc.39":"2019-09-12T09:47:38.365Z","2.0.0-rc.40":"2019-09-13T05:58:50.092Z","2.0.0-rc.41":"2019-09-16T13:49:52.657Z","2.0.0-rc.42":"2019-09-24T23:53:26.604Z","2.0.0-rc.43":"2019-09-26T22:09:02.704Z","2.0.0-rc.44":"2019-09-26T23:38:46.096Z","2.0.0-rc.45":"2019-09-27T21:24:06.200Z","2.0.0-rc.46":"2019-09-29T02:48:04.634Z","2.0.0-rc.47":"2019-09-29T13:11:43.898Z","2.0.0-rc.48":"2019-09-29T21:22:22.843Z","2.0.0-rc.49":"2019-09-30T14:56:55.115Z","2.0.0-rc.50":"2019-09-30T20:07:21.632Z","2.0.0-rc.51":"2019-09-30T20:44:38.573Z","2.0.0-rc.52":"2019-10-01T03:28:11.936Z","2.0.0-rc.53":"2019-10-05T18:01:02.647Z","2.0.0-rc.54":"2019-10-08T17:50:31.353Z","2.0.0-rc.55":"2019-10-09T17:12:05.507Z","2.0.0-rc.56":"2019-10-14T18:17:59.142Z","2.0.0-rc.57":"2019-10-15T00:35:52.994Z","2.0.0-rc.58":"2019-10-17T17:58:26.101Z","2.0.0-rc.59":"2019-10-21T17:00:14.567Z","2.0.0-rc.60":"2019-10-21T20:36:01.063Z","2.0.0-rc.61":"2019-10-21T20:44:05.199Z","2.0.0-rc.62":"2019-10-21T21:46:03.733Z","2.0.0-rc.63":"2019-10-22T15:34:11.099Z","2.0.0-rc.64":"2019-10-24T15:32:58.496Z","2.0.0-rc.65":"2019-10-28T15:00:35.220Z","2.0.0-rc.66":"2019-10-29T15:10:25.721Z","2.0.0-rc.67":"2019-10-30T10:04:46.542Z","2.0.0-rc.68":"2019-11-01T14:01:23.564Z","2.0.0-rc.69":"2019-11-03T15:41:08.036Z","2.0.0-rc.70":"2019-11-05T14:31:30.612Z","2.0.0-rc.71":"2019-11-06T13:44:13.728Z","2.0.0-rc.72":"2019-11-08T23:10:24.631Z","2.0.0-rc.73":"2019-11-11T14:37:21.878Z","2.0.0-rc.74":"2019-11-14T07:11:20.660Z","2.0.0-rc.75":"2019-11-15T09:57:20.396Z","2.0.0-rc.76":"2019-11-24T10:07:10.345Z","2.0.0-rc.77":"2019-11-25T14:18:05.409Z","2.0.0":"2019-11-25T15:59:56.487Z","2.1.0":"2019-11-27T11:11:37.561Z","2.2.0-alpha.0":"2019-11-28T13:19:50.092Z","2.2.0-alpha.1":"2019-11-28T15:46:48.912Z","2.2.0-alpha.4":"2019-11-30T08:42:35.654Z","2.2.0-alpha.5":"2019-12-01T10:38:28.650Z","2.2.0-alpha.6":"2019-12-03T11:00:46.845Z","2.2.0-alpha.7":"2019-12-03T16:45:13.186Z","2.2.0-alpha.8":"2019-12-06T14:59:26.472Z","2.2.0":"2019-12-11T08:35:19.656Z","2.2.1-alpha.0":"2019-12-11T14:29:54.386Z","2.3.0-alpha.1":"2019-12-13T11:41:55.385Z","2.3.0-alpha.2":"2019-12-14T11:58:43.500Z","2.3.0-alpha.3":"2019-12-16T08:06:43.724Z","2.3.0-alpha.4":"2019-12-16T11:52:48.459Z","2.3.0-alpha.5":"2019-12-17T10:22:39.931Z","2.3.0-alpha.7":"2020-02-04T15:24:11.751Z","2.3.0-alpha.8":"2020-02-06T07:41:57.358Z","2.3.0-alpha.11":"2020-02-07T15:16:09.156Z","2.3.0-alpha.12":"2020-02-12T14:35:11.192Z","2.3.0-alpha.13":"2020-02-13T08:57:31.972Z","2.3.0-alpha.14":"2020-03-31T09:58:32.315Z","2.3.0":"2020-04-02T08:13:03.279Z","2.3.1-alpha.0":"2020-04-05T08:43:01.163Z","2.3.1":"2020-04-05T08:54:01.549Z","2.3.3-alpha.0":"2021-09-10T12:11:24.267Z","2.4.0":"2022-02-11T14:08:56.986Z"},"maintainers":[{"name":"pedronauck","email":"pedronauck@gmail.com"},{"name":"renatobenks","email":"renatobenkendorfs@gmail.com"}],"author":{"name":"Pedro Nauck","url":"pedronauck@gmail.com"},"license":"MIT","readme":"# gatsby-theme-docz\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/opUCiu)\n\nThe official Gatsby theme for Docz.\n\n## Installation\n\n```sh\nyarn add gatsby gatsby-theme-docz react react-dom\n```\n\n## Usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-theme-docz'],\n}\n```\n\n### Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to set some defaults for your theme, use `options` on plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-docz',\n      options: {\n        /* your custom options */\n      },\n    },\n  ],\n}\n```\n\n### Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n### Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n### Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`\n\n```js\n// src/gatsby-theme-docz/components/Logo/index.js\nimport React from 'react'\nimport logo from './logo.svg'\n\nexport const Logo = () => <img src={logo} alt=\"That's my logo\" />\n```\n\nEasy, right?\n\n### Creating your own Docz theme\n\nOne of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`\n\n```js\nimport React from 'react'\nimport { theme, useConfig, ComponentsProvider } from 'docz'\nimport { ThemeProvider } from '@emotion/react'\nimport baseComponents from 'gatsby-theme-docz/src/components'\n\nimport { Menu } from './MyBeautifulMenu'\n\nconst componentsMap = {\n  ...baseComponents,\n  /* your custom components */,\n}\n\nconst Theme = ({ children }) => {\n  const config = useConfig()\n  return (\n    <ThemeProvider theme={config}>\n      <Menu />\n      <ComponentsProvider components={baseComponents}>\n        {children}\n      </ComponentsProvider>\n    </ThemeProvider>\n  )\n}\n\nconst themeConfig = {\n  colors: {\n    primary: 'tomato',\n    secondary: 'khaki',\n    gray: 'lightslategray',\n  },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Wrapping the entire app\n\nSometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div>\n    <h1>My custom wrapper</h1>\n    {children}\n  </div>\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    colors: {\n      header: {\n        bg: 'tomato',\n      },\n    },\n  },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n  colors: {\n    header: {\n      bg: 'tomato',\n    },\n  },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code. If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.\n\n```js\n// doczrc.js\nimport myCustomPrismTheme from './my-prism-theme'\n\nexport default {\n  themeConfig: {\n    prismTheme: myCustomPrismTheme,\n  },\n}\n```\n\nOr you want to have different themes for `light` and `dark` color mode, you can change the `prism` default property like that:\n\n```js\n// doczrc.js\nimport customLightTheme from './my-light-theme'\nimport customDarkTheme from './my-dark-theme'\n\nexport default {\n  themeConfig: {\n    prism: {\n      light: customLightTheme,\n      dark: customDarkTheme,\n    },\n  },\n}\n```\n\n### Adding component shortcodes\n\nYou can add shortcodes to your docs site which can be used throughout\nyour docs pages by extending the components passed to MDXProvider. You\ncan do this by using component shadowing and creating the following file\nin the root of your project: `src/gatsby-theme-docz/components/index.js`.\n\n#### Example `components.js`\n\n```js\nimport baseComponents from 'gatsby-theme-documentation/src/components'\nimport MyCustomH1 from '../components/my-custom-h1'\n\nexport default {\n  ...baseComponents,\n  h1: MyCustomH1,\n}\n```\n\n## Getting data\n\nUsing our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby. So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data for your Docz documents using source from gatsby.\n\nImagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:\n\n```js\nimport React from 'react'\nimport { useDocs } from 'docz'\n\nconst Home = () => {\n  const docs = useDocs()\n  return <div>{/* my coolest home */}</div>\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n<MyComponentWithSomeData />\n```\n\nCool right?\n","readmeFilename":"README.md","description":"Gatsby theme created to use Docz","keywords":["gatsby","gatsby-theme","docz"],"homepage":"https://github.com/doczjs/docz#readme","repository":{"type":"git","url":"git+https://github.com/doczjs/docz.git","directory":"core/gatsby-theme-docz"},"bugs":{"url":"https://github.com/doczjs/docz/issues"}}