Emails and Clients - Part Three

Summary

Coming soon.

Transcript

So let's create a base.temple file in package emails. I'm going to copy paste a bunch of code now. There we go. So we have this base temple component just as we did with our views and in here we define some inline styles using this style element, style tag here where we just set some basics so our body and our header tags and look like our paragraph tags our anchor tags all of that looks looks decent and this is this is one of the things that can make email a little bit yeah let's say janky to work with I'm just gonna do some formatting because our LSP doesn't really pick this up so yeah so we have this inline styles that we then can use down here in our in our main body we have a title I'm just gonna leave it for my bloggers now but what is probably more important here is that you are going to be building your emails in table format or using a lot of tables so so this is just our wrapper just like we did with our normal views so we're literally just gonna be having table elements go inside as children to this base template and from there we can start building up our emails without them looking too verbose however we also should add some components and since it's very easy to add components with temple it also makes it very easy to add to create emails without having to write out all of this you know you can see like all of these inline styles right so let's jump out and let's create one create a new file called components.temple it's also going to be in package emails and again I am just gonna grab a bunch of code here because there's not really anything new going on but it is very verbose so you know here we go let's go let's go through all of this so we have our header we have a subheader we have a footer we have a footer with an unsub so it's easy to add unsubscribe me which is also something that will help with your deliverability especially Gmail looks for for something that you can easily click to unsubscribe we have links here that also again uses this inline styles that can be feel a little bit weird to work with when you're used to like to Tailwind style Tailwind style styling you know and same here we are again just in temple land so we can use all the temple functionality that we are used to we can add links success or link danger depending on what prop we pass to this to this link here and then finally we have a section component we can use to build specific sections so this is the base components that you're gonna need for building out HTML emails and you can extend these as much as you want you can change the styling the coloring you can make them react to different sizes and different color modes you know but having like at least these elements makes your your work with with with emails a lot more a lot more manageable and there we go there we go time yeah all right so we have our base we have some components and finally we can start to put together our actual email that we are gonna send out whenever a user subscribes we're gonna call it subscribe welcome with our confirmation link that they can then click but I hope you can see how powerful Temple is that we can start to create a base and then add these components that it might seem like a lot now but you know you can check out the code in GitHub and copy paste it and then play around with it but basically just think of emails as a bunch of tables it's tables all the way down and the more you can abstract that the easier it gets to create these nice looking emails great so we have the elements in place great so we have the elements in place now let's create the actual email so create a new file and let's call it sub scriber welcome temple package emails type subscriber welcome is gonna be the struct and this struct is gonna accept a confirmation link that's a string and then we created this template handler interface that we can now use to make sure that it works with the rest of the process so we say subscriber welcome nil now it complains because we haven't implemented the interface so we can create a interface create the method now on this struct here and then what we needed to implement was the generate method that took in the context context.context and it returns us HTML text and error and most of our work is now done since we just need to say HTML and say plain text error and then we just call this process email pass the context and then we just need to pass the component the actual temple component so let's just say s.template and we're gonna create that in just a second now if we have an error we're gonna say HTML or text and the error if no error occurs we're gonna say HTML HTML text plain text and finally nil all right and context there we go finally let's just create this this template and since this is again is all go we can just create a temple as a temple component as a method on a struct so we can now call this oh let me just grab this so we're just gonna pass it like this and now we can say template and our error up here should disappear it does great now we can use our base that we just created and then we can use our header component saying something like thanks for subscribing to my newsletter we didn't want to have like a section so use the section component here we're gonna create a paragraph text saying thanks for signing up to my blog's newsletter we are thrilled to have you on board right let's create another section where we say to continue we need you to confirm your email finally a third section where we say not paragraph tag but we're gonna use our link here that should accept the link props and what fields has the text field so we're gonna say confirm email URL is gonna be the confirmation link and let's say the style will be success there we go so this is really our our path forward to creating our subscriber welcome emails and hopefully you can see how this looks a lot more clean compared to how our base templates look with all these inline styles we can quickly go in and look at our components here see our link that we created we just passed props as it's a very common pattern in modern front-end development so that's how like the text and the URL and the style and it just gets attached to where it should and we have some reusability if it's a danger or whatever it might be so this is now our subscriber welcome template next up we need to create the client that we're gonna send this email from now there are a bunch of providers you can pretty much choose whatever you want since most of these providers have an API that accepts an HTML version and a text version which is exactly what we have here I use SES from AWS it's very cheap works very well and it's very very nice place to start especially for something like transactional email so let's get right on creating our email client