GSoC 2022 | Score Lab | Week 3 | React Email project updates
Hi, welcome to the GSoC’22 Blogs Index 2 - the third blog of the series where I am documenting my complete journey as a contributor (Student Developer) from Day zero to the end date for Google Summer of Code 2022. Hope you will like the series, so let’s get started.
By the way, if you haven’t checked out the previous blog, then you can go through it here: Week 2 Blog
Today I’m going to share the work which I have done this week and the overall project updates from 27th June to 3rd July (week 3, Sprint C).
Convert React components to HTML
After creating the email layout in react, we need a function to convert the react code to an optimized plain HTML code that users can send through email. However, we also need to add the option to configure the base HTML and base CSS styles. Both of them should be added to the separate files and then should be imported. Users can also customize the base code as per their needs.
To implement this functionality, I took the help of ReactDOMServer.renderToStaticMarkup method from react-dom/server and also the fs module. Finally, I created one method named generateEmail to do this conversation. Also, I added related tests for the method.
Linked issue: #21
Merged Pull Request: #32
Add CI-CD to the project
Continuous Integration & Continuous Delivery/Continuous Deployment is also a very important part of any software. We have different services (like Jenkins, Travis CI, GitHub Actions, etc.) to automatically check, test, build and publish the package. In our case, we picked up GitHub Actions and added a few workflows to do this task. Initially, our script was failing and throwing some errors but after debugging it, I fixed it properly. Now our CI-CD pipeline will check for lining, code formatting, passing tests whenever someone submits a Pull Request, and the new version of the package will get published using semantic-release when code gets merged to the main branch.
Related issue: #33
Merged Pull Request: #34
Host the Storybook on GitHub Pages using GitHub Actions
To host our static storybook website, we simply chose GitHub Pages (because why not, we’re using so many services of GitHub!). I wrote a simple GitHub Action which will build and deploy the static storybook website to GitHub Pages from the docs folder when some code changes from the src folder gets merged on the main branch.
Related issue: #36
Merged Pull Requests: #37 , #49 (some fixes)
Adding more components
Now here comes the part which I mentioned in my last blog as well. We are in the progress to add more reusable components that developers can use to build responsive email layouts. We've finalized the structure for all the components and taken the table layout to do our layouting after deep research.
Here is the list of components that I’ve implemented for this week. Also, I’ve added proper stories to add a visual representation of each component.
- Column and Section
• Related issue: #39
• Merged Pull Request: #46 - Button
• Related issue: #40
• Pull Request: #47 - Typography
• Issue: #41
• Pull Request: #48 - Image
• Issue: #42
• Pull Request: #50 - Link
• Issue: #43
• Pull Request: #51 - Divider
• Issue: #44
• Pull Request: #52
All of the PRs are almost completed, just need a little cleanup and mentor’s approval.
I’ll also write and explain about each and every component in detail in another blog and on the documentation (which we are going to work on very soon).
That’s the overall progress for this week. Here are some of the interesting tasks for the upcoming week:
- Set up an example app
- Implement text email generation utility based on Email templates
- Add JSDoc comments to the util functions and generate Docs
- Research into the usage of Docusourus
- Add Preheader component
Also, don’t forget to drop a star on the project GitHub repo! ⭐
You can connect with me on LinkedIn, also don’t forget to give this blog a clap if you have liked it.
Additionally, you can follow me on GitHub and Twitter, it will be appreciated.
