2d:null 2e:["$","title",null,{"children":"Notebook Teasers | Fabian Iwand | Observable"}] 33:T613,function renderTeaser(doc) { const { title, thumbnail, image = thumbnail ? `https://static.observableusercontent.com/thumbnail/${thumbnail}.jpg` : null, owner = {}, owner_name = owner.name || owner.login, owner_image = owner.avatar_url ? formatAvatar(owner.avatar_url, 120) : null, slug = null, id = null, href = slug != null && owner.login != null ? `/@${owner.login}/${slug}` : `/d/${id}`, update_time = null, date_short = update_time == null ? null : formatDate(update_time, 'short'), date_long = update_time == null ? null : formatDate(update_time, 'long'), fork_of = false, likes = null, } = doc; return html`

${DOM.text(title)} ${owner_name == null ? '' : html`${DOM.text(owner_name)}` } ${date_short == null ? '' : html`${DOM.text(date_short)}` } ${likes == null ? '' : html`${ICON_LIKE} ${likes}` }

` }34:T82e,// The default listing theme, designed to match Observable's look. viewof THEME_TEASERS = cropCode(` :scope, :scope div, :scope a { box-sizing: border-box } :scope a:hover { text-decoration: none } :scope .listing-grid { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px; } :scope .item { --font-size: 17px; border-radius: .25rem; background: white; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,.1); transition: all .15s ease; } :scope .item:hover { box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); transform: translateY(-1px); } :scope .image { display: block; width: 100%; background-color: white; background-position: center; background-size: cover; padding-top: 62.5%; } :scope .body { font-family: -apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif; font-weight: 500; font-size: calc(var(--font-size) * .825); padding: 10px 8px 6px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border-top: 1px solid #e2e5e9; } :scope a.title:hover, :scope a.image:hover ~ .body a.title, :scope a.owner:hover { color: #3b5fc0; } :scope .title { display: block; color: #1c1c1c; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; } :scope .owner:before, :scope .owner, :scope .date, :scope .likes { font-size: calc(var(--font-size) * .75); margin-right: calc(.25 * var(--font-size)); } :scope .owner { color: #454545; } :scope .owner:before { content: ""; display: inline-block; background: var(--avatar) center/contain no-repeat; width: 16px; height: 16px; border-radius: 8px; vertical-align: -4px; } :scope .date { color: #828282; } :scope .item[data-likes="0"] .likes { display: none; } :scope .likes { color: #828282; } :scope .likes svg { font-size: inherit; line-height: inherit; vertical-align: -4px; color: #c4c4c4; } `, {type: 'css', name: 'THEME_TEASERS'})35:Te14,example_docs = [ { "id": "ddfa5f62fb4dde91", "version": 111, "slug": "rotating-voronoi", "publish_time": "2018-10-27T06:07:30.116Z", "thumbnail": "b59ab95bb8a1369fd08ff99cdd40e4d6eeb80145d46b07b4237a1a9d70a65d1d", "title": "Rotating Voronoi", "update_time": "2018-10-27T06:07:38.843Z", "likes": 12, "fork_of": false, "owner": { "id": "074c414ad1d825f5", "github_login": "observablehq", "avatar_url": "https://avatars2.githubusercontent.com/u/230541?v=4", "login": "mbostock", "name": "Mike Bostock", "bio": "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", "home_url": "https://bost.ocks.org/mike/", "type": "individual" } }, { "id": "a62fe403633f342f", "version": 230, "slug": "sphoise", "publish_time": "2018-07-09T22:01:43.538Z", "thumbnail": "6c8f158f53f7dadadc2c1b48a25446c779bee58656add64a1f782299805f9a6f", "title": "Sphoise", "update_time": "2018-10-21T05:06:04.275Z", "likes": 14, "fork_of": false, "owner": { "id": "783616ba9fb55f5d", "github_login": "observablehq", "avatar_url": "https://avatars3.githubusercontent.com/u/4732?v=4", "login": "jashkenas", "name": "Jeremy Ashkenas", "bio": "Working on @observablehq.\n🏍 🌎 👶", "home_url": "http://ashkenas.com", "type": "individual" } }, { "id": "51b20399c8c8fc05", "version": 802, "slug": "triangles-and-circles", "publish_time": "2018-09-27T16:52:01.662Z", "thumbnail": "4423f21add8a9ab6f9e5cc86d9e590130aff2f6ee08e5fcc1d7d57ee75ccfe52", "title": "Triangles And Circles", "update_time": "2018-10-12T21:51:50.506Z", "likes": 10, "fork_of": true, "owner": { "id": "07362516b5994994", "github_login": "observablehq", "avatar_url": "https://avatars2.githubusercontent.com/u/322014?v=4", "login": "mootari", "name": "Fabian Iwand", "bio": "", "home_url": "https://twitter.com/mootari", "type": "individual" } }, { "id": "409bfc0c356ed21b", "version": 932, "slug": "yvaral-ii", "publish_time": "2018-09-24T22:23:15.624Z", "thumbnail": "9cba212440ce6dac7b36cd2edc3e85231c1b0c8577c032def1247b4b527f9756", "title": "Yvaral II", "update_time": "2018-09-24T23:36:25.506Z", "likes": 5, "fork_of": false, "owner": { "id": "42520cea6c99d3c8", "github_login": "observablehq", "avatar_url": "https://avatars3.githubusercontent.com/u/8422826?v=4", "login": "pstuffa", "name": "pstuffa", "bio": "data visualization developer for StreetEasy, runner, david hockney and retro-sensationalism", "home_url": "", "type": "individual" } }, { "id": "1813fe27fedbbd9d", "version": 229, "slug": "two-grids", "publish_time": "2018-09-22T22:50:59.601Z", "thumbnail": "6fc0c0a3b6aaaa8d76dc648e4630ecefef08ff661f88735b711b7c2878a30aa6", "title": "Two Grids", "update_time": "2018-09-22T22:51:08.260Z", "likes": 18, "fork_of": false, "owner": { "id": "074c414ad1d825f5", "github_login": "observablehq", "avatar_url": "https://avatars2.githubusercontent.com/u/230541?v=4", "login": "mbostock", "name": "Mike Bostock", "bio": "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", "home_url": "https://bost.ocks.org/mike/", "type": "individual" } }, ]36:[] 31:{"id":"3f7b48700170da34","slug":"notebook-teasers","title":"Notebook Teasers","thumbnail":"ffcfbda76df6c0ee7c184ad7c3e2e78edf680f4c5919ddc3f668b176871fe6e3","access_level":"public","create_time":"$D2019-07-06T10:43:33.322Z","update_time":"$D2025-07-21T08:17:09.029Z","view_time":null,"first_public_time":"$D2019-07-06T12:54:50.343Z","fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":365,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"6d9c7f601029e6bf","slug":"widgets","title":"Widgets and helpers","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Notebook Teasers","cells":[{"id":0,"value":"# Notebook Teasers\n\nUtility functions to render a list of Observable notebook teasers from their JSON definitions. Prep work for curated notebook lists.\n\nNote that querying the required JSON data is currently outside of this notebook's scope. However, if you need an API proxy take a look at [CORS Proxies](https://observablehq.com/@mootari/cors-proxies).\n\n**Todos:**\n- teaser list: responsive layout changes\n- teaser: better linked area coverage (using :after)\n- tabular layout? (should replace rather useless <ul> example)\n- change teaser list to a more generic <ul> and remove list styles via css?\n\n**Comments and feedback welcome!**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"md`---\n## Examples\n\nRendering a teaser list:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"teaserList(example_docs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`\nRendering single teaser, at a larger size:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"html`

\n ${renderTeaser(example_docs[3])}\n ${getScopedStyle('#my-id', THEME_TEASERS)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`\nTiny custom teaser with minimal data (even date_short is optional):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"html`

\n ${renderTeaser({\n title: 'Remember notebooks?',\n image: 'https://i.imgur.com/uw9hFtj.png',\n href: 'https://en.wikipedia.org/wiki/Moleskine',\n date_short: 'A long time ago',\n })}\n ${getScopedStyle('#my-id', THEME_TEASERS)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`\nRendering as a sorted unordered list with custom CSS:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"html`\n${getScopedStyle('#my-ul', `\n:scope .owner, :scope .likes {display: none}\n:scope .date:before {content: \"(\"}\n:scope .date:before {content: \"(\"}\n:scope .date:after {content: \")\"}\n`)}\n

${renderTeaser(doc)}`)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`---\n## Templates & Rendering\n\nThese are the functions that you will commonly import and use. The default markup should allow for a broad range of changes through CSS alone. \n\nteaserList() renders a list of notebook teasers and also inject scoped CSS. Internally it calls\nrenderTeaser() to create the markup for a single notebook teaser.\n\nrenderTeaser() is designed to gracefully deal with missing properties and allow some overrides. Only the following properties are required:\n- title\n- thumbnail (Observable thumbnail ID) or image (full image path)\n- id (notebook ID) or href (the full notebook path)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function teaserList(docs, css = THEME_TEASERS) {\n const id = DOM.uid().id;\n return html`
\n ${getScopedStyle(`#${id}`, css)}\n
${docs.map(doc => renderTeaser(doc))}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`---\n## Theming\n\nTheme CSS can be overriden on import or by passing scoped CSS to the render function. \"Scoped\" CSS consists of CSS rules which start with the [:scope](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) selector.\nDuring rendering the :scope selector gets replaced with a dynamically created selector (e.g. #my-id).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Replaces \":scope\" with scope and returns a style element.\nfunction getScopedStyle(scope, css) {\n const style = html`