\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-211ab01","dist":{"shasum":"6aaaf4bc225608b45158dc7f3f3ca464bde4197c","integrity":"sha512-nC8P/7h4GAGc5Ivw7nsebWhV2lVdTJ2q3UxwdS/DwMyGVPBido98bMvqRfvhy+KYCliBGDQAY9rQir1nu7oGBg==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-211ab01.tgz","fileCount":16,"unpackedSize":49768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBkDKCRA9TVsSAnZWagAAbRsP/iyyJLn7AUv3TmZ8k/Da\n0Uz+/Ks3UyidxE+aLsy4e0k9L6jMgSyd0sp/WidmXKsxykG5M2Ko6rW64BTg\nyXwITSSFhZQrgVy6B3qnTh5CHuF7+paQoaGoIYHXERhjXi0Kv6OiQOgYIRJu\nlAvdna7VCrG1RadGz6I0WKEfFjzsjEna6hJqgG1aSQEcFLay1r7nr6rKILPj\n2a9ArfSPLGjBHlDu2fSBt7kxGn2D72lWqKKC5uxjlmi52N6j+Szj4UWJnQvX\nOuqnGg7T6+7ZMmcboN/hCrvH4wKLudqWVhHA2G3rWEQYBmmjGfEDYHv2PKm5\nHFsgOM4MZls8ipgPk4P4MatEDI5J6ySqfOe1CaRy8ME3L+Rldy9PLsVjHFki\nztDLr6zdEIgj+TM5uiw/DaagB4JCDhUhAtsmccUhzzKzhPh2XjoGMvnjZg1O\nD46KDx+73Ui+Rqm1aw5sdtPG5gpp+Z9J4+RnnJYxi/4XdMQbFM6OIXisSDKk\nhkrV/sVOXECizsp3PP4LTzTifwOxKUSGVjNM/c5PI3BD1DRGO6zDv7uD+Ta2\nhJwcHUviJsB9Nq+PoLwCUW2jBZHTn1NYkwzU0iJ2ezkd3eFBsixsG1A7Yw5l\nRmA/3eaQFdnwhJwzn07FEh5lcJDnUBUSAoLrKP8zXWGTScuh+MTnuvEfzRWu\n7B1Y\r\n=JUdd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCmrNrRNwDDLL4bwzI1fHuZFU2FClo9YwAmx5VXdgYpAIhALrt3EgeTvrsWy9oGke7b2/ytgMFkqCp8CvVLQrr5SCY"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-211ab01_1611022538160_0.2173856870949975"},"_hasShrinkwrap":false},"0.0.0-33f17eb":{"name":"@code-hike/scrollycoding","version":"0.0.0-33f17eb","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/mini-browser":"0.0.0-33f17eb","@code-hike/mini-editor":"0.0.0-33f17eb","@code-hike/scroller":"0.0.0-33f17eb","@code-hike/utils":"0.0.0-33f17eb","react-smooshpack":"1.0.0-alpha-18"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-33f17eb","dist":{"shasum":"d3e43d0f89bc7a7a3aadbb492f9cc53e408bc321","integrity":"sha512-4JwdDU13aMn1pcaVt8/HoBxDhJo1Cy+H8pCgXxrXM4Ov2NkAcqRPoW8eS/8dlpa2wP+f6g2g09ZiJdPoNcyYfg==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-33f17eb.tgz","fileCount":18,"unpackedSize":55627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGcIJCRA9TVsSAnZWagAAhB4P/2umt5kVq/P9FbaxlGkm\nlsolwZJOo8+nNV8GyMr6a8nM86fA+K7+jt8uZNvV+vYPQcWmWS9/uAnW88Ht\nFfUOjPAEPIfNJf/9TlaK5Wvqal5XYPJE1LZXqWZPX5sSMgm6BV9R0vp5pjwk\nJdZHlvxpamjSClKPa4V4qACIAJQkpo2h/P0v30PnGvdsBy35zIJZEeM5dVI+\n2og6ZKWsgtoRgbUxpBC2qwn+pbTxCplzBWgfcSc42fc5jw/I76z0eJxxtI1k\nBuGodme7XEeohklgS5EimnG/3yGqkuE5ZIrDwsH+nOvhlozrA1ZoiEbf0UvR\nQpNQQYGcWViAdu6gXsDggM8q31EZdWSVP8OTzxqDIzRb2j1eyq556ygruVar\nHOUrccR9lTsWE1QG+20ZpYZF3gfGozt8O/O8OqprOOdIfFRXH80g/D441Obn\nRxtLVKAsc27/Q33FWvxxysf1WluQfcjkmwnIyZVIkzrCWMwLNmhXTu9DWZuB\nGltf9/tQa52PyTn5DIf9Evt0iwGRZaEZTrDNO6WuEav3PKon4Ox31IFkFOWM\n5JSP9Pvc59W7rNeqS8WCvufbMWb3SA2RsD6e2cbi/mIh39PBIebbyP6bFXnG\nP16RIIS9E20Vzmzl4JgN0NglBTbYZv0WbNdcYAcYwXDlE1UqYoB2I7kXkoaH\nBcF6\r\n=GxMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBcZKfeXLYsyv5wYCp9PWr7iRaKoP1fCcjOnheKB4VJQIhAO0dud9xiDYBpl4pCyc/UeHrqZh6btKtUEtVD3hUM7km"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-33f17eb_1612300808724_0.8487060140774043"},"_hasShrinkwrap":false},"0.0.0-b57b267":{"name":"@code-hike/scrollycoding","version":"0.0.0-b57b267","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/mini-browser":"0.0.0-b57b267","@code-hike/mini-editor":"0.0.0-b57b267","@code-hike/scroller":"0.0.0-b57b267","@code-hike/utils":"0.0.0-b57b267","react-smooshpack":"1.0.0-alpha-18"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-b57b267","dist":{"shasum":"3eb5ecb22115e6328f469bacd7c4d18e6a944e70","integrity":"sha512-Abs9QWpEA9PW2CBQ+W60otwlOVvOPIbIRiVmxSLwFQTmRXQAdL02BAgOu3dCB01l/s/T52xh7ITrK0+cmzsRvg==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-b57b267.tgz","fileCount":18,"unpackedSize":55863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGdstCRA9TVsSAnZWagAA9c0QAIzcLPnXThz4NXFDeAFY\nAKcymcGectmGF24bDgDAm/mdYetbJ5YoDytGm7QJHMOGAdWd3f95ExXT7Coc\nc5fRHiq5ahpn1Wlne+PZmXS2tBQBkyMfxFellU3xo9T0Ntj1iMu3CM8NKzrL\nfIh02iZ/ttuX2CSXvQmBc6ZNAQcG/DX/6cuvxx4/dxKulb9bVSITMSHWYw5a\ncq1hMP69e+1VLazFW8KTc08baGLysoFvNy0x3hMiSrp4ceXpV06MtokI0SUu\nLKUw7MiyJsqj6WRXW/PZeK8e50pXNOo6stTN57sBKEKseEV5kdglZwuxmVDf\naR97/Iu+NLgTzDvXNbab1XvRkhaZMEwcYXANsDFQ95JknvWrl8p2OXcafWVG\n5jl3tDJY1U/0xLpXAggH37EfoHRBW9NPnA6LVXJGVMtqk3unnbv3XQUQrwM3\n/+Et2hZsVUwZwq/nhua4O73+GZ2AuvdLczRexIcFQ2YcZ36k6k8PpfkjVRlo\nwCJOOuX7J+BMh8mMzQLkzdKPvzPoKks1BR7WXQYfUUk0qPY++m4EQ2Ftbecq\nx+7psoIQilP26w38EVTme57pw82pKMl479ol5WLO7bQfxzJ1TNrMY58ODTYG\n4f5RqOCRwEwmf1y7JwW1oOOtnS5sP58mNHjxHJ7vMZR3fPJ9vw7Ojc9y1N4y\nnxox\r\n=P/Mw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLPZumr1A6OeutTPhvLPFq1JQ5wBRV8A0qdKGqiC8PAQIhAJ3OpjbkFI5mfk1edcnUnaBkLMU8IATs3wJoMhMYGqx9"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-b57b267_1612307244721_0.6266856541574639"},"_hasShrinkwrap":false},"0.0.0-0fb8a90":{"name":"@code-hike/scrollycoding","version":"0.0.0-0fb8a90","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/mini-browser":"0.0.0-0fb8a90","@code-hike/mini-editor":"0.0.0-0fb8a90","@code-hike/scroller":"0.0.0-0fb8a90","@code-hike/utils":"0.0.0-0fb8a90","react-smooshpack":"1.0.0-alpha-18"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-0fb8a90","dist":{"shasum":"9e15722469ffb0303029869a460e2dfcf8a7ae74","integrity":"sha512-SZLyE3lmqsjsJpxdzx39oJH1D0MGU8PNEoF+GSD3SRA0PC9eK0l6Lnp3T0OhE0dqEJriGEpQ2iwle7ysXPXeNw==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-0fb8a90.tgz","fileCount":18,"unpackedSize":58970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHxH0CRA9TVsSAnZWagAAVgQP/RgBDnA4jZqIoIGJeYj5\nu4lEpRUzWmS5Kbf7hWX5+iiV4dt4meNJzz7LVvXvg2/x4b7K6XumHheO9+w/\nrdHZ3OclrO+uPJ6rVk9LxQEYqn5X+y2AXXaVHl4ybHZy4D8Ovvbcfjm8gHEF\nQfT/wK2vrQYUNTDr6ifV/kFRlQMA+P219NT39YxIbYMT24EqCFcFpntGqNSc\nSi2aGnDE+HREtbwP228BJm+ges4v82DN6f1QEk0lIqGRLzmhMR6/YvBCXoOl\nqsIZ+ZHaqcQ64NEggL/lImNL+sYsWDDfBOkixhhIr3potkoda/wxrzkyTgaq\nZif92kPAXIIiMqDlWNtQybpXnDQCMN1cGKV8Han5ACwD4SBY1N70YpOQKY31\nG1JQsAeAzRHrIYHBI+cGTzs8NSKFjwUMsLKHbbwKrh+o57gaEmUrjTLjyQ2Y\nziu/QUTq009ZFtB+Dq8i/JUGYRUogljHaEVElrmquGScfDP9Qzh7OGMSrQVC\nsWMq3sOO5LcoVSldEKSJEy0OTvBj9YncRgUZ/dz0b03/DUIuv7KVV86fAt3P\njXuhGTK6Bl8MySrFScwC5oMVkaPzlQ+1OU3MhEeQRm3MzqYCDYh346wmRNya\nXZtCv79LxiwqznNDvpTdXUHPwAPrIxkvTfdpJknTTz67yX4jTCb8+Gb8xpzd\nufnO\r\n=KHeO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuGFe6tdna3tIPfc4K0bv/3a6wvh+vBs8S/2NMAb2eyAiA1VJQSvO7IUnwfI3N+2hvl9FVMGVzY/QSbj86aEBM0eQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-0fb8a90_1612648947706_0.7530639058100106"},"_hasShrinkwrap":false},"0.0.0-aa6efee":{"name":"@code-hike/scrollycoding","version":"0.0.0-aa6efee","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/mini-browser":"0.0.0-aa6efee","@code-hike/mini-editor":"0.0.0-aa6efee","@code-hike/scroller":"0.0.0-aa6efee","@code-hike/utils":"0.0.0-aa6efee","react-smooshpack":"1.0.0-alpha-21"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-aa6efee","dist":{"shasum":"867f5a32984bac4fab04f76114154ebde0a28765","integrity":"sha512-ZLXEZ/m9maqYhMqMdraW7bV/SRLBTms7GOpYUaJo3t++XFnULSe3CnQOodUnmnOfObnHeoZeJZJjK8MszCnzUw==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-aa6efee.tgz","fileCount":18,"unpackedSize":58972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHxlQCRA9TVsSAnZWagAAzmoP/Ahp71MiF5gdRZL8LtLg\nOz8VyA0RJetNoiPGYHuE+iR1IaPKRaT4hWaW+ljpQQlSqR4+/68NvHBdx/Lg\nB4NFuyLee5VpGqqdxcdUexD4yu3giKxwK9yeFAwWRjg630/wjjzqhBgEhqRN\nRx12yxw7IMf7ducY0eneP/qE5p34ZS+86RLpdGtcpuuKFIvncCnPXOJzRB9e\nfOInDj7DJrVMd6R6pYhGZ67ArQaEPZwLLfLfcncL0QprZdcgCfKNE8xYYBip\nyHSwrralK2/myBZaaHmn+HPMegcYPFlkchkrb6AzVbQp5+aEbSpmcQkcoRLt\ndI2I/L8kuOx5hfpk4s1L6NfbQdmSPaq2glweXJ82V+PijcuP0e0i3iWmsU9J\nzCK2sS9ryqGK3+2gQaNyLCttIOHIx2fHwsgFkEN16RZHhq81J/WBxCHCh5jg\nYDEwgFHyHBAyeyQVwkjkjSRuA7S9vYZ6/3tenZOvuPitgVtjmBXqpUGC9TV7\nXO8/PxiTcRQdRRec2epsw98xngNF3scKtKkTjKHzRGJbHo02gZdm8mdZeAt8\ncH9g66gV9EwNlDSV2PXq17WDyMgSu1VjKz8vNlIcZb69FpGxJ4PdrS7G/3ED\nCWn//sQz4zdwrwshgrSIMWGCBva4mZufnsvM0hxftw2Q7dp12L7M+y2nU524\n+dEa\r\n=Pmhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrbXSc1k5iCkPYwRqmGDWDRCHCDdlY1p+naC975XYPRgIgEhziNSb0zL/4sK2MOcDk/qwhYG9x7R5eJMAMN/ndAw8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-aa6efee_1612650832441_0.7105300582571883"},"_hasShrinkwrap":false},"0.0.0-cde697c":{"name":"@code-hike/scrollycoding","version":"0.0.0-cde697c","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.0.0-cde697c","@code-hike/mini-browser":"0.0.0-cde697c","@code-hike/mini-editor":"0.0.0-cde697c","@code-hike/scroller":"0.0.0-cde697c","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-cde697c","dist":{"shasum":"659426f204cf85d8fce1d5b9d500cfb8f3933ad5","integrity":"sha512-ZqrR7xisERBkVkqo00lRNpMKcpaCl39qZvyJ502eeyQzWMfnJWbgncJQagRLIm1oLUQat3W70ZEtWN50syOP8w==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-cde697c.tgz","fileCount":35,"unpackedSize":80471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNUcaCRA9TVsSAnZWagAADvQP+wTfK6TGOVyuruocjSSU\n28JP9B7mLDQuwVK87Uf4Mb5g4Vc/2LetaP0DrcUOZGtVAshrsH4t1KnoaP6k\ntzFPx8qcd3sZSQVxu+RsfO1Cvu72+uGIjw2KXA6bc5MkynduS/lt4aG376AD\nWqf+M7wHPyhRW/Lls413wU6FDHA1YDEekXzMBhbbCo5x9lmPiKwp0A6j5F1H\n+YxvnPz3rTnoI/38yEDCWRtftYUyWEYZSIzFXCCAu0KGoimR11862GfFm57t\nraPklwIiSMCCd4xOtjRgOfLNtZc+ExGwT9GSglHgNLeFNW0J/XPQae8+y7FR\nDNWimoc7+puJcIgny0dO0l303EYZ5MA9nlEQId0oObyaxmA8IqFdRa1AftHV\n4EuOKgxF1N1z9CdbKXl6o+zf7KTxAKVMSnLpacNvmAKCHo0YCScGrdU73rPV\nk/UXz4RQ2doe6dW4gQhdBSyzq+FTn7+u2VejFwegp/eazw3qcwXjFB7cb9R1\nCesz5ID13vdCuO9bnc3rULJe7ABOovIwRox+UzdZWdzRA/6F4E03BJW4/KJM\nRR/wEg/Ehu3DnPztMzsFfk6p6db1lTatNuTeDM+eUVTaT3tb4UGMFhNYlIcX\n3a/+uuf8RzGlEX19KOoX9qM8XFWiHSFxPmVXKuspcs7mYRb2+ocpn1sXqLZf\nMwBT\r\n=CVD9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGH+tjqOT4bP4Au2448aSOwhdw7XnMzmtfZcZWfwNLTAiEAsTQwkrvrCM1wh8t/dOlI5OCKVZ1/PS3+H5gJhnWkqa0="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-cde697c_1614104346490_0.049009308024348996"},"_hasShrinkwrap":false},"0.0.0-1f0ad83":{"name":"@code-hike/scrollycoding","version":"0.0.0-1f0ad83","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.0.0-1f0ad83","@code-hike/mini-browser":"0.0.0-1f0ad83","@code-hike/mini-editor":"0.0.0-1f0ad83","@code-hike/scroller":"0.0.0-1f0ad83","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-1f0ad83","dist":{"shasum":"b7da8af893bbafb166229209180e452a6d48bd70","integrity":"sha512-s4zz26ctmZP/ZfFEILNoxO7Uqbt3ofSyqr1MFz8r0PTD7zgp64pDUIbVSEyeMjfOKvna/Ez13h7QQRK1/ZZnYQ==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-1f0ad83.tgz","fileCount":35,"unpackedSize":83734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNpr1CRA9TVsSAnZWagAAwssP/RmULovjnzEePMd/MKmS\nAMhkYEqadA5k/9GpOAkd7JA2uQrZl+H1NojvcWilfoX4PhzfTCpirNF7BTLs\noXQjbj5Vslm+3whJBTuyhq69VsS1Q1GLMvnux6mDsMpETm1FazU/d33bxw4C\nvSm7SGoErj6unaJk9eyGFxmaO80H6BHKgZHh2M+tXXILAJ1ISe34lQ+Od4RQ\nafe/5T72sosFkVku42f9Et/6X7BUSUA9CaAPwGOPFqnpgpsejwNbPacekUvl\nJL0k17vUC9kjcyEtPtnEA6TAP/93C3BWLOM5zRZhGRaSLNVP+PmgNKp05IAo\n+KgQNF80lWv5YElvp0fydfjahUbc0EF7HYDIbLDd9UUyKcMtehk2/+XJ9di7\nhjA4n5YccHLQn2OCjjOC5dR3CR0tVQcJjOu1YaDp/gQVSyMw5eE0/d924bQn\nzQBwIyK8ptPzQOe8IGIBFlrv/EDxKYQJWK20aEouj/L8sza1DWX1Ga/1iScD\no20ATnr1OWVC2c/j3SjSVrLRnBeaxPyt4lx7xjC4RY+tO4gD0b3DfHLM50SS\nTBKMSQ8W/JUKU6GoP633qw6TYLStKHZFb6vcPNZLzzA0gzi/NRmR+qteGt1/\nl8rjCjh1Yxs+EiYzZD7uViGlFbcvX0beZkrtfWb/Z0qy24Yp1TBDlkNn5bC0\n8Ktz\r\n=tOxs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxg9punWmOA171Jxk7B6fnFI3sDVA138uuK/uJ8YOI4QIgDZg2PUiF7dx0ZYXZDm4W6JkJeE5ANJB0RWH8elVhD9E="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-1f0ad83_1614191349145_0.46532856802756406"},"_hasShrinkwrap":false},"0.0.0-e48fa74":{"name":"@code-hike/scrollycoding","version":"0.0.0-e48fa74","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.0.0-e48fa74","@code-hike/mini-browser":"0.0.0-e48fa74","@code-hike/mini-editor":"0.0.0-e48fa74","@code-hike/scroller":"0.0.0-e48fa74","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-e48fa74","dist":{"shasum":"81ad102d504662602f00b4f699665f82fe9195ba","integrity":"sha512-M8hPhrfT29DSOKlw0+1ZFLg6ohUVZi/CzXFfgA8wUtVM13zk8aXCKATGWsLJ4BzhOcheE0Fxu8lEhM539E1BYg==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-e48fa74.tgz","fileCount":35,"unpackedSize":83514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOCvYCRA9TVsSAnZWagAA2BsP/0vj/YrjXQVZlrkuy7LO\nf2tTqtJW7vreIom0SHEQLrqObKlbJ1iqZjqeD2izTKNGfySIomemcChWTmXn\noA1hjc3LwnmTRWDa1lr9bYOEV3YVNl3Jf97lZBsjE92+eG5esl52aKqBkQ62\n3GyOftjQK1NQqUR+I/wBREHJMOhraDJPZYmk1B8gO0JdiT0qNLIZ0cxGj5k4\nCgnLM12oMP/1k5lRSkSfWUcWYI3WjUpSt/JvO7zt4C6J/TBaCSijMlYUa2Bw\nBNTF+I1ROFDMUMwZGxF8iy4sghKcCpd4mepoRvQH/+5JjK3wmYZyU4a87ZVn\nTy5tmfNa69qwZu1O6Z0TdIa8FO/xZZnD18VoiZV2LONv+P3fdXLe+2hEyEqQ\nfRFPChPgDC8Fgq3OCAm1HGPWLhXkkiZQy7AGKXicwRzqYJEHkqWXnnzV6ASP\nS2RWQrycFYwG3dM/bqVJvoDIcJ8p8n4hN5+ogziZ1VBpjbvoCii6UAtMvl2o\nZMtAc/zLTPJhRqsGJmmLHQ2AWWhBH9TiPJHxQBAhhYuRTliSXnjfbY1WUb89\nXDrl6dzA2LFBCelBU6Fvydt2gZSIrMA1vIIQzXjHULdwHOJwZc1RjQbs+cH6\nNXDbe7dd6lRXZ3sKgPR3QRDJsl7Q5znJgjof/w5Afr98Zfgxl8/IhV0dRpQ5\nqiK8\r\n=RwsS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3wNhjB8h6z2S0CDaLsPqei/DLxnAa2/Cj52s7YofGCwIhAMuzmAmwAuMMyl5YhUZztx7lfi+TFn49U6qX4/QL4QFL"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-e48fa74_1614293976329_0.8318042442914839"},"_hasShrinkwrap":false},"0.0.0-6a4ea1c":{"name":"@code-hike/scrollycoding","version":"0.0.0-6a4ea1c","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.0.0-6a4ea1c","@code-hike/mini-browser":"0.0.0-6a4ea1c","@code-hike/mini-editor":"0.0.0-6a4ea1c","@code-hike/scroller":"0.0.0-6a4ea1c","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-6a4ea1c","dist":{"shasum":"b09dbb1919835fc25a54e1953e9f81dba3009863","integrity":"sha512-ZGy7VlLluyrFz+Pa768r5LeK4hiJJx+B92rHHHawKSk0qTXiJX/Y29IEqYSl46+6Begi9vI6DcbNnNQUTFeZsA==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-6a4ea1c.tgz","fileCount":35,"unpackedSize":82749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPF71CRA9TVsSAnZWagAA71MP/1oWtu683PUup15xmZvv\n01A9g+WPahcziQQXizQbkiUk1QmpYFiVVkXM6wwQVNPMUzirFAGN6HCiMFvC\nuZl8FoTmAbTLUH1tprEgMTiedRDcEhGnnXt+81rRIDsCY+B9p5xeOxI9gG5J\nBNf1Ta0Xf3K5sdzMTLrZl8MYJjS5pDIGxFRNmeyaLFR/yY7IF1QkGBpu/yTt\n/nrfELr3NFHiqWOFtqfokb1XdSFNjwuuNm+8QJaTLh5NsXciS6zpym82Snme\nlRid4H+zEkL5n9hYnxcxafQow3dHOQ6SUvuERe92TObWp8FsdE2sc1/vBCFU\nUjOxq+79bpCcHy7s4p3gcMLy/PvwgITz8dyy5evXnLR88bHwOTaTTRPDh+BV\na6it1jWNW+k52KwcwZqZRCXhFpDd5A3rI8uHoXeXFUlaFrLzISogG3TacAKM\nG/MhfSgjOXnPw8T65xaRgoS0ei+YD19atrVhQUpPaUNDv9TvLjx6fPsr+LT3\nL5Kr+ocTA+sgNZTuLaG2QufpO3mYPW+MqIjGMj84J4QiP+XGxF5tvFetOtjV\nrbHMd4kbFsq1tfbSVO2LHLiR21Vwx8YXrEL98kjXaBcJG4zQH5JJ2WRpN9A1\nzBs5zuZgaLnKuwLNV/4+RyHMhZm2zNDoNT3bWE9H/9bq0OuvlMIL0i4J5XQ/\nZa7r\r\n=K1LA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGDJZvd4X8B+avls08oDAf9s8pCOxE8HcjCeHgpBQVuQIhAJ3Q8hTCiI/y5lzC13X4Yjrdup1LGGeSv/vK/uatc6dM"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-6a4ea1c_1614569204603_0.3642547879226363"},"_hasShrinkwrap":false},"0.0.0-4333a8b":{"name":"@code-hike/scrollycoding","version":"0.0.0-4333a8b","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"script":"ch-script","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.0.0-4333a8b","@code-hike/mini-browser":"0.0.0-4333a8b","@code-hike/mini-editor":"0.0.0-4333a8b","@code-hike/scroller":"0.0.0-4333a8b","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org/","repository":{"type":"git","url":"https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"readmeFilename":"readme.md","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","description":"## MDX Usage","_id":"@code-hike/scrollycoding@0.0.0-4333a8b","dist":{"shasum":"6942887e71a7c36912d8756fcd49a30f714b291b","integrity":"sha512-ZkpUqT0+0hj6NKX26aWCcKj+sE/8mWgXWKlBEpkUPkFtykonAfyM0z2z7s0FtqSrAhMnDNqCPhRJdTQUdoW8nA==","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.0.0-4333a8b.tgz","fileCount":35,"unpackedSize":85873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRYfGCRA9TVsSAnZWagAA0p4P/2gk3Pj0sqk7W1q2DZvs\nBE+ytfawqgVVJwM6FoEzogRrDs5gR/v4FGz0iHU+5SZZ3Y88/PKyczMhUDhN\ntgeFJtKbXyuVvG/NZ9ouMV0yPUf1rgiYtlsljsC3R4XtD5FANIGaQ9ysMfmD\nTPTw241ObW3jP8RYF68CEz40Xpdsi09qFpawamPiIYgEfJn3m8FWV1tqOaPc\nLyqOeN4nDngNjl2wVByr7iRkCC2LUDm+7Zeh5A0zldmny8NbQAOyMVfHwXNS\nSTDZui/6h7xTdosXKQPHslNHPoa99aYdOuDnVrsI61A+6YCZYT0+fM0RKz8F\ndNBa50KokbgLYW4FtZ/aN4rEk9jr0xfdVD6z6G6Vu1Wslm2Y2qDBtB6k1CpK\nci6ea0ndQH/6o3v9UYw8GhDg9lyfUd7H/YLM/MHmiWgtvfDYwxajydYltXor\nwfDknq/8AZSRmjnzntyewsF6CFRbdZcQ9HGoc0I0FZwPE2dp/UO1RMXdZqzK\nEqmJEqfZ+SuX+IhHU0nrps0ZkT61mWfqOQ1Xy9vh86dTJtVC3ndycXcqW+J/\nYAwj8w77OzIarSvJaWyAr3pXAwr7Jj+ugYIBc2shEvSB4tcVe5prP2hWDOkX\nxUKOHjPlaxGbHjpb16AgTivcMNJ1QX+eIxcD3IPr04oBhMJB8JQof+UomrSD\n8cTW\r\n=XDCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO3CJniiOLEPb9VP3ElRcvBWUpMKkxEeV6NODXmCGHewIgYP5Lv1cA0Jq6pka6Vzi1WOkYEnsmJ6DZKlwT9g7zobc="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.0.0-4333a8b_1615169478106_0.9720666983970054"},"_hasShrinkwrap":false},"0.3.0-next.0":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.0.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"^0.3.0-next.0","@code-hike/mini-browser":"^0.3.0-next.0","@code-hike/mini-editor":"^0.3.0-next.0","@code-hike/scroller":"^0.3.0-next.0","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5af3995f94e4c4c58f7db87c063465b4741d3504","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.0","_nodeVersion":"14.15.3","_npmVersion":"lerna/4.0.0/node@v14.15.3+x64 (linux)","dist":{"integrity":"sha512-2NbmxSPq4X1OjHlomsxjI19QPE52W+cJVO2JI99XRH2vawaU1LxABDfDs788SbrXtFXR2vxkIrzf3hZWR73acw==","shasum":"c99190591612f2923dcf2aedb6db60b04e401316","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.0.tgz","fileCount":33,"unpackedSize":86982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmEWCRA9TVsSAnZWagAArAEP/irb193EgmHyfG6hhx6G\nKlqkmyGW2+CUuWCVS7C0DauU/2nFvD0Fs7qnnkKpbVQM4vDEj/TMaQfL06/v\nm7t+X2seKLCmrhOIdiC+GFJrHE7clqndKXk2v8bumZJ7qGnqfEWzLztgLRhW\nTnK6dptSg/HAoO9ZhPE+h3UBA/mF0EovZCkBDwNlJcLpqy42f8Z1lDLZJPPN\nk0WlD73LkUOFbPW8i+6f/MS/OBaX36gj6KKLBzlk170DcbJN+sG/lpdvKr2/\niNNX6gKXN6o8Y+76tXuV66VATvsYALwqQx/1Kqu0YTAmO+2SBHChEOMmeLOL\nMRVK+2r8ZDbrGHG/uoqIRG0cDlOL1QHMbpvnL+oZwcFRhcIC2qFhQrtiwmxg\n1h6N9sXMaqflC73k2c+EaR7j/8T7lPKIzNOMHgeO2+d3YfLy1l7w/tzAxJQq\nxWKfhWlSBThNoHAKl/DlfTvLZc4UMG/kO6iju0BxK2XixVQZ0KsIFVqD8n+k\n3/mu8xCtoz27Qoj4n1s9XCJCnSp+jtWVV31fPs33vhMHItb8BzhKPzZTHKMO\nfmPmarHlFoBJyUfCIJGKwhtuHi6mOtZP3NFLj8JIeThHpBddn/GBlH6pfDul\nmkOb8uVDc9z4AfrzSbbptGi+VCisxsne3XNljC/8b+vQwMvuuPzPnyLWWsdw\nBlUh\r\n=2yv4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDon3GVZx+fMxykzidD4SXuwkBo2eWhAjj41uQqgdauAAIhALIbfJp1EApyjiSISBpIE0kNIp7LXKdTQrKmeaz+ipqK"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.0_1615487254254_0.962630169309004"},"_hasShrinkwrap":false},"0.3.0--canary.32.323f72f.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.32.323f72f.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.3.0--canary.32.323f72f.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.32.323f72f.0","@code-hike/mini-browser":"0.3.0--canary.32.323f72f.0","@code-hike/mini-editor":"0.3.0--canary.32.323f72f.0","@code-hike/scroller":"0.3.0--canary.32.323f72f.0","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"323f72f61683cacadde7f5396509202ae58a45bc","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.32.323f72f.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-Aw+UIq7851nJ1a9NoId2PHeiiF0cSaYvuCewpn9vCnIpp/TxbV6SJ+Z2Qylxw39miTDR9PpieRRFyaPwlxDVmA==","shasum":"2267e014088aca0c699b45f3d6d9f1c56501a50e","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.32.323f72f.0.tgz","fileCount":18,"unpackedSize":79324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSqQYCRA9TVsSAnZWagAAQEMP/Rycipc0mRte7n1CSSMr\nhHswTWudCeulqJmC6pmrMynyq5TUs2HNOcKdjSI56hUl4h81HDoHFTeKKG5o\nh5bPKR4diMXQ6rrT50fM2+IqfuERBPBTkTRC1OTfGVAnZwjLUN8um9DAPirB\ngsxnz4fejob0xKQ8qvYyTwaPcN6cJ6mcmN/ZGu1YnzaHCAj6/GnBugJV8d2M\nLxbnUvAhAqubXm5tMIALwRvEPcR7VhI9KxHGWQytoEW8p2wPJu/9rOfwCI26\nIOqQg8OWmn6C43tkphBryehqzCJSqBi2fgnuvZBXpCrfVjJyMkn/nZIIWSfA\n0vOl8AI6P6W0FdZFE9bEwn46JtF73MYo1gFHY5hlPrUn8XwUI1jVh9Vc0zSf\nM1r/9mr4xXeq+qFUkLic0noKND0hxBd2yVwoXnXCeUs/Hh5ib5y6ysJvVQkZ\nAhnZpZJBiAuKmJD89WAvhhw+lREZDMYmL+rFopD1GJHohDSwvUG5ysa6QBwf\nJw4EMAIUsPvYQFXmOswVGBRIjz8cYQmLoPGTB3loLxAUPvnyeXvqYLojhYjU\nos3NLuvMySwVUgvm2H4vX9VHDdx6zORhea5H8IzxLMmRW9yoFdAq2jQ/vpeC\n1RHc2BA6K0WbzhA0hg9OoErZe6f2B6R3BXNN0K53xWmfwyLNEbluB/8EspDv\nrUL/\r\n=eLGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaejRtqqcE5yX0p1lWHXyAzZvGBrTK6hB3QWgxZ7j7oAiEAz7WcTyiM0mI5cOzH54B4wi/XMx7DvUF+yQ489wXPDMs="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.32.323f72f.0_1615504407697_0.05734522303037237"},"_hasShrinkwrap":false},"0.3.0-next.1":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.1","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.3.0-next.1","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.1","@code-hike/mini-browser":"0.3.0-next.1","@code-hike/mini-editor":"0.3.0-next.1","@code-hike/scroller":"0.3.0-next.1","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"18ec9963887e9220e24ab2be9bf553c291f1e2a8","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.1","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-faBe8ccbFO/quOhV1Aet84VjYpc09ERbPquac4fzw61oRxB5ajHJyBcc4mBLYGweOWILGTBXe7+tqpbHyAddsQ==","shasum":"c192f56ed545f2bdb7bb3af952ccf40ebfddbb66","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.1.tgz","fileCount":18,"unpackedSize":79240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSqXoCRA9TVsSAnZWagAAf+AQAKEgX02gOMJiCXWX0E7J\npRbfNkSZR2XwPv6EezHqsuROhzn3JePqImjRq419X4JzUs9J4WtFPNR767sP\nPOIHgvYJx6Nz1BRdanPkhD+fm979TO1v88KJl4SSoWhs930kzfY1jliHhhV6\nBlvAkk8UbzYvq+MwEvlJVIen6vr5ppXDaFyeF+k3CyVpEt3fNdHn4vZZ4biG\n3yq4XMvMtrhtrnVwF3zBe7cyjIwDZw/4J0ktRERws7vNOzXNc4jkZDWSVQ7N\nqsknHwkJRlAbHbstenwvhAdUCVMWURa7PBgyv0eR0FIvRrkRxP8tSbIcw4nK\nK80XUFmjf2tFV1MXfEEFUEcUhk3XTd4i0ktoAGu/kNaOpjVGINtrmVTs9GA5\nqxfsX3HXxUd9QcXB9ilKITm1Q1RVuCgarAP2mdqyQOu0HNpGHAbgL+tniFeA\n5+HfSvIWKFRtjWnTFGH2FutmSY5pByTl4iPbwIVgYDfSacH7chpZcnHjCoIv\naxJOzwYb5WcxahCOzSaTtZZ45b6/Vx8cMpeJc0oVHZ5G+gMWLd8cYsVcVAjo\ncouyzI0hSbDl3rfANUS5JctNrno8ADcJhNa7m+ooNuwU3ShRci7DYGWQ01SA\nba2lKNqytI7+60US7IBtNnBN+NSrxY4BGdhrLvkc+JbxHIehOHP/qQT1bkb8\n0m07\r\n=GdZ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICU7cceX4cPSszldyoi8ONxEciVhmG1VCMukccrijw3aAiEAszixlsNO0tjpX1Kr1mA4lXhKossIjUIJBnAG+ieJ1eA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.1_1615504871679_0.8866207882906258"},"_hasShrinkwrap":false},"0.3.0--canary.34.f4f0bfe.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.34.f4f0bfe.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.3.0--canary.34.f4f0bfe.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.34.f4f0bfe.0","@code-hike/mini-browser":"0.3.0--canary.34.f4f0bfe.0","@code-hike/mini-editor":"0.3.0--canary.34.f4f0bfe.0","@code-hike/scroller":"0.3.0--canary.34.f4f0bfe.0","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"f4f0bfef366781ca65d41512cc3a6912c5cfdfed","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.34.f4f0bfe.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-Z17FfkpyYTnGfYGv2azL16wQ2MULMw4znXUGqYbubQaUmfihguooGRILDHvNrK9otqEMNw8ofqSOEb1339EVKA==","shasum":"57e0585b58e509dab49f201d21956bc07c00f742","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.34.f4f0bfe.0.tgz","fileCount":18,"unpackedSize":79324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrXFCRA9TVsSAnZWagAAwsUQAJhykQuwr52lwrrl7bG/\nhBob2ZHuqVjGxzNTutpSRfUt5EYpAyaYo05TBgQ82u5zp2XlFifI7nJqkT9S\n088yG1aFBDVjbgmJI18uIHvpVp2G8TBVicjBnr1+2yTXnnnU2o54iSjFncIt\n859IbsxSy1JrQX5F9gZfiVG/zHOTefkUgJfpbkRKjSxsEQJNJMMBOgXREsUZ\n26GcaMzsxjjOLQzca0aR6Flr9LyXBc7T1IAWbdZ6abe67GjoCnMq557KHgHd\nfSyXTTtMLG7EQpkaElv39DoIIhQ+XnqgtDvnVJEF8Wx7p5w8emHdOvmxBx+7\ntccTaLj8SQlP2QUMb/9Pwak4eGbl6+YRbBugrdzXTcS2ngL08/vkf9xrEFYO\ntEwdVNLWxbI+jMEUX00tHerMrFFdueGC4/HcD8/c9FO4Mwr/+0P+ntZApEj9\nmdzSjLOT41abdZvdhfbvhrDt3t36nNaQFUnTy/ATkOm5IQTb7mJjlP3T/kuo\naznFzb7gGLNt0Y3IqN5Ti88Y8gL1vRBexVnkuJU53b3urtooC3zJDOMNVXRs\n5U2/fdy7O/MmnrganP1WMpA+KsXqvst/RAO9glmgEmrVtqwpT3odNONuEviH\nJixBDGuv4xhpXH0DoyieAMBG4oTER4YB0WVBmAFZ3eMHEKPYlIOZWiKDVnvm\nYaBU\r\n=UWEQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjRkHdE89ZRnpwAqGgze+V4WoYs1zG+MLql9PbCjwP1AiEA8qMjKp5aI79Z6CCAAskyjsY9216dBPpsjg2TRrl/Suc="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.34.f4f0bfe.0_1615508933105_0.7045956503304742"},"_hasShrinkwrap":false},"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","@code-hike/mini-browser":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","@code-hike/mini-editor":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","@code-hike/scroller":"0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"269a97e9d5ac21fec0f226bdfeddd37c99664e33","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-kIbOx3ff04YMILnO83POA66cqeUeL1TN/YLQK/ixhji1Hk90kXkeV5rAB5B8iaRdqv5VztUjz5DVVyZZa0iVWQ==","shasum":"02e739b47b238f2435c8449f20318e814d3a9db6","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0.tgz","fileCount":18,"unpackedSize":79566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTlDrCRA9TVsSAnZWagAA6RUP/03jZz8SDEZHr2tjdQHW\n4z6eM3wWd5OCAbmIzLe2GphhDtFciFDpsUZCb4DECWntGbZd68JPeLf897t4\n9k2qukYGOlpw2aoFV1UaXPctb4fQF+ZL/MidOya7i3LQXXYSaEeXEn93v+CU\njwBq188/L2YxFiXe37jxOPhfiacwtdYplXYc/fapP3VLFIG2Lb+M/Bxq7AHd\n9pSS7ZoYh1JVFeJB42nvQhk8Iqrv+sIuf0J+x5qfxhs60IG7fnrXA7MBYaGs\nUrfF7OFJ1bxtwsXkTagGaE0lOUQv3XjBNjR82V9RNQ7C9el6a0g3u46cYQVX\nmkUt05WUjfCwlj7ItctI+7A95/0wW/RwDYs+BgW//ZBHrJZR9+7m7sFz521l\nl5P9qsoXurHmVF4IP4jEqOu9iNmrW2UykoKXFiyovsiPGqTs1L73UHwvTRuq\nREEnsFzU+MSn3vIPGIy3SzmRpYzpNPymybBuqo+jCX5NxLlVNzEjAyMdo3/L\n6jN4yi+RBbGHc2d+Z38qPC7c2+uQn8C+5VL2nsHXFhI+Nwx0SDM/NYnXGw/m\n3om4i1nJjZd4MesyKC09ewi28SXXgB9x07HNh64qYZ1+ouYT8T/RQ7ici1y0\nKGFNJsiW4Kz/cQp/uxan4UJZ5ZUr3c1IaaSCN2MW2o1+apV36L06dmdRcy9r\n0fR2\r\n=UIJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKvNakHfFmZkdEkczQSulz6mzLfEeJarcEqjLNcMY+BAiEAjCRFsU1JWkS6jW9AWolJyAERuTUsXRCZvLvu1+TXjGA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0_1615745258764_0.5237693541519417"},"_hasShrinkwrap":false},"0.3.0-next.2":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.2","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x","publish-canary":"yarn publish --tag canary --access public"},"devDependencies":{"@code-hike/script":"0.3.0-next.2","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.2","@code-hike/mini-browser":"0.3.0-next.2","@code-hike/mini-editor":"0.3.0-next.2","@code-hike/scroller":"0.3.0-next.2","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c9d78549b02682cd8502391b9f3b85d0ee5080f","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.2","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-GQGDMwI8da5+9zMaTk8ULT9MSLAxip8Hsc7NVBU+RW00G/qMobsEEiV84meQ3Gb+2oA6ikajVu9BILZ+PtrgxA==","shasum":"8cc9fdb0b357886130ffc02ce021b64837386334","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.2.tgz","fileCount":18,"unpackedSize":79284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTlQOCRA9TVsSAnZWagAAd3MP/3xCrD4wDqWf8Fp9cQsN\n314z3Ni4OWxl1hxeLHTFKnYS+j4U6WxMfCcUoVdWAvLh02cl06nWVFDSyQvT\nY9BuYEsw3gVTyWdqL7KuOvqKFiQWjErBjaZrEkPYwJJ8GnrSBczjMHRsjQRa\nQyygb/5CFaBs1KvY/1IQp4uzQJYJNS4As9uS8jMwUKKXF1q9mjlm8r1VaSE+\nhjZqjzjNu1QRe9hFNKO95qPBHA1cViRHgYp6d+0kWEtp65+7rMFv7L42QgzW\nvtRPXetKp72YET7aTnaePGnRJhrajkApvZkYhVjf4BWRXqwgrI7+fpXsAahP\n+N6QEH6kQC123HWD2nguZ+6CNyq9EKM95+bo18KNApuzpYd+DZ9nWg4egLY/\nuPCeiC059Qa6cR2RvmHUjukooZc3lqFc0+C0B3kXpiV1T1N6by4/+VkUkxM5\nqI9cGhHwRx+6Z/m8Qi9QqFA7MhgPzeEUixFw9ip+SVh7H3YMinGTN6ooyd7F\nsJIh0bIQj0rq+j206tfNws2cIXDpdlsNnKDteD8+ZGD+k1fZNV0rAdebW5uu\ntbW624wYfuawDjIbonUS+dk5Zyzr8satzT3l78PqmGJQkUA5L2dThvCFU8dh\nV9lcRZMrjL0faxJVfgck/9W9XCBwKoVt86TmwA+/fJ4x8v0tNAnYyk5NwQBG\nLtfU\r\n=NPrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHRWd9HSbXL8ylGmkD5qzaJ0LReRrqKeszg85labyuqAiB5gmwCtXzifjJD9OX2wN313h8LrRtenN4gO1fzyeb0aA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.2_1615746062045_0.5738410618213594"},"_hasShrinkwrap":false},"0.3.0--canary.45.6c84da7.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.45.6c84da7.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.45.6c84da7.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.45.6c84da7.0","@code-hike/mini-browser":"0.3.0--canary.45.6c84da7.0","@code-hike/mini-editor":"0.3.0--canary.45.6c84da7.0","@code-hike/scroller":"0.3.0--canary.45.6c84da7.0","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c84da7eb4b19bd4b845af42523b406ba918ff0b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.45.6c84da7.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-1FhOAgzn3TM66T0rPKV0VZjvnH10wM2ggkmHCbjN0c0oOd8dYbm4rQ9PVzYxsH6UEBV9KZjJSlgbPRx5R2VU0Q==","shasum":"94a38f392ac29b3626b4925ffb7bae43685e76ca","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.45.6c84da7.0.tgz","fileCount":17,"unpackedSize":58579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWZWtCRA9TVsSAnZWagAAqHsP/1mAI/2xmNeQriTH7srm\nlyhY2oC9Hg9XZ4diACwsJ6VpNC8hXg/20RjITx/VBxriwIpMPX/38XZhB34t\nYM0YGYgY9e5CIfSQTgiz/e4lEFYSqhX7sK1BDzxmyzFMGJTwvlIJTsCBgPwD\n5huKu4sJbIa4CYDMEFtr3m3deGOlc5IasLhovGJYzdp3iwje7hev9jZhBmQm\nRn5XkBDFGa0YnUBepK4NsapApr1kOZyID0kFh10kRyMZcfgRxo1hXgp+nQ6u\nhsYdHahMgh2KTXshzMTCPCkYgzeZF9MuuJ20ynL++4z4PH9jQvReiGrMgskt\nlLzXPsNGtbn9eS4pHTW6xDe4+Ygmk8iWyxyMqPxp7RmCSIgCK0pjYjtf9cMU\nSltLq7s9mYvcuX7n2698njjM1xHc8UMfiudGb+j4wgxw1jMg4EJ5koS546RT\no01j8x6SeHKyrvuevCHHn6VOqoOjBVW3P5fiNcC/hmSjKC8VHFswGpLRWg8D\niPac3rgKQaw8lF8y2FlSnOjgd2eIWdE+y1fCjRlMlamMHWWXvEawfd44VIvV\nD7B2bS4rsgEDJHV1RfHT9uaR6CkCK/OAxAzICTyyy0tD4FDcEtVVLhvHXHQ6\n/gOY3PSeIGW6UNh+runN8lQJau7ohj89CHh2UJehxmbdWh3viF19tUWsI97P\n3iWU\r\n=EbqG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaW+RKOfWUhoKVrapaj33Cb36dBLGWC0kO5tg0AplOQwIgRTQt6l2wObhGeBGX0mPoi30sIdAucw7lCRmhcl/ijKE="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.45.6c84da7.0_1616483757280_0.6999300369820844"},"_hasShrinkwrap":false},"0.3.0-next.3":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.3","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.3","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.3","@code-hike/mini-browser":"0.3.0-next.3","@code-hike/mini-editor":"0.3.0-next.3","@code-hike/scroller":"0.3.0-next.3","object-hash":"^2.1.1","react-smooshpack":"1.0.0-alpha-31","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"78537ebb04d6370e4b9dd3a8f35a10d6fd2c0250","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.3","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-8O/FNnmEldftdOeEKDHJkAi3+pWyjNV7B/N6AgBcbh5Lv8TLZ1+YG+WYwLCDMBvRou1VO/7F+s6l4leopy+b6w==","shasum":"f0be49e2bfe9435926a9fb067c835c3eaa5c27f9","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.3.tgz","fileCount":17,"unpackedSize":58495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWZgOCRA9TVsSAnZWagAA03cP/RrKIXjNykIXNNfD3oJ3\n2NixcVCio3Okv0/wWEv+i5KqzAhADbpZf92wCfRzgs+yzDu03ynkzPyHXUBM\nsvnKASv0dC59hYlin4/kq6troSywK+Git4U3P6f1/PvHBu+ldc+NhM1dbwTy\n/C5pzvEmUn0VJ9bOeIKZ5KDD+/G6e2foeVItJeb6Nf2zk/lW1OSrt9wHiR3l\nF2PocbLbwFsq/J31bXY0zSRh1miCZGfiwws0TNHa+OPPrW54FRlFAZJVlt3o\ny9oPKm58EKTF8vfsY5KroPyJ+X21EjaJ+II+2Jf/rzaOhjhROXFguFN7gHfb\nphdpFA75d+PYuLJN9eS7cKR/Dv2Ho0C2b1VajA7fYuwOcYKtGNTDcLThBe50\neoIEQLaEOV4cnT41KK/wUhUjOqmYr1P6kd18Wc3sZIdSqXRkZE21w+xBOmj8\nvBbC3/I9agGHTPPg6g5yHlsSm1h8wPDo73bRukd57Mf17Ec4/uNQcMow7jhh\ntjClw33JQw4WelGFplHTEjKJ6+TZ4c5tWXATfjC07V5Cumd3qjqpXNvR3VIT\nQYVxZOjqozcUoyCkyCJ/fyadRMm71SzQIdU/nkCOeapaBGaoUqzU30TlBNID\nkTbBZ8nb6hr5F0J08j52R6uHSpZbUt1bZ6bvTStGZD27mta7s7m+WKpq1XWU\nQtmN\r\n=GVgG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmmADkWj9I6SvCdahAGXBxcgCgTN5AwuygpDhMDpTGaAiBmXKE4ebmCERsXq5WrtCPIY98ncMy9TiE1z6eMrjFVKg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.3_1616484366523_0.38016377689733694"},"_hasShrinkwrap":false},"0.3.0--canary.47.52daf46.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.47.52daf46.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.47.52daf46.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.47.52daf46.0","@code-hike/mini-browser":"0.3.0--canary.47.52daf46.0","@code-hike/mini-editor":"0.3.0--canary.47.52daf46.0","@code-hike/scroller":"0.3.0--canary.47.52daf46.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"52daf46c233ff995d2dd63172c8d53060261e50c","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.47.52daf46.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-LoVOOiizPVLd45tAudCxNH6TdBuHf5SIvQNWxmE8jBY5pXckzR72IpqG+JFhuIVo7folsEaMewsSpN6uneo23w==","shasum":"37f7a465264b062df6780af00662d8b767c331b9","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.47.52daf46.0.tgz","fileCount":18,"unpackedSize":62649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWirbCRA9TVsSAnZWagAAPzwP/3rbPuaAciVmqTCdke58\nxRv+HYqqy64+S2KePy50zJZUfQNUQKfZtvrrFd8BkcfDcr77/liUTNKLEf+/\nYNdYxbTxoOPx8b2IMBiA9H8Mljn6EObC+FjStsN//78GJUHwQ3FjgFU93ezQ\nhhBajmDvVuOxrZAfJnSAp4doFgVz4FyvF2UiXAtlGQc/oYAsjWyj81zJOW5x\negqszDO/c8lJYoxUlH9MYnGECg2H86p7Kd9itGA5fN/8gNXHiRRMlgWwMSk5\nnofOGZLtOPRH+Z07Is74/JyeNI1N9+4w1M0fwz9ilQiFu9qbazo90efHz+hd\nU/6hMH6519aSC4zVyVFpEFlUVAbRTYl3Fhh+KCDZd45TyWcOm9zz6gp3hyc1\nJzevHfR/h3yAiPma2SECjX2ev0UG871Zu5+f7e/Jn5Bd0DpECCV6ftCZu33B\n7QF7v3DTLmBcpoTCVMYngBycvzNgGuaOA+fLkTfc8llELH+O45UtQnKp9ukU\nuFH4KO7uUGIYOl+qe6Gji2+ZMDnYxNIheWYNkfvIC8TPcKwewkI9jyuVWFpd\na5i00ydEbrikxUtdLBeqBQFnzT7544n/EmuVgmnhFcLkqeVwCutPyUmltd3O\nKRRduA5aelhDvEHxJ5g+1ghZ67GIAb2LqOhgAsXbq5aNByqrgYmJ+nS3HgVj\nhy6K\r\n=ZNE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcMmOQ9NzTBJrY0/Xw5hYwzZRIimsIzuPqX6tQJwoqMAiAddsr1YTINMeGP0ZKzQlw7g0fruFtZ8JodiQsB+Pu19w=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.47.52daf46.0_1616521947148_0.4558869670631478"},"_hasShrinkwrap":false},"0.3.0-next.4":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.4","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.4","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.4","@code-hike/mini-browser":"0.3.0-next.4","@code-hike/mini-editor":"0.3.0-next.4","@code-hike/scroller":"0.3.0-next.4","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"44ce0c148203f8222579db3c376d36a5ed414a66","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.4","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-FDdS99O4MyBuOa16S9kG/aJSLIOu0lWWRq/7yCEHY8yoT3U70I13FgjWc4e1Qs58Q2vcfxPSNqhgbQVsUApWLA==","shasum":"aa4cd830d7bd1a649b1f7cd7d82a5e38e81df156","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.4.tgz","fileCount":18,"unpackedSize":62565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWiw4CRA9TVsSAnZWagAAIE8P/1nByVikLvOhU4tS6BAG\nBS1Dcs6lQ5ofkdoj2mixn8gUt8r9BSmgdEpJt5woTrjpesZZ1lQ8Yt+ahz5/\nCO3bN5bbVrpx2TXqIGb50vLaXCNv6sgbcK3xCME1IZlTLFVxQvW9r5C60xpd\nSOoLsvdjGVLQrAIQgPitApDHDKDLcYGXMGvjaieee3cL1kZP5kvoN+gbyw56\njMrdkvtYj0w/MA9rGyzlL566LDGTULaTZ+DOV8LNzaabthh+h60etspGg/sq\nK2FB2WXSelsHR/LAXISmuURyZcJmdO/M2SL96X3k3+fa0ol6XfaqYXGkW5IE\ntOw3ohopMlwkC55hbrt7d2kJKeeaaZnESyXi0kp2/H9KPxq2DQaX6iEd8hHT\niiouM6kXNjNY7qk2M7/E5qc3psRp+FpTpc1ZSR2DnTc+Ro0mLdhnyGvrDCjD\nJOC6oZ5EIZoVADT0xzfH9/llggpPWiW9IU9oV9kHPb4/NnTWcttT5mdns+Kf\nghK4weRhSE6QGUz4otS9wRuf5ozXzWCfP5BpbuxNfbwZu9yTMZUNWFiHd6Y5\nv9GAiullrt190gcEzTMvuDU25nMg0Y/KQuOjk1yS8wNtTYAbKJKj37cBh4r/\nKQQJLYit97pEeTfOY/TxLLPme+xvzTaHql8oCm1bQ/p3XhuGMGyxiX5ZRzBk\nDYCr\r\n=0lZ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzP3qjcePugmBdiW1M1SeQOVDjW+udFSzt4xCuSBVutwIhAISmaq70LBP5sGYlWCPUVTScwhS1FcKNJ/GI14Sd9ihM"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.4_1616522296311_0.22609792152352037"},"_hasShrinkwrap":false},"0.3.0--canary.49.d3183ba.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.49.d3183ba.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.49.d3183ba.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.49.d3183ba.0","@code-hike/mini-browser":"0.3.0--canary.49.d3183ba.0","@code-hike/mini-editor":"0.3.0--canary.49.d3183ba.0","@code-hike/scroller":"0.3.0--canary.49.d3183ba.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"d3183baeb257ea8b9d7baa287d4fe93d2517f956","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.49.d3183ba.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-+Kp0se6zyC6/Lib5MMzg4OSvie3MZmMFL/W5oQBfX4XCcpn6LiXBRsHG3cmDbSS3x10/FJXgtRoSPSO+lcEy6A==","shasum":"adecc3cfb713eff071f32f5ebe4c3857672aeaa5","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.49.d3183ba.0.tgz","fileCount":18,"unpackedSize":62738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW8MrCRA9TVsSAnZWagAAYbgP/1PLUe8dPz6rtVMubS6Y\nBRBppz60/tqBgOaaKebNot4hcPTcDKa4vZfCYh5l2Fc4DK+BoRQ64npQ6/7E\nysOolgtFcd+GMsYgn39iTegcOY+HtG265TfisIKfC4uvww5ZwCxem4Qgzn4x\nB6p0blwvmcVzRLck80XtMgWLS7oFG6kGu+nk/vYJXJEi3ZvRezjmBu3kJ9We\nzIoQ1k49LCjnQxPLcM1VdgZQwctV5/TmUB+NflJRXTMHB/CDgVBHrfwTH3jR\nAAgdhM3GaYPfvQFSeZHMJ+xojI3a2aVt+JVRmcW77WCzbXjvLRdKf4d8CjNj\nQRqaUXSlAQ2oSviRHCOyoxSV7GWSrEkBcL/0FhG8ZWTtqswQquhQZPk/HUts\nrQS9fREA0Rc5S1cJjASdyIsLroxMGI6PDRbal1v5LgimYKVNEntDnv/YljLz\ntTnyDO0lYoi88YlpFGeY400D/ucz8MTR1JT7aUh7vZPGfwRacZ4u5n2aCUEb\nyn4n5+Deo2o7WI1ZCbiUjyQ3NBhZOwxWZtC6k4VbHz5EtN01bbnYc6zblvmo\ntjXs8ipes10olmeso9ry8sGOZUnt+iWnFtDLGXFnStlSARMiFs/JmTmEn9G6\nxN3+uIpnfoFTeGBJOApdzpO1VHmLrldXz1N6XHdy209+wLSimjFZse1rop2h\nYH1K\r\n=UdC6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR4swX/jVrV9HBzKLhwVonzXhJFD7ueDPrXOz0lReBwgIhANjcx43fO5rai9FgXMOqoB2Wu438vrV5N/N0bk8wWgoT"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.49.d3183ba.0_1616626474669_0.43378913280150644"},"_hasShrinkwrap":false},"0.3.0-next.5":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.5","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.5","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.5","@code-hike/mini-browser":"0.3.0-next.5","@code-hike/mini-editor":"0.3.0-next.5","@code-hike/scroller":"0.3.0-next.5","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e6c5886085211baa544c3cd0dede0ca07804a5fa","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.5","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-avIQ6VYgPJ2Bgi9alIwEaNqyO93hU1kqOCR2NUZUGoTXeyfoKwq2SXugCn86BfT/aT//ep37aAhdm5FRlo0OqQ==","shasum":"e163c03f6ef6280107d86555ad0de8b43a384d5c","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.5.tgz","fileCount":18,"unpackedSize":62654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXAhFCRA9TVsSAnZWagAAKnIQAJJnj4KW187AKBwOIads\nF9LyK4W2gBkc6N0H+gshkqrpU9ePho/pRX4LILY3TiWUXc78qxXUIx0RAco7\n6CNf+Gnm2ggO9n7S0a4LO1yNxwDRSmlVEXOuhEuOiekDzm385AA3gPvF37UL\n9ZuHoERtqmolErhtw1ZQjRMuh3AT0XWDcemXsKdyVppCF+0rIdbW6e8f+Bd6\niCTA1YfAgcaJVBByX8w9fyEIMa+WCuZgn7pPBHxG+9jJucgVI2K+LhJAINB4\n/kKqaMovf+wPxpNdnBZZzNxThFIC2ZEse1+uvERKWnWofBWefMcNPK/UsJtJ\nuyEZDzBYqjUfEWw6IK2bjurqRCPg4AkXZSs5jscFkunfdQCEnxmy9jEgKEKK\n+DaU7U0zs98DeN8ll86uDwOK9TkZvrVVeSHewq5CAZ/yH4ZYNRplL7OkPEL3\nTtn/5xA5cKLltI9ty3cEdd4mHVVG/iyqITzsQsWGO17yreueGv+E7KYEnwPG\nqEMHi0ttWHna4Lf6yHspgLO3L22eehXxrV2Jesa4kKrJtxQI7MM8dNTfWANG\n+F7DM9clrJR5suxsbvCxkvfo5gQTQs+etXSuz+Y104ZNo0rDvQqeBDZYHBBa\nvjTUkce596hIIr30opfIYnXaK12td7muQbgWGaA8XtWiiDpaAPPKThTqMaUn\nlwgF\r\n=R4+l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGv2+ki1I6x8/dXRli5e39jiH3zEO2frSMyFNH/IRskTAiBctp08qRHMzvPpj21EtlE5275vKaHGsl6lfuNJH2NV7Q=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.5_1616644164981_0.5742994203588658"},"_hasShrinkwrap":false},"0.3.0--canary.56.84f43ab.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.56.84f43ab.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.56.84f43ab.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.56.84f43ab.0","@code-hike/mini-browser":"0.3.0--canary.56.84f43ab.0","@code-hike/mini-editor":"0.3.0--canary.56.84f43ab.0","@code-hike/scroller":"0.3.0--canary.56.84f43ab.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"84f43ab949834b5cfd0872258754e91f54964988","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.56.84f43ab.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-dRZFe/iDGbaLDvhZbKaVNWnxLD2pmgWoBJWHxVP1DPVVyWbOfezRljcP/mKK9Br+MXfqIziayIDqWhwLwR7LtA==","shasum":"a01effe9804f8e665f49537a3002c9e9e016b972","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.56.84f43ab.0.tgz","fileCount":18,"unpackedSize":62703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydrCRA9TVsSAnZWagAALaYP/3luO8sDgMzBC7TcI+wC\n7JgCo5Pp8ao6g5FdGuIQwKaZ4opc7qMU+MejRrI/L6ehvHHSb556a2S425Of\nLpRIWcFwYk5EFqr1rX6Lk0ENIeEvKpdO2XRd3e9d95CwAWJvEpZ1HTJJGIUs\ndnTeYKSjkvzB3AZ03sqZ65cMG/dc6LtmMwx8Lu0PM5wuUvCcYg/x9G6Y6Fo2\nftA10PvvPWevmMWvKN7jyrUQRv8JXxRV+1wp/MLr14M2d5LgT594AE5ELi+D\nSPwIFyOgQQRhj7P7z4YOkvFcCzFBAmnZF2NcwO8IJR/kMCULzz802oXTqKUY\nwTzPl7YUGK19byZhIFVGqUBmpyjKs9nPjEN7mgUU6YHbVENogkW7Ao32S5jV\ngq8K6MAgD91ZkT7vltWHw9z6vaZBhNESH0rtOBYJn2mJfozkVtkxRqJox7zN\nu0YdcGckQDCvF58oBJfTW+ndD1Lz6H2qXrzmQwF9Zq+zBarbx3srdPVzaT8D\nhiIkoYsaBtcKDIz1Mud9kIVoG1DGq9XIa9tdaXwrLNL8/j/qyTvPcXVJfUu+\noNFZG98CZ3lx4qlXkl5gMtaa3Ek6vBwXgRDLM2aLQ9brbOqdyrWoyIvNUzzU\n/cYLHcs79TF0zG7HwNllNKbfU9SwsvtoHzJkkLv0qnZRKn4vAJcHqh8vl1pV\nY9mv\r\n=rxFq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHs6RCOd5rGENwxuwXs4gkRcUyDnRYqzBhrRToNbBc06AiAQ+mRQkjlu9CyLGxfdKBWnOPrvVcfMkxxeb9p+lAAPmw=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.56.84f43ab.0_1617635178839_0.09210115844884226"},"_hasShrinkwrap":false},"0.3.0-next.6":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.6","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.6","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.6","@code-hike/mini-browser":"0.3.0-next.6","@code-hike/mini-editor":"0.3.0-next.6","@code-hike/scroller":"0.3.0-next.6","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"aa70756f1383a12c61658bf148c172f9fd0a3012","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.6","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-yXRaSHIBtv3QuuoGhaNdo41OzwizBGzT9IAywfXn9BLK26r5fqAKGedbL7ETqjnup40NeDNit/j5pgis7r+wVQ==","shasum":"60e9502e5aadb696e0815af4f7f8014b4843e219","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.6.tgz","fileCount":18,"unpackedSize":62619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayiLCRA9TVsSAnZWagAAyloP+wWaiwy24UzkRA+RXNLf\npV5XSDwvH2PnCagZiOs2koDRj1LvVqrn/cDRWTdL8/bFFuAa2cy+t6MFyOJX\nsafTn+ATRFEBXfSiJYits+xDXgSxLFwrsMxZbUMtU/rF6mugLhRFnmz2sLx9\nl2F9ttol/iHfYMbtVQU/BPQ2BvvoHJgkfyNhBMVCF74SNdsHPVcliCTEklcL\nHdVybGgtmm6feMNanO4CkXVlMlqew3vI5oXHoguc+h+8c0yRZPcdR0QqJsMw\nHciwrZtBMDCTCptMAbnN+KedetYSV72kre+brFilMSRwAjEw0xcLHwNC6Il4\nf3sNm+wB/6lsGwl2CgvQcWYpQ4uVcAAQcBRgcxSlxxMUdylerco+pxsHNZZK\nspSY26wWzigfcc87sSpxTUMvfYd+19fNvvNJ2loiEpUZuyEWDJw85gzyCjLQ\nYVYXqpswIkzDKJhuxw3A7ncbvB0lCm8vjyfsYj4RjRinc4MK03siWukR3n1i\nI2/OJxpGcTgvkZs2UdDddrRR6C8O9wnciaKj0qZhnC9213PiWhmXVt7jumDt\nC+uR5O2uvqW4Tro/klFAsvpP/IKJQdRbZZp87sUSm1QKPB51UK2lEMaqWvoq\nK3aC2+X15TiAQMx7Gi7LJiH3J+XSKW/tO0w6s+EmO8F6MM0hZevLh96oPh7O\nEsG1\r\n=Y/uO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkuDDJT0caVcV1duLIWn81k3ObWQR203f5otGSto8QqAiB6CKTD4Cw9QsDB5eoZHJhXqD17wkhIetnUBAngM/5GwQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.6_1617635466707_0.08154431975237975"},"_hasShrinkwrap":false},"0.3.0--canary.58.8628c34.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.58.8628c34.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.58.8628c34.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.58.8628c34.0","@code-hike/mini-browser":"0.3.0--canary.58.8628c34.0","@code-hike/mini-editor":"0.3.0--canary.58.8628c34.0","@code-hike/scroller":"0.3.0--canary.58.8628c34.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8628c345ac1298bffc9b7fbfbec64deedd1ed070","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.58.8628c34.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-9oRVkNovtv1obGxRaOxHAZ/kaUXU+rqmB3R/oRWzxrIdqzGlzS9vsxKuoNZ3CnHeocc22cFEFt8YgvGngYO43A==","shasum":"54567a911e77f170488578a42dfafc55027edd90","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.58.8628c34.0.tgz","fileCount":18,"unpackedSize":62703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbHMnCRA9TVsSAnZWagAABIwP/0ecaI3gN6JBcyLgetIz\nE3luKvJpkAnRBzmLjKoQx8kw6tfG7YxlfdFZtVckdkbg5YRg052F0pVDLNM/\nQBtQJFUd8uxPX/WFXnsiy/B9rN/c8brjQ++3Dpt91XrAMoXJ1UZJFa0fvkYZ\nARAALQXr6JerYqw0SUF1gfqEFkG6RLTYO/imalBs6bAIYGeN7R75x69pboMF\ngI8x/VqR1Fn5/czY4dRFOFnKPGnyEyvXL8AAcZYuSA6W9bMPU+4rUcwMans7\nyNemblozPkiAHGVxuAx1J080gtmnta+J7hw4ggD7I/n+IM8sAHf+XM44y8gF\n8ZxU14UnuwzmmTypqkoJf24+h/NiiNtaDBZk6jI2E4QDF7oALJ8E9FTKufmS\nRzorqteHf8byjRF3/PXaN8Q2uElbIKqDA70hMm9c4iNFpglIt1+e3EdmU9XL\nInyhExP7o9PeirbBlUMPGbXhxX84SQx6AS7MWSWYs4U2tKK66oPuMfllGPGu\nfoBIkzDOOnthwrnjmcP9Zz4p5Ovi5LDdv0UMuSk4cjq++/y70pV/ursW2azf\nblXIyjrjbDMItLAJxZAxkz/alDohcjctkdncv/WVXfJHWZ58A4R0iuCw+cmv\n1LOCq8SxBe/+FZXhcPnlpgM84npdQVlFnqva4P5ziASS1pkt8q0FD9Dhn7du\nYwyq\r\n=x6rG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2XOkymsGooUPE8lqYhIJWRkDaWdPplDwtMv1F/xq0pgIgeufvPpvtdPzAa+gAf31B9OmtdYq4z8iYGap9WZsAWBc="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.58.8628c34.0_1617720103129_0.24702048821368106"},"_hasShrinkwrap":false},"0.3.0-next.7":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.7","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.7","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.7","@code-hike/mini-browser":"0.3.0-next.7","@code-hike/mini-editor":"0.3.0-next.7","@code-hike/scroller":"0.3.0-next.7","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2f24d0d910de92f30ffec96a9f768f197f81f1c9","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.7","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-G7kCDsndC0CVw2bK/HzwZyjF/YgtVLXALRSDHaqdfF4p2YwsfRmMeiiJSBi5VfF5ZkUm0m60jV5KdlS/181U/Q==","shasum":"8b29305d79d2fc408680340f10e19e70c1c021c2","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.7.tgz","fileCount":18,"unpackedSize":62619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbHQRCRA9TVsSAnZWagAAtJMQAIAbs9yf1hMQ9QnM9hUM\nyTFU99FvsYPLcnyNK1O2DPm9qhgs5zUMmtCT2uHevto3B4HiLodEd9BUIB80\n3dhwW0BULMa1hTgJmloNCt8q7/OEOP9KNhOehGErqWCgF4gRwSE6JDlR0ipF\ngcBwNmyT9mOr1RRbRikMRhKndxGHnVKbi35lZx+k8hTnutCVaZ/OVs7KTohI\nMEWFpnswhKzwP1rHVHEaor2j0ftQM2F9AUXCjqYn4KVCw39jUdeHVThooWeU\n/xW8VITz2WzProtpfHUJIEOilfTNcNuxlJiEu/bxxj1km6jXUbBaLwRYNcR8\nTY0Bvel2hf+porO7HNTORTTHzlW2omEpev2X6qFhZaqZq1i3zRp+5fSB33Jl\npRj8RRU+6iypZtNwUNy1bVYUn1/c3kOdmUOm7VlvDQqGpUwoxA0DK10mEsHd\noMjQ93sP6NgbfpKDm//kvz9dykLGkd9eTuGeDI+H3B2u+yexxz/OpEjMpRFa\nEmzaLK/VjpHxU4KbCOvlbqtqWp8ctadGHvxTDCGKsCKPFTp+IueZVfgwGYsP\nLTSI9EEE17q70D9XeZgrA/jDu1RQWp+SVD61cixwekzTIfT6KFdqEUiCAK5C\nbxLCmGKw+eFKFtHXq91Q0sB7i/q1fF5ogHvKsk88tyCDYf2s2GuY+8yGiPtN\n9xeY\r\n=Yifi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGH/uVcfzeN1iXrLtvmKDU04I+cbdvKCer3PFOHpflmAiEAp1K4uTQLiQI6hklXKu640Z4G7IoB381xvcPAekjPUIo="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.7_1617720336723_0.5083165381269323"},"_hasShrinkwrap":false},"0.3.0--canary.59.324d15c.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.59.324d15c.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.59.324d15c.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.59.324d15c.0","@code-hike/mini-browser":"0.3.0--canary.59.324d15c.0","@code-hike/mini-editor":"0.3.0--canary.59.324d15c.0","@code-hike/scroller":"0.3.0--canary.59.324d15c.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"324d15c1ddb76f7fe751901372b6e1596d1507dc","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.59.324d15c.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-2DYuPbMguTfYrj0V9+ktg2T1LMQ7zkDUho7qGpk7vX06LvpCV9k8VsJttZNXe4Y5ZM47SgeBrrjGdawZwO38uw==","shasum":"386a111a8988a103fa0672f2bc7ea3c92958372e","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.59.324d15c.0.tgz","fileCount":18,"unpackedSize":63286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbN1cCRA9TVsSAnZWagAAZ8sP/iLl2uWVd/91qwlL9Tyc\nJMkVKKulAPZmY9YXYmwqPnf6y9PgZLjx+Q6UCUHr+P6x1SEdI3f4yb/hUlmD\nHgPXcjHtOirH235dfPO5hevIIXtlYC0F5/ABewG4klE2WsQ0W9gRnU1OgHLa\n/KZvB1IJgd6bBzJFch25zzc3m89kslThpYIYqUQNPRqiXQnxd8XDf+jwKhCh\nNP8MCl0+gh7JlC3WVs31zKTL8DxVhEBJ2yaPKcVz0SeAxqSP6co2UR92vpr+\nCQ8S021bgr9ko/KmUwchiFI1Z8H4a+97kWWS/BXcKOmFuptHvAGcWyy5SHJo\nKpf6xQlEUBBrjSnf+iKKRF20C7sWnNHFvIRM+bPbqcjEPzrI1p+AZxOnfpbb\nyQBF2qida/IQkATlemACIp3owx87tgew7hP+kSXNl8HD/WX66tNCbW03tUQg\nOXWGG3xnD+NeImu7ENj38VZ19YgH00J3yUQHPDIp4pMpXy4jlJKlO37XUNxn\nq36HYwNvbc/m5d/2dNjR4CCvv4/+NeCIir1/oh6/C5hL+gJ+p5YQ8SFFfwXb\nJZ2sChyX9ZaWlKk2s7BD4eECOABKeMNDQcS9iT5bANGCYS0jVZEUxw7inK1O\nLqnxxji5eJL/VC03Kdu8tzaF0rPyvZz0NXoNSqkhh3N6w+i8eO4Z7mmd+KsM\nYzWQ\r\n=dbKU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEb+Ejv8A37yzknaPp4iv9SCMzD4RS58aN9hQYLxzGBQIgXtfHuAtDQneaF5xRYE/lh9ru8W9f+Ftdy9sNaDT8EKA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.59.324d15c.0_1617747291790_0.35898108610356694"},"_hasShrinkwrap":false},"0.3.0-next.8":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.8","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.8","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.8","@code-hike/mini-browser":"0.3.0-next.8","@code-hike/mini-editor":"0.3.0-next.8","@code-hike/scroller":"0.3.0-next.8","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"da9dd9108cb900fe07bdec4b3a7aa69730a8ae8d","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.8","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-mp+sRmc9YAoLa56zR6QTiOYncT8otSnvDBml/pOxyH4u4HZoyU3eLvvbzXGnNfpykwIJnTHXjhfZcryM2u/QoA==","shasum":"fc129d653585925ca191feec993ab4a04a116070","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.8.tgz","fileCount":18,"unpackedSize":63202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbN5bCRA9TVsSAnZWagAAlcMP/12icE2mG204X/G4Bc3G\nJjKBq8wAGy1RVlalCoPinD93f8HHgHNX1C/W25D6bAniohadeg1STHftIE0y\nB6kTd1uMMQ9xz7KBb4hZy/hIT19HDOmaaHwumucMvl9I9pKZocsXsRkkaZgN\n+qruasxuzlOkYmVe2HBLsYGU6F0zm7gNY4IpEteYP/hIFfoPE4KnD40C9r8h\nH89tWUqcPZp8PfyoXllxK0p23oqLogmS3mbikRuiXOV7/48eUXN+sB0r6TL+\nfhgt42QgFCacI+PVOlaBfSMsouylO9XHVj5tYJ+5wyXOnCdLZYM37zE0GkbI\n7HahvCJyUADYSk//RmGr6Ug1lKW2D5znzSuzm9kReyUJT86QvuxqCx43YneJ\n0z04secMf1bbNDUynUMWz/HWWdZ797mo88x1WXyTOI4qfR3UBcshRZngCyhO\nMWdP/JBrvIjEYLgaOpmBevfOQkUa3YTu5AnKkK117Tyk/O+z59bzut9vYJ76\nU5IN/f7gh6mrUQhfKkTUaBc2uFb5s4/hKmD8h7/xSgURPHkj9DGZnRvnbhhh\nbO5IkuZ9qav1eHJtzXjZV1pAwvxdtsfCZD8EqBYYUhyD991Y/jkTLVs+a276\njqqEhZ5zuBEVdEf7Vkrp4+bu28Gzrpn1CRzRUnfoBhNIDYKhwWB9zJ1JdeWJ\n2V2F\r\n=+qm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG70MhCYM+BWQ7gHPfyy4CSKHV98zGi2azOMNiBktt/5AiAthK4Yn53eV4S/rw6jVBBoi88WIQ9jt/2N8SXagvidTg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.8_1617747546778_0.9373659189517403"},"_hasShrinkwrap":false},"0.3.0--canary.61.e6f2135.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.61.e6f2135.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.61.e6f2135.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.61.e6f2135.0","@code-hike/mini-browser":"0.3.0--canary.61.e6f2135.0","@code-hike/mini-editor":"0.3.0--canary.61.e6f2135.0","@code-hike/scroller":"0.3.0--canary.61.e6f2135.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e6f2135dda53b72f5482000f4742836ceb5e33bb","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.61.e6f2135.0","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-5QfhnV45ZZY41CJxLGkXaboqcCog9iPRNdV0FdpUoHDpDqchx+56dt+o6rrTSa5QOz9oYn2yn9nj+g6EKjYc6Q==","shasum":"3ce1b140d5c6bdf6c8692c39ae54578f9ad7e5ca","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.61.e6f2135.0.tgz","fileCount":18,"unpackedSize":63286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb4lkCRA9TVsSAnZWagAAA6sP/37RXcBFpB/+3sOPa08k\n8fU6idQPxOARJExS3qQEknkab5zH1wzxIcPqkmbQFm+X66JLyarSF2/hfcEC\ny5VgxQMvWfsSdG/t09ulRNARMi9ZdRUmQZ4hKz7sYExUbD9ZTYY6yNKofghK\ntk0RRdXqGhxjacGYFXAFNWXFFQtfOC+v4mqVK/+eKrSfGisWW0S7gAaSiBDr\nZOCKNjb9h6xK2LyfSPh5fMQCypVmAakhOcyt0YJRWCGTM+rURNEbhdsUyOz0\nlR5Y6gvC5oTnl999UfSVswAtP9e5NAQsTvYLa/hjTGs1swem0z933P77C6FG\nrVJWMsjeEhpkwgTCVh+yd0s1Tf9tE+lJd+M+2W9gD4pOx6zSFss65V4xmIFn\nXQKIOk8PlC4pv/hFl7+0ffD/qeVXfUwq9fwHu0tBQB/Y7RVlkshgo+LgkEE6\nw7rMRCJGbHLVTas8ZzN3CPj0MchJ/PrdRjCOCvamw+wla5UY4eev2kcd/Jsu\ndWk4NkJMmNlnNhYtlDOEWUwoHiaMlr1sayhshFC3afpVOU2GJuiGfI6pyX5b\n/jG4e0E6xo13drq+ZNuguDRT/xjnNtjWxMCRI1f1PXwtqT0dcJf204uw5XA8\n8gtBZeSK5IIjDR1UBKctpDd0QjnbtRP0Uhimt3B+KZ7U2HLfDwCQZp9t5cxK\ntTLC\r\n=8oTE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2TGKdrBldBHYBAYPFmhtDkQjBkIhK6n8Nh6ge6ZqyKwIgQqrqx0nyVFRR7JuSinmPY4cAuNh3BFLXpNqcElgukGI="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.61.e6f2135.0_1617922403540_0.5046101375521319"},"_hasShrinkwrap":false},"0.3.0-next.9":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.9","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.9","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.9","@code-hike/mini-browser":"0.3.0-next.9","@code-hike/mini-editor":"0.3.0-next.9","@code-hike/scroller":"0.3.0-next.9","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"dd7a8e686fe040b3948672539a5e7ebda7789681","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.9","_nodeVersion":"14.16.0","_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","dist":{"integrity":"sha512-/5EaOyCaiCBaOG1Y3bM0GUBMzpZ3UhhDZ/TzklB7BXNtiqcVciAnVBJCFH6YmHTa9zbnoChjkKCsKdUARgLNlA==","shasum":"8a531a3def76ef44801207c07b8906063f0eb8ab","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.9.tgz","fileCount":18,"unpackedSize":63202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb4rbCRA9TVsSAnZWagAAzYIP+QDBGxok3kc2xQNb9lrH\nXmaI3D5gtf0C7Cdd7O7b1b0C2C40nPYl2LTomlLrYKDrDFNtVLgKD9UCvWW4\nECqcpcFjOJOBzLcqCtaniGBhkbkjH3CX9USHrX3ZtwSlV7Wd7yPKVB2HWXI6\n9FSlhLpdfrGBUO9k7Ggced68CjzN9kzta8PUmu8MkATMwjzzCiiiaPLI8h8f\nnhG5qGdbUlrs0PRq5LlkL6uLUL6J+svwd8uiLTtkmZqkOIhN7DNEqIQV1SiN\ny591bD30IDRA5q2MzdBsBpah4UzjfGgOaHxs5pOL6nme58DVj5N4SY9PqHdu\nQpEOnpROAfZPjS0+5YvcFZoscFhpp5iJx4eGaVAb1AKrk4QrPWIyEUDWL/MU\nReOxYTVVvgNiXuKrYztmjt/IF6psYajiWGgdZL/DbSKY2EC+uOpXXUV6Aow4\nilb83cAWxeuL3PJf9x4I3UdaQAglYYO4ZUUYZhWa11XiTkqEo1F41xnqTMi8\n+oAUIHnM+6nJ3lzvwo1vPqYH21sUa6aF2xTAvJva48Wg410aWdgZX6eYoZJx\nFXbledBeoTtWs+jiXZ96hc9VInUgRv+IqEBfdUjpQu4GWIdxKMy8POFhfYBe\nEft0UC55MWnpRsepOI50PEPMvHXjU0yli/ReRhXyjSFIdcDDVd3Iivpqvejz\nWqZp\r\n=oUwN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3+loncPDM9InBZP5zKnOCi9Dmp9kCgN0hYXs8mXpFmAiBy5TU/C+kE4GPqlVW+AmlrLr18cZY+nUqcJi7MKtGYXA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.9_1617922779199_0.7963743919207475"},"_hasShrinkwrap":false},"1.0.0--canary.67.ea5ba8b.0":{"name":"@code-hike/scrollycoding","version":"1.0.0--canary.67.ea5ba8b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"1.0.0--canary.67.ea5ba8b.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"1.0.0--canary.67.ea5ba8b.0","@code-hike/mini-browser":"1.0.0--canary.67.ea5ba8b.0","@code-hike/mini-editor":"1.0.0--canary.67.ea5ba8b.0","@code-hike/scroller":"1.0.0--canary.67.ea5ba8b.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ea5ba8b8c9f41c09ac4d24999e0814a20f8a4b22","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@1.0.0--canary.67.ea5ba8b.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-delTusfKQIIZXhu8XPK91cOybS0UsXKSW8VXZ0ZSCcbZvDRjxryaefOlkx+IgeDy5LLo25yGxxuXnG5YAkKOdg==","shasum":"7eb47afdaa04af9a635290baac7a61ba14ffbc38","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-1.0.0--canary.67.ea5ba8b.0.tgz","fileCount":18,"unpackedSize":63457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmyVFCRA9TVsSAnZWagAAvxIP/jfsugU/5vJffJqIgV9i\n+6QHuiAHu2C9whHugaT2o5Da5mVPiU2XNY4PEyG6SZfHM8LdyM06buIvgUOr\nK4NEPFFDdFMlTtqWOMcWYgZzecn/KzjUux9nzbkMet8KNrU7SF2LCYtZw3bA\nn9wih5PULuYuKLmAVxrUxt+7IGoHPKvE2ccbOGYKiLC3q4qaWu2Ai+Vjr1sG\nn+Tu30hKLkOvy3hGX3cfhKuNk3LSQ48w8lSDgH9prRQ55kWmhH0uY9YVv2R6\n2w900hV9GXH1/wWd96Gg+rEa35qnGZiB3LClt/GRV1BIbl7pPDcKYiMhIpoR\n/jhSXwCiPiucIk+GBGUU20aXS2gsBeJJwyB8fC3ctAiMVQ3GBHmd9mOZLFbd\nVcJupLjuTuJuZ8zFDHrXtUpvV4m4uCD2D/uKAQDko3ZgP1sk0ieX2mCLKgIU\nE3CTBeI9vehE7SbXxb0jAef3ez26MsTimRfucU97EktX77bM52Dsl6/SBcFz\nCRAgWkXEUpvj7YKGJ106hOjRwXd/ktgC46+UR6BVtdgGodNduX2t+ccQMQPo\nP7cC2Ql7yUQHraiqJdQWmPWKJw4bKMMawQDhjCySv66EHCmn/opOaQJX3rkU\nMVxNHE9ZxDIUw3e9DsWEbSQbWc5khDjt22pLu0+Bwu1BQsXBc4zf7gTDoW4p\n7m3G\r\n=ysBQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1YmOTZ07lWJO/I8RC6prtI3/m4d4i8FXZUIAO5cYy6QIhAKYPjNmOsjxrsVdbXHphmVxMNVmHjJngpLe5BW11bilR"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_1.0.0--canary.67.ea5ba8b.0_1620780357274_0.4835243943685035"},"_hasShrinkwrap":false},"0.3.0--canary.67.ceecca5.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.ceecca5.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.ceecca5.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.ceecca5.0","@code-hike/mini-browser":"0.3.0--canary.67.ceecca5.0","@code-hike/mini-editor":"0.3.0--canary.67.ceecca5.0","@code-hike/scroller":"0.3.0--canary.67.ceecca5.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ceecca5467b9d5227631917a0c4e417b27d34b4b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.ceecca5.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-LmNxmzb7KSfk/6PQxg03cV5x11rosQUuvTJ320k0ECnG+xd4Og8sOp5oZfRDmqPBheFTmkE1YXGwnBXQ0SXHMw==","shasum":"3484567c4625a8af240f3a5d4f6df7452f654d9a","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.ceecca5.0.tgz","fileCount":18,"unpackedSize":63457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF0/CRA9TVsSAnZWagAAEWsP/i0KuYfHqHjOmWHle1r8\nX0o/PbrMkI3iJPn2QReZlM3u5S6NVQGpnyXyvFpE/Pxb6GLk9dqq/dHUWRZx\n3Pu220lgUsuF6AgkQxS+jPo+JIyhaWCI7eRAUlsv8wJgR716B42h/KaVXhJa\nuIxg+Pbyj/ZXtWQPxCGbUVOZcQCJSTMvV71ClWdGo5JlpbsQpiIAoK583YR/\n+EM9CvMGrK2WlS5qAB2gG6YYr7C9XDBdYqdBKHFnTBQCQiZSepFK0Kw1PbIW\n8bjH8/iatm669Qg4FPU+8g1IqLZEXb1ho7Pv/SiVxq5uLikepasaT2dfre4t\nLe6Mb15czHp9b0lVotZlPcSPxiq8t3BkBO37yNe1ZNqsZxAeg4WeLQ00zI8S\nM3uwcgENTiL0YMaEpqlPrhDRoM1TEGF+7mJY309KZH/uWcKxR5Sw084zuaAP\nTObNYrFi7gLK1yII8U7AE72uchxO68ncwVeFil8o+xMewrpmfKfJB8tqKSPi\n9hSGypXirY18KsJgVjOSpPdBFzf9bawJDcPPWqx/azYKPDG/s1AVHNFB3qgF\nS0TEmgIE4LksELEqHIgqBTz5YuoXq48q1StiQ/cVqcrQ5emNl65DG857qsTG\nejIec0fT4zW8x3e5Q4sg8xsvpp3ZPVcqBaAYrS6v9UcM2vi5EY0nwETtOHem\njIOQ\r\n=nOoc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCGsi1BAf4LdljtsoT0k91Y3IMT0SV6Tndlojj2BITBQIgEzMLy7RymyMzrr1FHqCxwFopSZStOlN+knS+0Q9tZds="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.ceecca5.0_1620860222669_0.1346272469028591"},"_hasShrinkwrap":false},"0.3.0--canary.67.10dbf6e.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.10dbf6e.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.10dbf6e.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.10dbf6e.0","@code-hike/mini-browser":"0.3.0--canary.67.10dbf6e.0","@code-hike/mini-editor":"0.3.0--canary.67.10dbf6e.0","@code-hike/scroller":"0.3.0--canary.67.10dbf6e.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"10dbf6e42a977864b8cb9ca51c82dbccd43e6a1b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.10dbf6e.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-7j12mzu4eYvXaWV2lu12KCY9D+WupsoIkH5waWyGNgvbEgy3SSeDjmNttSRzn6ewaP5yakCQo+zGKOslVuasVA==","shasum":"f77a09d1c37d06f5c1e6953f43859515bc7de1ed","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.10dbf6e.0.tgz","fileCount":18,"unpackedSize":63457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnXPYCRA9TVsSAnZWagAAtu8P/2wRBPMJdxtaVV0hy1/c\ns2xoKyNFEoqLShw617ZnkWypixYnh/5SAVE2ZmHU/tF8qkd80l84wwyVWZI5\n/JNeyRBgW98RkFCqIcdkWyLL/dztpTRzvt+fk9+bYfMnFhVQPAo7xPeJvq1G\n8+fdGc0AomU3tkzFbFREDISXb/uKQERSoHqQOcnGhh9qdrqKGE9FTBwwYjZF\nMlv3Oo6aplI3fYvPkd2MWGIBnz0ddpKrKMtGKHlmoDkenItS6i52tLMieRMZ\nhJnQ2URqNP+mil8GzEfmcATI1AL1KMnJ3dpnlVgouvcAV/FvU/Bw/MWdL6le\nKVLJJcpvdeFpzHYBsmBqQ3UgwznTFb5s4HSPdiDRv6NCMUCpIRymz3e9AltD\nO9Hx//achicA9so8tpvptdDtZwed96pdFtadoN8lxkfiGLf6ukQ8oMlIfW25\nzEecMtl9dIPTBJ9zPU4oO0nK3eA/rJE5tnTWYgYCI86OZGNdx5PjTAEMJe05\nERtHA6/S7G4BuGEvD0HX1nGx2Y7JV83As/FSPIvy1BJSOrKIDskhY1kETD3F\nQmVaLRcS53ri57kHve0pRY/iG1i/Ar7HKKwUyLL3l5HphDmUbQliL4sK+Z6+\npiyttHBpneXV/ORrZ4Z9/Ono+TJzHIIY7T35SphbeCKXrOBRuTHdiJ6r3Xj2\nA1jJ\r\n=2pJq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeLtgs8Tk4zVXAb2iLe0EFRNcNjd/8JUCbXie2GiOeKAiEAhvrK3gKiCREBu0vRAfCtveAlTjIxxYBivD5ITgwdIT0="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.10dbf6e.0_1620931544531_0.5197721492597476"},"_hasShrinkwrap":false},"0.3.0--canary.67.a667d8e.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.a667d8e.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.a667d8e.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.a667d8e.0","@code-hike/mini-browser":"0.3.0--canary.67.a667d8e.0","@code-hike/mini-editor":"0.3.0--canary.67.a667d8e.0","@code-hike/scroller":"0.3.0--canary.67.a667d8e.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"a667d8e2857766d8962b93003520044be91ffeeb","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.a667d8e.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/4.0.0/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-Gcd42Ie4+QtPmD8l74/t+YC4qit6zBhm/dCUGlz3oJLeIJE44w7/w0KJTgYbn4S2601mnzd0SHowJ+gSGO3tlw==","shasum":"504668f9ac3176bbeee43837f44a2f3fe0620d64","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.a667d8e.0.tgz","fileCount":18,"unpackedSize":63457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnYtACRA9TVsSAnZWagAA1C0P/3e+lfsnFnd52opWt1i4\nPqNjqKp1yV5XaxhupHe7VOiJghZhGXJViybYmdF3TfpO7eYGdbp3G+2yQq/n\nfIZfhGPPeofOen3qf90snRxkl0rL2T/hikeop6KdEajZhjZJ9NYeGpDp65+S\nsV7X6x6De3MEPb1fjr76JyquA2LloDdxhgVO1Fql/7U4EdfwPAyNesHaa7xi\na9zasdALNZQWT2elrHDGClszLG61i/CHeW8GDn/z8gsCqDvrRJHqPZaqMydO\noacx+U4GVNqI3vbPU27sz/TUSRbbUr0b95Px9XBg9Z5nRb55rfaALVvIdPoO\nMLXApjyp5ByK5m9k12gTLzOaQLsytPRGCF2ov7owpJhl7O288NqzWkTvPZgF\nGytbBheumRtrAlsHbZfcjuCEIpULnt4ieQrboISzGdWlOHS1PCJIczc6z9MO\na6R9N5OeVTMr+fNawRJW3+diLLBNAAeF5QxNu3Whf1ig/ycQcZGr+KIquXRj\nUR0qGexXvynfmyWRakQFlZbPn/PplB6G5vsUOM4YtnBQStwDByFIqO39qqB8\nl/ikG5NNFUzIAYoroSxXHNpH+EuKWoJNyMkbwYSF9IJ7SFIrrjfnrcvvxu++\nLmBJTRjbQ51S3xlOhzPCLtGPeEmpe4U5ihVSnUe79AFsz+3TO/ES2Sc/458X\n6hgC\r\n=2W+d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCQ5fhyZRQb11gHAvuoBLyf8+rtfrQ1GlDyN1xFIOGOAIgC2zh7nYJEI5wH9JgQHILWZHVFMVfwHK48n2XvE9I/7I="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.a667d8e.0_1620937536046_0.24564832996954045"},"_hasShrinkwrap":false},"0.3.0--canary.67.014d9f0.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.014d9f0.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.014d9f0.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.014d9f0.0","@code-hike/mini-browser":"0.3.0--canary.67.014d9f0.0","@code-hike/mini-editor":"0.3.0--canary.67.014d9f0.0","@code-hike/scroller":"0.3.0--canary.67.014d9f0.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"014d9f099d90854a8e272d44aeb8023e885ca482","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.014d9f0.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-UH4WJjI11CB/ZOBn6fu/kQdSantms/uXqp/3xRSWGNO/sYFhlRn1UB6TQYm/FEgN1Sp5YivD4luLE3xer3on3w==","shasum":"ad32379ff56fff83ecfb6c0093c6905c95eb4487","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.014d9f0.0.tgz","fileCount":18,"unpackedSize":63457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrt7CCRA9TVsSAnZWagAAGVwP/RpM2i41qUy/lpP4yrT1\nc3KyNoLKx2FsBFE+S1CWvEKFVTSs7/5XkXnpfyoPa4WXURQ7pofiV8a9Svas\nsXvBA+szGZQFdoRT3rC2fNUCoBGHeRB1PkUkkSjg6l7N4b/BnCP4b23uNHb8\niDdYvedfrZow5MxCqTVjonFD0J77qAg5LY7eRtbUhGtrgvKl5y7Q7bWgZ+wK\n4X+Tr3zR67cMn1PffRr2J/MD1/Za1oDnVwd4j2nfcKrzWhoW6iTJrddWHnGs\nMyi9b8QSlEvt8iQIaVFydO5qRIeGjnOc1RKyOTv8BVIoQPVYNfrlfG+TYVQu\n6enzwuByyZPLUYtgKnSXjaPYpabVwhgdYHomSY5wwSiLqied+qCjbPBU7RZv\nOjO2KSFLgtF8MqetHyqC9J1vkyQsALB89H0ZhDX5DysoXrVqbHpfP6UtzrhC\nLN8L9l7KqFjOizKzdWMp0DPD1of2jT14I/sXDyTYAYxt/lj8SvbrdvMGW4dD\npc5+P87YKOLHk1rsO2V01bO4b3qwFiHr8RGMSjDjaqTkffxkS30E9KjORgEr\nd/ku8Ke44XO0QNXJoTB9tgyPEeuYSwXINN6hY73p8GIFrNjcl9IuEJ1XtPls\nMtsvyeM62+6TR6bI/Px6Yoo5qQvLjXKTZiqvZo5BTTqtjRkyr2xm/oAzb1PQ\nHyW+\r\n=uWKA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6mShfKqVol2jb3EejW13MEDpIla8cWnOahVxOwbwQZAiEA6vrzrQVXFmDjgrpLxhe9oUAuo2ChhKT0fJxc2eVwj1I="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.014d9f0.0_1622073026246_0.05748003179208716"},"_hasShrinkwrap":false},"0.3.0--canary.67.059c384.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.059c384.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.059c384.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.059c384.0","@code-hike/mini-browser":"0.3.0--canary.67.059c384.0","@code-hike/mini-editor":"0.3.0--canary.67.059c384.0","@code-hike/scroller":"0.3.0--canary.67.059c384.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"059c384f92c68a766571eb1f87ef2f2aace5e2cf","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.059c384.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-KPqclBAlft63IX+DraFwlHf5/JvNw1/YTuCqbKc9jS4guWNmwB5dBJzkQdFeUFVpywCMZ3kI6MYPDDesICaMhw==","shasum":"8257ff4a2a64fee3134015b16cc8b299a6df54bb","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.059c384.0.tgz","fileCount":18,"unpackedSize":67505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwQf2CRA9TVsSAnZWagAAOxMP/iWTgSJkPaGUfSsd9F+Y\ndhYSaPiavBAA+/l9iviaPGQz98lDH4fp5YxfH4Ois6N0Cofk2ueS2BNeafW4\negZrSFjGilxMUFD3avpmOFrEr6RQwO4ptlpky/JUHmKuK+d29qRSorT2NufB\nxbH4mpRsXk9mdo9zIb6W/UKgQcYfAF9yDaVkL7Zjr14egeXxxq8XyxoZ8uE7\n9i9BdMAY6KHsvUvC8aI2OQ9lSq0FaQ2lzJsQwewRktfBBjRFohcq8kjGzfiq\nWbHQ9A9Dn03A89eOlmKSB2s8DweoNIzE66ocb1p01Dv9SUiHEe6+jp9mpBpj\nDdhkMfZoRdUQLRby4OBp5ie0ZrgIYvmG8llD7n+4D+Bi45+qQB7h/+LTmRTX\nKHdhRHPNpbzh3B0Cs9PdNf32ZyS25q3eij9767r9ttD6aReMMMybXV5j4pfd\nUBo+zsjm2ySVcSzaq3mPn0WuaLO1KzkLSQrH3nlQmnqF+zcaJddLRWIN7LLG\nPPsOVBMfvGDxKVIDN62Ys2deLWPAg9s9qNpeLLMTYfQI7+GvLtGr3flVPTTd\nCRfFZtLOl1jvzo8nQL8IMSrwGCRaJ8QPBIly9GL6+lMtXuIQAHR1s9EmYohp\nmqHHAhS2VkfDH/trxTTiUokdiCh30OfWUN2RZWTFtdqohoyMvPg2RaaljWaG\nHFfe\r\n=ZiZx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKqFNArp+JDzhj4Bgrv7HqIuBFh0GILulYxMksNVZ/6AIhAJj5LiBRWe/9SJI6iTP7c6bK/S+J6GwoItsgR50HZYyH"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.059c384.0_1623263222366_0.6337741345175005"},"_hasShrinkwrap":false},"0.3.0--canary.67.8191339.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.8191339.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.8191339.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.8191339.0","@code-hike/mini-browser":"0.3.0--canary.67.8191339.0","@code-hike/mini-editor":"0.3.0--canary.67.8191339.0","@code-hike/scroller":"0.3.0--canary.67.8191339.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8191339b5e4cb388a451635bf2ef119349e7a2cb","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.8191339.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-du2XpxBFgD8C3SHIwJ3leJ1kG/cMby6gkhHGtibRy6pKiodqUOHCyP5ZUrHO3XFjUPnj5k8mO88tISDZs7VQNA==","shasum":"c040ab5fd8805246b6862c63c6355bd0fffd55d8","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.8191339.0.tgz","fileCount":18,"unpackedSize":67505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy3QGCRA9TVsSAnZWagAAB2IP/jDGwP8GV/uFwM7jrRIP\njiql1iaIFVCKMv+8GqDjeijejn5DYKfW9OCS4PxjcVokVHh4S2aIUFW9V/Xz\nmek8Oh8B5GkfhNV+yYCwOJ7WkkfZs7+lHQ+UKxQKiBUqv0mEY4ZW/V2UXYEE\njYTJqsA3kGOAAeVKzZ7nEko+a0FD0+Oo2uSuN46yblZhWmhIM6haoUbc71zO\n5oq8pkb0OgDd4AqdIodi+ucOIFxIWPo6QRuwLYVIzdQIXwiqyzlkDg8aYMCs\nsgVKz2CUvCRQKNPoasrIPNzvH3d+neCNXzcin1rORol4XRfTTDwskaXvdtaK\nwhy5LlKdLoPQyUTz88yWYIe2ZQnWg22x6iexgBnEhMNNhjWXkLkqeDzQxEJY\nmeRPBazwXH6RF1LEtfj5RvC/YlSP78yEmALt3/Vs4Ty6C3A8B24Am229ibEZ\nxcKSAWxRs2pPltEQ3U+WgO++HZxiMnB/HsKAbokHnChol/xC0M9jv/peakkv\nEQPPWaCkBM54xbgEayE5Vv3UIVzSb0s1sCkkWSi/FzYbNmMItEzZJopcip2D\n/FhGqC4iE8kMEwnSF7ThMXv+p0v2YEupnIpj0vvS1QzMRZgSwYErlDWHVAmG\n2vRAwZNe0Ri6yoz4rJeK+QJcH0jhjdc8yYxcB/RW5/ZQfoQJQwCVk3373Th2\nkJrb\r\n=OmRV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeKU+gZ3lE5KQf6DPEzr4LLug/3eI+D9m8gdFI0kPmqQIhANlNZQbgXTzfMHYTfHk+CALOxUAMUslzs8ejEBOqL8TC"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.8191339.0_1623946246529_0.019060663289753865"},"_hasShrinkwrap":false},"0.3.0--canary.67.0da7533.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.0da7533.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.0da7533.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.0da7533.0","@code-hike/mini-browser":"0.3.0--canary.67.0da7533.0","@code-hike/mini-editor":"0.3.0--canary.67.0da7533.0","@code-hike/scroller":"0.3.0--canary.67.0da7533.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0da753337f195b9d0b9dae0b04d2ec3356f0cc61","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.0da7533.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-cjRCjFkuBR5F9D0M3Du7olCvQFll0LZlxC5+/6o8fB2id/iawu9T0bWbgSzu0BbFydEUwL1b2VL/oun0RqtOtQ==","shasum":"7773ef9184c19617697c8cbbb3ff8bacd9436a47","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.0da7533.0.tgz","fileCount":18,"unpackedSize":67505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1M9oCRA9TVsSAnZWagAAMF4QAIPtx3A+fgy6aA8SJQXN\nInG356HPLgXnDemkAVGmjZBYvlwsgaxuuaII8dOzSvK5DjDpZV0NgPklscWN\nXT73wTt3ZwCslHDif7yq54hXCtsPV+kQViqfwtpmifJ3isk+ZkYVoRzaBi47\nkdYqcrTYl8NCi7nLJaghHfJn3NDQWmv9aWRm3h58oa4CUAeTgRlqzIlJ4Hus\nZT2ww5CVxtkfALE3z+jZAj51y9YIC8EfYB+LEqWe1TTNTyfvVblgCGJb+jHW\nr7x6xdh/zT0r6jJR2IXE840VZZ6iMu9dt0qm49iJ7g48JSEG7aE8n4YN0aC+\nDPsc5ChHHw1etB6voIvOHLB5LstSGHCsCpwFVXftxKXYcqBlVvyfPYM0+3hL\nLaae+ekTuHAHc2A9nkMrQLobly/f27ERwzMyuIqk+mYzOkzUEGePqH+lJ2Tf\na+r0cmnw6vPPh5rETMG7vWc6ykPBSO6hn7td9tatsXbeZ7+1MdvmMUiuEUNI\nPIXc1scS5kAtZjOBRv4bAUHZCLuoSrGG4yhC/rUa2Zt1Yi8z8FgewvgQkRAS\ntzaYduOjsHEHBCkwf1NXUgsqMbsYjs2cAAffbI8SPCEyckSpoQTIGgFLl9Ix\n5PNoWiv6dixk7QwbWHDlqvSaApthyP6BCq9nQE8CwDu2UX4RfGJimRwENwcu\nG9LJ\r\n=oDww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCE6XmNiYOv1VRTIAKug7TPzF3NUnV24wiylTYwTm0HwQIgJ6OOVztfpdMbLv+PtUphpNhhhiJQqZ/61uUzWmN6Ud4="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.0da7533.0_1624559464495_0.44500663500435955"},"_hasShrinkwrap":false},"0.3.0--canary.67.b6f3cda.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.b6f3cda.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.b6f3cda.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.b6f3cda.0","@code-hike/mini-browser":"0.3.0--canary.67.b6f3cda.0","@code-hike/mini-editor":"0.3.0--canary.67.b6f3cda.0","@code-hike/scroller":"0.3.0--canary.67.b6f3cda.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"b6f3cda8880b0662248f9766423b41581f9d9c4b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.b6f3cda.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-4dUP3FlGusRVCbN/xeR3yljb5Egg0Q5R7tDt+uWmzUhNNIo0cJPNVNzU0o0SKVEmGYfYeP3p7TanGXYB/alw7Q==","shasum":"b035021f2b1eb884f2da085c28331a3425db5ab7","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.b6f3cda.0.tgz","fileCount":18,"unpackedSize":67505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Nl8CRA9TVsSAnZWagAAUuYP/RY4tb2qxdtxU/RZpRlI\nhsqX3ts0mcWR42Tkrw+HtMHaGS/dlWCbHBE70NWg9Og/FJuwX09fDqDsw0y1\nJuRStZTfdscIwZDwpCa4ynYNTk4XRlTQYNs73+WY5WDAEErp8pXPu2C0xHI8\nXTmRgiUL7sDvLySTj9hrE+JH9bFQs8/ysc6ev8y3xnSDU0gZxeJ7n+W+Qy2a\n6TN+nwFbML7aQl1pIlDh1PqeN37C2qLach4GV99DuUyNj4qAc1+xA0TMYWmf\n4982ou2VzWct9VVe6mGAB2174AWrzqZ3/cc4ZmFqXz9Hw/oz48b51uIKqCu7\nEuoUcSwhmTuCrLrlz/JcuMcEi3NIzSKU56K3QrbH5PzCMgkv2HbHMM+rTgj3\njicA6ea1oWC3a9Flk+Vh0zLNNraGUvxLzhEbvkxmBeLie8sh4v1nwr5VkQXD\n+EJqpJy0dkzgfcVsNcSqN+MzEdkfnOnI93qngxE6x18CoXomeVKrFHDDzkgX\n6grLkUFdO3ibq6Na+c5INYLi4ryJepF5xTWB3la0APvhoUVgCg3Q2BA4Fj+r\nQBsL/qcxqZCW2YtlCUU46eB6OQFXvJ8NP2ElrgYZJp5miXkAu767xQh6Yeal\nLS1lToKVsdLSHsvSGKexJ7YKno/vyAnvDOIHQ5id2K1fFk6ZYMaqrggNz2O7\njf7J\r\n=weh7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHM+ya5+Z953LUKy1bCEi/GBU7tsRhU0AK+zyNUuRXAAAiEAlFQJHGnnoLDt/v98QKRepBoEUPxpFvdAS5mhJOnpGUs="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.b6f3cda.0_1624562043744_0.72434042757528"},"_hasShrinkwrap":false},"0.3.0-next.10":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.10","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.10","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.10","@code-hike/mini-browser":"0.3.0-next.10","@code-hike/mini-editor":"0.3.0-next.10","@code-hike/scroller":"0.3.0-next.10","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"3ce6287460eef6e00f5d3717eb2dc60d90c99522","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.10","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-fcOvYx6k0vXYvqH3TnvwW66UPTap4gfXfBBQxObbbSwTu6h1sAbwAbZdZA9kn3kdWkofOGpQyYoIy0/f3k6Duw==","shasum":"2fb0c610e8aee925e77517771e97369847c05518","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.10.tgz","fileCount":18,"unpackedSize":67427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg10HxCRA9TVsSAnZWagAA9oQQAKJAZWdZwPsZ7XVj1bGx\n0l1C9lYKEGiNsvD9qNap4pHG3YY90W9KwYSkaUximp/SIw2loDWvrLe/zQ11\nOlxbGG69xnuSR2j+sR1X2jT8nv5/5TPGmxQe7C92j8T2PKhmjRMBXrgUKDoz\nbXpvrldmq7JDMOOFiE0IPX1muNbAYmAa/eTBh+n1Z8sjRi/8GvjleANFeJgH\nNaDjFiPIi+P6uYCJaycGwQ7VRCKK29Fmt9iL1lsIDpe5VEsC0T5pavl7/++J\nYZNxwGbIroW8ewrDZQrbZfDR7Huo2zMwAmsh+mOf/8fc6nWCpOaGmhQ6mWcN\nGSuZr34PbGu7nYWdEGY1+xFaAUDLKqv0oWryudYix51JI9IAK/ocWgAqKXl9\notuFBOAEwHupL1yYq7M30udKLG0/J1s6HkX4gp7CTDzKA2homQJes7j/YBsY\nCFy+I46AISz7GiRbwVkW0pSJ3FS/TzapLeaqnvZHBaKMBjcpMz/sOOFUFk9h\njqBzFNk4BHrPpJ1iHm6WkYfQJPfXRjXRlK6YpxyQYPq8+d4acTSow88sWrY+\nAb4eRyEqGHLXzes8+UyiDmN5Y5MxWV3DXgIArynEMSsSUD8LxfjpanKbqp4k\nMwfIXy7/hHGFVaqrpTYpUx1wl0QCA62mwptZo6BjnG27VevCzZam83aFRMTE\nrQ79\r\n=VMLJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAg1a6VTMEqtJERU493o8Y61/3mYwUbWgsk8Ue7FYCWaAiEAvQuIpnEC80dNfUpIhTOtZmZPf1HtBkXziUdRcd1aOkg="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.10_1624719857571_0.856059663344912"},"_hasShrinkwrap":false},"0.3.0--canary.67.2246098.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.67.2246098.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.67.2246098.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.67.2246098.0","@code-hike/mini-browser":"0.3.0--canary.67.2246098.0","@code-hike/mini-editor":"0.3.0--canary.67.2246098.0","@code-hike/scroller":"0.3.0--canary.67.2246098.0","@codesandbox/sandpack-react":"^0.0.1","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2246098172b040d533938604fdc1feb7a3f8e727","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.67.2246098.0","_nodeVersion":"14.17.0","_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (linux)","dist":{"integrity":"sha512-I2EncJn5XjAGnA9IrfHciximscuohwGuozca07wNQS3lqNRnz5SXG1wpX9LNNc11Jc5s4rABuNiHJDvyf0FIIg==","shasum":"c58e4e7671b2d61d937dba3292a22d91a6bd7c47","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.67.2246098.0.tgz","fileCount":18,"unpackedSize":67505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg10o/CRA9TVsSAnZWagAAw1gQAJbT5tjPdnlJU/9rwXBn\nIb+nOr3hqLvSgUXm25CZaZ3zGaVGrmTdtdprSqQwLItZeU9//XoewQ+JZbfW\n4tHTOh8e/3iDuuh9nkbLN6y9mtTQ/f5RVHgReetlcBZ345EMZG3qZvPLV5Xg\nx22XE0+rrHoWtPR1VpVgc/+mLesv5jBMigSYnqtPlMoQUhGBfTvZmq3qb7Om\nwtacQHQOES7zmP2s+LBaU2jdEMK/b73HGsvZmN/eHlhtf/63kmqxdGNfUskE\n4Y6pkchv83tVfRBQ+pmwjCK1sqNppkrJ7m5YOvnF9spjMPeFj3Ul8Z5/1Bxu\nfhsn4myrTev3wdMuHhPYPVN7qEs6WEREzXcJiz7Y7QFvTVw9Ga2w0DjrLV+1\npPCE8HPK1fp3VInyXHnilkcvlvIPq0ec6si0WFwBSAH5ILyKhS94VUq/E74/\nIDj1765mBdR2XVqFo017rBxGNZ1AVBccBD/uFOa1xWySKU7A4Cm47dGj+xQj\nYylZ9KChmHlUC6PX+z/IezVLn4oexp2k0r7BFStWXliU4A1V0uiVAw/CSCfT\nSTte+ItIJZFCdSHteb0b7tVQN+t8ojDwJMrgFBaz+/Aj+T38BKRunnSoeV3N\nvQ2fkJuX5rzBdHiB5wTzr1RDDci/76kogP5vTrYGKJMrAf1z7+TcocUQ18sw\nOYcq\r\n=u9XI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkrvLpx74o9oIGvAwq5QJRVV5+BKlgyL5cFFn/n1DrVgIgK4RxKgg3v0VITUBuxo7XYCHTbKEP280fnqii2datKZc="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.67.2246098.0_1624721983358_0.8573868047140416"},"_hasShrinkwrap":false},"0.3.0--canary.75.b3e0bf9.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.75.b3e0bf9.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.75.b3e0bf9.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.75.b3e0bf9.0","@code-hike/mini-browser":"0.3.0--canary.75.b3e0bf9.0","@code-hike/mini-editor":"0.3.0--canary.75.b3e0bf9.0","@code-hike/scroller":"0.3.0--canary.75.b3e0bf9.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"b3e0bf994f016d67dfdd881b3654e3efff8f798b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.75.b3e0bf9.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-zP9QgLJIkxJbIC8f5cO03yNR/JNzIbu/jaEQY4bmsvp5JmEvhWraRYsMnmC5GLqx4QE56hRD4eJvmHqnQXHLPA==","shasum":"c2d8a496d29c4bf1f4673a8a70e41914fed617ce","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.75.b3e0bf9.0.tgz","fileCount":18,"unpackedSize":67945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6wNuCRA9TVsSAnZWagAA5ZUP/0IbCqpyAuNXrkytKHa7\nHiyGb1cPKrJfQGzgtR47gYlhoeIRrCV76dUnRMa0is9sX/VFPk4jA9VHcvrz\n726ocJq7AgKvYJQ8gwQacWwotuo+mFHKRn37e24xcM/hOSuKn4zTfc2Bu/FE\nzZ0U4ZjlsRXjS8jsIZizQpSadPmcx4IrLSrOy0BFnXVY3+Gv2W3RZtkIDFjT\nJznhTMap42fUWWnzGdcW/+7XAIPNn8+huWzqS9Vh6SzVn8309D95wwsA/UN5\noXejpNaFUFx3PS3trx1CqLxd9oH20yjVioZfouWJ02oHqWO9zYnIs4DYlZoy\n8PKvZE3QG+n4AGWQ1bxZFRLPdmI+rwvJXnF+OgvcGOnFg3eqri9bu+9Iyf2k\nxvTZ1DBwaOcubSw0XcA6ZmMZ/AJQd88Ag9P5R/ZDZ7yLDZVCdxFkkbAB0TgD\nLmN1WTkMkzNdh8VPsvWiYU+sSdYiXNURha6ARMHTWKMFBKaVkF/uVT8npvfm\nERZp4X1U0Kcll9INkR3zqxcetda4gGUrL+SVlu/eUIvsGrxtvC4ssr6e6ajV\nnpj5x24bADAM/YrvcPRxns7gjWv1+PG0a2vVs5ZBS4HGuT0gk6rc7A8hFPn3\nLzp4DfHRilWGDWD4PefbtxhUvaSYKWoww3cHX8LoszGHRvjDvwU9xTAZfR8t\nT0XY\r\n=ZW/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFUZzokDkZ4w9LGA94i6YNbMRGW1fHRWbz9JyBn1XLjGAiB8wdTy9agrBVF0Wl3AxPCs7HciZPbV8UdJeI075x8R1Q=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.75.b3e0bf9.0_1626014574398_0.3778109195809529"},"_hasShrinkwrap":false},"0.3.0--canary.75.9e3cd0e.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.75.9e3cd0e.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.75.9e3cd0e.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.75.9e3cd0e.0","@code-hike/mini-browser":"0.3.0--canary.75.9e3cd0e.0","@code-hike/mini-editor":"0.3.0--canary.75.9e3cd0e.0","@code-hike/scroller":"0.3.0--canary.75.9e3cd0e.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"9e3cd0ed86740b7f27c70e94fc19cda2847328d9","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.75.9e3cd0e.0","_nodeVersion":"14.17.1","_npmVersion":"lerna/4.0.0/node@v14.17.1+x64 (linux)","dist":{"integrity":"sha512-OrL/cRUz6FSLnUouK1gVM3A7lwgpQ5dRbd7WBn+oN0dNxHrXht0xgBp0xJgmiVWkFA6E4LYIERzOIpdMZuJ0tw==","shasum":"efd1b7e9a6bb5cfa4a6549cedb4c53a5789345c6","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.75.9e3cd0e.0.tgz","fileCount":18,"unpackedSize":67937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6w1vCRA9TVsSAnZWagAA4SIP/29qO4umrxtgK8dbcozJ\nHI9kI4bU/w61ELJxqcSzkBZhvXGp0uzJY5UYAaq+ScPE+kDiV9YPlH1buyp0\nppxx8YSC+MuePSPUHGlmO3Rj4TvIj2aSJ0a0E+irOkmNao82ExFxWQgxFCYN\ns3ihTYnayEMHR9E55sf2anvs/ofjcdWTm/zUhzVc+LVbQTWoxQokOtXY1fyu\nabblxzYlg/0k4bC2MNhDRV1nh7Zf5OA5VsvcUkhhmrcCP1X4EHO5/TDgetwJ\nzFq7W4wrGiz+iclqaqSxQXeWobTaw7e6Dm4XmuT1O0FYfVJjdWa9cGpta+zR\n0FcCpX8WoMFdOaX1DXb2Z+ffl5m7ADJDuwrWIiqjZCAmPAzRxSSwOyUeG5Ul\nRy3Rzq75nnWPhf77MhADc1K1MIdvp6csdbrrVCFh2zk1mOkZ2/nJD98hLlA4\nSTUZu+gv41STHwbhsKzTHfP15PxeGC875G+0j5WD6/cP6YPs1DPfg4BIK7+L\nOwNCzXJwhw4buZo2i9ifpqE/MblJNm+nqsO2xwk2dil5ky3s3To92Vfp6qVQ\nGmKlKZX4BpiFezIEUS/1F6vUZq6hOR/yR+kPxf/E9AFOFfKStdCUMMsIcDKg\nKHxEw9rt0+y4it0lg/ykOR/4DgCTpjJuzC+kIP7a4JNytHyx0FyrubiEyyfP\nrTkE\r\n=/x6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2Sn9VaSJ+1j2fIdHbY2B8GzyrD1VqwM4DW5LJhDHnfAiBrrAoObc6GDFXsVACFZyUq3YmIcidEZYIgq6Z6UkLrsw=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.75.9e3cd0e.0_1626017134940_0.18855553434795014"},"_hasShrinkwrap":false},"0.3.0-next.11":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.11","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0-next.11","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0-next.11","@code-hike/mini-browser":"0.3.0-next.11","@code-hike/mini-editor":"0.3.0-next.11","@code-hike/scroller":"0.3.0-next.11","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"0af981663c74dd5d89f486839bddf1740bafe4c2","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.11","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (linux)","dist":{"integrity":"sha512-o9UAHGhLqIa5bbRilgseR6eEHKmcEplajuPQfZxZfBG6b3FfkqaEsM88utaeJc8d95uJaTHoJ+v5YGmBQQopuA==","shasum":"9844c7507daf3849e63c9827b5e16800e153d02c","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.11.tgz","fileCount":18,"unpackedSize":67859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8XDJCRA9TVsSAnZWagAAT4gP/Ax+NrAhdkarAv5YksJY\nJhKycMFyKTCDN6apEvF/R7b5z1NdGI1DNnsTktBLUvflqsdeAcuswOXB8o+V\nkYRvIQuuRSntd3kN25wj7mBzvoe9IrOSz1sotJKNxueGNGPSlxnowpz5kjZ/\nMnWAhe3/FiyqUNcpDwG4uq7lARRKrSzS50NAeLu9TfDlR4yLca15cONn8Q4L\neffKaDDgWizlAr7BL+9w/NXr1OgjqpWl0KnIEsksU4e2PhPPrYVnyhecWBxr\nPHv0NYAUUy24w7p8/1D60Z3w7PecyAztY9lAwwZnKp4zFzNdIaiUG5faqS77\n7Fd/6anbj8NpayridiQb/XIYsPShdbLO3F5vpwfN2uCrn8uOxpyfWl+ImRyv\nedpJ3g3mjkdQVmwfvyUcnEbhutSeNagRA4qxR3xVyYggXcJBHBXJcccNnnLU\n/UTuX4kSnHYTXv3HFWCmYS33zjW8wv+4xhZKiJQAr4WM+t+Dq7S51yJXhycI\nwaqj25sClSJz6Uw6mq+dfDeWXcVZ6cIe9ZsUrnFbQIeDeAve/MblYP4wab+b\nkNKfKT+sN5u7675AohDn4sBwizU0MEgpb1iGQyfeWd7LrCYPo+ix31lC4Crx\nTD+RpYCtwk7X+c6o80FZ4T9JRYrSmPbUaX9u9Yux1bK03XZ3+DH3ZinfuWTz\n2ofP\r\n=pp7j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWX5o6sIw0xoq3vLSjgZx5izkxrm51e6o6iBCyr73/LwIgRkfRCU0FcrHbmy2znm5TCgKtcYh/gfSCWS2wiFt1qkA="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.11_1626435785541_0.3989721147409033"},"_hasShrinkwrap":false},"0.3.0--canary.77.ade5d72.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.ade5d72.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.ade5d72.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.ade5d72.0","@code-hike/mini-browser":"0.3.0--canary.77.ade5d72.0","@code-hike/mini-editor":"0.3.0--canary.77.ade5d72.0","@code-hike/scroller":"0.3.0--canary.77.ade5d72.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"ade5d72c2e84b4893c40b07e576b9aff818d6cec","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.ade5d72.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-VStvRfT8dJMywFGMsubMHk+DA0UofGPTwWGF5Mrv51OZ0CyHe/vVcYQLDggCXznaIAoRQJnSqWTHNNULqAa1Kw==","shasum":"b502f2943fcc1b00f4b3fa53e06762807bdc6403","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.ade5d72.0.tgz","fileCount":18,"unpackedSize":67937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDnThCRA9TVsSAnZWagAA8L8P/j4EwtrM46X1CmQafK8c\ntHOso3Ny8P9VsSTdF6nt+XP1iUO6AuQ8M+gLYIxKT7U22OXMJWjDEL2I5gv2\njM9NN/ic+k+45MeBPZBG+cAujD0zo5z0SlZSQ1hQ2E/j+wNXHpm67xKKLPo6\n3ontafTOhj7vvp1ovuZl8iHYeC4D9LpUX3ztuXiQDbtlq3rAI+dIC9Atz8I3\ngm/svcEH3h8qyI/OfLaSYaoktVF4fTvNkxej6RpiLgPuBOUtDDImsTnbbItP\nH6Dxamp/KzyG26HZ3ALpK25tdrsEck44gDB/mPWEl3BwhkmCKxZRjQCzo2FC\n+SrcLFVsAEdW3THfk3nCC8NCLRLR95+KdihlEVdTdcGTbttalA96UyAaCGPp\n0jxrmBojbZhUQ4ob9zrbNFUIar7Rn4GY36slv/8Lk2v+tuoBRlDOwzNtAvsS\nxbumEIo0QZ1RqpuhY34WYGD5UIz5Otgf4oYfk/pM9VssGXrGIqlo2QxPky6w\ni3G65V+zRU2MohwX0i0Evx3bCMqARpeAcjIirLbLAcKV7PFd4oZDGflDCUrB\nX0Jrn411Lf8Idjl0XWFlbDJVbfU4TbXrApDg+XIi8dv3fwv3HOaJjJLrVNMU\n3lXZcXuLC823ly3NUWAm8/4wHwF5P58ZM5vMphajwsNrTUk/dOqK6HSwbDxo\nXH18\r\n=kqG2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDygTP5LOLneNfdrvYp45F1fHaXBHDh2+eSNWLbDp3opgIgblDG9ZRisal+4o2lT+qudQySaPktmjTaPHjRnaG6tYg="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.ade5d72.0_1628337377774_0.8504087563399059"},"_hasShrinkwrap":false},"0.3.0--canary.77.e1fb282.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.e1fb282.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.e1fb282.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.e1fb282.0","@code-hike/mini-browser":"0.3.0--canary.77.e1fb282.0","@code-hike/mini-editor":"0.3.0--canary.77.e1fb282.0","@code-hike/scroller":"0.3.0--canary.77.e1fb282.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e1fb2823795e6394c8456c99eeef88344f3dd360","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.e1fb282.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-ZsqJmpm95O3umBLvZAq22VZpHzzjL2mRcVr2fktwTcSiTLPCuYqNE7rIXA9RPvSPjOScbYAzV8M8mv/lBFCj9A==","shasum":"ce87a158db337dd627f1df38735642c9816ca54a","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.e1fb282.0.tgz","fileCount":18,"unpackedSize":67937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhD+IGCRA9TVsSAnZWagAAc/QP/ifBpevvD04jmPkTtn68\nELNmCfaHxzxlzb1FEa3IoFEL2D7PZQbjo9VGlbv0nDZeFXzxLZ8POGRNhFbE\n3yQaCGeozk5QterLiIRJo4NY9SRPspFebSN14Lfgr1GqjnzoQhzqEcY7kmfR\nAYIyXv2iuhuSc0rdy/TKhxUlywRw13jfoOfNbU7yKGSWr4AHRigdduhFpx5p\nY/1Ei4cJDB8THOybRZgSaQ9J7aclR7iHALSM4sFQ+ZkGa1B5ciBg2SeRdC2T\nI0Jn4hqCH6ULPeBgoLjrnYalhctFwH91H+GZkfvOcYcME+hFAO+xEBDICX5K\n9ofgLE9XBhllV48KziyGWoBAP3Kt1/leAbSevAAf5aHGkz5PhLIwz4ZcGQ84\n20NqzAcBxZiqjLPTBiAFX8UhbFhr8CPLP9KQcCUx8XinfnebhsJMYbM/2Q8K\nrLB/xJWKp034mvtAObLUTQI2LY5j4wZFv5KvbQHm10/TVkZJapwzjFWcXLlZ\nC7Czb0Tm8/xMegXZUj4mBz88M5YvPRjICpNBp+s85kJ6r7DYbE7w7cwR3HG3\nITYd0jWASrlmxZzsi0vFuipskiqEXaI6GkyrCMm2Z972pdM5dk5n8/Z45wVd\nEdeaXucHJUq+6Z5Ee5RbVlPC5+JO+hSsMnkBaCBZR2MuQnUDGlH+PYh+EbCx\nPvke\r\n=uAdW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfBhP+c8iVaP8+rHr66yFKYIPZ7fwXsnmJv0+ZmsugNQIgFd4qA8Tvzq9YgXr6qMwE10aDRMFTE+wjAsY6xMaw7bM="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.e1fb282.0_1628430853871_0.9103955384801272"},"_hasShrinkwrap":false},"0.3.0--canary.77.87864a9.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.87864a9.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.87864a9.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.87864a9.0","@code-hike/mini-browser":"0.3.0--canary.77.87864a9.0","@code-hike/mini-editor":"0.3.0--canary.77.87864a9.0","@code-hike/scroller":"0.3.0--canary.77.87864a9.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"87864a94ce18cb710aa1a30699add71915339dc1","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.87864a9.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-AUfkrbkFbU9bxoxUBIhm7bt6GXadGaPc4RWUKqSx6BqkHk2PTyHSZk7PbqJEhU0P+DIPp1oSHrEh/G7cGFvlEg==","shasum":"e16b03bed871507388d1030a242a0aa23169e9d0","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.87864a9.0.tgz","fileCount":18,"unpackedSize":67937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE9pQCRA9TVsSAnZWagAAM1wP/j6puod6ohscmkX89ad4\nQy+4noWFJmlb6Vx/zYE9XTVtYyXBmKwV8KZaZyuQd/M0OYe1FVidk1FDxeT3\n5Y2IaLvZi0bdCZocPnwRtU7sn7huIaxPgo84p3LbYQEQwd7ZAkl1tAeOknnJ\nkHmMQGFWH+FDNP2gwJoLZCs3osGDEbsy5vGNFXAaiQW43E+J16He2ORgZ+EX\nHzr1IjxABgCMIK2CB4fow0Hs6m/RuqYKBL6Spxsqs3k1ye7bzrNnwC4rmGYW\nShoMi/3zbSeCcuN6sy4mI37FAr2r2ew70TT0TjRRW9KIBEudsByDHfUo2xkm\nmBxrGwsDHS4iFs6HGkjv5i+BaRNbzv5N1aT9vQRn2Ei4GB80qfgcJv8iDIPi\nGOf9rh/OpMcou24OekzmWejQYylvYDMlgzYMFhMj554zOWjas9xMx9AFrgZ3\nr2TutJnkvkZ7Mc/b1D3MiS32H5amdfDakQygOkuB31WgasgKAf8EjkFRr3cy\nWHo9FPAnBLIDIvzkoy+3QTldgpAjC608wgGJVkyxhzPV6f9y44PmkSTiIAFr\nWbgofSUby5QVu9LSoppjhPtZjQdc0fWQt+/A6yuGK+GhS08o6ABmusVCIEEm\nuGHmX+ImOjFp5xyu4sp7Rnp2Ud9bVENp5cMWFAxuKBblsrIQnPWSVIyONjwJ\nSXh4\r\n=wEQ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHP19mH4cqCgcT0yiR/6IPglucGqprqVGTE7+fkNPQuwAiEA5zuwNxoo/j58YxNrDvD9qSZmN02estwDtdfKj7Rmli8="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.87864a9.0_1628691024347_0.8845117663427384"},"_hasShrinkwrap":false},"0.3.0--canary.77.6c844fa.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.6c844fa.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.6c844fa.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.6c844fa.0","@code-hike/mini-browser":"0.3.0--canary.77.6c844fa.0","@code-hike/mini-editor":"0.3.0--canary.77.6c844fa.0","@code-hike/scroller":"0.3.0--canary.77.6c844fa.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"6c844fa2ccfc2fa1368e7b26b2a903f70aa3eee6","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.6c844fa.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-FS9JX+3P8piURSxzqHkn1tzVxLv2gGEPIAWW7wZWRwihY9rUEXePmxfZIjng3yjVVdtrTqsCjEOhjZOKoQQdCQ==","shasum":"e8844d27b1611bf00634986fe7df6d02d18d40b3","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.6c844fa.0.tgz","fileCount":18,"unpackedSize":67922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFR5OCRA9TVsSAnZWagAAKfgQAIFhHR5vAMNkOX7R6AC0\nQ5Vty8dKBOUGK4CdgoxZabc6CQA4dx1VR22IfpTSJ9FxMwq2Am4IjKB5JH8h\nEwn+mfbhUIZAgDEwPcga3nLt/ANk3UQba+zsEcPaVEvBUatDabXbWOdpr2CU\ngRUWZcRt1ZW0JzUmukRs+AitBkal87c6BJ6V2e+UBFSCgKiktyEptCVwpEGL\nztUjRayZguZdvvUrXmSmVXavAsx3PQZtIGFC9xChOPzoAI7ki9M4QHGglWfy\nErvflzJQ0rChhmPaOCqStWJ0AyNPQ3nLXYywiHB3mr/ChOFEmJkdRgGCe2G6\nGk1+O8MZ9qMAHH5CsQbjvihlNYgyqo4fhZZfCVFZiwvNwMYPXg2Fg3HcOLwq\nEqPeeFCvB+hTmTBAvKLw9O5S32qED/4E+VF1m8HLd0uID0rSEYo7pxOdfI19\nnZE4TWRk5i1xk04V6PrARgWbjyLnwPTcd6aLqQH1osRfoDNOyT07jIO97T+a\niG4FZ8huM8kLjC1g7DpRDfWsCMTXU1DAuFCmY3xzA37++YDo0Ntxibnpjk8C\nPr7fLOy4IJemA60ZETDRk7ygG7An7YDIbSX4/8wTiOR56PwPbWKIqXc8gQw4\n9w1cY7TOLmuOpLF3v9+XUB/53cJfA23A76dY75QNZhXz1HprK7YiSkgGo+//\nDsol\r\n=R9P1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqsO0nWCjgin53IFoBYWsPIo6CdpLtjF4AAkH4meP7mQIhAInqtrQG7SCaPBo8KQyJNLTxCmwAZsmS/JFWSvrCqgJy"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.6c844fa.0_1628773966585_0.7832392838643663"},"_hasShrinkwrap":false},"0.3.0--canary.77.c58a10a.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.c58a10a.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.c58a10a.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.c58a10a.0","@code-hike/mini-browser":"0.3.0--canary.77.c58a10a.0","@code-hike/mini-editor":"0.3.0--canary.77.c58a10a.0","@code-hike/scroller":"0.3.0--canary.77.c58a10a.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"c58a10af94bfbb73197c59ff8331d2b2635c9c29","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.c58a10a.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-tWh28KKXDoDuU40csSuC9mKMQYUhZP/z/rLKLOkDGDeA6n0GMyO18gXVCMVOrzPC1pGWlzJjdnb6dyDfeRXKkQ==","shasum":"269445b5523f674afaef326fed952585c3c4bd0e","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.c58a10a.0.tgz","fileCount":18,"unpackedSize":67922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFSNPCRA9TVsSAnZWagAA9mUP/i7X+4LZGL3fptIpFFZm\nxcvWCN1nhtWBN9uryLnDL+tguaV5hWdyUaxaduwqtpl9fFCSXDG/Oj7mGeQE\nHwCbyrv3+6nD/GSEGVN2eMKxqiwCJjzcucJ6+W3c2FpLkd8neJeDwx2OPJiQ\nEwnMKeBo+xXgXUUljqljejy+E6eQwLRQXklcjeiC+hiBaKgjOeN+k6bLRMNm\navkdhBuHyUldYi52EV9KbJm8MnnK/igM6X4p5tQcskkspygFknXdpfPM4wUm\n6Zb2AJQ58MDoL5S43Obc9xc2OnitHx8V/TlNEBV6TbX4xshhrVxiYKDGDUiJ\njBbPJUVzwgN29gKn/3Z5LyFzXETupFEAwjWtav/zEzIREPXbS9/kRi2t4aFb\nNTWBiSeaY6VIENvQMLcX0SN8sgic2xnN4CyYg3VnxaJvqrKPoG28VxZMK47X\n5/GECwDBhB13JQ7rKaBorK6bqyUQnXi6WJgI26q4ThcFzyp4B3OnTSWs+KEv\nSrhz3NNSy8MNQqzHJyeYgxcmw5nPsQAId43rDnLijYimaIhpfV5EH94EsY0Z\nFWOvw9aGeZn18hYOKsRXxLX4pF0pyAmio+s8RUX8dkAHlMCFq8cexLHwCADA\n+MXmF2dFIlmZ+5YLd1BBUxawSBnQzeDuPVMj3hZuNHqnvIl+bTtbZxD17T27\nttWK\r\n=cmVI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4iXgWcaP+QngMwWr2ekMpMI21j+pT3GzzAQPHT27bkQIhANcH2TmSZVDVtTBbCIEakx8ylem62O6DH1cFaRkukmRK"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.c58a10a.0_1628775247174_0.8537709954640398"},"_hasShrinkwrap":false},"0.3.0--canary.77.2395a40.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.2395a40.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.2395a40.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.2395a40.0","@code-hike/mini-browser":"0.3.0--canary.77.2395a40.0","@code-hike/mini-editor":"0.3.0--canary.77.2395a40.0","@code-hike/scroller":"0.3.0--canary.77.2395a40.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2395a401900a43082533413ce49183b211548e11","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.2395a40.0","_nodeVersion":"14.17.4","_npmVersion":"lerna/4.0.0/node@v14.17.4+x64 (linux)","dist":{"integrity":"sha512-lXOZeXP/1wN4H9grsOyEkqVxmvRY+eLn2OrI45yIPuaWcGpmr6EJ4aAR/XnRAunATBiqsN2MUa/YBWvakUxw5Q==","shasum":"06ff7f7a512885abda44f149dbd0a0b0360762ed","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.2395a40.0.tgz","fileCount":18,"unpackedSize":67975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGpFICRA9TVsSAnZWagAAz/UP/RCJnRIJE8AOtPkk5HVX\nbTdlZQR/06e39GbbvcDnF4ezdBKNud9PpxhUpHEqRmSgVqaWmLLTLwiioLj4\n6fzSqN+3QSMgTkMnFN/Gj5Ah8Q7xBbayPla/DgLP8KM9ouqEchuz9f2dlUrd\nSW66Be8VxvIxOA8dvIafyIU+wbEpEyUZ3xa80Px2RcrYx6xXzfN1pjsj0g50\ngqjb7wksyh5EWh15ZtCLnCmOFoDb4qDJ2nSKQxr1h2/gk6ozhz03doPwKk9u\nXfIVZoJbhCv0FvMBZyk0+oC+M7I+oDGCjKLVQh2FhVXP78jy9PTph1AuehhO\nORBMrdDyVle5WLgt43MdAup3IPxvSrg5LjAm3WlknwEYlnp5ZI6vPZbxcFZv\nc+Eaba8UCwOO2VQSSgpqC0FEijRypYcLRTCWZ5afaPPXA0cnS0ajMve3wyz7\n9KBYmnuvhzPskZX8NGcbepuCvwmKZ+HPvmsaui9ZGuwK0+iYZvFUm0YFYB9g\nLnjxzDKgdE1ckBNt+DHeFgJ1KbzM2G48kUk+oYXrxfa725jyQ4tY4B/rKgVd\nf9v+9xYejTdvZniR9YiwragKh1ZlNgjvqyUWg6P08KuTMFDGufKpMQbR1ZZz\n4+Jl2dRi7emEfCQUP1SFJ1h9AWFY2OljsVJXkUR0MyUpIgNieqym7UOeWnDg\nT1DO\r\n=s1sX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1niwuu86ikxkxnjh44l3SSH472b1MrglC6RkSnuE3PQIgUwLE1y792YBzKFRE+05auGtH31TBTjCjx7tubIfpYSU="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.2395a40.0_1629131080821_0.29366984753900005"},"_hasShrinkwrap":false},"0.3.0--canary.77.dc9c2e0.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.dc9c2e0.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.dc9c2e0.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.dc9c2e0.0","@code-hike/mini-browser":"0.3.0--canary.77.dc9c2e0.0","@code-hike/mini-editor":"0.3.0--canary.77.dc9c2e0.0","@code-hike/scroller":"0.3.0--canary.77.dc9c2e0.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"dc9c2e059239013421ec870506b891a6332731cb","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.dc9c2e0.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-WtzMr0OlZjLnxglW10yirl+2R0xN5W6ykdnhLQnbngVUs+Fn0hwCaIh14WiJlYj5D6Yz94kqrM4eRaK2queJFA==","shasum":"f9bdd8322c1e89a91ffe5b31e2c98f905f6632bd","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.dc9c2e0.0.tgz","fileCount":18,"unpackedSize":67975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhPJVtCRA9TVsSAnZWagAAfykP/il5MMMxvA2a8ibQ8FOK\n6JvGjfCjmFQ1PQi96r+b6ZMzazf8ybA+a4FOYAJfKX/iaSgYKWpi+0dF5Gr2\n2lRcWV5OVXsOdUauHXqQMmM7/25aQF+8WR3ePyrfXsLmPurkaPDNh8UsX5L5\n9cb4tc8nYb2D1kV+WN02oEOBAr/nBm2i/4zT5x3C0o7UtI/qGcFs3XagNW1v\n0ONE7Ji3w7ZPobioIEWmZvpSwmVD5GqRPMepAubwELU6KPKEXtu0IqMicsXC\nJx6hATLJraLrNU1f7KdQ3Hgeo6ZJ2l66X6o7c1dahl7YU6CK6BXu9CR5C7f8\nNbOQQiYVantIQhn4oemCR3vGVoU4/g0tJGffVOrOu+Hu8T5RywSPV6MbvI7a\n3ExPjrABAZy6+UoAr1JmG+DBJ83BhP0pskZV7y0cC4ZelY31luEE+Z0uoQgz\nPic8lXT0gSeUJVQgDGN/GOYMZnu8xt/2xNJqwXmBc5R+IQO3dUZc/YXpP6c4\n6K1CJjNU4tvCBePcqbOcbh6ykM4BB3yEbFwYg/9DAk/HSHnSFjj5ZZ7pswIc\n5yrr/ZKQj+3mDy7YnJgXKE5rngi3KzyXM8LT7f4e/HlCGGhr1XWKSZMMdULk\n+s+NK72aflUodg2xDOuaefIrjFFRGTIO+Pw2UHULzPjEirOQITsrS0g5mpNf\nYyry\r\n=pNPp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnVDMWHymgmC2xGdAm9utKG5HBkMR6LZXpIhGB77niBAiEAyyEsMeT5BrNrvohGNQTlyCactFbYrLv8nLrXQQPSxIw="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.dc9c2e0.0_1631360365301_0.8828700317447356"},"_hasShrinkwrap":false},"0.3.0--canary.77.045c5cf.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.045c5cf.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.045c5cf.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.045c5cf.0","@code-hike/mini-browser":"0.3.0--canary.77.045c5cf.0","@code-hike/mini-editor":"0.3.0--canary.77.045c5cf.0","@code-hike/scroller":"0.3.0--canary.77.045c5cf.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"045c5cfb7a25f306dd081d1b28e678173dfd839b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.045c5cf.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-hVVX8JfZMjwfXqQHIvuSMdYVs+yoC92Y+ZL1XOX1xHhrSYqGWitVt4BzhWkdWVA7x8h7MENDvPdCVCYyHE7fuA==","shasum":"d7b9ac273f5713a8945537452e53b17bf4f4b4b3","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.045c5cf.0.tgz","fileCount":18,"unpackedSize":67975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxImW41qomVcVfweAk5WOeZGD0K2zYJDYArjJd454+gAiA66QNTC3w/jqqzC028aACrFMmY5kWYkw9BLidS4JEfXA=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.045c5cf.0_1632172933823_0.8630133070920847"},"_hasShrinkwrap":false},"0.3.0--canary.77.8e9455c.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.8e9455c.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.8e9455c.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.8e9455c.0","@code-hike/mini-browser":"0.3.0--canary.77.8e9455c.0","@code-hike/mini-editor":"0.3.0--canary.77.8e9455c.0","@code-hike/scroller":"0.3.0--canary.77.8e9455c.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"8e9455c6c52537c6f0fe4beebc78853bed601fc9","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.8e9455c.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-fVb6HdGeOgg5Iqb5WNhR0VKSDXyUkA7aDCIr0har1N51YGAxTn9wtbitkDuzKI2K5gWw2OHCCwOEIwbFbC/lEA==","shasum":"68dfea4d4757ad2f87d78498bbb4bf4dbfe5919e","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.8e9455c.0.tgz","fileCount":18,"unpackedSize":67952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkoYp7d/b7ON+/0mbRfQ5h9o9mfxpcUWaw5V8ZSxzg3AiA4Ty2pcAehWjLsHbmliiZjBGMkGMzFrIdKtWpfwaJc3Q=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.8e9455c.0_1632414735340_0.6171512938988499"},"_hasShrinkwrap":false},"0.3.0--canary.77.2616b6b.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.2616b6b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.2616b6b.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.2616b6b.0","@code-hike/mini-browser":"0.3.0--canary.77.2616b6b.0","@code-hike/mini-editor":"0.3.0--canary.77.2616b6b.0","@code-hike/scroller":"0.3.0--canary.77.2616b6b.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2616b6b6722b561a7cee4c1de5389c3cf45bf74c","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.2616b6b.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/4.0.0/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-l7Xg2035IKYBylLNqQviydZ/ZV7A5mZGfreV0DdU64SeRJsMIsTcYx1Kzu7FDrUwmDfPDo9B2PIZXaWr2KamJQ==","shasum":"134b5256fbd1e86f101302cf1f05cbb3d8dc7d45","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.2616b6b.0.tgz","fileCount":18,"unpackedSize":67952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRDzWjW3kkMlgrNOPrPz6XfsQL9kivcXBAxlEZA96ZqAiEAorX9dVsVjcx/yWPQZUQCBMKyaxR1WYfht8KNmYNC17U="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.2616b6b.0_1632601739219_0.13102333696008106"},"_hasShrinkwrap":false},"0.3.0--canary.77.3bbe788.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.3bbe788.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.3bbe788.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.3bbe788.0","@code-hike/mini-browser":"0.3.0--canary.77.3bbe788.0","@code-hike/mini-editor":"0.3.0--canary.77.3bbe788.0","@code-hike/scroller":"0.3.0--canary.77.3bbe788.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"3bbe788e78697bb538a44d4675b49bcdb3e5e0c7","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.3bbe788.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-qbCdOrwVF8vlVFVkSzDYFl/cY57bAZN1Tgppq3uPji9zx89v81UagH+spKMisLbTBZkbIj0FkyWW4h4LSxo9/A==","shasum":"a21e2abf6346929cac5763eac910eb30db168735","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.3bbe788.0.tgz","fileCount":18,"unpackedSize":67952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7Jvy5p/ubqTZTh4yJZUsZIWftRZhL/mhqHPsnnSyXbAiA/xdEovwzhgvB632Dgqs8SJYkN+x1jcU7+RUboz4bnOg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.3bbe788.0_1633343269890_0.6609917518607369"},"_hasShrinkwrap":false},"0.3.0--canary.77.4c6fb89.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.4c6fb89.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.4c6fb89.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.4c6fb89.0","@code-hike/mini-browser":"0.3.0--canary.77.4c6fb89.0","@code-hike/mini-editor":"0.3.0--canary.77.4c6fb89.0","@code-hike/scroller":"0.3.0--canary.77.4c6fb89.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"4c6fb899b4232bc8ea91185414690c202187a79d","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.4c6fb89.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-pXt763POJYfatoBvSjbgjG/byw486Eae6R02JdkB7apy3BzAL+tueO56lQ2gig89NpicbJApOVxvnt84bvC4RA==","shasum":"9de9cc762dcf050bffae51b2f727e3c9d59ffbc8","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.4c6fb89.0.tgz","fileCount":18,"unpackedSize":67952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuVYXJBdotlgoxU0RzUsOFbj31V8IAj/3RJVb/UbHomwIgPayUSvR+sYHpd5kckHSEWcGNObOFg70Ff/ls678Nnho="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.4c6fb89.0_1633343614854_0.05475248089029261"},"_hasShrinkwrap":false},"0.3.0--canary.77.979e373.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.979e373.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.979e373.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.979e373.0","@code-hike/mini-browser":"0.3.0--canary.77.979e373.0","@code-hike/mini-editor":"0.3.0--canary.77.979e373.0","@code-hike/scroller":"0.3.0--canary.77.979e373.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":">=16.8"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"979e3736f9c1202bac4f14cf192b3227271ec84f","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.979e373.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-lsGTJEu3Iwe/LVvM2OaTeu9s5HTAAXWaxu+gyKvA/JLB1lyOPqhhFAIsX9M9L7e3nYX5Qt0JAnmUykIiiD+xwg==","shasum":"f44e6468136d012a4920e616694521606d61ac00","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.979e373.0.tgz","fileCount":18,"unpackedSize":67952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHdzUbYCp+Z+kooVN9L2CEAG4AG+FlSldK3gSiTV8yVAiEAitC0lTD65eNpQcsuSAsOdoeWIg6BRx0sHrgBQ0sIENo="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.979e373.0_1633343856051_0.21775441948177154"},"_hasShrinkwrap":false},"0.3.0--canary.77.122e7ce.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.122e7ce.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"x":"x"},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.122e7ce.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.122e7ce.0","@code-hike/mini-browser":"0.3.0--canary.77.122e7ce.0","@code-hike/mini-editor":"0.3.0--canary.77.122e7ce.0","@code-hike/scroller":"0.3.0--canary.77.122e7ce.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"122e7ce5b287bfc6f5361892909a656c0ac39920","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.122e7ce.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/4.0.0/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-CdY+46fJib7yMMulTrm8/WP6IaMYNawW8IMPp3PB99jECe8DFEwVfRcuy9tMnm0EwmEzmDbjVy3BUGnSqVfuhg==","shasum":"bd038cef1b3ff608aba871a99ff12b1223148417","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.122e7ce.0.tgz","fileCount":18,"unpackedSize":67967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/YBVSonDGIdZ9pruMO6SZkf+sj0XpFWNTV9e1DVpDMAIgMwzc4WE5/Xwsq3rYkPo5rDUsy+h8nwluZOG3n/EAUwk="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.122e7ce.0_1633430779478_0.8442282386597986"},"_hasShrinkwrap":false},"0.3.0--canary.77.60a8361.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.60a8361.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.60a8361.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.60a8361.0","@code-hike/mini-browser":"0.3.0--canary.77.60a8361.0","@code-hike/mini-editor":"0.3.0--canary.77.60a8361.0","@code-hike/scroller":"0.3.0--canary.77.60a8361.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"60a83610037797fcba1934bc843134cd1cc406e0","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.60a8361.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-swNfUT1SMd1pmGZtnqbZM47KxH5OHBpjdxdtTExxFDwRHkONin8Q0+liEUKK8eBnAG+V8hzHAi0Oq5o8V/JwlQ==","shasum":"6feb88fcc428f9b781f2dd14932481cac10530c7","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.60a8361.0.tgz","fileCount":3,"unpackedSize":6225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1y304rrd77T9Y/Axnl6uERWgv8TFahZDKsnFQ3aibwAiBWvQAqRgfv8RwRiwaQG3wilijg3Q4vJQQrBxfWXpMHKg=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.60a8361.0_1634976031423_0.12883816858621122"},"_hasShrinkwrap":false},"0.3.0--canary.77.cd9e81b.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.cd9e81b.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.cd9e81b.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.cd9e81b.0","@code-hike/mini-browser":"0.3.0--canary.77.cd9e81b.0","@code-hike/mini-editor":"0.3.0--canary.77.cd9e81b.0","@code-hike/scroller":"0.3.0--canary.77.cd9e81b.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"cd9e81b72916f84904653dbc2a2f91811a340308","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.cd9e81b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-LW4Yt7apbh9UE5IKM9WRqtEkoZ6hLZ6B1mAjpB4oBq3ZJZ3ppFefTAIcFXMfc4liGNMQO0E9mcyJlcsKvQIRGw==","shasum":"4ac8e92540c5b6a0e648f86a821dbe61f535ee2a","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.cd9e81b.0.tgz","fileCount":3,"unpackedSize":6225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGURNrudqlZdveJqwuEOvC3XzvCpdn2utMFBVbZxUmdAiBcy6vB7c6NHVzzh5lTRbhbtaQbyKaFf/Ugyn0sLIaf5g=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.cd9e81b.0_1635887966811_0.7365931747532823"},"_hasShrinkwrap":false},"0.3.0--canary.77.790e974.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.790e974.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.790e974.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.790e974.0","@code-hike/mini-browser":"0.3.0--canary.77.790e974.0","@code-hike/mini-editor":"0.3.0--canary.77.790e974.0","@code-hike/scroller":"0.3.0--canary.77.790e974.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"790e974b182ea5fffc12dcbba46af2fe2107f248","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.790e974.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-I7iBV+iwWwLtc1i6s8rOb8GQyKsdwsihq3encS780Tg8qYymnwylYhQ+tsFNfKFPa6AisrIhH8lFnnFGvH2r2w==","shasum":"93ff80d393229e50a3dccc8db604c08fcfea8e76","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.790e974.0.tgz","fileCount":3,"unpackedSize":6225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKVwQXzgq3ZoyOi3sLMx1Cx/TeJWdOupPOBGE3cNPMLwIgVIZsOONaOsaqYsTxEK/Rq73W0NLZ+C93jBpE/P2Iy8g="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.790e974.0_1636127334603_0.9701469857095106"},"_hasShrinkwrap":false},"0.3.0--canary.77.e9bb465.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.e9bb465.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.e9bb465.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.e9bb465.0","@code-hike/mini-browser":"0.3.0--canary.77.e9bb465.0","@code-hike/mini-editor":"0.3.0--canary.77.e9bb465.0","@code-hike/scroller":"0.3.0--canary.77.e9bb465.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"e9bb465ab104d9e5a844a0eb6c1d0c551136e3ea","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.e9bb465.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-A4GvV3FkwrTssRvkbQt+EmDX7aSwN/FA7C1r77JbldULo/7xldtXRg5WdQv85gLktFwbAhSjBqWBu9lh3PyAbQ==","shasum":"08eb24fa967f1da80d4c4e5eeced384d3dd2133a","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.e9bb465.0.tgz","fileCount":3,"unpackedSize":6225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4E2cCGma8Qk/btqO4wzjfia15T9ws2m4xn6eh5cLVUgIgDwJt4a3NIIcytkhaoK/u7HHmCbW9XZsPf71RsysajAI="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.e9bb465.0_1636282213605_0.6084707333237893"},"_hasShrinkwrap":false},"0.3.0--canary.77.bd15ff1.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.bd15ff1.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.bd15ff1.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.bd15ff1.0","@code-hike/mini-browser":"0.3.0--canary.77.bd15ff1.0","@code-hike/mini-editor":"0.3.0--canary.77.bd15ff1.0","@code-hike/scroller":"0.3.0--canary.77.bd15ff1.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"bd15ff1e743945b8559512b871387f978a599199","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.bd15ff1.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ci61ePzLzpNwbG8IMBiPaIJJ360AWccbLpDdTCCUhAoHI5SrWnfOi7TNazb1zKdjlZk+DQUiKIJe3RmwmdRfqg==","shasum":"cb5fd4122133bb70138259add83598f7d113dea1","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.bd15ff1.0.tgz","fileCount":3,"unpackedSize":6225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEw3A+dnJtoC93QpUkeSqDG7cnt295xmPMd5gNIBy6JAiEA4zclC4AoVz9Y7H1L8sA0Vm4DSmkhwYSUnB5gzZ7YgmU="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.bd15ff1.0_1636378308593_0.3327169716733054"},"_hasShrinkwrap":false},"0.3.0--canary.77.7150a39.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.7150a39.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.7150a39.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.7150a39.0","@code-hike/mini-browser":"0.3.0--canary.77.7150a39.0","@code-hike/mini-editor":"0.3.0--canary.77.7150a39.0","@code-hike/scroller":"0.3.0--canary.77.7150a39.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"7150a3912c39850db726e4c1a30c9655b7d14525","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.7150a39.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-M8uUqrntJdTg7YkWdgSKVHujz8kjEPV9+cQVt/+DeUN/Z9QMmQlxhLKdw6RCtJqleJTfHaAO4VCQaDV0nqYStA==","shasum":"a37402690034c41e888464cf2e69b24c15021a19","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.7150a39.0.tgz","fileCount":3,"unpackedSize":6225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcvLQ0G4QnTVmzELvFC336KMywBe1gf6zzmcX1yo4SCgIhAOxi6tg1Kr7K0GwKe+7Co9nIzivH7Vjh0trT+Buy5OLG"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.7150a39.0_1636481553107_0.5765550854076049"},"_hasShrinkwrap":false},"0.3.0--canary.77.1351c85.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.1351c85.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.1351c85.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.1351c85.0","@code-hike/mini-browser":"0.3.0--canary.77.1351c85.0","@code-hike/mini-editor":"0.3.0--canary.77.1351c85.0","@code-hike/scroller":"0.3.0--canary.77.1351c85.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"1351c85b88dcf72dc8828976689fd84ca17ef0df","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.1351c85.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-7Qpx/nHKu/KCwweQOx/s/5P7v7etoLMB21Ful07hGbsHaYavy7n/65sGnQBx797MaapTTCzX6MlCL/Zupx6J3Q==","shasum":"f05ccb8361ef0648b0b7b59bc471af65462d1581","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.1351c85.0.tgz","fileCount":3,"unpackedSize":6225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl7gxCRA9TVsSAnZWagAAlNQP/1lXvGwYjL1Aw9KxneD/\nAKemRwqF+gelVDYFJAmQFRpMVOQ0Ahl6G2u39g9Sjnf3jP+gXK2AIGxwkcKG\nQq+p1myuEYJW5rksoOl+tAEYgfeA1VWWGRAt7VbCERfFAtulkdojZjjmOYOm\nTWxmukiFYj6SvXAzLxzA+vJqCFvUhwMNVs8WFoqbf0HFEQrZSCT9l9e2WDIm\n4DH/laJhaYTgMu+ciHQ1K1cQgp0Va3FY/4CZbcOlqqgsStOopBWaMB3BHwtq\nO9dRJCa0JTHoqYms7x/QEXW7/Z3tT6pqtTPP7oj1z19MV4mD95vh4ARqiOX6\n8Dmf2Wh8iJ82vi0lPUOWVcYGiEXODtoEzwfDHDYUshYOrA6GJTNS7EmqYip6\nlx28UQnA/E87zLqX6hZ4OUaTfSn6x9rAtUoIf95Tkt7b70hAZeKgZHLHJM21\nKI59+5zrp5dDiGe3fAyEPGI4EVZQJzbkewLQEmOgLuagHzkGWURpTfmL1ve4\nDqZGH8SfVQJOAoMlQhptCLEKIAe5PrKCYYl/Oo4Gv2p5xxe36MSPApmJgRUC\n7jBAuEiaX+KnGHARCafKMaLajz2B82JreOcJJolc7eXRj+/HqetwAwzzCIMg\n0KvNj6mmBRXBRnYEoQbYDU8lg8bSwnyZ7zCobWocTUJXPYEf8P3kVSr7IFSV\nybIQ\r\n=nC6M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkgavXlJeFchmt+osVCaY7UBiZif4FhP+7AmpvJFEDnAiAC0eLMwiqER0wEGxAmKWZnE9L8jQ6yNgpB6xRtGWik7A=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.1351c85.0_1637333041607_0.6635321487364352"},"_hasShrinkwrap":false},"0.3.0--canary.77.59321d0.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.59321d0.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.59321d0.0","@types/object-hash":"^1.3.4","@types/react":"^16.9.38","react":"^16.13.1"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.59321d0.0","@code-hike/mini-browser":"0.3.0--canary.77.59321d0.0","@code-hike/mini-editor":"0.3.0--canary.77.59321d0.0","@code-hike/scroller":"0.3.0--canary.77.59321d0.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"59321d098b05dd91119e5e0375c2842e3d23dfbf","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.59321d0.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-2eBEkSwcr71874M5QhxNW3AEAdT80lsk26SogIPBF6A3FYSMqg/AXEJMIccg+4KtyqKSCqDKSIyLVftlz67ajA==","shasum":"1babb788a57a308da9d5acfed388f518dd4c9905","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.59321d0.0.tgz","fileCount":3,"unpackedSize":6225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmjCpCRA9TVsSAnZWagAAusoP/iTzPnf2eBDFFsuwDoYe\nrOWzoSGqdYu/voOVu2hpsf11B+FkmpEOu5RaZeBBaepF3js7kKuZ0ZE7B3Rw\nbYK4nYOvY+XAmKAmZ7PZyGyISLj/t+zURs0b+p3HWWd+W5Gng/qAksR8Mpa7\nPY9/HTA0KjlxpsS9UpP8i1+Quc5FYOqWjcYlxkR9fY4rJe6HYDwkd1IEiMu+\nYG0nZrDap+nSX3M5FLlYLabcIhnFGuV7nVjwpi++aiv8TtPMrdFEdf5kne5b\npYgQXIlPXuWdv/lCNZLBB3Mo6BW8DAwpFd3lstYxsSsVfELFmt5YWxhnPQUG\npj7ilvHGnFr1xWsUgDRKAMpIP+Bs4OnDMhwh7K6Ag2PS+EFfRcVAOq8PTVSq\nUz74uEENRaHxaTAjyfchdZxf6Z90EQpnauGYprVIW02xl5XQwOx8mBZVubeF\ncnfuyngXbydimb2Ds4iAC5YDw7Lf+19Pj9slPfhY/MVDrUBK7PsGGALWOcGG\nCfZqEO3OJ0YhZfNJj/4uFuXPRIlbG3SL0lJEfTVyrxrMhpddH8Fe1aT5w+Sz\niLm7QBDXHry960mAhVuR28I7KC1MvbPhWId4RtVeHFkOLVOrpkH72zmyBw5t\nrDYETZdZxmfLJd4wbewn6OoXXtQjSeWNl6/ekwuREaM0LmAzYX8Vy4rRBHr4\nlBcQ\r\n=6Al5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFa/8fpGbRQyqqrYnf9DBjwd2kBiV2+3o9iCP3tm+xvRAiEA66EnrQZaK8aaottxDvHB6fa46kHU+I3mayXRimiGuGM="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.59321d0.0_1637494953374_0.40820797307828105"},"_hasShrinkwrap":false},"0.3.0--canary.77.c8f7b29.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.c8f7b29.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.c8f7b29.0","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.c8f7b29.0","@code-hike/mini-browser":"0.3.0--canary.77.c8f7b29.0","@code-hike/mini-editor":"0.3.0--canary.77.c8f7b29.0","@code-hike/scroller":"0.3.0--canary.77.c8f7b29.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"c8f7b2929ddc229854ed919b6427e77291be9cbd","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.c8f7b29.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-9FQutraPwJ1ECxwrT8Xl5flDLKSmebq80XFDlGscfBlCQl2js112C6UnkB9kKwwtzyxBb4bJDxFGZkTUZ296Ww==","shasum":"7acd5f1aee24cfc70312799f31169451f344837d","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.c8f7b29.0.tgz","fileCount":3,"unpackedSize":6223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm3/vCRA9TVsSAnZWagAARggP/0j4wu3AAQN58eTWrQBf\ni0eB3IHcuGAdKFXT0SMGD2M5SynbWxbSJoao+z9ZgW+c2B1zIzz5uJemkvVT\nMQTH/OY9xjVazgeo75dyCBJgDpYRmpCMZDxldMNRMlCmzseNmk3LzYu/zOo3\nzmBa2Kb/PV/fLM8Dbghbpnr5tltCwjbGdRF3yeOzpJxyXh0GOBfG0uiiWGbj\niQGG84cZVA9ChLyre/iaVGmRzmBnVMFOuVCk2iQi4IzSR2VlI8iMuMpyT878\nq3MUVxKeQ5oddTs4LofQXoiz8XfHFo5Gw0AbQos0K7dV5fGpa15usX/iZ/f5\nSVZll/LSgJDPaV2SZzwyVIzR9nMyx+ax09uuuLLghS3XR2iPysJM/FG/kAwt\nJvJG4YzSAqWLzyn3wA1f9Hi4qUambzrKM5v6HYKzBnHRd9yWEH+7dOgvMsMr\nWmc8fl/j4nLNnoP2pHM1TW6tokLUOPV7QlnGZWzIubvrv71l3b4keQ9XJfoY\nQ/D2sW2dmGVZwC5ywImzi4O3fqVutbyDJdxXo17GYz+VYaOUJXPF/ZoBZnDL\nXr9ro6oyEcqs3yeX1AIQEjsEGwLTgIDrRduEYuPIdlP5sSo8Skts5ptnj59+\nq6KVzj+eHgxGOQZnMUAQbD61Td60XeKFmaS1v1XLkSeHV/H/JpwzQCwSnfGc\nYT1P\r\n=reRp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQumCU4YzJ8wYEgy+XFGJnH/ah51wpgxpVASkZHN7UswIgHKiawPZye5V3UsNh27BU3IcwV2WsuLRJjc159p4+zKE="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.c8f7b29.0_1637580783678_0.8098563922378561"},"_hasShrinkwrap":false},"0.3.0--canary.77.eda31ba.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.eda31ba.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.eda31ba.0","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.eda31ba.0","@code-hike/mini-browser":"0.3.0--canary.77.eda31ba.0","@code-hike/mini-editor":"0.3.0--canary.77.eda31ba.0","@code-hike/scroller":"0.3.0--canary.77.eda31ba.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"eda31ba3ce0ab994f4d4238736294e2779fc3c1b","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.eda31ba.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-B5AjTv6BmfWHSVe1+FEoAqL1pnGLxZq5UJShLtA6g0HK439L3W1vPSn7pkQtBw14KnLedazaEgUJhy0YXcx2gg==","shasum":"77018e54380786144b5cabb8e28f32d08921b2e0","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.eda31ba.0.tgz","fileCount":3,"unpackedSize":6223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn2HzCRA9TVsSAnZWagAAnCkP/1T7Vpvu8Re3bq/MDXC+\nz7ULR5BSzi0/u9//IvThQsWvOCoeVbejHZ+gmy2w5dFVRmAp3pk8WIOUblKG\np8oLMk2GHnh9NTrC5PUPAaTPLPxVDky34YhpSFAqNkhAWq0AZZROrVKrzDb/\nDaN82np6plnAhinCLuLQQUY8X7E1wiSrrAeeyu9o2jzBSxysteZVuuzYyzlL\noK0B+jwK+GRGy14kmQ3nLWUX9Ln+lEWfi/QwhmeNVW3tOndxwErRZu58k0vZ\nJER2SE3qi4oOUS4JGYP5TdZOSUxlMUWuMcLmqVbjt2uj3G1H6Nx/43Wen+tg\n4Rx4K7it9EGYl12hI5LHdhk2IdupeVOO7e7H1IZlhzTPIayfvMpxeeHOHiXo\n40w/Jb9AcKx4VB6HvOzCBUMu/hjGmxsPylaXT8OqT1luY4Rb9g/inGOfnoLm\nw98JjDaP8aEvwk9NxZFKwwov7kElv4dZOy+dVVrmaFbOLn1ES1zA7I22i+/6\n8ccHRws3PYhO6gvIgKtoQysu0VZDJNzvYDLn+aeu5du+rKGSvxZoTbFmXIwT\n45UdJvGRIch3k1tWT4ORcY2oK/Wg13zoTA517wsolMnxS5Se44ADKCJwGjH5\nqk/hbTJBKOCjbXawiwQCWrH7Bsr4Ql63nDPP1V7BVXZI6odod7+VNaTNq74F\nFmv1\r\n=4tMs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7iHzUMcaw5KwZtj0lK/teGEg6gK9kE1BsvH/0tqwghgIgU3wKOwky2X5usM+Z//cqj0gUOV+Rci71fNuE6dMroVs="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.eda31ba.0_1637835251254_0.1229033852214787"},"_hasShrinkwrap":false},"0.3.0--canary.77.5617b6a.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.5617b6a.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.5617b6a.0","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.5617b6a.0","@code-hike/mini-browser":"0.3.0--canary.77.5617b6a.0","@code-hike/mini-editor":"0.3.0--canary.77.5617b6a.0","@code-hike/scroller":"0.3.0--canary.77.5617b6a.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"5617b6a0c697c7518c81daad7ab2161c2189cb81","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.5617b6a.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3levb3GSnjBQFGKJWmR/U2+W9vJaWWCTFfV4kxCVlpPZ2MoBS/LDWM0YUqmaEV8IV0HhefuuswqGgD8VJuhghA==","shasum":"17bb8e5f876688c22e4851ed99636bf9889c825c","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.5617b6a.0.tgz","fileCount":3,"unpackedSize":6223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqK8yCRA9TVsSAnZWagAAQrEP/2Ki4Ahq4Ijyq8olTSKq\nmSY2GA1dOgbugE9Cz9cdtwF021ToLHcH49AimxwgyTW18HHiSkiVseD3tpa5\nhMvZsAXzyOVRm7WFpfFH5SXp99C9T/ChuG03gL16mReZIlIDUnCiVs37XgpS\ntDhS7vfD9k5bEMSfdQi48Qb1prHrH9J7xYWDQkMkpGWA6U6DP2Ru4y/3coog\nGdTCFWtNX+TAag8X+Rg9rqU/9i3tffzYtCbo5i+nxsqYdiA7r+05nBTgsZIL\nh0GxudJUu5VT5TdQ1jijjOT37A0LEaZeUON42DtbM/kjJ1m1joAzWcqlTw1o\n0w10YQ+3an0GqWqJLcHGA+8mmg/gWU5ng8gcd+yqHIVyUvWJXlnLx5MelE3D\n/ckqm04TxfB1N1y4u86V/KAP6Xn8lm6uctp3aAjpALyrX12+Bp6cKWwO0V1s\nRYpfGUsWvaJfCpTrR5NHVVVO02+ZLIhoM2l1e/317bM/CBqACCIw0i1U84WR\naLL2p87WAr5hNZweJGf+QIaWHP+sEr0yBZgZmZzUcnd2+BEA1s5bibKgbt56\neQ220r49kcwLu/Liiyl+9Dz+Z5zlBhUb3J0AJfXAFLP5LWlUDeDpCue+QNRK\n1lCaWxSrFKbnfORUC8AqT0Ln8ZoGZ6WFZydJWh3IeUGS/edYhDJCUAr1ZauU\n76TM\r\n=iGrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC61FdcwAj3ozgq3Bc4gLfk4clrG5q3uU8AGTImCBGXDAIgCz/hCxK4qt1H5r5cOopMEXygpipgpmS1g9u7L+lxlYo="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.5617b6a.0_1638444850589_0.8737604508844312"},"_hasShrinkwrap":false},"0.3.0--canary.77.15bb99d.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.15bb99d.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.15bb99d.0","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.15bb99d.0","@code-hike/mini-browser":"0.3.0--canary.77.15bb99d.0","@code-hike/mini-editor":"0.3.0--canary.77.15bb99d.0","@code-hike/scroller":"0.3.0--canary.77.15bb99d.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"15bb99da55a6bebca0da1b8baf5a5083b2c5652f","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.15bb99d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-8ccUddx4a4TY5mDsGG1Nqco+l8TdndHXgQGZrZ34MAAnChRyUgWS8gTjoRtmudh8ZAhEmEsHvT1mPq1aB6onrA==","shasum":"19ef01cfda4f4b58d572c4cad5f9620c0b4d4620","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.15bb99d.0.tgz","fileCount":3,"unpackedSize":6223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMitCRA9TVsSAnZWagAAJHkP/1eQBMfBL9+R59cklqYT\n7lAbDn+rl3829jLHIjyXYw5hGVdRsqia/5pPORIFaI/rjFXMmhttQFZMWeMe\nOyQjLoBGvjW3f3la2EjxknE/fetFVpYMyJ+JlABOYS6xhexdxOsIZYACkpO8\niTh9MU7/fXufU6gj+K5yJwidNFXdRaLr+Ntt7F94nLFduAWR5wfD3jNAtiBZ\nDjz7V5nxrtpfqSbeSHh6QsSIEYUB6p9a2rThunqZb56q+5yyyxR+e4V0qbIC\nij8eXnSuYDHIODCWlYMDeSrKDi0lQsMmtbbnTObBT/Ep2k212pPeNwMWWh3H\noumttKcAPIzaG3HFqocYPnWuDDRsP4Qa8ISgHb6zqhI88hQFt2xpPyuJEfcJ\nohr3T1T40ZK04TImF56QWmX8BoaHUj16jhoYiBJK9zqjJw2L3aGjNrMrRRuJ\na9/6653mkrqe/MXKnsWAZKQVsm/LLeUARl+aZEhq/qmnlkXjjdRYandHzY4T\n234e3YUx78wircgSKn4aaiYMVz01SQCv1ODQm7sXJKw3/RVaDzeZx6YMwaX4\nkERgymNyvUfl1I6L4youHyUij4up3+nPCfshze2RJouCw2wMbp6RwPw35StS\nBIAXGsBJtO0xyhWp/l9mzK+sdMnzTSOUXSliJzyqgYVVxay+/hav81S4VzOt\nRykA\r\n=rJct\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0+C3yF7nuJd3i+9YgVWANiN8jIspC/flcy6ct2kOfzwIhAMO4hesBgt4aYha8g/FqB+eqL1llHJAcFckigQE2NhSH"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.15bb99d.0_1638451373211_0.5102647432245211"},"_hasShrinkwrap":false},"0.3.0--canary.77.efd8888.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.77.efd8888.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.77.efd8888.0","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0--canary.77.efd8888.0","@code-hike/mini-browser":"0.3.0--canary.77.efd8888.0","@code-hike/mini-editor":"0.3.0--canary.77.efd8888.0","@code-hike/scroller":"0.3.0--canary.77.efd8888.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"efd88888e4dfda97d334ec6f21ee4318944a8723","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.77.efd8888.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Sx5qVFfz/EOCp+kz6oTDYY2RAnmuaa4nqvCiWcmqmaMgj73gw6zNxbEa+96G0H0iTCA3aR2FjEvG78oTFIZNAQ==","shasum":"323726268f7cfedcec8e3da8a1f9f3e20d7d4d30","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.77.efd8888.0.tgz","fileCount":3,"unpackedSize":6223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMkJCRA9TVsSAnZWagAAx1AP+gMW2KNCFQbGo5ouPSFX\nMjBJx4ax9VzQoQVKvDPTlBZnAxcAZasEKVVKAKAALmeUg16mqeyaNJ48KIEr\njXG+sqA9P4fT0tYCe7TX8z2tmvHL6M7lcm5NgPi2SzSu8/cUFRwq4WAmp99W\n8gXVdqJyny4W8FwN67OFEeYo+y17LWqESqeCm+rnOXLaHQXpqRO1GCjQp/PM\naFVKX0i0Nga9Qc24+MfrMvJq4pYE1m5HLpnKZv5IyOP+VuRk7c/CJ3OdpooH\nM+7iCwtpp2gLgUY3jrqhh13/NBD9U/GHemgN5bZD8mFLUsgb1kjfb5rVODsF\nA620HnmR2qbWZyIuSn7/JFVA06L6gsRaSM7ql4Wtg129aQwR2d+1UPu0KcmG\n2JCPPaFaAumcDWS5D3+wSUiYsl5WhavmA2skYzFs/vwWHmpliPCEld6LXvmn\nekcaA6v6Q7RpDuUJwZktt14u8HaWYJEBc8XAjeQoE0VKwJVYh1M0+M7z7BUL\nxQoMBQnNUPa6hFrj8k8RwnCLm1Kp3RErH+1UZDvhKnYb39gZduIKRsAlswg2\nd6L0BaiKawmJHVGRIt2lq8/1je4IQQ02aHu5FrsRMJQMyEs0d7P5sLZN71L6\nsvOW+Mj/uMC9zTGrhLh92QO3tdnSnTkqcj3doTQB2PH0y1ghHoT7FQQ4/QkZ\n+wKP\r\n=k0nE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfABifldzn6Ro2rIkjU3FTUF+QoaMT8wY/hWAl45a90AiBprraxJvpvUcD7f4kdXQeIjJz8WK/8XfewVWl1ofS1+g=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.77.efd8888.0_1638451465764_0.9727101492409622"},"_hasShrinkwrap":false},"0.3.0-next.12":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.12","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0-next.12","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0-next.12","@code-hike/mini-browser":"0.3.0-next.12","@code-hike/mini-editor":"0.3.0-next.12","@code-hike/scroller":"0.3.0-next.12","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"2ff863e56c8b735e55517b88528444f709a26a22","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.12","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-49xyxVeqC2YfZxZ8XVRhTR2/fX1CoM9NNJeJGhC/fvpduYST9ukL8IzMjIKqOfpWlrRBJsQmVQyV+/Hv9IjyEA==","shasum":"de4346f8ef42b24be3084e9264636f95c6f4fa15","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.12.tgz","fileCount":3,"unpackedSize":6145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMkXCRA9TVsSAnZWagAAT6kP+wWYWmH7Mabv2Ku+PevS\nAQAPq+Xi/WE/5/QVeOdassT1pLmt+iJKrCwY4OV47YrXDP+MmdOahWTLhzE+\nsk16z0XhNk5GkTqaO4QOfNym6rGY3n0EMRWE5PHI+CI+REx0saH+pcUKp++v\ndGhNuqag7H0cdgd9RWl8uAfCqVrYxJghpeJ3giU4kkdc1Y8kny0nf14cAehN\nQLVUIXQJ2GzqZv6az3xYYNYoawKXQD38f22a6X0k0xqIwtvV1D4f5A3kFzxb\nfdw5Re29IlEt/SxTDA8aJD/qhSYfqvAS735WoddpXt4JLSpZ3l7zBFPMRO2x\nCdhLGYoByEaL4pjrp8OYeAqmIKc7gyXIF5dRZue9mK9ph/fXNRjIARy2rB1q\nlSqfRD25SA9Em8seYuvr0mVBIrlo+RoXXM7vN+SgPf1aZjfYXEHlRg5YBFCL\nzygTkl5M1s+JhBQR9P6sRUDg25UsJxz+4ZBRpusGlJQUy+wWItnHAjzJ8dU3\nii5vgyDZ2sAMWXbpm5nkRpmsR0Gy4axo+CP5wqDVS35hq6kAZFRFcwsWIjdZ\ne7uTJDAJsxd9gacE8ShEZE+ij/68jBDkDVFOuG3ITJr51s0cmajAsorpeDDQ\nhBUXGRxfvHPoNwb86Xbc78np3EmJLTg+VfVKE8BHxvnpg4nJ1nVrgfrxaKVp\n4n/Z\r\n=0O5O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHt2NBm4E77oxotKEag9VkNDbzR4EuGNkrjzRhOeU0dzAiAVown3/m0GTcsWlHylzbqCpxoU+g03dmK1jFVXne2sdQ=="}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.12_1638451478977_0.35766708732212105"},"_hasShrinkwrap":false},"0.3.0--canary.86.f0a55af.0":{"name":"@code-hike/scrollycoding","version":"0.3.0--canary.86.f0a55af.0","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0--canary.86.f0a55af.0","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0--canary.86.f0a55af.0","@code-hike/mini-browser":"0.3.0--canary.86.f0a55af.0","@code-hike/mini-editor":"0.3.0--canary.86.f0a55af.0","@code-hike/scroller":"0.3.0--canary.86.f0a55af.0","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"f0a55af2796a8f99ba39f37bd2214c43687b1044","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0--canary.86.f0a55af.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-JFzJ4rIwjFK+1L3PN1EYMwA6H/Y1yJkf0+L1v7BZSGFZ/Xe5MZ6pLCyIwu1n5V7dbwKOIFYfwgpRka74/GroCw==","shasum":"900ed3eaa4f12c400e15dcd68d9ae221341642e2","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0--canary.86.f0a55af.0.tgz","fileCount":3,"unpackedSize":6223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq3bqCRA9TVsSAnZWagAAGxsP/17VXvFGzN2+Kko0oXrD\ntODKbobVIu65Vvi/dvO0RdB1G3HXEbK2E7sQX2gtoHOTN6AR5x8kMUEAao3Y\nWkkTq0+NC3yNY1+8CCZ4YC3Mu6hAeYE5JT84lIbbuYDulic74az02DzRixLP\nWdGoUxE7c6YZ/1dlgvpK1z/foUnV2zZ4sZeQXghhS7wbxoy/Z0O3ElbZs4Z7\ndza9N0Mhj1w8OkjAMJBRoQCAuVUteFubmjiF6zEfZu1Lk6g3n177N9An1gv8\nsBV8b3Ul+kHWYxN5SrYX8jJMpruMLnp+os4gydkBjGM6on10Jlu6Sa+avupA\nyKFu7uFq+p2h1XMRF9J9G7bxiR01nn1xClqnaosrQbZgN3LUBkYuAMcGPfHL\nlkobU1KR66X0ECazIMIL4x4/VnyseS/nwIDcHIgjyGCWypgUwELQckWG08xl\nyrxqqOQ7cdS7iTGfKbCwT+aVxx/mYljrCLlG+8C0eA0SUGQIRcwwCFPcDviH\n5V1GkHctV7jD5dvolqGOu++rw8i7pN+ZInG6qx7TrQxqH/d02J84tLRfYIzB\nTkRoTPYCSZO07A8RQQ9yNMQPZYF8qkW2EW1KnbURdbtApU3+xFOpbyWoNWZA\nyS51L+e/afu+aQYD0aiOotUYx+KoxfBzpIxHwgooyg0gJwWooTNC9HSGivyl\nOH0e\r\n=qXw8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYtRhuK1m9SS7KRoQ95PpkdK1kpiXzJw4hd6uNKydmtgIhAMsqUh5YDIwuGsz4TB6K/LyXs/AeP73taUnNqH/W1Quj"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0--canary.86.f0a55af.0_1638627050739_0.2548459291735279"},"_hasShrinkwrap":false},"0.3.0-next.13":{"name":"@code-hike/scrollycoding","version":"0.3.0-next.13","main":"dist/index.cjs.js","typings":"dist/index.d.ts","module":"dist/index.esm.js","style":"dist/index.css","scripts":{},"devDependencies":{"@code-hike/script":"0.3.0-next.13","@types/object-hash":"^1.3.4","@types/react":"^17.0.2","react":"^17.0.2"},"dependencies":{"@code-hike/classer":"0.3.0-next.13","@code-hike/mini-browser":"0.3.0-next.13","@code-hike/mini-editor":"0.3.0-next.13","@code-hike/scroller":"0.3.0-next.13","@codesandbox/sandpack-react":"0.1.2","object-hash":"^2.1.1","server-side-media-queries-for-react":"^0.0.5"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"keywords":["react"],"homepage":"https://codehike.org","repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"publishConfig":{"access":"public"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","funding":{"type":"opencollective","url":"https://opencollective.com/codehike"},"gitHead":"b02f8bed71dd0aa9537abea42f85f9d6e4dc3ae9","readme":"See [codehike.org](https://codehike.org)\n\n# Scrollycoding\n\n## MDX Usage\n\n````md\n\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 2
\n}\n```\n\n\n\nStep **2** markdown.\n\n\n````\n\n`` marks the start of a new step. The empty lines surrounding the markdown are required.\n\nIn this example we are telling Code Hike to display an `App.js` file and interpret it as `jsx` for the syntax highlighting.\n\nBy default the code **needs** to be for the `App.js` file (you need to change the [preset](#presets) to use a different file). The preview will run that code and expect it to export a React component.\n\n## Step focus\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nWith the `` `focus` prop you can focus different part of the code for each step.\n\nIn the example above `\"3[16:29],5\"` means: \"focus columns 16 to 29 from line 3, and line 5\", more examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Focus button\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello World 1
\n}\n```\n\n\n\nThis component is returning a react element.\n````\n\nThe `` component adds a button that the user can click to change the focused code.\n\n## Multiple files\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\nimport Button from \"./Button\"\n\nexport default function App() {\n return \n}\n```\n\n```jsx Button.js\nimport React from \"react\"\n\nexport default function Button() {\n return \n}\n```\n\n\n\nStep _1_ markdown.\n````\n\nYou can have multiple files inside the `StepHead` component. By default the first listed file is the one displayed on the mini editor.\n\n## Presets\n\nIf you need to include some boilerplate for all the steps, or change the styles, or add dependencies, you can override the preview preset:\n\n```js\n// preset.js\n\nexport default {\n customSetup: {\n files: {\n \"/styles.css\": {\n code: require(`!!raw-loader!./styles.css`).default,\n },\n },\n dependencies: {\n react: \"latest\",\n \"react-dom\": \"latest\",\n \"react-refresh\": \"latest\",\n \"@babel/runtime\": \"latest\",\n lodash: \"4.17.11\",\n },\n },\n}\n```\n\n````md\nimport preset from './preset'\n\n\n\n\n\n```jsx App.js\nimport React from \"react\"\nimport _ from \"lodash\"\n\nexport default function App() {\n return
{_.head([1, 2, 3])}
\n}\n```\n\n\n\nStep _1_ markdown.\n\n\n````\n\n## Mobile and print layouts\n\n````md\n\n\n```jsx App.js\nimport React from \"react\"\n\nexport default function App() {\n return
Hello
\n}\n```\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:\n\n\n\nQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n````\n\nFor small screens the two columns collapse in one. By default the code and the preview won't show. You need to explicitly add them in the place you prefer for each step using `` and/or ``.\n","readmeFilename":"readme.md","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"},"_id":"@code-hike/scrollycoding@0.3.0-next.13","_nodeVersion":"14.18.1","_npmVersion":"lerna/4.0.0/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-OIpxMEAoyiCBoZiMeTYTuvD2Sd09uQKzw4i/uHwkQ031vCHUNZrr85i92W2r6cr4DJEL1OGI6R5WvTXRZcZn0A==","shasum":"27c0a4941d787c11ee201f2bb7a630c3a1e60d51","tarball":"https://registry.npmjs.org/@code-hike/scrollycoding/-/scrollycoding-0.3.0-next.13.tgz","fileCount":3,"unpackedSize":6145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq3mfCRA9TVsSAnZWagAA79gP/3LUXtBQ4FmFrhOf/oOY\nxsQZm8ID4/LfH0bEBwRti9j/mcgbL/1m0iaOVenezzpgufJl6ZLKLdiKMJrS\nRqrpxfJtk8JXeFPCAZEeXA4Wf7lZARP14mFRptVxycyQYrxIBH29rQpkqVkf\nKwCiyqvdiAaLvThTAm1mtW/tVnWLbvcEBJwwnk+E5FN8kgTRGlrmCdcMmNbf\nirlk2Emlj/vaCPCPtJFdWuGxLDdtbtYKFeZBZZC8empZhTkigDZbe5tyNXge\nRWFpLgySgcW6qdEcWOSc5iyEuMMCe1uNjds/7RcTF2JQvESNUCzQNbO3Tgj2\nStGhI2ldSS83l3s59ip3Wk2KBUIIvDDGIeVvG1igCQ9FWFX3+QCGsJOyvp0I\nTcGNNr9B2JAplcvdcm8s8dunsSvoVBOfAn8ptXVIjD3v5e0AJRmkwT0DiQ6O\nz5M5Eo/6FFGEuSsMM40HF6eTPlXam/bNGq0ctF8PtAy4Kd0MqLZoy7TQIk0s\nijnGDd4ucRHEflpXAvgfY+Evnj6j04R1QtXRLthGuaiRpumAZVcmlAXryppB\nYScUT5xyMzugq2vnOfNtR2MOBotoDhsZVVzk2wXw+Mlwrkkn15AaZbFha5YH\nZfAq5k2LNkAvpZzYbJ5RMhySeI24TJsccewgnNQQikVI/zIi04Lny5HjnNZE\neTxT\r\n=T8rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzESLWSN/qXGawPqRjWu+Ip0txRfJIdhaeqk0sJ9GFywIhAOc3Mo2euoibaXPtr7zdLgNUVWkF9DiZtLli7JQW/Rzb"}]},"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollycoding_0.3.0-next.13_1638627742837_0.47095811112008623"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-22T21:30:12.613Z","0.0.0-8cbbd89":"2020-12-22T21:30:12.946Z","modified":"2022-04-04T23:57:09.538Z","0.0.0-4adbd70":"2020-12-28T18:56:20.337Z","0.0.0-133ab88":"2021-01-03T20:40:32.846Z","0.0.0-6dfbe3d":"2021-01-13T23:59:35.111Z","0.0.0-211ab01":"2021-01-19T02:15:38.325Z","0.0.0-33f17eb":"2021-02-02T21:20:08.847Z","0.0.0-b57b267":"2021-02-02T23:07:24.875Z","0.0.0-0fb8a90":"2021-02-06T22:02:27.826Z","0.0.0-aa6efee":"2021-02-06T22:33:52.605Z","0.0.0-cde697c":"2021-02-23T18:19:06.625Z","0.0.0-1f0ad83":"2021-02-24T18:29:09.304Z","0.0.0-e48fa74":"2021-02-25T22:59:36.531Z","0.0.0-6a4ea1c":"2021-03-01T03:26:44.769Z","0.0.0-4333a8b":"2021-03-08T02:11:18.309Z","0.3.0-next.0":"2021-03-11T18:27:34.454Z","0.3.0--canary.32.323f72f.0":"2021-03-11T23:13:27.961Z","0.3.0-next.1":"2021-03-11T23:21:11.865Z","0.3.0--canary.34.f4f0bfe.0":"2021-03-12T00:28:53.272Z","0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0":"2021-03-14T18:07:38.922Z","0.3.0-next.2":"2021-03-14T18:21:02.244Z","0.3.0--canary.45.6c84da7.0":"2021-03-23T07:15:57.538Z","0.3.0-next.3":"2021-03-23T07:26:06.671Z","0.3.0--canary.47.52daf46.0":"2021-03-23T17:52:27.339Z","0.3.0-next.4":"2021-03-23T17:58:16.442Z","0.3.0--canary.49.d3183ba.0":"2021-03-24T22:54:34.805Z","0.3.0-next.5":"2021-03-25T03:49:25.140Z","0.3.0--canary.56.84f43ab.0":"2021-04-05T15:06:18.972Z","0.3.0-next.6":"2021-04-05T15:11:06.879Z","0.3.0--canary.58.8628c34.0":"2021-04-06T14:41:43.273Z","0.3.0-next.7":"2021-04-06T14:45:36.890Z","0.3.0--canary.59.324d15c.0":"2021-04-06T22:14:51.908Z","0.3.0-next.8":"2021-04-06T22:19:06.901Z","0.3.0--canary.61.e6f2135.0":"2021-04-08T22:53:23.767Z","0.3.0-next.9":"2021-04-08T22:59:39.360Z","1.0.0--canary.67.ea5ba8b.0":"2021-05-12T00:45:57.419Z","0.3.0--canary.67.ceecca5.0":"2021-05-12T22:57:02.851Z","0.3.0--canary.67.10dbf6e.0":"2021-05-13T18:45:44.714Z","0.3.0--canary.67.a667d8e.0":"2021-05-13T20:25:36.218Z","0.3.0--canary.67.014d9f0.0":"2021-05-26T23:50:26.373Z","0.3.0--canary.67.059c384.0":"2021-06-09T18:27:02.521Z","0.3.0--canary.67.8191339.0":"2021-06-17T16:10:46.660Z","0.3.0--canary.67.0da7533.0":"2021-06-24T18:31:04.614Z","0.3.0--canary.67.b6f3cda.0":"2021-06-24T19:14:03.869Z","0.3.0-next.10":"2021-06-26T15:04:17.704Z","0.3.0--canary.67.2246098.0":"2021-06-26T15:39:43.498Z","0.3.0--canary.75.b3e0bf9.0":"2021-07-11T14:42:54.506Z","0.3.0--canary.75.9e3cd0e.0":"2021-07-11T15:25:35.058Z","0.3.0-next.11":"2021-07-16T11:43:05.697Z","0.3.0--canary.77.ade5d72.0":"2021-08-07T11:56:17.901Z","0.3.0--canary.77.e1fb282.0":"2021-08-08T13:54:14.014Z","0.3.0--canary.77.87864a9.0":"2021-08-11T14:10:24.465Z","0.3.0--canary.77.6c844fa.0":"2021-08-12T13:12:46.770Z","0.3.0--canary.77.c58a10a.0":"2021-08-12T13:34:07.322Z","0.3.0--canary.77.2395a40.0":"2021-08-16T16:24:40.994Z","0.3.0--canary.77.dc9c2e0.0":"2021-09-11T11:39:25.487Z","0.3.0--canary.77.045c5cf.0":"2021-09-20T21:22:13.967Z","0.3.0--canary.77.8e9455c.0":"2021-09-23T16:32:15.444Z","0.3.0--canary.77.2616b6b.0":"2021-09-25T20:28:59.310Z","0.3.0--canary.77.3bbe788.0":"2021-10-04T10:27:50.068Z","0.3.0--canary.77.4c6fb89.0":"2021-10-04T10:33:35.020Z","0.3.0--canary.77.979e373.0":"2021-10-04T10:37:36.185Z","0.3.0--canary.77.122e7ce.0":"2021-10-05T10:46:19.626Z","0.3.0--canary.77.60a8361.0":"2021-10-23T08:00:31.550Z","0.3.0--canary.77.cd9e81b.0":"2021-11-02T21:19:26.979Z","0.3.0--canary.77.790e974.0":"2021-11-05T15:48:54.751Z","0.3.0--canary.77.e9bb465.0":"2021-11-07T10:50:13.731Z","0.3.0--canary.77.bd15ff1.0":"2021-11-08T13:31:48.733Z","0.3.0--canary.77.7150a39.0":"2021-11-09T18:12:33.231Z","0.3.0--canary.77.1351c85.0":"2021-11-19T14:44:01.778Z","0.3.0--canary.77.59321d0.0":"2021-11-21T11:42:33.515Z","0.3.0--canary.77.c8f7b29.0":"2021-11-22T11:33:03.802Z","0.3.0--canary.77.eda31ba.0":"2021-11-25T10:14:11.564Z","0.3.0--canary.77.5617b6a.0":"2021-12-02T11:34:10.746Z","0.3.0--canary.77.15bb99d.0":"2021-12-02T13:22:53.376Z","0.3.0--canary.77.efd8888.0":"2021-12-02T13:24:25.911Z","0.3.0-next.12":"2021-12-02T13:24:39.134Z","0.3.0--canary.86.f0a55af.0":"2021-12-04T14:10:50.869Z","0.3.0-next.13":"2021-12-04T14:22:23.153Z"},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"homepage":"https://codehike.org","keywords":["react"],"repository":{"type":"git","url":"git+https://github.com/code-hike/codehike.git"},"author":{"name":"Rodrigo Pombo"},"license":"MIT","readme":"","readmeFilename":"","description":"See [codehike.org](https://codehike.org)","bugs":{"url":"https://github.com/code-hike/codehike/issues"}}