30:T1933,class VirtualCard { constructor(model) { this.model = model; } static from(source) { const { omitFields = [], name = "", photo = "", twitter, homepage, mastodon, linkedin, github, ...etc } = source; return new this({ omitFields, firstName: name.slice(0, name.indexOf(" ")).trim(), lastName: name.slice(name.indexOf(" ")).trim(), ...this.parseURL(photo, "photo"), ...this.parseURL(homepage, "homepage"), ...this.parseMastodon(mastodon), ...this.parseTwitter(twitter), ...this.parseLinkedin(linkedin), ...this.parseGithub(github), source }); } static parseURL(url, name = "homepage") { try { return { [name]: { url: new URL(url) } }; } catch (_) { return {}; } } static parseTwitter(source = "") { if (source.startsWith("@") && source.length > 1) { return { twitter: { name: source, id: source.substring(1), url: new URL(`https://twitter.com/${source.substring(1)}`) } }; } else { return {}; } } static parseLinkedin(source = "") { if (source.length > 0) { return { linkedin: { name: source, url: new URL(`https://www.linkedin.com/in/${source}`) } }; } else { return {}; } } static parseGithub(source = "") { if (source.length > 0) { return { github: { name: source, url: new URL(`https://github.com/${source}`) } }; } else { return {}; } } static parseMastodon(source = "") { const [_, id, server] = source.split("@"); return id && server ? { mastodon: { name: source, id, server, url: new URL(`https://${server}/@${id}`) } } : {}; } toJSON() { const { email, twitter, photo, mastodon, homepage, linkedin, github, firstName, lastName, omitFields } = this.model; return { name: `${firstName} ${lastName}`, ...(email && !omitFields.includes("email") ? { email } : {}), ...(photo ? { photo } : {}), ...(homepage ? { homepage } : {}), ...(github ? { github } : {}), ...(twitter ? { twitter } : {}), ...(mastodon ? { mastodon } : {}), ...(linkedin ? { linkedin } : {}) }; } static async embedPhoto(url) { const response = await fetch(url); const blob = await response.blob(); const file = new File([blob], `photo`, { type: response.headers.get("content-type") }); const content = base64.baseEncode(new Uint8Array(await blob.arrayBuffer())); return { file, type: file.type, //.slice("image/".length), content }; } async compile() { const { email, twitter, mastodon, homepage, linkedin, github, firstName, lastName, omitFields } = this.model; const photo = this.model.photo ? await VirtualCard.embedPhoto(this.model.photo.url) : null; const card = VCard.fromJSON([ "vcard", [ ["version", {}, "text", "4.0"], ["rev", {}, "text", `${new Date().getTime()}`], ["n", {}, "text", [lastName, firstName, "", "", ""]], ["fn", {}, "text", `${firstName} ${lastName}`], ...(!omitFields.includes("email") && email ? [["email", {}, "text", email]] : []), ...(homepage ? [["url", {}, "text", homepage.url.href]] : []), ...(github ? [["x-socialprofile", { type: "github" }, "text", github.url.href]] : []), ...(twitter ? [["x-socialprofile", { type: "twitter" }, "text", twitter.url.href]] : []), ...(mastodon ? [ [ "x-socialprofile", { type: "mastodon" }, "text", mastodon.url.href ] ] : []), ...(linkedin ? [ [ "x-socialprofile", { type: "linkedin" }, "text", linkedin.url.href ] ] : []), ...(photo ? [ [ "photo", { encoding: "base64", type: photo.type }, "text", photo.content ] ] : []) ] ]); return { photo, card: { file: new File([card.toString()], `${firstName}-${lastName}.vcf`, { type: "text/vcard" }), model: card } }; } async render() { const { firstName, lastName, email, homepage, github, twitter, mastodon, linkedin } = this.toJSON(); const { photo, card } = await this.compile(); return html`

${name}

${ email ? html`

Email: ${email}

` : `` } ${ homepage ? `

Homepage: ${ homepage.url.pathname === "/" ? homepage.url.href.slice( homepage.url.href.indexOf("://") + "://".length, -1 ) : homepage.url.href }

` : `` } ${ github ? `

Github: ${github.name}

` : `` } ${ twitter ? `

Twitter: ${twitter.name}

` : `` } ${ mastodon ? `

Mostodon: ${mastodon.name}

` : `` } ${ linkedin ? `

Linkedin: ${linkedin.name}

` : `` }

Add to your contacts

`; } }31:[] 2e:{"title":"Virtual Card","cells":[{"id":0,"value":"# Virtual Card","pinned":false,"hidden":false,"mode":"md"},{"id":405,"value":"card.render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof email = Inputs.email({ label: \"Email\", placeholder: \"Email\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"viewof omitFields = Inputs.checkbox([\"email\"], {\n label: \"Omit Email\",\n value: [\"email\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"viewof photo = Inputs.url({\n label: \"Photo\",\n placeholder: \"URL\",\n value: `https://www.gravatar.com/avatar/${md5(email)}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof name = Inputs.text({ label: \"Name\", placeholder: \"Name\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"viewof homepage = Inputs.url({ label: \"home page\", placeholder: \"URL\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof github = Inputs.text({\n label: \"Github\",\n placeholder: \"name\",\n pattern: \"^[a-z0-9]+$\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof linkedin = Inputs.text({\n label: \"LinkedIn\",\n placeholder: \"name\",\n pattern: \"^[a-z0-9-_-]+$\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"viewof twitter = Inputs.text({\n label: \"Twitter\",\n placeholder: \"@name\",\n pattern: \"^@[a-z0-9]+$\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof mastodon = Inputs.text({\n label: \"Mastodon\",\n placeholder: \"@name@server\",\n pattern: \"^@[a-z0-9]+@[a-z0-9]+.[a-z0-9]+$\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"card = VirtualCard.from({\n name,\n email,\n omitFields,\n photo,\n twitter,\n github,\n linkedin,\n mastodon,\n homepage\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"VCard = (await import(\"https://cdn.skypack.dev/vcf\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"import { base64 } from \"@gozala/ipld\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md5 = (await import(\"https://cdn.skypack.dev/md5\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"card.model.homepage.url.href.indexOf","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}