This page covers how Newsletter content is published via email. That content is also manually cross-published like blog posts to the https://www.peels.app/newsletter page. See Markdown Pages for more information on that.

Composition

Email newsletters mirror (and are done after) their Markdown Pages counterparts. In other words:

  1. We publish a web version of the newsletter issue.
  2. We then send an email version of that same newsletter issue to subscribers. It points to the web version in the “View this online” link.

Email newsletter issue content lives in supabase/functions/templates. The content is textually the same as the web version but formatted for email, so uses different components.

For example: newsletter-issue-one-email contains the contents of Issue 1: Celebrating the First Few Months of Peels and visually matches its https://www.peels.app/newsletter/celebrating-the-first-few-months web counterpart but the markup is different.

Sending

Email are sent in two parts, to our two respective newsletter audience (subscriber) types:

Start with the supabase-users edge function first. It’s more malleable and allows for testing. The resend-audience edge function is done in one hit, and therefore dangerous.

<aside> 👉

Use the testEmail functionality in the supabase-users edge function to test this email to yourself before sending it out to anyone. There are bound to be tweaks that need to be made.

</aside>

Note that the supabase-users edge function looks for a emailed_latest_issue column. This should be deleted after an issue is sent out. That way we re-add it for next time.

Process

Rewrite the above to be as clear as this:

  1. Completely finish the newsletter issue.
  2. Update both edge functions to reflect the latest issue, since they hardcode information about the previously-sent one. E.g:
    1. subject hardcodes the subject
    2. React Email hardcodes the issue contents via a component import:
      • import { NewsletterIssueOneEmail } from "../_templates/newsletter-issue-one-email.tsx";
      • react: NewsletterIssueOneEmail({...