diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 22f284e..7c1fe8d 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -12,23 +12,42 @@ export default { '/guppy/': guppyGuide(), '/wish/': wishGuide(), '/create-sails/': createSailsGuide(), - '/inertia-sails/': inertiaSailsGuide() + '/inertia-sails/': inertiaSailsGuide(), + '/mail/': mailGuide() + }, + sitemap: { + hostname: 'https://docs.sailscasts.com' }, editLink: { pattern: 'https://github.com/sailscastshq/docs.sailscasts.com/edit/develop/docs/:path', text: 'Edit this page on GitHub' }, + head: [ + ['meta', { name: 'theme-color', content: '#07162d' }], + ['meta', { name: 'og:type', content: 'website' }], + ['meta', { name: 'og:locale', content: 'en' }], + ['meta', { name: 'og:site_name', content: 'Sailscasts Docs' }], + [ + 'script', + { + src: 'https://cdn.usefathom.com/script.js', + 'data-site': 'OTDOQLCI', + 'data-spa': 'auto', + defer: '' + } + ] + ], socialLinks: [ { icon: 'github', link: 'https://github.com/sailscastshq/docs.sailscasts.com' }, { icon: 'twitter', link: 'https://twitter.com/sailscastshq' }, - { icon: 'discord', link: 'https://discord.com/invite/gbJZuNm' }, + { icon: 'discord', link: 'https://sailscasts.com/chat' }, { icon: 'youtube', - link: 'https://www.youtube.com/channel/UCje9Wo6cbh3IERItPbyq1QA' + link: 'https://youtube.com/@sailscasts' } ], footer: { @@ -46,16 +65,20 @@ export default { function nav() { return [ { - text: 'Software', - items: [{ text: 'guppy', link: '/guppy/' }] + text: 'Commercial projects', + items: [ + { text: 'Guppy', link: '/guppy/' }, + { text: 'Hagfish', link: '/hagfish/' } + ] }, { text: 'Open Source', items: [ { text: 'create-sails', link: '/create-sails/' }, { text: 'inertia-sails', link: '/inertia-sails/' }, - { text: 'wish', link: '/wish/' }, - { text: 'captain-vane', link: '/captain-vane/' } + { text: 'Wish', link: '/wish/' }, + { text: 'captain-vane', link: '/captain-vane/' }, + { text: 'Mail', link: '/mail/', activeMatch: '/mail/' } // { text: 'sailboat', link: '/sailboat/' }, ] }, @@ -145,7 +168,7 @@ function wishGuide() { collapsible: true, items: [ { text: 'Introduction', link: '/wish/' }, - { text: 'What is wish?', link: '/wish/what-is-wish' }, + { text: 'What is Wish?', link: '/wish/what-is-wish' }, { text: 'Installation', link: '/wish/installation' } ] }, @@ -202,3 +225,38 @@ function inertiaSailsGuide() { } ] } + +function mailGuide() { + return [ + { + text: 'Introduction', + collapsed: false, + items: [ + { text: 'Getting Started', link: 'mail/getting-started' }, + { text: 'Configuration', link: 'mail/configuration' } + ] + }, + { + text: 'Transports', + collapsed: false, + items: [ + { text: 'SMTP', link: 'mail/smtp-transport' }, + { text: 'Resend', link: 'mail/resend-transport' }, + { text: 'Local Development', link: 'mail/local-development' } + ] + }, + { + text: 'Writing Emails', + collapsed: false, + items: [ + { text: 'Template', link: 'mail/email-template' }, + { text: 'Layout', link: 'mail/email-layout' } + ] + }, + { + text: 'Sending Emails', + collapsed: false, + items: [{ text: 'Send Helper', link: 'mail/send-helper' }] + } + ] +} diff --git a/docs/mail/configuration.md b/docs/mail/configuration.md new file mode 100644 index 0000000..16f083c --- /dev/null +++ b/docs/mail/configuration.md @@ -0,0 +1,73 @@ +--- +title: Configuration +editLink: true +prev: + text: 'Getting Started' + link: '/mail/getting-started' +next: + text: 'SMTP Transport' + link: '/mail/smtp-transport' +--- + +# {{ $frontmatter.title }} + +To configure mail, create a `config/mail.js` configuration file. Let's look at all the possible configurations you can have in `config/mail.js` + +## default + +The `default` config in `config/mail.js` tells Mail which mailer to use by default. The string passed to `default` must be the name of a registered mailer in the `mailers` object + +```js[config/mail.js] +module.exports.mail = { + default: 'log' // replace 'log' with any configured mailer you've set +} +``` + +You can also set the `default` mailer with the `MAIL_MAILER` environment variable and Mail will automatically detect it. + +This is handy for specifying different default mailers in different environments your application will be running in. + +Also in `config/local.js` you specify a `mailer` which will be used as the default mailer in development. + +```js +//config/local.js +mailer: 'nodemailer' +``` + +## mailers + +The `mailers` configuration object contains + +```js + mailers: { + log: { + transport: 'log' + }, + mailtrap: { + transport: 'smtp' + }, + resend: { + transport: 'resend' + } + }, +``` + +:::info What's a mailer? + +In Mail, a mailer is a configuration object that is registered in the `mailers` object in `config/mails.js` that specifies at the very least a transport that Mail will use in sending your emails. +::: + +## from + +This config let you set a global from address for all your emails. It's really useful if your application sends emails from the same from address. + +By default Mail will use this address if no address is passed when you send an email with `sails.helpers.mail.send` + +```js +from: { + address: 'boring@sailscasts.com', + name: 'The Boring JavaScript Stack' +} +``` + +You can also set this config by specifying these two environment variables: `MAIL_FROM_NAME` and `MAIL_FROM_ADDRESS`. diff --git a/docs/mail/email-layout.md b/docs/mail/email-layout.md new file mode 100644 index 0000000..6569e42 --- /dev/null +++ b/docs/mail/email-layout.md @@ -0,0 +1,48 @@ +--- +title: Email Layout +editLink: true +prev: + text: 'Email Template' + link: '/mail/email-template' +next: + text: 'Send Helper' + link: '/mail/send-helper' +--- + +# {{ $frontmatter.title }} + +You can create layouts for the emails in your Sails application. This layout file, like [templates](/mail/email-template) is expected to be an EJS template. + +## Default layout + +By default, Mail will look for a layout file in `views/layouts` called `layout-email.ejs` to use as the default layout for all your email templates. + +## Example + +Here is an example email layout that's in `views/layouts/layout-email.ejs`: + +```html +<% /* Default layout for email templates */ %> +
+ © 2023 The Boring JavaScript Stack
+ All trademarks, service marks, and company names are the property of
+ their respective owners.
+
+ You're almost ready to get started. Just click the button below to verify the + email address for your account: +
++ If you have any trouble, try pasting this link in your browser: + <%= + url.resolve(sails.config.custom.baseUrl,'/verify-email')+'?token='+encodeURIComponent(token) + %> +
+Sincerely,
+The Boring JavaScript Stack Team
+``` diff --git a/docs/mail/getting-started.md b/docs/mail/getting-started.md new file mode 100644 index 0000000..cd1e790 --- /dev/null +++ b/docs/mail/getting-started.md @@ -0,0 +1,51 @@ +--- +title: Getting started +editLink: true +next: + text: 'Configuration' + link: '/mail/configuration' +--- + +# {{ $frontmatter.title }} + +## Introduction + +Mail or Sails Mail provides a sleek, elegant, and developer-friendly email API that turns sending emails into a walk in the park for your Sails applications. + +Mail introduces transports for sending emails via SMTP, Resend, etc which allows you to quickly and elegantly get started sending emails through any local or cloud-based email service of your choice. + +## Installation + +### Prerequisites + +- [Node.js](https://nodejs.org) version 18 or higher +- [Sails](https://sailsjs.com) version 1 or higher + +To install Mail, simply run the following command in your Sails project: + +```sh [npm] +$ npm install sails-hook-mail +``` + +## Usage + +Mail exposes a `send` [helper](https://sailsjs.com/documentation/concepts/helpers) that you can call in your Sails actions or where ever you have access to helpers in your Sails application. + +For example we can send an email verification email when a user signs up successfully via a `user/signup.js` action: + +```js +// controllers/user/signup.js +await sails.helpers.mail.send.with({ + subject: 'Verify your email', + template: 'email-verify-account', + to: unverifiedUser.email, + templateData: { + token: unverifiedUser.emailProofToken, + fullName: unverifiedUser.fullName + } +}) +``` + +You can already see a couple of the arguments you can pass to the send helper provided by Mail. + +Next, You can check out all the various supported [transports](/mail/transports) Mail provide for you to send your emails and how to configure them diff --git a/docs/mail/index.md b/docs/mail/index.md new file mode 100644 index 0000000..ad0e0d2 --- /dev/null +++ b/docs/mail/index.md @@ -0,0 +1,23 @@ +--- +layout: home +hero: + name: Mail + tagline: The simple elegant way to send emails from a Sails applications. + actions: + - theme: brand + text: Get Started + link: /mail/getting-started + - theme: alt + text: View on GitHub + link: https://github.com/sailscastshq/sails-hook-mail +features: + - icon: 👨🏾💻 + title: Easy setup + details: Sails Mail provides an amazing and elegant API for sending emails. + - icon: 🚚 + title: Multiple transports + details: Supports SMTP, Resend, log, and more transports, to allow you use your favorite email service without any stress. + - icon: 🛠️ + title: Flexible configuration + details: Need multiple email transports or mailers in the same Sails project? Mail make that a breeze to do. +--- diff --git a/docs/mail/local-development.md b/docs/mail/local-development.md new file mode 100644 index 0000000..178cbf3 --- /dev/null +++ b/docs/mail/local-development.md @@ -0,0 +1,32 @@ +--- +title: Local development +editLink: true +prev: + text: 'Resend Transport' + link: '/mail/resend-transport' +--- + +# {{ $frontmatter.title }} + +When creating an application that involves sending emails, you likely wouldn't want to send actual emails to active email addresses during local development. + +Sails Mail offers various methods to "deactivate" the real email sending process for local development purposes. + +## Log Transport + +During development you may set a mailer with the log transport which will log the content of your email to the console. + +```js +// config/mail.js +mailers: { + log: { + transport: 'log' + } +} +``` + +## Mailtrap / NodemailerApp + +Another option is to utilize services like [Mailtrap](https://mailtrap.io/email-sandbox/) or [NodemailerApp](https://nodemailer.com/app/) along with the [SMTP transport](/mail/smtp-transport) to route your email messages to a simulated mailbox. + +This enables you to examine the emails within an email client, such as Mailtrap's or NodemailerApp's message viewer. diff --git a/docs/mail/resend-transport.md b/docs/mail/resend-transport.md new file mode 100644 index 0000000..ba0f6ca --- /dev/null +++ b/docs/mail/resend-transport.md @@ -0,0 +1,75 @@ +--- +title: Resend Transport +editLink: true +prev: + text: 'SMTP Transport' + link: '/mail/smtp-transport' +next: + text: 'Local Development' + link: '/mail/local-development' +--- + +# {{ $frontmatter.title }} + +To use the [Resend](https://resend.com) transport, install `resend` via NPM: + +```sh +npm i resend --save +``` + +Next, setup a mailer in the `mailers` object in `config/mail.js`, the name of the mailer can be anything but you can use `smtp` as well: + +```js +// config/mail.js +mailers: { + resend: { + transport: 'resend' + } +} +``` + +Also set the `default` option in `config/mails.js` to `resend` or whatever name you call the mailer above. + +```js +// config/mails.js +default: 'resend' +``` + +## Resend credentials + +To set the Resend credentials, you have a couple of options: + +## Environment variables + +Set the following environment variables + +```env +RESEND_API_KEY=re_skskagnagnak +``` + +## local.js + +Set an object in `config/local.js` matching the mailer you've set in `config/mails.js`: + +```js +// config/local.js +resend: { + apiKey: 're_skskagnagnak', +} +``` + +## config/mail.js + +You can set your credentials within the mailer defintion as well: + +```js +// config/mail.js +mailers: { + resend: { + transport: 'resend', + apiKey: process.env.RESEND_API_KEY + } +} +``` + +Notice that for the `apiKey` in `config/mail.js` we are still using environment variables as its best practice not to add secrets to your codebase. diff --git a/docs/mail/send-helper.md b/docs/mail/send-helper.md new file mode 100644 index 0000000..eeab058 --- /dev/null +++ b/docs/mail/send-helper.md @@ -0,0 +1,141 @@ +--- +title: Send Helper +editLink: true +prev: + text: 'Email Layout' + link: '/mail/email-layout' +next: false +--- + +# {{ $frontmatter.title }} + +Mail provides a `send` helper that is used to send your emails within your Sails applications. The `send` helper takes in several optional and required arguments like `mailer`, `template`, `templateData` etc. + +## mailer + +The mailer to use for sending the email. This is optional because by default Mail will look for the mailer to use by checking for it in the following places: + +- an environment variable called `MAIL_MAILER`, +- a config in `config/local.js` called `mailer`, +- and finally the `default` mailer set in `config/mail.js` + +```js +sails.helpers.mail.send.with({ mailer: 'resend' }) +``` + +## template