Add placeholder image for missing avatars

src/assets/style.css

@@ -58,6 +58,7 @@ pre {
 
 .message img, .message video {
   max-width: 100%;
+  border: var(--thin-stroke) dotted var(--off-white)
 }
 
 .message > :first-child {

src/pages/image.js

@@ -13,7 +13,21 @@ module.exports = async function ({ blobId, imageSize }) {
     pull(
       bufferSource,
       pull.collect((err, bufferArray) => {
-        if (err) return resolve(null)
+        if (err) {
+          return sharp({
+            create: {
+              width: imageSize,
+              height: imageSize,
+              channels: 4,
+              background: { r: 0, g: 0, b: 0, alpha: 0.5 }
+            }
+          })
+            .png()
+            .toBuffer()
+            .then(data => {
+              resolve(data)
+            })
+        }
 
         const buffer = Buffer.concat(bufferArray)
         sharp(buffer)

src/pages/models/about.js

@@ -2,7 +2,7 @@
 const cooler = require('./lib/cooler')
 const markdown = require('./lib/markdown')
 
-const nullImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='
+const nullImage = `&${'0'.repeat(43)}=.sha256`
 
 module.exports = {
   name: async (feedId) => {

src/pages/models/post.js

@@ -77,9 +77,10 @@ const transform = (ssb, messages, myFeedId) => Promise.all(messages.map(async (m
   const pending = [pendingName, pendingAvatarMsg]
   const [name, avatarMsg] = await Promise.all(pending)
 
+  const nullImage = `&${'0'.repeat(43)}=.sha256`
   const avatarId = avatarMsg != null && typeof avatarMsg.link === 'string'
-    ? avatarMsg.link
-    : avatarMsg
+    ? avatarMsg.link || nullImage
+    : avatarMsg || nullImage
 
   const avatarUrl = `/image/32/${encodeURIComponent(avatarId)}`