rss-parserで複数のメディアのサムネイルを取得して表示する

さまざまなメディアからサムネイルを取得したいとき、XML内でサムネイル画像のurlを取得する要素が違うため整形する必要がある。

修正前のコード

const FrontPage = async () => {

  const { contents } = await getList();
  const parse = new Parser()

  return (
    <div className='p-front-page'>
      <ul className={styles['p-front-page__list']}>
        {contents.map(async (rss) => {
          const feed = await parse.parseURL(rss.url)
          return feed.items.map((item) => {
            return (
              <ArticleCard
                thumbnail={item.enclosure?.url}
                date={item.pubDate}
                link={item.link}
                title={item.title}
                site_title={rss.title}
              />
            )
          })
        })}
      </ul>
    </div>
  )
}

これだとenclosureタグでサムネイル画像のurlを出力しているメディアにしか対応できない。
rss-parserのcustomFields関数を使ってマッピングする。

const FrontPage = async () => {

  const { contents } = await getList();
  const parse = new Parser({ 
    customFields: {
      item: [['media:thumbnail', 'image']], //追記
    }
  });

  return (
    <div className='p-front-page'>
      <ul className={styles['p-front-page__list']}>
        {contents.map(async (rss) => {
          const feed = await parse.parseURL(rss.url)
          return feed.items.map((item) => {
            return (
              <ArticleCard
                thumbnail={item.enclosure?.url ?? item.image} //追記
                date={item.pubDate}
                link={item.link}
                title={item.title}
                site_title={rss.title}
              />
            )
          })
        })}
      </ul>
    </div>
  )
}

こうすることで、どの様なタグでも同じように要素をマッピングできる。