This project helps create mailing list.
- Latest LTS version of NodeJS
npm>= 7
At first, add JSON with data to the data folder. The name of the file should match a date of the mail creation in the
format of Day-Month-Year.
The email structure is described in /shared/types.ts file.
Issue number and issue date will be generated automatically (the issue number is the number of json-files in the data folder, date is the name of json-file).
To add a mailing letter header, you need to fill in the "greetingTitle" and "greetingSubtitle" fields in the json-file.
There are only four tags recognizable now (see Tag type). If you need to add more, then edit shared/assets/index.ts
file and add corresponding images.
Available titles to which icons will be automatically added: "Вёрстка" | "JavaScript" | "Веб-разработка" | "Фреймворки
и библиотеки" | "Психология, продуктивность, soft skills". If you need to add more, then edit shared/assets/index.ts
file and add corresponding image.
All images are located in /shared/assets folder. There is index.ts file that contains functions to get the image URL
depending on current environment. It is designed to work both for emails and the landing. Please, edit that file when
you add a new image or remove some.
To build an email for the most recent JSON file type execute:
make build_email && node dist/index.jsAn email.html file will be generated in dist folder.
To develop an email page run:
make email_devAnd then in separate terminal window run:
node dist/index.js && open dist/email.htmlAnd you can preview email UI in the browser. Do not forget to rerun last commands after any change in the code.
To develop landing page for the mailing list type run:
npx netlify devTo build site run:
make build_siteThe main source of the site is settled in app folder. While extending site's functionality, you should avoid writing
there the code that should be run only on the server. There is a possibility to do it, but you should be confident that
server's code will be removed from final bundle as App and Head templates will be invoked in browser environment also.
server directory contains server's code only. Files with .api. suffix are treated differently. They are standalone
endpoints and are bundled as separate serverless functions. Other files are helpers, that's why you can create any structure
that comes to your mind there.
index.api.tsis the main endpoint and therefore shouldn't be deleted or renamed.
public folder will be published to Netlify. So, if there is a need to include some static asset to application (for
example, fonts), you can place it there. Public path for those assets should start from public folder. For example,
public path for favicon.ico image is /favicon.ico.
All source code is settled in email folder. There aren't any restrictions on organising folder structure.
Any shared code between email and site should be placed in shared folder.
As you can see, any asset can be imported in JS. Bundler will handle them.
There should be .env file with next variables:
- DOMAIN=<site's domain name>
- LIST_ID=
- GTAG_ID=
- BASE_NETLIFY_URL=
- UNISENDER_API_KEY=
- UNISENDER_BASE_URL=
Use of these variables vary by the environment:
- on the server reach them by
env.DOMAIN(do not forget to includeimport { env } from 'process';) - on the client react them by
import.meta.env.DOMAIN.
Not all variables are visible on the client. Only those declared in rollup.common.config.js. So, if you need to
add new one you should add it there and write type for that variable in global.d.ts file.
Remember to update the sitemap.xml file every time you add a new letter. It is necessary to inform Google about the new content issue, and you can do it with updated and actual sitemap.xml. To update it, run:
make build_sitemap
Then push updated sitemap.xml to the repository.
Have fun ✌️
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent