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([