30:[] 2e:{"title":"Business Card","cells":[{"id":0,"value":"md`# Business Card`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`A business card with random user data. You can override with query parameters for your own case. Fork this notebook to improve it. Uses TailWind for CSS.\n\nFor example: https://observablehq.com/@triptych/business-card?fname=Andrew&lname=Wooldridge&email=triptych@gmail.com&pic=https://via.placeholder.com/160&username=triptych&website=andreww.xyz `","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"card = html`\n

${profile.first_name} ${profile.last_name}

email: ${profile.email}

social network: @${profile.social_network}

website: ${profile.website}

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"kofi","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"import { kofi } from \"@triptych/ko-fi\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"name = \"Firstname Lastname\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"mutable profile = ({\n first_name: user.results[0].name.first,\n last_name: user.results[0].name.last,\n picture: user.results[0].picture.large,\n email: user.results[0].email,\n social_network: user.results[0].login.username,\n website: `https://${user.results[0].location.country.toLowerCase().replace(\" \",\"\")}.com`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { tw, twind } from \"@hastebrot/using-twind\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"user = {\n if(paramArr.length<1){\n // no query parameters so populate randomly\n let user = await fetch(\"https://randomuser.me/api/\").then(response=>{\n return response.json()\n })\n return await user\n } else {\n // mock the user response via the query parameters\n let user = {\n results:[\n {\n name: { first: getValue(\"fname\",paramArr), last:getValue(\"lname\",paramArr) },\n email: getValue(\"email\", paramArr),\n picture:{\n large: getValue(\"pic\", paramArr)\n },\n login: {\n username: getValue(\"username\", paramArr)\n },\n location: {\n country: getValue(\"website\",paramArr)\n }\n }\n ]\n }\n return user;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"params = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"paramArr = Array.from(params.entries())","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"getValue = (key, arr)=>{\n let retVal = \"\";\n arr.forEach((itm,idx,array)=>{\n if(itm[0] == key){\n retVal = itm[1]\n }\n });\n return retVal;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}