riccardo/newsletter-hackernews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove news cards from newsletters

Browse Source
This commit is contained in:
Riccardo
2024-10-12 09:59:56 +02:00
parent 6607a5e7e7
commit f429cb3403
2 changed files with 10 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
components/email/Newsletter.tsx
View File

@@ -1,6 +1,5 @@
import { getSayings } from '@utils/getSayings';
import { summirize } from '@utils/summarize';
import { textTruncate } from '@utils/textTruncate';
import { NewsType } from '@utils/validationSchemas';
import createDOMPurify from 'isomorphic-dompurify';
import Template from './Template';
@@ -11,6 +10,11 @@ export default async function NewsletterTemplate(stories: NewsType[]) {
USE_PROFILES: { html: true }
});
if (!sanitizedSummary) {
console.error('Failed to sanitize summary');
throw new Error('Failed to sanitize summary');
}
return {
subject: `What's new from the Hackernews forum?`,
template: (
@@ -18,89 +22,10 @@ export default async function NewsletterTemplate(stories: NewsType[]) {
title={`Here is something
${getSayings[Math.floor(Math.random() * getSayings.length)]}!`}
body={
<>
{sanitizedSummary && (
<div
style={{
marginTop: '2rem',
marginBottom: '2rem',
borderRadius: '0.5rem',
padding: '2rem',
border: '2px solid #8230CC',
backgroundColor: `white`,
color: '#111827',
boxShadow: '0 16px 32px 0 rgba(0, 0, 0, 0.05)'
}}
dangerouslySetInnerHTML={{ __html: sanitizedSummary }}
/>
)}
<div>
{stories.map(story => {
return (
<div
key={story.id}
style={{
marginTop: '2rem',
marginBottom: '2rem',
borderRadius: '0.5rem',
border: '1px solid #e5e7eb',
backgroundColor: `white`,
color: '#111827',
boxShadow: '0 16px 32px 0 rgba(0, 0, 0, 0.05)'
}}
data-v0-t='card'
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.375rem',
paddingTop: '1.5rem',
paddingLeft: '1.5rem',
paddingRight: '1.5rem'
}}
>
<h3>{story.title}</h3>
<p style={{ fontSize: '1rem', fontStyle: 'italic' }}>
by {story.by}
</p>
</div>
{story.text && (
<div
style={{
paddingLeft: '1.5rem',
fontSize: '1rem',
paddingRight: '1.5rem'
}}
>
<p
dangerouslySetInnerHTML={{
__html:
story.text.length > 500
? textTruncate(story.text, 500) + '...'
: story.text
}}
/>
</div>
)}
{story.url && (
<div
style={{
paddingBottom: '1.5rem',
paddingLeft: '1.5rem',
paddingRight: '1.5rem',
textAlign: 'right',
fontWeight: 'bold'
}}
>
<a href={story.url}>Read more</a>
</div>
)}
</div>
);
})}
</div>
</>
<div
style={{ fontSize: '1rem', color: '#4a5568' }}
dangerouslySetInnerHTML={{ __html: sanitizedSummary }}
/>
}
/>
)

2
utils/summarize.ts
View File

@@ -7,7 +7,7 @@ export async function summirize(news: NewsType[]) {
.join('\n\n');
const promptSetup =
"You are a tech journalist with a technology degree and background. Summarize the following list of posts from an online forum as a TL;DR (Too Long; Didn't Read) summary. Your summary should:\n\n1. Be 200-300 words long (not counting the urls).\n\n2. Consist multiple phrases in one single paragraph, combining related news items where possible.\n\n3. Highlight the 2-3 most significant or impactful news items.\n\n4. Provide context within broader tech trends or developments.\n\n5. Use a tone that is informative and slightly enthusiastic, aimed at tech-savvy general readers.\n\n6. Group news items by themes or technology areas if applicable.\n\n7. Be formatted for HTML use, with links incorporated as follows and including at most 3-4 words: <a href='[LINK]'>[linked text]</a>.\n\n8. Each news that is mentioned needs to incorporare its own url link, if it exists.\n\nFocus on conveying the key points and their potential impact on the tech landscape. Your response should consist of the summary only.\n\nThe news items are structured as follows:\n\nTITLE: <title>\n\nCONTENT: <content>\n\nLINK: <link>\n\nPlease summarize the following news:";
"You are a tech journalist with a technology degree and background. Summarize the following list of posts from an online forum as a TL;DR (Too Long; Didn't Read) summary. Your summary should:\n\n1. Be 300-400 words long (not counting the urls).\n\n2. Consist multiple phrases in one single paragraph, combining related news items where possible.\n\n3. Highlight the 2-3 most significant or impactful news items.\n\n4. Provide context within broader tech trends or developments.\n\n5. Use a tone that is informative and slightly enthusiastic, aimed at tech-savvy general readers, careful at not repeating the same phrasing and do not sound too proseic.\n\n6. Group news items by themes or technology areas if applicable.\n\n7. Be formatted for HTML use, with links incorporated as follows and including at most 3-4 words: <a href='[LINK]'>[linked text]</a>.\n\n8. Each news that is mentioned needs to incorporare its own url link, if it exists.\n\nFocus on conveying the key points and their potential impact on the tech landscape. Your response should consist of the summary only.\n\nThe news items are structured as follows:\n\nTITLE: <title>\n\nCONTENT: <content>\n\nLINK: <link>\n\nPlease summarize the following news:";
try {
const response = await message(promptSetup + newsInput);