const nest = require('depnest') const { h, computed } = require('mutant') exports.gives = nest('about.html.avatar') exports.needs = nest({ 'about.obs': { color: 'first', imageUrl: 'first' }, 'about.html.link': 'first' }) exports.create = function (api) { return nest('about.html.avatar', avatar) function avatar (id, size = 4) { const src = api.about.obs.imageUrl(id) const color = computed(src, src => src.match(/^http/) ? 'rgba(0,0,0,0)' : api.about.obs.color(id)) const avatar = api.about.html.link(id, h('img', { style: { 'background-color': color }, src }) ) avatar.classList.add('Avatar') avatar.style.setProperty('--avatar-size', isNaN(size) ? size : `${size}rem`) return avatar } }