From dbf6696d04c7b643aee8396a40a151c7db2f2386 Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Mon, 29 May 2023 17:58:38 +0200 Subject: [PATCH] Update contact --- docs/render.js | 7 +++ docs/render/contact.css | 50 ++++++++++++++++----- docs/render/contact.js | 99 ++++++++++++++++++++++++++++++----------- 3 files changed, 120 insertions(+), 36 deletions(-) diff --git a/docs/render.js b/docs/render.js index 6c89613..aa4c88e 100644 --- a/docs/render.js +++ b/docs/render.js @@ -36,6 +36,13 @@ const el = (selector, ...args) => { return node; }; +el.trust = function (html) { + if (!html?.length) return undefined; + var template = document.createElement('template'); + template.innerHTML = html; + console.log(template.content.childNodes); + return Array.from(template.content.childNodes); +} window.el = el; function async(u, c) { diff --git a/docs/render/contact.css b/docs/render/contact.css index a51e9a8..f71def6 100644 --- a/docs/render/contact.css +++ b/docs/render/contact.css @@ -39,32 +39,59 @@ body { } .contact { - background-color: white; + background-color: rgba(255,255,255,0.5); width:320px; - height:518px; + min-height:518px; box-shadow: var(--shadow-elevation-medium); - margin-bottom:20vh; - margin-top:4vh; - padding-top:24px; - border-radius:3px; + margin-bottom:10vh; + border-radius:10px; display:flex; flex-direction: column; justify-content: space-between; - padding:8px 0; + border-bottom:8px solid white; + overflow:hidden; } .header { flex: 1 1 auto; padding-top:1em; + display:flex; + flex-direction: column; + padding: 24px 8px; } +.content { + border-top:8px solid white; +} + +img.profile { + aspect-ratio: 1.0; + background-color:rgba(0,0,0, 0.025); +} + +/* .header img { + width:64px; + height:64px; + border-radius:100%; + float:right; + order:-1; + margin-left:1em; +} */ .icon { order:-1; - padding: 12px 0; + padding: 6px 0; margin-right:32px; + align-self: flex-start; + height: 8px; +} + +.icon img { + width: 24px; + height:24px; + border-radius:2px; } .row { @@ -73,20 +100,23 @@ body { color:black; flex-direction: row; /* border-top:1px solid #eee; */ - min-height:48px; + min-height:40px; align-items: center; + background:white; } .field { flex: 1 1 auto; overflow:hidden; text-overflow: ellipsis; + white-space: pre-wrap; + padding:4px 0; } .icon svg { } -a, h1, div.memo { +a, h1, div.memo, .header div { padding: 0 24px; margin:0; } diff --git a/docs/render/contact.js b/docs/render/contact.js index 39d9bdd..86aa64f 100644 --- a/docs/render/contact.js +++ b/docs/render/contact.js @@ -1,6 +1,6 @@ let script = window.script; -let icon = { +let fieldIcons = { bday: '', tel: '', text: '', @@ -12,6 +12,22 @@ let icon = { vid: '', } +let siteIcons = { + "twitter.com": "twitter", + "facebook.com": "facebook", + "instagram.com": "instagram", + "linkedin.com": "linkedin", + "youtube.com": "youtube", + "tiktok.com": "tiktok", + "snapchat.com": "snapchat", + "pinterest.com": "pinterest", + "tumblr.com": "tumblr", + "reddit.com": "reddit", + "github.com": "github", + "medium.com": "medium", + "twitch.tv": "twitch", +} + @@ -20,6 +36,14 @@ function share() { parent.postMessage({share:{}}, "*"); } +function formatBday(date) { + const year = date.slice(0, 4); + const month = date.slice(4, 6) - 1; // months are zero-indexed in JavaScript + const day = date.slice(6, 8); + const options = { month: 'long', day: 'numeric' }; + return new Date(year, month, day).toLocaleDateString(undefined, options) +} + function render() { document.documentElement.appendChild(el("base", {target:"_top"})) let vcard = params.body.match(/BEGIN:VCARD/); @@ -36,41 +60,64 @@ function render() { ) } else if (params.body.match(/MECARD:/)){ document.body.appendChild(el("#arc-theme")); + let queryString = params.body.substring(7); + queryString = queryString.split(";").map(line => line.replace(/\:/, "=")).join("&"); - console.log("params.body", decodeURI(params.body)) - let lines = decodeURIComponent(decodeURIComponent(params.body.substring(7))).trim().replace(/\\n/g, "\n").replace(/\\:/g, "\:").split(";"); - let mecard = {} - lines.forEach(line => { - let parts = line.split(":"); - mecard[parts.shift().toLowerCase()] = [parts.join(":")]; - }) + let searchParams = new URLSearchParams(queryString); + + let headingElements = []; + let contentElements = []; + let imgElement = undefined; - if (mecard.color) document.body.style.backgroundColor = mecard.color; + searchParams.forEach((value, key) => { + key = key.toLowerCase(); + value = decodeURIComponent(value); + console.log(value, key); + if (key == 'color') { + document.body.style.backgroundColor = value; + } else if (key == 'n') { + headingElements.push(el("h1", {}, value)) + } else if (key == 'img') { + imgElement = (el("img.profile", {src:value})); + } else { + let href = undefined; + if (key == "email") { + href = "mailto:" + value; + } + if (key == "url") { + href = value; + value = value.replace(/https?:\/\/(www.)?/, "") + } + if (!fieldIcons[key]) { + headingElements.push(el("div", value)); + } else { + let img = el.trust(fieldIcons[key]); + if (key == "url") { + img = el("img", {src:"https://www.google.com/s2/favicons?sz=48&domain=" + href}); + } + contentElements.push( + el("a.row." + key, {target:"top", href}, + el("div.icon", img), + el("div.field", value) + ) + ) + } + } + + }); document.body.appendChild( el("div.contact", {}, - el("div.header", {}, - el("h1", {}, mecard.n), - ), - mecard.tel?.map(tel => el("a.row.tel", {href:"tel:" + tel}, - el("div.icon", {innerHTML:icon.tel}), el("div.field", {}, tel))), - mecard.email?.map(email => el("a.row.email", {target:"top", href:"mailto:" + email}, - el("div.icon", {innerHTML:icon.email}), el("div.field", {}, email))), - mecard.adr?.map(adr => el("a.row.adr", {href:"https://address.fyi/" + adr}, - el("div.icon", {innerHTML:icon.adr}), el("div.field", {}, adr))), - mecard.bday?.map(bday => el("a.row.bday", {href:"https://address.fyi/" + bday}, - el("div.icon", {innerHTML:icon.bday}), el("div.field", {}, bday))), - mecard.url?.map(url => el("a.row.url", {href:url}, - el("div.icon", {innerHTML:icon.url}), el("div.field", {}, url.replace(/https?:\/\//, "")))), - mecard.memo?.map(memo => el("div.row.memo", {}, el("div.field", {}, memo))), - + imgElement, + el("div.header", {}, headingElements), + el("div.content", {}, contentElements) ) ) - console.log("mecard", lines, mecard); } - } + + var path = script.substring(0, script.lastIndexOf(".")); var cssURL = path + ".css"; Promise.all([