2d:null 2e:["$","title",null,{"children":"Collection navigator | Miralem Drek | Observable"}] 33:T8b1,md`# Collection navigator Since the _collections_ feature in _observablehq_ is not ([yet?](https://talk.observablehq.com/t/linking-between-notebooks/346)) available for others than the core team, I thought I would try create something similar. ## What are collections? A collection in observable is a set of related notebooks covering a certain topic, e.g. [_Introduction to observable_](https://beta.observablehq.com/collection/introduction) or [_Maps_](https://beta.observablehq.com/collection/maps). The special thing about _collections_ is that they have a _navigator_ at the bottom of each notebook, which can help guide a reader between the documents. ## Setup In order to create the navigation, we need: 1. A list of the notebooks in the collection 1. Know which notebook we are on 1. Find the previous and next notebooks 1. Render the navigation with some HTML and CSS ### Collection list The \`collection\` cell in this notebook is copied from the json result of [\`https://api.observablehq.com/collection/introduction\`](https://api.observablehq.com/collection/introduction), which contains the documents(notebooks) in the [_Introduction_](https://beta.observablehq.com/collection/introduction) collection. The minimal data that is required is the \`title\` of the collection, and for each \`document\`: - \`slug\` - \`title\` - \`thumbnail\` - \`creator.login\` ### Current notebook Simply specify the current notebook by combining your username and notebook slug, e.g. \`@mbostock/introduction-to-notebooks\` ## Embedding the navigator Due to the pure awesomeness of observable, you can easily embed the navigator into your notebooks: \`import {nav} from '@miralemd/collection-navigator'\` Controlling what to show in the navigator is a matter of providing cell values using \`with\`: \`current = '@mbostock/introduction-to-html'\` \`import {nav} with {current} from '@miralemd/collection-navigator'\` See [Embedded navigator](https://beta.observablehq.com/@miralemd/embedded-navigator). To avoid passing in a \`collection\` for every one of your notebooks, I strongly suggest you fork this notebook and change the value of the \`collection\` in your fork, and then import \`nav\` from that. `34:T165d,collection = { return {"id":"0b7a49725d3ab0c0","slug":"introduction","title":"Introduction","description":"Welcome to Observable! Get started with these tutorials.","update_time":"2018-01-29T20:30:08.671Z","feature_rank":3,"documents":[{"id":"5322070516fada05","version":343,"slug":"five-minute-introduction","thumbnail":"b23299a7672ed5633541e8b07e80f16940fe9fe5d8cb4b51bb761e833d6269e1","title":"Five-Minute Introduction","update_time":"2017-12-04T23:19:18.669Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"5619eceafed5879d","version":317,"slug":"introduction-to-notebooks","thumbnail":"b38e9927f460bf2ad8def91f6689d32595a22f26e8fa17736f6663188f3843a4","title":"Introduction to Notebooks","update_time":"2017-12-21T18:44:05.849Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"f8b45eb53c5bd031","version":441,"slug":"introduction-to-code","thumbnail":"2265d29a8d8bf75cda8db5aca962bdf63ebf7f7e8794ae1f800df79f6e3af314","title":"Introduction to Code","update_time":"2017-12-21T19:49:38.202Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"cc0d6a68f6e7b011","version":537,"slug":"introduction-to-html","thumbnail":"350fd5d8e4afb8d895f472a2a675f31d2cfd71343a3fc3fcde7860549656dca5","title":"Introduction to HTML","update_time":"2018-01-17T01:26:38.948Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"0f865019354e8644","version":166,"slug":"introduction-to-promises","thumbnail":"2a8e67b61b51934e67a77cc94a5db79360dc8551186a43a0e018faa0ec6d7d2c","title":"Introduction to Promises","update_time":"2018-01-30T00:03:24.720Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"47b37fa781fba8ff","version":107,"slug":"introduction-to-data","thumbnail":"f99bb0c2742aed62998c91f9730148a927840abd44e7d73411fb998d6dce1dd8","title":"Introduction to Data","update_time":"2018-01-31T05:34:31.533Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"1e5e29cc45055e52","version":533,"slug":"standard-library","thumbnail":"b8c4e875d0de56e6602bbc6dffc6e6a8d230995840e93289197e07844cbf6d3a","title":"Standard Library","update_time":"2017-12-06T06:36:16.408Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"66091b39a2b5e5ad","version":52,"slug":"a-brief-introduction-to-viewof","thumbnail":"7e2a562bf06980353fc2b90732bbcd73027a543111d530bb88c7abb05813a1fe","title":"A Brief Introduction to Viewof","update_time":"2018-02-03T23:12:30.446Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"32b964ccaf2925c4","version":55,"slug":"multi-value-inputs","thumbnail":"d410b39bbce186b530093744bc705ff2bb71ba4a2152e08085b3e0a243e94a24","title":"Multi-Value Inputs","update_time":"2018-02-02T17:58:12.234Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"f5a585b2acc8dcce","version":192,"slug":"how-saving-works","thumbnail":"bdbbec297c171220c824d448db37515b6dc817d28ea9705162e628ff294a88b0","title":"How Saving Works","update_time":"2018-02-06T23:47:12.657Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}},{"id":"417ace5e790eb84c","version":495,"slug":"introduction-to-asynchronous-iteration","thumbnail":"66215cfcf197f8a2a7d141b9094c135549e0fcfc63368cf73f4125de78ab13ba","title":"Introduction to Asynchronous Iteration","update_time":"2018-02-09T19:17:09.233Z","fork_of":null,"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","login":"mbostock","name":"Mike Bostock","bio":"Code and data for humans. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}}]}; }35:[] 31:{"id":"f9c1f3bc5fa43ac2","slug":"collection-navigator","title":"Collection navigator","thumbnail":"244a7b591bfd0d6a0c6f5dca8598f5a34e3479cf28daf259ff028314cdd3678c","access_level":"public","create_time":"$D2018-02-17T11:15:30.255Z","update_time":"$D2018-02-18T11:02:17.432Z","view_time":null,"first_public_time":"$D2018-02-17T16:09:59.701Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":"starter_2024"},"version":449,"publish_version":449,"role":null,"authored":false,"authors":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null}],"members":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Collection navigator","cells":[{"id":348,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"nav={\n if (!page || !collection) {\n return html``;\n }\n const paginator = showPaginator ? html`

\n\t\t${collection.documents.map(jump)}\n\t

` : '';\n return html`\n

\n\t

\n\t\tContinue reading ${collection.title}\n \t

\n\t

\n\t${page && page.prev ? container(page.prev, 'Previous') : ''}\n\t${page && page.next ? container(page.next, 'Next') : ''}\n\t

\n\t${paginator}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"current = '@mbostock/introduction-to-notebooks'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"showPaginator = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"page = {\n if (!current || !collection) {\n return null;\n }\n let idx = -1;\n for (let i = 0; i < collection.documents.length;i++) {\n const doc = collection.documents[i];\n const globalSlug = `@${doc.creator.login}/${doc.slug}`;\n if (globalSlug === current) {\n idx = i;\n break;\n }\n }\n\n return {\n prev: idx ? collection.documents[idx-1] : null,\n next: idx < collection.documents.length-1 ? collection.documents[idx+1] : null,\n idx\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"jump = (obj, i) => {\n const before = \"opacity:0.4;\";\n const active = \"background-color:#ccc;border:2px solid #cde;\";\n const after = \"\";\n const style = page.idx === i ? active : (i <= page.idx ? before : after);\n return html`\n\n\t\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"container = ({\n title,\n slug,\n creator,\n thumbnail\n}, head) => `\n\n\t

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"