fix(podcast): use html text & only render image if there is one

package.json

@@ -44,6 +44,7 @@
     "embla-carousel-react": "^8.2.0",
     "framer-motion": "^10.16.4",
     "gray-matter": "^4.0.3",
+    "isomorphic-dompurify": "^2.15.0",
     "markdown-it": "^13.0.2",
     "next": "^14.0.2",
     "next-images": "^1.8.5",

src/rss/feed/Podcast.tsx

@@ -1,16 +1,19 @@
 import { BaseBlob } from '@variant/components/lib/blob';
 import dynamic from 'next/dynamic';
+import DOMPurify from 'isomorphic-dompurify';
 import { and } from 'src/utils/css';
 import { PodcastItem } from '../index';
 import style from './feed.module.css';
 
 const Player = dynamic(() => import('./Player'), { ssr: false });
 
 export default function Podcast({ item }: { item: PodcastItem }) {
+  const cleanDescription = DOMPurify.sanitize(item.description);
+
   return (
     <div className={and(style.card, style['card--podcast'])}>
       <div className={style.media}>
-        <BaseBlob
+        {item.imageCoverUrl && <BaseBlob
           height={200}
           width={200}
           randomness={2}
@@ -21,7 +24,7 @@ export default function Podcast({ item }: { item: PodcastItem }) {
             loading: 'lazy',
             decoding: 'async',
           }}
-        />
+        />}
       </div>
       <div className={style.text}>
         <div className={style.podcast__content}>
@@ -40,7 +43,7 @@ export default function Podcast({ item }: { item: PodcastItem }) {
             </div>
           </Player>
           <div className={style.published}>Publisert {item.publishDate}</div>
-          <p className={style.summary}>{item.description}</p>
+          <div dangerouslySetInnerHTML={{ __html: cleanDescription }} />
         </div>
       </div>
     </div>