thelittlerocket/rss-to-email
1
0
Fork 0
mirror of https://github.com/thelittlerocket/rss-to-email.git synced 2025-01-29 04:17:47 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Setting up the project

Browse source
This commit is contained in:
Berry de Vos 2023-01-20 08:54:01 +01:00
commit 7670aa7c72
23 changed files with 3846 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

5
.prettierrc.json Normal file
View file

@ -0,0 +1,5 @@
{
"printWidth": 160,
"semi": false,
"singleQuote": true
}

12
index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RSS to Email</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/preview/main.tsx"></script>
</body>
</html>

3171
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

41
package.json Normal file
View file

@ -0,0 +1,41 @@
{
"name": "rss-to-email-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "node server",
"email": "node email",
"build": "tsc && vite build",
"format": "prettier --write ."
},
"dependencies": {
"@react-email/button": "^0.0.4",
"@react-email/container": "^0.0.4",
"@react-email/head": "^0.0.2",
"@react-email/heading": "^0.0.5",
"@react-email/hr": "^0.0.2",
"@react-email/html": "^0.0.2",
"@react-email/img": "^0.0.2",
"@react-email/link": "^0.0.2",
"@react-email/preview": "^0.0.2",
"@react-email/render": "0.0.6",
"@react-email/section": "^0.0.1",
"@react-email/text": "^0.0.2",
"cron-parser": "^4.7.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.7.0",
"rss-parser": "^3.12.0"
},
"devDependencies": {
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react": "^3.0.0",
"express": "^4.18.2",
"nodemailer": "^6.9.0",
"prettier": "2.8.3",
"typescript": "^4.9.3",
"vite": "^4.0.0"
}
}

53
server.js Normal file
View file

@ -0,0 +1,53 @@
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
import express from 'express'
import { createServer as createViteServer } from 'vite'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
async function createServer() {
const app = express()
const vite = await createViteServer({
server: { middlewareMode: true },
appType: 'custom',
})
app.use(vite.middlewares)
app.use('/preview.html', async (_, res, next) => {
try {
const { renderEmail } = await vite.ssrLoadModule('/src/renderEmail.tsx')
const { html } = await renderEmail({ pretty: true, cron: '0 7 * * *' })
// const { html } = await renderEmail({ pretty: true, limit: 3 })
res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
} catch (e) {
vite.ssrFixStacktrace(e)
next(e)
}
})
app.use('/', async (req, res, next) => {
const url = req.originalUrl
try {
let template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8')
template = await vite.transformIndexHtml(url, template)
res.status(200).set({ 'Content-Type': 'text/html' }).end(template)
} catch (e) {
vite.ssrFixStacktrace(e)
next(e)
}
})
app.listen(5173)
console.log('Preview started on: http://localhost:5173')
}
createServer()

72
src/email/DaringFireballFeed.tsx Normal file
View file

@ -0,0 +1,72 @@
import { Img } from '@react-email/img'
import { Link } from '@react-email/link'
import { Section } from '@react-email/section'
import { Text } from '@react-email/text'
import { Output } from 'rss-parser'
import { CustomItem, ItemLink } from '../renderEmail'
interface Props {
feed: Output<CustomItem>
}
const findRelatedLink = (links: ItemLink[]) => links.map(({ $: link }) => link).find(({ rel }) => rel === 'related')?.href
export default ({ feed }: Props) => {
return (
<Section style={box}>
<Link href={feed.link}>
<Img src="https://daringfireball.net/graphics/logos/" style={logo} />
</Link>
{feed.items.map((item) => (
<Section key={item.guid ?? item.id} style={section}>
<Text style={title}>
<Link style={titleLink} href={findRelatedLink(item.links) ?? item.link}>
{item.title}
</Link>
</Text>
<Text style={content}>{item.contentSnippet?.replaceAll('★', '')}</Text>
</Section>
))}
</Section>
)
}
const box = {
padding: '48px 32px 16px',
backgroundColor: '#4a525a',
}
const logo = {
width: '240px',
marginLeft: '-15px',
}
const section = {
margin: '32px 0 48px',
}
const titleLink = {
color: '#ccc',
textDecoration: 'underline',
textDecorationColor: '#72767A',
textDecorationStyle: 'solid' as const,
textUnderlineOffset: '4px',
fontFamily: '"Gill Sans MT", "Gill Sans", "Gill Sans Std", Verdana, "Bitstream Vera Sans", sans-serif',
fontSize: '12.6px',
fontWeight: 400,
letterSpacing: '1.89px',
textTransform: 'uppercase' as const,
}
const title = {
margin: '0 0 12px',
}
const content = {
fontFamily: 'Verdana, system-ui, Helvetica, sans-serif',
fontSize: '12px',
color: '#eee',
lineHeight: '21.6px',
fontWeight: 'normal',
margin: 0,
}

72
src/email/Email.tsx Normal file
View file

@ -0,0 +1,72 @@
import { Container } from '@react-email/container'
import { Head } from '@react-email/head'
import { Html } from '@react-email/html'
import { Link } from '@react-email/link'
import { Preview } from '@react-email/preview'
import { Section } from '@react-email/section'
import { Text } from '@react-email/text'
import { Output } from 'rss-parser'
import FeedSwitch from './FeedSwitch'
import { formatDate } from '../utils/formatter'
import { CustomItem } from '../renderEmail'
interface Props {
feeds: Output<CustomItem>[]
itemCount: number
}
export default function Email({ feeds, itemCount }: Props) {
return (
<Html>
<Head />
<Preview children={`RSS to Email with ${itemCount} updates`} />
<Section style={main}>
<Container style={container}>
<Section style={section}>
<Text style={sectionText}>RSS to Email with {itemCount} updates</Text>
</Section>
{feeds.map((feed) => (
<FeedSwitch key={feed.link} feed={feed} />
))}
<Section style={section}>
<Text style={sectionText}>
<Link style={link} href="https://appjeniksaan.nl">
{formatDate(new Date().toISOString())}
</Link>
</Text>
</Section>
</Container>
</Section>
</Html>
)
}
const main = {
backgroundColor: '#f8f9fa',
}
const container = {
backgroundColor: '#fff',
margin: '0 auto',
padding: '0',
}
const section = {
padding: '16px 48px',
backgroundColor: '#e9ecef',
}
const sectionText = {
color: '#495057',
fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
fontSize: '12px',
textAlign: 'center' as const,
margin: '0',
}
const link = {
color: '#495057',
textDecoration: 'underline',
}

17
src/email/FeedSwitch.tsx Normal file
View file

@ -0,0 +1,17 @@
import { Output } from 'rss-parser'
import { CustomItem } from '../renderEmail'
import DaringFireballFeed from './DaringFireballFeed'
import GenericFeed from './GenericFeed'
interface Props {
feed: Output<CustomItem>
}
export default ({ feed }: Props) => {
switch (feed.title) {
case 'Daring Fireball':
return <DaringFireballFeed key={feed.link} feed={feed} />
default:
return <GenericFeed key={feed.link} feed={feed} />
}
}

73
src/email/GenericFeed.tsx Normal file
View file

@ -0,0 +1,73 @@
import { Link } from '@react-email/link'
import { Section } from '@react-email/section'
import { Text } from '@react-email/text'
import { Output } from 'rss-parser'
import { CustomItem } from '../renderEmail'
import { formatDate } from '../utils/formatter'
interface Props {
feed: Output<CustomItem>
}
export default ({ feed }: Props) => {
return (
<Section style={box}>
<Text style={header}>
<Link style={headerLink} href={feed.link}>
{feed.title}
</Link>
</Text>
{feed.items.map((item) => (
<Section key={item.guid} style={section}>
<Link style={anchor} href={item.link}>
{item.title}
</Link>
{item.pubDate && <Text style={date}>{formatDate(item.pubDate)}</Text>}
<Text style={paragraph}>{item.contentSnippet}</Text>
</Section>
))}
</Section>
)
}
const box = {
padding: '32px 48px',
}
const header = {
color: '#212529',
fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
fontSize: '16px',
}
const headerLink = {
color: '#212529',
textDecoration: 'underline',
}
const section = {
margin: '32px 0',
}
const anchor = {
fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
color: '#556cd6',
fontSize: '20px',
}
const date = {
color: '#495057',
fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
fontSize: '12px',
fontStyle: 'italic',
margin: 0,
}
const paragraph = {
color: '#495057',
fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
fontSize: '16px',
lineHeight: '24px',
textAlign: 'left' as const,
margin: 0,
}

1
src/feeds.ts Normal file
View file

@ -0,0 +1 @@
export const feeds = ['https://daringfireball.net/feeds/main', 'https://appjeniksaan.nl/feed.xml']

30
src/preview/PreviewApp.tsx Normal file
View file

@ -0,0 +1,30 @@
import { useSessionStorage } from '../utils/useSessionStorage'
const previewSizes = ['mobile', 'desktop'] as const
type PreviewSize = (typeof previewSizes)[number]
export default () => {
const [previewSize, setPreviewSize] = useSessionStorage<PreviewSize>('previewSize', previewSizes[0])
return (
<div className="container">
<header>
<h1>RSS to Email</h1>
</header>
<div className={`preview preview-${previewSize}`}>
<div className="preview-header">
<h2>Preview</h2>
<div>
{previewSizes.map((size) => (
<button key={size} onClick={() => setPreviewSize(size)} className={size === previewSize ? 'active' : ''}>
{size}
</button>
))}
</div>
</div>
<iframe src="preview.html" sandbox="" />
</div>
</div>
)
}

111
src/preview/index.css Normal file
View file

@ -0,0 +1,111 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: whitesmoke;
background-color: #383838;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
}
h1 {
font-size: 3em;
}
h2 {
margin: 0;
font-size: 1.2em;
font-weight: normal;
}
header {
padding: 1em 0;
}
button {
border: 1px solid gray;
background-color: #383838;
border-right-width: 0;
font: inherit;
font-size: 0.8em;
}
button.active {
background-color: #808080;
font-weight: 800;
}
button:first-of-type {
border-radius: 5px 0 0 5px;
}
button:last-of-type {
border-radius: 0 5px 5px 0;
border-right-width: 1px;
}
iframe {
border: 12px solid black;
border-radius: 8px;
max-width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
place-items: center;
height: 100svh;
}
.preview {
display: flex;
flex-direction: column;
max-width: 100%;
transition: all 150ms ease-out;
gap: 8px;
}
.preview-mobile {
aspect-ratio: 9 / 16;
width: 420px;
}
.preview-desktop {
aspect-ratio: 4 / 3;
width: 960px;
}
.preview-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
@media (prefers-color-scheme: light) {
:root {
color: #242424;
background-color: white;
}
button {
background-color: white;
}
button.active {
background-color: gainsboro;
}
}

10
src/preview/main.tsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import PreviewApp from './PreviewApp'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<PreviewApp />
</React.StrictMode>
)

62
src/renderEmail.tsx Normal file
View file

@ -0,0 +1,62 @@
import { render } from '@react-email/render'
import Parser, { Output } from 'rss-parser'
import { feeds } from './feeds'
import Email from './email/Email'
import { cronToEarliestDate } from './utils/cron'
import { filterItemsFromFeed, getItemCount } from './utils/filter'
// rss-parser has this sorta funky parsing when `keepArray: true` is set
export interface ItemLink {
$: {
rel: 'alternate' | 'shorturl' | 'related'
href: string
}
}
// Daring Fireball uses id instead of guid, so had to append that as a custom type for parsing
export type CustomItem = {
id: string
link: string
links: ItemLink[]
}
const parser: Parser = new Parser<{}, CustomItem>({
customFields: {
item: [
['id', 'id'],
['link', 'links', { keepArray: true }],
],
},
})
interface Props {
pretty?: boolean
cron?: string
limit?: number
}
export async function renderEmail({ pretty = false, cron, limit }: Props) {
const earliestDate = cronToEarliestDate(cron)
const settledFeeds = await Promise.allSettled(feeds.map((feed) => parser.parseURL(feed)))
const fulfilledFeeds = settledFeeds.reduce((acc, current, i) => {
switch (current.status) {
case 'fulfilled':
return [...acc, current.value as Output<CustomItem>]
case 'rejected':
console.error(`Could not settle feed ${feeds[i]}, reason: ${current.reason}`)
return acc
}
}, [] as Output<CustomItem>[])
const filteredFeeds = filterItemsFromFeed(fulfilledFeeds, earliestDate, limit)
const itemCount = getItemCount(filteredFeeds)
const html = render(<Email feeds={filteredFeeds} itemCount={itemCount} />, {
pretty,
})
return { html, itemCount }
}

17
src/utils/cron.ts Normal file
View file

@ -0,0 +1,17 @@
import cronParser from 'cron-parser'
export const cronToEarliestDate = (cron?: string) => {
if (!cron) {
return
}
const parsedCron = cronParser.parseExpression(cron)
if (!parsedCron.hasPrev() || !parsedCron.hasNext()) {
return
}
const diff = Math.abs(parsedCron.prev().toDate().getTime() - parsedCron.next().toDate().getTime())
return new Date(new Date().getTime() - diff)
}

19
src/utils/filter.ts Normal file
View file

@ -0,0 +1,19 @@
import { Item, Output } from 'rss-parser'
import { CustomItem } from '../renderEmail'
const filterItems = (items: (Item & CustomItem)[], earliestDate: Date | undefined, limit?: number) =>
items
.filter(({ pubDate }) => {
if (!pubDate || !earliestDate) {
// If no pubDate, only return if there is also no earliestDate
return !earliestDate
}
return new Date(pubDate) >= earliestDate
})
.slice(0, limit)
export const filterItemsFromFeed = (feeds: Output<CustomItem>[], earliestDate: Date | undefined, limit?: number) =>
feeds.map((feed) => ({ ...feed, items: filterItems(feed.items, earliestDate, limit) })).filter(({ items }) => items.length > 0)
export const getItemCount = (feeds: Output<CustomItem>[]) => feeds.reduce((acc, current) => acc + current.items.length, 0)

6
src/utils/formatter.ts Normal file
View file

@ -0,0 +1,6 @@
const dateFormatter = new Intl.DateTimeFormat('en-US', {
dateStyle: 'long',
timeStyle: 'short',
})
export const formatDate = (date: string) => dateFormatter.format(new Date(date))

12
src/utils/useSessionStorage.ts Normal file
View file

@ -0,0 +1,12 @@
import { useState } from 'react'
export const useSessionStorage = <T extends string>(key: string, value: T) => {
const [storedValue, setStoredValue] = useState<T>(() => (sessionStorage.getItem(key) as T) ?? value)
const setValue = (value: T) => {
setStoredValue(value)
sessionStorage.setItem(key, value)
}
return [storedValue, setValue] as const
}

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
tsconfig.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})