require src and alt for images

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -3,8 +3,8 @@ import { useState } from "react"
 import { TbPhoto } from "react-icons/tb"
 
 interface ImageWithPlaceholderWhileLoadingProps {
-    src?: string
-    alt?: string
+    src: string
+    alt: string
     title?: string
     width?: number
     height?: number | "auto"

commafeed-client/src/components/content/Content.tsx

@@ -29,7 +29,9 @@ const transform: TransformCallback = node => {
     if (node.tagName === "IMG") {
         // show placeholders for loading img tags, this allows the entry to have its final height immediately
         const src = node.getAttribute("src") ?? undefined
-        const alt = node.getAttribute("alt") ?? undefined
+        if (!src) return undefined
+
+        const alt = node.getAttribute("alt") ?? "image"
         const title = node.getAttribute("title") ?? undefined
         const nodeWidth = node.getAttribute("width")
         const nodeHeight = node.getAttribute("height")
@@ -40,6 +42,7 @@ const transform: TransformCallback = node => {
             height,
             maxWidth: Constants.layout.entryMaxWidth,
         })
+
         return (
             <ImageWithPlaceholderWhileLoading
                 src={src}

commafeed-client/src/components/content/Enclosure.tsx

@@ -1,7 +1,7 @@
 import { TypographyStylesProvider } from "@mantine/core"
 import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 
-export function Enclosure(props: { enclosureType?: string; enclosureUrl?: string }) {
+export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) {
     const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0
     const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0
     const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0

commafeed-client/src/components/content/FeedEntryBody.tsx

@@ -14,7 +14,7 @@ export function FeedEntryBody(props: FeedEntryBodyProps) {
             <Box>
                 <Content content={props.entry.content} />
             </Box>
-            {props.entry.enclosureUrl && (
+            {props.entry.enclosureType && props.entry.enclosureUrl && (
                 <Box pt="md">
                     <Enclosure enclosureType={props.entry.enclosureType} enclosureUrl={props.entry.enclosureUrl} />
                 </Box>