diff --git a/css/index.css b/css/index.css index 839980d..bcc8042 100644 --- a/css/index.css +++ b/css/index.css @@ -143,15 +143,23 @@ header #new-file .btn-svg svg { margin-left:auto; margin-right:5px; } -.file-type[data-type="JS"]{ +.file[data-type="JS"] .file-name{ color: #ffde24 } -.file-type[data-type="CSS"]{ +.file[data-type="CSS"] .file-name{ color: #15a0dc } .file.filtered{ display: none; } +.file .file-link-favicons{ + display: flex; +} +.file .file-link-favicon{ + max-width: 1em; + max-height: 1em; + margin-left: 4px; +} #search-bar-container{ margin: 8px; diff --git a/js/index.js b/js/index.js index d8ffbe3..3f9f7c6 100644 --- a/js/index.js +++ b/js/index.js @@ -5,7 +5,9 @@ function createFileEntry(fileObject, element){ file.innerHTML = ` ${info.name} - ${info.type} +
@@ -25,13 +27,23 @@ function createFileEntry(fileObject, element){ file.dataset.type = info.type; file.dataset.enabled = info.enabled; file.dataset.name = info.name; - file.dataset.links = info.links ? file.dataset.links = info.links.map(url => { + let domains = (info.links ?? []).map(url => { try{ return (new URL(url)).hostname; }catch(exc){ return ""; } - }).join(" ") : ""; + }); + file.dataset.links = domains.join(" "); + + let favicons = file.querySelector(".file-link-favicons"); + favicons.innerHTML = ""; + for(domain of domains){ + let favicon = document.createElement("img"); + favicon.className = "file-link-favicon"; + favicon.src = `https://icons.duckduckgo.com/ip3/${domain}.ico`; + favicons.appendChild(favicon); + } } setDataset();