refactor: improve news and email handling, style, folder structure (#16)

components/email/Newsletter.tsx

@@ -0,0 +1,84 @@
+import { sayings } from '@utils/sayings';
+import { textTruncate } from '@utils/textTruncate';
+import { NewsType } from '@utils/validationSchemas';
+import Template from './Template';
+
+export default function NewsletterTemplate(stories: NewsType[]) {
+  return {
+    subject: `What's new from the Hackernews forum?`,
+    template: (
+      <Template
+        title={`Here is something 
+              ${sayings[Math.floor(Math.random() * sayings.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'
+                >
+                  <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>
+        }
+      />
+    )
+  };
+}