Merge pull request #2026 from omnivore-app/fix/embedded-quote-tweets

Handle embedded quote tweets

packages/content-handler/src/newsletters/substack-handler.ts

@@ -120,7 +120,10 @@ export class SubstackHandler extends ContentHandler {
       // elements (style will be handled in the reader)
       recurse(tweet, (n: Element) => {
         const className = n.className
-        if (className.startsWith('tweet-')) {
+        if (
+          className.startsWith('tweet-') ||
+          className.startsWith('quote-tweet')
+        ) {
           n.className = preClassName + className
         }
         n.removeAttribute('style')

packages/content-handler/test/newsletter.test.ts

@@ -249,6 +249,30 @@ describe('Newsletter email test', () => {
       expect(tweets.length).to.eq(7)
     })
 
+    it('fixes up static quote tweets in Substack newsletters', async () => {
+      const url =
+        'https://www.lennysnewsletter.com/p/how-to-use-chatgpt-in-your-pm-work'
+      const html = load('./test/data/substack-static-quote-tweet.html')
+      const handler = await getNewsletterHandler({
+        html,
+        from: '',
+        headers: {},
+      })
+      expect(handler).to.be.instanceOf(SubstackHandler)
+
+      const dom = parseHTML(html).document
+      expect(handler?.shouldPreParse(url, dom)).to.be.true
+
+      const preparsed = await handler?.preParse(url, dom)
+      const tweets = Array.from(
+        preparsed?.querySelectorAll(
+          'div[class="_omnivore-static-quote-tweet"]'
+        ) ?? []
+      )
+
+      expect(tweets.length).to.eq(1)
+    })
+
     it('returns BeehiivHandler for beehiiv.com newsletter', async () => {
       const handler = await getNewsletterHandler({
         html: '',

packages/web/styles/articleInnerStyling.css

@@ -380,6 +380,40 @@ on smaller screens we display the note icon
   -webkit-font-smoothing: subpixel-antialiased;
 }
 
+.article-inner-css ._omnivore-static-tweet ._omnivore-static-quote-tweet {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.article-inner-css ._omnivore-static-tweet ._omnivore-static-quote-tweet-header {
+  display: flex;
+  flex-direction: row;
+  gap: 9px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.article-inner-css ._omnivore-static-tweet ._omnivore-static-quote-tweet-header-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin: unset !important;
+}
+
+.article-inner-css ._omnivore-static-tweet ._omnivore-static-quote-tweet-header-text {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
 ._omnivore-static-tweet ._omnivore-static-tweet-header {
   display: flex;
   align-items: center;