31:[] 2f:{"title":"P-001 / Notebook Series Template","cells":[{"id":0,"value":"md`# P-001 / Notebook Series Template`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"desc(`A template for notebooks that concentrate on a single playground cell. ${datespan(\"16 Dec 2019\")}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"note(`${titlespan(\"**Notes:**\")} This is a simple example of an SVG element with monospaced text. The sentence can be customized in the input options below. This notebook is more than just the example as it features useful functions with typographical conventions for a [series of notebooks](https://observablehq.com/collection/@hastebrot/notebook-series). The numeration of the notebooks is from *P-001* to *P-999* and continues with *P1000*.\n\n${titlespan(\"**Thanks to:**\")} Johann Philipp Reis, for the example sentence with the horse. He used it to [test his telephone-like invention](https://en.wikipedia.org/wiki/Reis_telephone#History) around 1861.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof shortText = textarea({ title: \"shortText\", value: \"The horse does not eat cucumber salad.\", width: \"66%\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"viewof fontSize = number({ title: \"fontSize\", value: 20, description: \"(in pixels)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"note(\"*Input options, which customize the example.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"loadMonospaceStylesheet()","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"loadMonospaceStylesheet = () => html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"note(\"*Loads Roboto Mono typeface from Google Fonts into the notebook.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"defaultMonospaceStyle = (fontSize = 20) => `font-size: ${fontSize}px; font-family: roboto mono, monospace; fill: #000;`","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"note(\"*Uses default monospace font via HTML style attribute value.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"defaultSvgTextStyle = `text-anchor: start; dominant-baseline: hanging;`","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"note(\"*Aligns an SVG text element via HTML style attribute.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"betterFontSmoothingStyle = \"font-size: 100%; -webkit-text-size-adjust: 100%; font-variant-ligatures: none; -webkit-font-variant-ligatures: none; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"note(\"*Used for HTML element style for better cross-browser font smoothing. Thanks to Hasan Shahriar for [the better font smoothing gist](https://gist.github.com/hsleonis/55712b0eafc9b25f1944).*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"import { text, textarea, number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"note(\"*Imports several inputs to customize the example cell.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"range = (startValue, endValue) => Array.from({ length: endValue - startValue }, (value, index) => startValue + index)","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"note(\"*Creates an integer array between start and stop values.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"titlespan = text => `${text}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"note(\"*Applies a format for titles.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"datespan = text => `—${text}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"note(\"*Applies a format for dates.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"colorspan = (text, color = \"#ddd\") => `${text}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"note(\"*Applies a format for colored text.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"desc = text => md`*${text}*`","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"note(\"*Outputs a formatted description intended for every notebook cell.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"note = text => html`\n

\n${md`${text}`}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"note(\"*Outputs a formatted note for explanations of the primary notebook example.*\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"divider = () => html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"note(\"*Outputs a divider used to structure a notebook in sections.*\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}