Medium: Fix processing embeds without images

TryGhost · Dec 14, 2023 · 5ba8981 · 5ba8981
1 parent 2e0160b
commit 5ba8981
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/packages/mg-medium-export/lib/process-content.js b/packages/mg-medium-export/lib/process-content.js
@@ -101,14 +101,18 @@ export default ({content, post}) => {
         let href = $(el).find('.markup--anchor').attr('href');
         cardOpts.payload.url = href;
 
-        let src = $(el).find('.js-mixtapeImage').css('background-image').replace(/url\((.*?)\)/, (m, p) => p);
         cardOpts.payload.metadata = {
             url: href,
             title: $(el).find('.markup--strong').text(),
-            description: $(el).find('.markup--em').text(),
-            thumbnail: src
+            description: $(el).find('.markup--em').text()
         };
 
+        const bngImage = $(el).find('.js-mixtapeImage').css('background-image');
+        if (bngImage) {
+            let src = bngImage.replace(/url\((.*?)\)/, (m, p) => p);
+            cardOpts.payload.metadata.thumbnail = src;
+        }
+
         const bookmarkHtml = serializer.serialize(bookmarkCard.render(cardOpts));
 
         $(el).replaceWith(`<!--kg-card-begin: html-->\n${bookmarkHtml}\n<!--kg-card-end: html-->`);

diff --git a/packages/mg-medium-export/test/process.test.js b/packages/mg-medium-export/test/process.test.js
@@ -343,7 +343,7 @@ describe('Process Content', function () {
         expect(newHtml).toContain('<figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://cdn-images-1.medium.com/max/600/1*1234.jpeg" width="768" height="933" loading="lazy" alt=""></div><div class="kg-gallery-image"><img src="https://cdn-images-1.medium.com/max/400/1*5678.jpeg" width="768" height="1024" loading="lazy" alt=""></div><div class="kg-gallery-image"><img src="https://cdn-images-1.medium.com/max/600/1*-abcd.jpeg" width="768" height="965" loading="lazy" alt=""></div></div></div><figcaption>Photos by the author</figcaption></figure>');
     });
 
-    it('Can process embeds', function () {
+    it('Can process embeds with images', function () {
         const source = `<div class="e-content">
          <div name="d38c" id="d38c" class="graf graf--mixtapeEmbed graf-after--p graf--trailing"><a
                      href="https://example.medium.com/list/1234"
@@ -378,6 +378,37 @@ describe('Process Content', function () {
         expect(newHtml).toContain('<figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://example.medium.com/list/1234"><div class="kg-bookmark-content"><div class="kg-bookmark-title">My best Articles</div><div class="kg-bookmark-description">A description</div><div class="kg-bookmark-metadata"></div></div><div class="kg-bookmark-thumbnail"><img src="https://cdn-images-1.medium.com/fit/c/304/160/0*5678.jpeg" alt=""></div></a></figure>');
     });
 
+    it('Can process embeds without images', function () {
+        const source = `<div class="e-content">
+            <div name="c123" id="c123" class="graf graf--mixtapeEmbed graf-after--p">
+                <a href="https://example.com/lorem/ipsum" data-href="https://example.com/lorem/ipsum" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://example.com/lorem/ipsum">
+                    <strong class="markup--strong markup--mixtapeEmbed-strong">lorem/ipsum</strong>
+                    <br>
+                    <em class="markup--em markup--mixtapeEmbed-em">Dolor Simet.</em>
+                    example.com
+                </a>
+                <a href="https://example.com/lorem/ipsum" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock" data-media-id="abcd1234"></a>
+            </div>
+        </div>`;
+
+        const $post = $.load(source, {
+            decodeEntities: false
+        }, false);
+
+        const newHtml = processContent({
+            content: $post('.e-content'),
+            post: {
+                data: {
+                    title: 'Blog Post Title'
+                }
+            }
+        });
+
+        expect(newHtml).not.toContain('<div name="c123" id="c123" class="graf graf--mixtapeEmbed graf-after--p">');
+
+        expect(newHtml).toContain('<figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://example.com/lorem/ipsum"><div class="kg-bookmark-content"><div class="kg-bookmark-title">lorem/ipsum</div><div class="kg-bookmark-description">Dolor Simet.</div><div class="kg-bookmark-metadata"></div></div></a></figure>');
+    });
+
     it('Can process blockquotes in 2 parts', function () {
         const source = `<div class="e-content">
             <p>Not quote text</p>