From 344514bd0f994d9ca955b9276642c4cf7d09466d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 12 Apr 2023 14:50:20 +0800 Subject: [PATCH 1/3] Handle embedded quote tweets --- .../src/newsletters/substack-handler.ts | 5 ++- .../content-handler/test/newsletter.test.ts | 24 +++++++++++++ packages/web/styles/articleInnerStyling.css | 34 +++++++++++++++++++ 3 files changed, 62 insertions(+), 1 deletion(-) diff --git a/packages/content-handler/src/newsletters/substack-handler.ts b/packages/content-handler/src/newsletters/substack-handler.ts index e0c87a159..f94267171 100644 --- a/packages/content-handler/src/newsletters/substack-handler.ts +++ b/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') diff --git a/packages/content-handler/test/newsletter.test.ts b/packages/content-handler/test/newsletter.test.ts index a515cf486..96c9f8889 100644 --- a/packages/content-handler/test/newsletter.test.ts +++ b/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(14) + }) + it('returns BeehiivHandler for beehiiv.com newsletter', async () => { const handler = await getNewsletterHandler({ html: '', diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css index ec8f77551..a16425fba 100644 --- a/packages/web/styles/articleInnerStyling.css +++ b/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; From ae45067a32457e2ee3b3c04036d121ea14bdad46 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 12 Apr 2023 15:16:11 +0800 Subject: [PATCH 2/3] Add test data file --- .../data/substack-static-quote-tweet.html | 1688 +++++++++++++++++ 1 file changed, 1688 insertions(+) create mode 100644 packages/content-handler/test/data/substack-static-quote-tweet.html diff --git a/packages/content-handler/test/data/substack-static-quote-tweet.html b/packages/content-handler/test/data/substack-static-quote-tweet.html new file mode 100644 index 000000000..146025f25 --- /dev/null +++ b/packages/content-handler/test/data/substack-static-quote-tweet.html @@ -0,0 +1,1688 @@ +How to use ChatGPT in your PM work
Real-life examples (and actual prompts) of how PMs are already using ChatGPT day-to-day + ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
From c366cd64723174f6d0cfecac68880f978c3ef414 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 12 Apr 2023 15:37:26 +0800 Subject: [PATCH 3/3] Fix test value, there is only one quote tweet --- packages/content-handler/test/newsletter.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/content-handler/test/newsletter.test.ts b/packages/content-handler/test/newsletter.test.ts index 96c9f8889..ac40c139c 100644 --- a/packages/content-handler/test/newsletter.test.ts +++ b/packages/content-handler/test/newsletter.test.ts @@ -270,7 +270,7 @@ describe('Newsletter email test', () => { ) ?? [] ) - expect(tweets.length).to.eq(14) + expect(tweets.length).to.eq(1) }) it('returns BeehiivHandler for beehiiv.com newsletter', async () => {