2b:null 2c:["$","title",null,{"children":"lyrics juxtaposer with search | Jasmine Otto | Observable"}] 31:T506,viewof strided = { finds; reroll; let rolls = []; let pick = arr => { // j = Math.floor(Math.random() * (superarr.length)) let aye = arr.filter(line => line.trim().length > 0); let i = Math.floor(Math.random() * (aye.length - 2)); rolls.push(i); return [aye[i], aye[i + 1], aye[i + 2]]; }; let zip = (...rows) => [...rows[0]].map((_, c) => rows.map(row => row[c])); // https://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function#comment62669374_10284006 let clean = lyrics => lyrics.split('\n').filter(line => line.length > 0 && line[0] != '['); let ret = zip( ['### /', '## //', '### ///'], pick(clean(lyrics)), pick(clean(lyrics_)) ) // make a 3x3 brick with rows of form [header, line, line] .map(tuple => md`${tuple.join(' \n')}`); // staple the header to the aligned lines ret.forEach((el, i) => el.classList.add("enter" + i)); // attach animation style let res = html` ${ret[0]} ${ret[1]} ${ret[2]} `; res.value = rolls; return res; }32:[] 2f:{"id":"a9f175db08608013","slug":"lyrics-juxtaposer-with-search","title":"lyrics juxtaposer with search","thumbnail":"9cf64444ea3fd419ed079427e2764f43692f264617236a3210614046cae0b123","access_level":"public","create_time":"$D2020-07-04T18:21:12.017Z","update_time":"$D2025-06-02T03:58:10.634Z","view_time":null,"first_public_time":"$D2020-11-03T07:58:00.244Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"43e035ce64fad801","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":"starter_2024"},"version":1429,"publish_version":1429,"role":null,"authored":false,"authors":[{"type":"individual","id":"91a3f7bf83a60ddd","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":null}],"members":[{"type":"individual","id":"91a3f7bf83a60ddd","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"lyrics juxtaposer with search","cells":[{"id":0,"value":"md`# lyrics juxtaposer with search\ntype in a couple songs - we'll try to look them up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"viewof a = SearchFactory('☉')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"render(a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"viewof b = SearchFactory('☽')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":688,"value":"render(b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"{\n let flatten = u =>\n `${u.title_with_featured} (${u.primary_artist.name})`.toLowerCase();\n return md`${flatten(a[0])} / ${flatten(b[0])}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"viewof reroll = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1064,"value":"peek = html`\n\n\n\n

\n${op(lyrics).join('\\n')}

\n${op(lyrics_).join('\\n')}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1063,"value":"{\n let el = [peek.querySelector('#a'), peek.querySelector('#b')];\n for (let i = 0; i < 2; ++i) {\n let lineHeight = el[i].scrollHeight / el[i].value.match(/^/gm).length; // https://www.geekality.net/2018/10/04/javascript-count-number-of-lines-in-a-string/\n let jump = (strided[i] - .5) * lineHeight;\n el[i].scrollTop = jump;\n }\n return html`scroll override`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"[...viewof strided.children]\n .slice(1) // discard the css style element\n .map(u => u.innerText.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1404,"value":"md`n.b. lines with [] are dropped by default. \nyou can edit the scrapes, e.g. to remove dupes; to merge or split lines.\n\nbut best to do it in an input cell, as this output cell unfortunately reloads itself.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"html`\n\n\n \n \n\n\n \n \n

${sparklineArray(op(lyrics).map(s => s.length))}	${sparklineArray(op(lyrics_).map(s => s.length))}
${viewof lyrics}	${viewof lyrics_}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":792,"value":"md`### api`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"md`this fork updates the npm module for genius search to use fetch + d3, \nand to pass through cors-anywhere.\n\n require('https://bundle.run/genius-lyrics-api@3.0.2')\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"cors = 'https://cors-anywhere.herokuapp.com/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"authorization = ({\n headers: new Headers({\n Authorization:\n 'Bearer YyeBanntfmvEH8-BXOIx7ar1qLaDCyaFXcOFgXKj8E5AB1-4qhONVjfi3tKWTeud'\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"function seek(query) {\n return query == ''\n ? []\n : fetch(\n new Request(\n cors +\n `api.genius.com/search?per_page=${per_page}&q=${encodeURI(query)}`,\n authorization\n )\n ).then(munge);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"munge = async function(res) {\n const json = await res.json();\n return json.response.hits.map(val => {\n const { full_title, song_art_image_url, id, url } = val.result;\n return {\n ...val.result,\n title: full_title,\n albumArt: song_art_image_url,\n url: url.split('://')[1]\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"md`### scraper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"parseLyrics = function(url) {\n return d3.html(cors + url).then(function(data) {\n let node = data.querySelector('.lyrics p');\n let lyrics = node.textContent;\n\n if (!lyrics) return null;\n if (lyrics.length > 4000) return null;\n return lyrics.trim();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":789,"value":"md`### ui`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"SearchFactory = label => {\n let ret = html``;\n let timer = null;\n\n function delayed(e) {\n timer = null;\n // console.log(e.target.value);\n ret.value = seek(e.target.value);\n }\n ret.oninput = e => {\n if (timer !== null) return; // debounce valve may be shut\n // console.log(e.target.value);\n ret.value = seek(e.target.value);\n timer = setTimeout(delayed, 1000);\n };\n\n ret.onsubmit = e => {\n e.preventDefault();\n };\n ret.value = [];\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"render = results => html`\n${results\n .map(u => ``)\n .join('\\n')}\n

${u.title}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"per_page = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"finds = {\n if (a[0]) {\n viewof lyrics.value = await parseLyrics(a[0].url);\n viewof lyrics.dispatchEvent(new CustomEvent('input'));\n }\n if (b[0]) {\n viewof lyrics_.value = await parseLyrics(b[0].url);\n viewof lyrics_.dispatchEvent(new CustomEvent('input'));\n }\n return 'ok';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"op = raw => raw.split('\\n').filter(u => u && u[0] != '[')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"import { sparklineArray } from \"@didoesdigital/sparkline\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"viewof lyrics = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"viewof lyrics_ = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"/*\nviewof query = html``\n\nsearch = query == '' ? [] : fetch(\n new Request(cors + 'api.genius.com/search?q=' + encodeURI(query), authorization)\n).then(munge)\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":886,"value":"/* let zip = (...rows) => {\n let keys = d3.range(Math.max(...rows.map(u => u.length)));\n return keys.map((_, i) => rows.map(row => row[i]));\n }; */","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"