{"id":13341571,"url":"https://github.com/LLazyEmail/hn_email_template","last_synced_at":"2025-03-11T22:31:11.652Z","repository":{"id":36991431,"uuid":"426244142","full_name":"LLazyEmail/hn_email_template","owner":"LLazyEmail","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-13T15:27:49.000Z","size":20205,"stargazers_count":0,"open_issues_count":10,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-24T10:06:41.349Z","etag":null,"topics":["javascript","mail","nodejs","templates","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LLazyEmail.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-09T13:40:59.000Z","updated_at":"2022-11-23T18:36:24.000Z","dependencies_parsed_at":"2024-10-24T02:54:11.129Z","dependency_job_id":"2e88df9c-7a07-4b58-b0c5-d18278d2f5a8","html_url":"https://github.com/LLazyEmail/hn_email_template","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LLazyEmail%2Fhn_email_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LLazyEmail%2Fhn_email_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LLazyEmail%2Fhn_email_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LLazyEmail%2Fhn_email_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LLazyEmail","download_url":"https://codeload.github.com/LLazyEmail/hn_email_template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243125124,"owners_count":20240263,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mail","nodejs","templates","web-components"],"created_at":"2024-07-29T19:25:38.875Z","updated_at":"2025-03-11T22:31:10.923Z","avatar_url":"https://github.com/LLazyEmail.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plain JS functions for generating HTML email template\n\n### Note: OuterTemplate moved into the root as the main project. other modules sitting in ./components folder\n\nRight now, the working version sitting under `Work` folder.\nWe in process of transitioning our plan js templates into nx.dev structure and convertion into typescript.\n\n\nhttps://deepsource.io/gh/LLazyEmail/hn_email_template/issues?category=recommended\u0026page=1\n\n\n\n----\n\nWhen I run a display method for Main component I'm able to see this\n\n ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjpou6ut89kdvrc3ysnp.png)\n\n----\n\n### MainComponent\n\nwe upgrading our workflow. thing below arent up-to-date\n```\nconst displayMain = () =\u003e {\n  \n   \n}\n```\n\n### EmailTemplateBodyComponent  (BodyComponent)\n\n```\nconst displayBody = () =\u003e {\n\n    \n}\n```\n\n### footer\n\n```\nconst displayFooter = () =\u003e {\n\n}\n```\n\natherdon-newsletter-js-layouts-misc is \n\n\n---\n\n\n---\n\n```bash\n├── xxx\n│   ├── xxx\n│   │   ├── **/*.xxx\n│   ├── xxx\n│   ├── images\n│   ├── xxx\n│   ├── js\n│   │   ├── **/*.js\n│   └── xxx\n├── dist (or build)\n├── \n├── \n├── \n├── \n├── README.md\n├── package.json\n├── \n└── .gitignore\n```\n\n---\n\n## Introduction\n\nI was rebuilding a part of our [markdown-to-email](https://github.com/atherdon/markdown-to-email) repository. I was not happy with how we handle templates in our generator.\n\nWhile there are not many things that changed behind how it works, I still want to showcase them in my article.\n\nAll developers work with strings, generating chunks of HTML code. I spend days thinking about how to improve it for our benefit.\n\nWhile this version of the template will be obsolete when we upgrade our generator, there is still room to forget some knowledge and learn how to keep things simple and not be seduced by ideas to complete it quickly.\n\n\nSo we have been working on rendering HTML for a while right now. \n\nOur HTML template contains an old HTML4 style markup that is very sensitive and requires careful work and attention to small details. I have been asking for help from different developers, but everybody struggles with it from the beginning. \n\nSo we are combining that HTML page from small parts, and for the last nine months, I moved those parts away into a small js module. \n\nWith the help of RollupJS, it's easy to work.\n\n ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62g0ie0unri1ad1aoy8k.png)\n\nI was able to extend it and even clone it. I decided to build a react-dom tree at some point instead of HTML. \n\nSo I copy-pasted everything and replaced my literals with react tags. It looks like “custom XML”, which can be just another way of presenting the information.\n\nAfter that, this module didn't evolve a lot. Everything was working ok, but not ideally. I tried to expand it and polish our functionality, but things didn't move fast. \n \nThis module was located in folder \"packages\" with other modules that I have.\n\n![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqep0y6lxflgsireezp3.png)\n\nAt this point, I decided that there was a lot of coding, and I was sick of it. So I created a new repository and moved it there. While it was just a copy-paste - it helped me to think differently. I was able to focus only on those 25 files.\n \n\nFrom the beginning, we think about our template in 2 only forms: \"content only\" and \"full template\". Most bugs was in the \"content\" part, while the main template was pretty stable. But it was hard to go from \"content only\" into \"full template\" sometimes - we don't have an easy way to preview it or debug.\n\nSo I separated our 25 files into two parts: literals related to \"not content\" was named \"outer template.\"\n\n![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ypf0uon3b80zl2230ff.png)\n\nAnd I decided to replace my literals with functions.\n\n![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajg3lzb6mvl0uox2we0p.png)\n\nFunctions look similar to simple react components.\n\n\n\n![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt3qijnk6yyinrc3dww8.png)\n\nIt gives me the ability to debug my strings how I want it.\n\n![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnfogb6bsqqrvbslrqt0.png)\n\nI even created a folder with basic tests inside.\n\n ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjpou6ut89kdvrc3ysnp.png)\n\nHope you like it!\n\n\nMore articles about building markdown to email:\n- [https://dev.to/atherdon/created-a-module-for-markdown-regexes-3a1b](https://dev.to/atherdon/created-a-module-for-markdown-regexes-3a1b)\n- [https://dev.to/atherdon/how-i-created-a-simple-npm-package-with-basic-email-templates-1efo](https://dev.to/atherdon/how-i-created-a-simple-npm-package-with-basic-email-templates-1efo)\n\nUPD. I forget to add a link to a repository with a source code.\n[Current code is here](https://github.com/LLazyEmail/_trying-lit), but I probably rename this repository later.\n\n---\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/OuterTemplate.png)\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/adding-tests.png)\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/export.png)\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/functions.png)\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/literals.png)\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/more-checks.png)\n\n\n![](https://raw.githubusercontent.com/LLazyEmail/_trying-lit/main/images/packages-folder.png)\n\n\n![]()\n\n\n![]()\n\n\n\n\n\n\n#### Arthur Tkachenko articles\n\n* [https://hackernoon.com/5-reasons-why-newsletters-should-be-part-of-your-business-strategy](https://hackernoon.com/5-reasons-why-newsletters-should-be-part-of-your-business-strategy)\n* [https://hackernoon.com/organizing-an-advanced-structure-for-html-email-template](https://hackernoon.com/organizing-an-advanced-structure-for-html-email-template)\n* [https://hackernoon.com/how-i-started-to-build-react-components-for-email-templates](https://hackernoon.com/how-i-started-to-build-react-components-for-email-templates)\n* [https://hackernoon.com/introducing-a-simple-npm-module-with-email-templates](https://hackernoon.com/introducing-a-simple-npm-module-with-email-templates)\n* [https://hackernoon.com/glossary-for-non-technies](https://hackernoon.com/glossary-for-non-technies)\n* [https://hackernoon.com/email-marketing-and-how-to-curate-an-effective-business-newsletter](https://hackernoon.com/email-marketing-and-how-to-curate-an-effective-business-newsletter)\n* [https://hackernoon.com/exploring-substack-for-building-your-newsletter](https://hackernoon.com/exploring-substack-for-building-your-newsletter)\n* [https://hackernoon.com/building-a-design-system-for-email-templates-react](https://hackernoon.com/building-a-design-system-for-email-templates-react)\n* [https://hackernoon.com/together4victory-list-of-email-marketing-tools](https://hackernoon.com/together4victory-list-of-email-marketing-tools)\n* [https://hackernoon.com/cool-newsletters-for-developers-part-1](https://hackernoon.com/cool-newsletters-for-developers-part-1)\n* [https://hackernoon.com/cool-resources-for-sending-emails](https://hackernoon.com/cool-resources-for-sending-emails)\n\n\n\n\n\n\n  Try this later\n\n  - https://www.npmjs.com/package/html-validate\n\n  - https://www.npmjs.com/package/html-validator-cli\n\n  - https://www.npmjs.com/package/sanitizer\n\n  - https://www.npmjs.com/package/common-tags#introduction\n\nhttps://www.npmjs.com/package/htmljs-parser\nhttps://www.npmjs.com/package/parse5\nhttps://www.npmjs.com/package/@tehshrike/html-template-tag\n\n\n\nsubmodule for https://github.com/atherdon/markdown-to-email\n\n\n\n---\n\n\n\n### atherdon-newsletter-js-layouts\n\n\n\n  -- \u003e body\n  -- \u003e misc\n  -- \u003e typography\n  -- \u003e main\n  -- \u003e head\n  -- \u003e fullTemplate\n\n\n\n### atherdon-newsletter-js-layouts-misc\n\n\n### atherdon-newsletter-js-layouts-typography\n\n\n### atherdon-newsletter-js-layouts-body\n\nbody\n  - \u003e headline\n  - \u003e logoBottom\n  - \u003e logoTop\n  - \u003e previewText\n  - \u003e section\n  - \u003e sponsor\n\n---\n\n```\n  if (typeof headStylesComponent != 'function'){ \n    throw new Error('invalid headStylesComponent, must be a function');\n  }\n\n   if (!title) {\n    throw new Error('no title was passed');\n  }\n```\n\n\n## [Linkedin page of LLazyEmail](https://www.linkedin.com/company/llazyemail/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLLazyEmail%2Fhn_email_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLLazyEmail%2Fhn_email_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLLazyEmail%2Fhn_email_template/lists"}