2c:null 2d:["$","title",null,{"children":"Interactive Sentences | Harry Biddle | Observable"}] 32:[] 30:{"id":"6ff9ebccea79cb75","slug":"interactive-sentences","title":"Interactive Sentences","thumbnail":"868a03e430a58b88bff33fd022e9c951e17424c475b7e17cdd74be51b11a09a3","access_level":"public","create_time":"$D2021-02-07T13:40:06.079Z","update_time":"$D2021-02-20T17:52:52.973Z","view_time":null,"first_public_time":"$D2021-02-07T14:55:41.206Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"698edd1f22e9d4d7","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":"starter_2024"},"version":472,"publish_version":472,"role":null,"authored":false,"authors":[{"type":"individual","id":"914ea1886092acdd","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":null}],"members":[{"type":"individual","id":"914ea1886092acdd","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Sentences","cells":[{"id":0,"value":"md`# Interactive Sentences\n\nIf your notebook has a lot of configurable options it can be nice to present them as \"interactive sentences\" where inputs are intermingled with prose. \n\nThe sentence below uses the trick from [@mbostock/inline-inputs](https://observablehq.com/@mbostock/inline-inputs). Unfortunately we are not able to use [Observable's standard inputs](https://observablehq.com/@observablehq/inputs) since they are designed to be at the top level of a cell and as such come wrapped in all sorts of block elements, so we need to redefine our own using barebones HTML.\n\n----------\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"{\n const imageWidth_ = bind(\n html``,\n viewof imageWidth\n );\n const imageHeight = bind(\n html``,\n viewof imageHeight\n );\n const category_ = bind(\n html`\n \n `,\n viewof category\n );\n const filter_ = bind(\n html`\n \n `,\n viewof filter\n );\n return md`I would love to see a picture of ${category_} in ${filter_} just below this text, ideally ${imageWidth_} pixels wide by ${imageHeight} pixels high.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof imageWidth = new Input(Math.floor(width * 0.7))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"viewof imageHeight = new Input(Math.floor((width * 480 * 0.7) / 640))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof category = new Input(categories[0].value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"viewof filter = new Input(filters[0].value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"filters = [\n { value: \"\", label: \"normal colours\" },\n { value: \"/sepia\", label: \"sepia\" },\n { value: \"/grayscale\", label: \"greyscale\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"categories = [\n { value: \"animals\", label: \"animals\" },\n { value: \"any\", label: \"anything\" },\n { value: \"arch\", label: \"architecture\" },\n { value: \"nature\", label: \"nature\" },\n { value: \"people\", label: \"people\" },\n { value: \"tech\", label: \"technology\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"import { Input, bind } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"