diff --git a/install-usercss/external.svg b/install-usercss/external.svg new file mode 100644 index 00000000..ce4fd8f8 --- /dev/null +++ b/install-usercss/external.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css index 5e373b30..ad09d080 100644 --- a/install-usercss/install-usercss.css +++ b/install-usercss/install-usercss.css @@ -8,6 +8,11 @@ body { box-sizing: border-box; } +img.icon { + height: 1.4em; + vertical-align: middle; +} + .container { display: flex; height: 100vh; diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js index f32d60b4..96338841 100644 --- a/install-usercss/install-usercss.js +++ b/install-usercss/install-usercss.js @@ -71,7 +71,8 @@ $('.meta-description').textContent = data.description; $('.meta-author').parentNode.style.display = data.author ? '' : 'none'; - $('.meta-author').textContent = data.author; + $('.meta-author').textContent = ''; + $('.meta-author').appendChild(makeAuthor(data.author)); $('.meta-license').parentNode.style.display = data.license ? '' : 'none'; $('.meta-license').textContent = data.license; @@ -87,6 +88,41 @@ $('.external-link').appendChild(externalLink); } + function makeAuthor(text) { + const match = text.match(/^(.+?)(?:\s+<(.+?)>)?(?:\s+\((.+?)\))$/); + if (!match) { + return document.createTextNode(text); + } + const [, name, email, url] = match; + const frag = document.createDocumentFragment(); + if (email) { + frag.appendChild($element({ + tag: 'a', + textContent: name, + href: `mailto:${email}` + })); + } else { + frag.appendChild($element({ + tag: 'span', + textContent: name + })); + } + if (url) { + frag.appendChild($element({ + tag: 'a', + href: url, + target: '_blank', + rel: 'noopener', + appendChild: $element({ + tag: 'img', + className: 'icon', + src: '/install-usercss/external.svg' + }) + })); + } + return frag; + } + function makeExternalLink() { const urls = []; if (data.homepageURL) {