Change CDN for Twemoji images from default to jsDelivr

src/emoji/emoji.ts

@@ -2,6 +2,7 @@ import marpitPlugin from '@marp-team/marpit/plugin'
 import emojiRegex from 'emoji-regex'
 import markdownItEmoji from 'markdown-it-emoji'
 import twemoji from 'twemoji'
+import { version as twemojiVersion } from 'twemoji/package.json'
 import twemojiCSS from './twemoji.scss'
 
 export interface EmojiOptions {
@@ -30,10 +31,16 @@ export const markdown = marpitPlugin((md) => {
   const twemojiParse = (content: string): string =>
     twemoji.parse(content, {
       attributes: () => ({ 'data-marp-twemoji': '' }),
-      base: twemojiOpts.base || undefined,
+      // Twemoji's default CDN (MaxCDN) shuts down at December 31, 2022.
+      // Unfortunately, continuous updates of Twemoji (including the update of
+      // base path) can not be expected due to Elon's acquisition for now. So
+      // Marp uses the CDN of jsDelivr unless the user specifies the base path.
+      base: Object.hasOwnProperty.call(twemojiOpts, 'base')
+        ? twemojiOpts.base
+        : `https://cdn.jsdelivr.net/gh/twitter/twemoji@${twemojiVersion}/assets/`,
       ext: `.${twemojiExt}`,
       size: twemojiExt === 'svg' ? 'svg' : undefined,
-    }) as any // TODO: Remove any casting (https://github.com/twitter/twemoji/pull/535)
+    })
 
   const twemojiRenderer = (token: any[], idx: number): string =>
     twemojiParse(token[idx].content)

test/marp.ts

@@ -162,26 +162,37 @@ describe('Marp', () => {
       const instance = (twemoji: EmojiOptions['twemoji'] = {}) =>
         new Marp({ emoji: { twemoji } })
 
-      it('uses SVG via twemoji CDN by default', () => {
-        const $ = load(instance().render('# :ok_hand:').html)
-        const src = $('h1 > img[data-marp-twemoji]').attr('src')
+      const emojiSrc = (emoji: string, marp = instance()) => {
+        const $ = load(marp.render(`# ${emoji}`).html)
+        return $('h1 > img').attr('src')
+      }
 
-        expect(src).toMatchInlineSnapshot(
-          `"https://twemoji.maxcdn.com/v/14.0.2/svg/1f44c.svg"`
+      it('uses SVG via jsDelivr CDN by default', () => {
+        expect(emojiSrc(':ok_hand:')).toMatchInlineSnapshot(
+          `"https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/svg/1f44c.svg"`
         )
       })
 
       describe('base option', () => {
         it('uses specified base', () =>
           expect(
-            instance({ base: '/assets/twemoji/' }).render(':+1:').html
-          ).toContain('/assets/twemoji/svg/1f44d.svg'))
+            emojiSrc(':+1:', instance({ base: '/assets/twemoji/' }))
+          ).toMatchInlineSnapshot(`"/assets/twemoji/svg/1f44d.svg"`))
+
+        it("uses Twemoji's default CDN if the base option was undefined", () =>
+          expect(
+            emojiSrc(':+1:', instance({ base: undefined }))
+          ).toMatchInlineSnapshot(
+            `"https://twemoji.maxcdn.com/v/14.0.2/svg/1f44d.svg"`
+          ))
       })
 
       describe('ext option', () => {
         it('uses PNG emoji by setting png', () =>
-          expect(instance({ ext: 'png' }).render(':+1:').html).toMatch(
-            /https:\/\/twemoji\.maxcdn\.com\/[\w/.]+\/1f44d\.png/
+          expect(
+            emojiSrc(':+1:', instance({ ext: 'png' }))
+          ).toMatchInlineSnapshot(
+            `"https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f44d.png"`
           ))
       })
     })