preview: dont render empty meta fields

Metadata can contain empty fields or broken images. Improved
rendering of meta preview links with missing info, also added a
subtile transparent dark background color to preview images, as
some images contain white text on transparent background and are
invisible in light mode.

src/cards.css

@@ -142,6 +142,7 @@
 }
 
 .preview-image {
+  background-color: rgba(72, 63, 63, 0.07);
   margin-bottom: var(--gap);
   max-height: 30vh;
   object-fit: contain;

src/main.js

@@ -187,14 +187,20 @@ const fetchNext = (href, id, relay) => {
     })
     .then(meta => {
       const container = document.getElementById(previewId);
-      container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, [
+      const content = [];
-        meta.images[0] && (
+      if (meta.images[0]) {
-          elem('img', {className: 'preview-image', loading: 'lazy', src: getNoxyUrl('data', meta.images[0], id, relay).href})
+        content.push(elem('img', {className: 'preview-image', loading: 'lazy', src: getNoxyUrl('data', meta.images[0], id, relay).href}));
-        ),
+      }
-        elem('h2', {className: 'preview-title'}, meta.title),
+      if (meta.title) {
-        elem('p', {className: 'preview-descr'}, meta.descr),
+        content.push(elem('h2', {className: 'preview-title'}, meta.title));
-      ]));
+      }
-      container.classList.add('preview-loaded');
+      if (meta.descr) {
+        content.push(elem('p', {className: 'preview-descr'}, meta.descr))
+      }
+      if (content.length) {
+        container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, content));
+        container.classList.add('preview-loaded');
+      }
     })
     .finally(() => {
       fetchPending = false;