2d:null 2e:["$","title",null,{"children":"Cohost Widgets | maddie lim ✨ | Observable"}] 33:T42a,!fancyListFormConfirmState.confirmAction ? Inputs.form({ reset: Inputs.button("Clear Examples", { reduce: () => { mutable fancyListFormConfirmState = { confirmAction: "reset" }; } }), restore: Inputs.button("Restore Examples", { reduce: () => { mutable fancyListFormConfirmState = { confirmAction: "restore" }; } }) }) : Inputs.button( [ [ "Yes", () => { mutable fancyListInputStore = fancyListFormConfirmState.confirmAction === "reset" ? fancyListBlankData() : fancyListExampleData(); mutable fancyListFormConfirmState = { confirmAction: null }; } ], [ "No", () => { mutable fancyListFormConfirmState = { confirmAction: null }; } ] ], { label: html`⚠️ Are you sure? Your changes will be cleared.` } )34:T45f,makeWidget = (code) => { const ed = Editor({ language: "html", value: escapeHtml(code) }); const q = ed.querySelector("[contentEditable=plaintext-only]"); q.setAttribute("contentEditable", "false"); return html`

Preview

${code}

${copyButton( code )} HTML Code

${ed}

`; }35:[] 31:{"id":"bd2eb233c2dbb666","slug":"cohost-widgets","title":"Cohost Widgets","thumbnail":"7d933847223f23897ced1d0a1782bf153d021313f3fead0537ef399a6dc3aa80","access_level":"public","create_time":"$D2022-10-29T19:57:23.002Z","update_time":"$D2022-10-30T22:57:21.975Z","view_time":null,"first_public_time":"$D2022-10-29T21:46:08.916Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"408ee840d040526a","login":"maddievision","name":"maddie lim ✨","avatar_url":"https://avatars-next.observableusercontent.com/44fc4f0f8be73321b571127eefd9853a031c5c33e9985648c91e6aa827258ce0","tier":"starter_2024"},"version":619,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"578d96c86967f83d","login":"maddievision","name":"maddie lim ✨","avatar_url":"https://avatars-next.observableusercontent.com/44fc4f0f8be73321b571127eefd9853a031c5c33e9985648c91e6aa827258ce0","tier":null}],"members":[{"type":"individual","id":"578d96c86967f83d","login":"maddievision","name":"maddie lim ✨","avatar_url":"https://avatars-next.observableusercontent.com/44fc4f0f8be73321b571127eefd9853a031c5c33e9985648c91e6aa827258ce0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Cohost Widgets","cells":[{"id":0,"value":"# Cohost Widgets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"## Fancy Lists","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":468,"value":"viewof fancyListCount = Inputs.range([1, 10], {\n label: \"Number of Lists\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof fancyListsInput = list(fancyListInputStore.slice(0, fancyListCount), {\n columns: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"makeWidget(FancyList(fancyListForm))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"FancyList = (lists) => `\n

\n\n${fancyListsInput\n .map(\n ({ title, items, hue }, i) => `\n

${title}

\n${marked.parse(items)}\n

\n\n\n`\n )\n .join(\"\")}\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"fancyListForm = (\n values = {\n title: \"My favourite fruits\",\n items: `* Durian\n* Lychees\n* Strawberries\n`,\n hue: 315\n }\n) =>\n Inputs.form({\n title: Inputs.text({\n // label: \"Title\",\n value: values.title\n }),\n // items: Editor({\n // language: \"md\",\n // // label: \"Items\",\n // value: `* Durian\n // * Lychees\n // * Strawberries\n // `\n // }),\n items: Inputs.textarea({\n // label: \"Items\",\n value: values.items\n }),\n hue: Inputs.range([0, 360], {\n // label: \"Hue\",\n step: 15,\n value: values.hue\n })\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"mutable fancyListInputStore = fancyListExampleData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"fancyListExampleData = () => [\n fancyListForm(),\n fancyListForm({\n title: \"My favourite games\",\n items: `* Celeste\n* Riichi Mahjong\n* Splatoon 3\n* Super Mario Bros: The Lost Levels`,\n hue: 45\n }),\n fancyListForm({\n title: \"Countries I’ve lived in\",\n items: `* 🇦🇺 Australia\n* 🇺🇸 United States`,\n hue: 270\n }),\n fancyListForm({\n title: \"DAWs I use\",\n items: `* Logic Pro\n* Renoise\n* FL Studio`,\n hue: 180\n }),\n ...fancyListBlankData().slice(4, 10)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"fancyListBlankData = () =>\n Array(10)\n .fill(null)\n .map((x, i) =>\n fancyListForm({\n title: `List ${i + 1}`,\n items: `* Item`,\n hue: 360 - ((i * 45) % 360)\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"mutable fancyListFormConfirmState = {\n return {\n confirmAction: null\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"## LiveJournal \"Current Mood\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"Find a mood from [the LiveJournal Moods page](https://www.livejournal.com/moodlist.bml), and right-click copy the Image URL of the one you want to use. Enter its info below!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"viewof mood = Inputs.text({ label: \"Text\", value: \"tired\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof moodURL = Inputs.text({\n label: \"Icon URL\",\n value: \"https://l-stat.livejournal.net/img/mood/moonsis/sleepy.gif\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"makeWidget(CurrentMood(moodURL, mood))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"CurrentMood = (url, mood) =>\n `\n

Current Mood: $\"LiveJournal$

${mood}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"import { Editor } from \"@cmudig/editor\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { html as h } from \"@cmudig/highlighter\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import { copyButton } from \"@maddievision/clipboard\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"import { list } from \"@stwind/input-list\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"fonts = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"function escapeHtml(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"marked = require(\"marked/marked.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"