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/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 + ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
Open in app or online

Below is a peek at today’s paid subscriber-only post. +Subscribe today and get access to this issue—and every issue.

How to use ChatGPT in your PM work

Real-life +examples (and actual prompts) of how PMs are already using ChatGPT day-to-day

👋 Hey, I’m Lenny and welcome to +a 🔒 subscriber-only edition 🔒 of my weekly newsletter. Each week I tackle +reader questions about building product, driving growth, and accelerating your career.

Are PMs +actually using ChatGPT/GPT-4 for getting real work done, and if so, how?

Let this idea sink in:

Twitter avatar for @blader
Siqi Chen @blader
product development is basically just prompt +engineering the engineers to rotate words into the right shapes. + +soon it’ll be prompt engineering all the way down.
8:44 AM ∙ Mar 15, +2023
8Retweets

Though I don’t believe PMs will be displaced by GPT-4/5/6/n, I +do believe that, as with most knowledge work, learning to work alongside AI will quickly become table stakes. Just like Grammarly became for writing, Copilot for engineers, and Firefly, Runway, Midjourney, and others are becoming for designers. It’s +scary and confusing, but also exciting. When was the last time there was a transformative new tool for product management? +Never?

Twitter avatar for @shreyas
Shreyas Doshi @shreyas
The year +is 2027. + +GPT-7 does most of the work on product teams: mocks, code, research, data analysis. There are highly leveraged engineers, designers, +analysts working across 5-10 products. Every product still has a PM, who has 55 GPT tabs open. + +PM now means Prompt Manager 😁
Twitter avatar for @pradeepb28
deepu @pradeepb28
I wonder if @lennysan @shreyas have thoughts or predictions about what the product +management would look like in next 5 years ?
11:23 AM ∙ Dec 27, +2022
35Retweets

Importantly, as Dan Shipper suggested in +his recent guest post on building the Lenny Chatbot, +“the best way to prepare for this fast-approaching future is to dive in and get your hands +dirty.” So to help you roll up your sleeves and get started, I polled Twitter for concrete examples of how PMs are already +using ChatGPT day-to-day. Honestly, I was shocked by how common (and useful) it has already become for people. Below, I’ve +collected a dozen of my favorite use cases of how you can integrate ChatGPT into your work today—with actual prompts you can +play with.

To follow along, +go sign up for ChatGPT (seriously, go do that now), and try at +least one prompt you find below. Even if you don’t find it useful today, it’ll plant a seed.

Also, a pro tip: You can ask ChatGPT for advice on how to +best phrase your prompt. It’s very meta and very cool.

For example:

Twitter avatar for @mercurialsolo
Barada Sahu @mercurialsolo
@lennysan @laurynisford P1: "Imagine you are a Product manager making a prompt to improve the +onboarding for Airtable. Please write the prompt" + +Fed the prompt and came up with ideas +============================ + +P2: These are pretty common and already done, can you come up with more creative ideas?
1:34 AM ∙ Mar 31, +2023

Here’s what it +suggested when I did this:

The future is coming fast.

12 ways to use ChatGPT in your PM work

1. Collect and summarize user feedback and usage data

Synthesize survey results:

Twitter avatar for @lucdid
Lucas Didier @lucdid
@lennysan Something like: + +"I'm going to send you a list of X survey responses to the question "...." + +Can you group these into buckets of insights, with their associated weight (in %), and list some examples of associated responses +for each insight?"
8:30 PM ∙ Mar 30, +2023

Find feature ideas and +bugs from app store reviews:

Twitter avatar for @MaximalTweet
Max Schubert @MaximalTweet
@lennysan Another one from yesterday evening: +_________ +I want to scrape App Store reviews of our app using Javascript. Walk me through it step by step. + +Then, I pasted all the reviews into the chat and asked GPT-4 to find the top 3 most requested features and +complaints.
4:54 PM ∙ Mar 27, +2023

Extract insights from +raw usage metrics:

Twitter avatar for @Dotnetster
RossMcLoughlin @Dotnetster
@lennysan Converting our product usage metrics data to text and then +just asking GPT questions about the data.
6:22 PM ∙ Mar 27, +2023
1Retweet

Do sensitivity analysis:

Twitter avatar for @tlonuqbar
Mark Rogers @tlonuqbar
@lennysan You can paste in the data in a table and ask for the +conversion percentages. And then ask scenario questions. "What is the volume of raw leads that would be needed to generate x +conversions?"
8:01 AM ∙ Mar 31, +2023

2. Come up with product name +suggestions

Twitter avatar for @Bailey_Jennings
Bailey Jennings @Bailey_Jennings
@lennysan Product/Feature naming: + +prompt: +I am going to give you a description of a new software product I am planning to launch. I'd like you to return 10 product/feature +name ideas. Try to avoid using cliches like "Product 2.0". + +Do you have any questions?
4:35 PM ∙ Mar 27, +2023
1Retweet

3. Strengthen your argument

Come up with critical questions your audience may +ask:

Twitter avatar for @vybhavram
Vybhav Ramachandran @vybhavram
@lennysan PRD Review: "Assume you are the CTO, +review this PRD and give me critical, but fair feedback) + +Before meetings : "I'm meeting the VP of data science for a 30 minute call to discuss X. What should I ask her?" + +After meetings : "Summarize my notes into minutes, action items"
4:11 PM ∙ Mar 27, +2023
4Retweets

Identify gaps and hidden assumptions in your +thinking:

Twitter avatar for @rishi_kar
Rishi Kar @rishi_kar
@lennysan I really like how helpful GPT-4 is when trying to avoid +getting blind sided. My favourite prompt when thinking about GTM or a feature: + +“What am I missing here?” +“What am I being overly optimistic about?” +“What is a macro event that can totally reverse the outcomes of this test”
4:44 PM ∙ Mar 27, +2023
Twitter avatar for @kranthitech
Kranthi Kiran @kranthitech
@lennysan Identifying assumptions in any hypothesis. +This is an example of our visual mapping tool. Trying to uncover assumptions because of which a user experience may not be as +expected.
8:49 AM ∙ Mar 28, +2023

Highlight edge cases +and counterarguments:

Twitter avatar for @olivercitrin
oliver @olivercitrin
@lennysan Incredibly helpful w removing personal bias +and/or understanding edge cases. + +1- ‘Tell me 5 reasons this feature won’t work as intended’ + +2- ‘Tell me 5 unintended consequences of this feature’
7:58 PM ∙ Mar 27, +2023
Twitter avatar for @dagaadit
adit @dagaadit
@lennysan Steelmanning the other side of an argument when drafting a +proposal (“why shouldn’t we do this?”)
5:13 PM ∙ Mar 27, +2023

4. Inspire roadmap +ideas...

Subscribe to Lenny's +Newsletter to read the rest.

Become a paying subscriber of Lenny's Newsletter to get access to this post +and other subscriber-only content.

Upgrade to paid

A subscription gets you:

Every issue of the newsletter
Access to a private Slack community
Access to a curated collection of Lenny’s favorite reads and listens
Read Lenny's Newsletter in the app
Listen to posts, join subscriber chats, and never miss an update from Lenny +Rachitsky.
Get the iOS appGet the Android app

© 2023
2443 Fillmore St., #380-8231, San Francisco, CA 94115
Unsubscribe

Start writing

diff --git a/packages/content-handler/test/newsletter.test.ts b/packages/content-handler/test/newsletter.test.ts index a515cf486..ac40c139c 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(1) + }) + 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;