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

feat: add summary using Anthropic API

Browse Source
This commit is contained in:
Riccardo
2024-09-20 02:52:16 +02:00
parent 1917b040eb
commit c0a669dc0a
8 changed files with 325 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
components/email/Newsletter.tsx
View File

@@ -1,9 +1,12 @@
import { getSayings } from '@utils/getSayings';
import { summirize } from '@utils/summarize';
import { textTruncate } from '@utils/textTruncate';
import { NewsType } from '@utils/validationSchemas';
import Template from './Template';
export default function NewsletterTemplate(stories: NewsType[]) {
export default async function NewsletterTemplate(stories: NewsType[]) {
const summary = await summirize(stories);
return {
subject: `What's new from the Hackernews forum?`,
template: (
@@ -11,72 +14,90 @@ export default function NewsletterTemplate(stories: NewsType[]) {
title={`Here is something
${getSayings[Math.floor(Math.random() * getSayings.length)]}!`}
body={
<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'
>
<>
{summary && (
<div
style={{
marginTop: '2rem',
marginBottom: '2rem',
borderRadius: '0.5rem',
border: '2px solid #8230CC',
backgroundColor: `white`,
color: '#111827',
boxShadow: '0 16px 32px 0 rgba(0, 0, 0, 0.05)'
}}
data-v0-t='card'
>
<p>{summary}</p>
</div>
)}
<div>
{stories.map(story => {
return (
<div
key={story.id}
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.375rem',
paddingTop: '1.5rem',
paddingLeft: '1.5rem',
paddingRight: '1.5rem'
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'
>
<h3>{story.title}</h3>
<p style={{ fontSize: '1rem', fontStyle: 'italic' }}>
by {story.by}
</p>
</div>
{story.text && (
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.375rem',
paddingTop: '1.5rem',
paddingLeft: '1.5rem',
fontSize: '1rem',
paddingRight: '1.5rem'
}}
>
<p
dangerouslySetInnerHTML={{
__html:
story.text.length > 500
? textTruncate(story.text, 500) + '...'
: story.text
<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'
}}
/>
</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>
>
<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>
</>
}
/>
)