GNU/Weeb Mail

Table of Contents

• Requirements
• How to Run
• How to Build
• Code Standards
• How to Develop or Contribute

Requirements

• NodeJS version 18+,strongly recommended to use version 20+ as this project developed using NodeJS version 20+ Download
• TypeScript version 5, no need to download in your OS as this project will install the TypeScript only inside this project.
• Code Editor, of course, we recommend using your favorite IDE, for example, VS Code.
• Svelte 5 Runes knowledge.

How to Run

# install all dependencies before running this project
npm i
npm run dev

How to Build

# install all dependencies before building this project
npm i
npm run build

After build, the dist folder will be created, copy them to your own server, for example, nginx.

Code Standards

We use LF for each End of Line style and add empty newline for every End of File, you must setting all that in your IDE before contributing on this project.

How to Develop or Contribute

Framework

If you are new to SvelteKit using the Svelte 5 Runes, we recommend to learn the framework first, you can learn it here or just read the docs.

Base Components

We used shadcn-svelte for the base components, we strongly recommended to use it for now, if you want to add components, just go here. This is how you add shadcn-svelte component

npx shadcn-svelte@latest add <component-name>

After installed shadcn-svelte component, it will generated in $lib/components/ui, if you want to have a small edit.

Custom Components

If you want to create your own custom components you can create it in $lib/components/customs.

Static Files

All static files were stored in ./static/.

Page Routes

All pages are created in ./src/routes and all protected routes (login required) are created in ./src/routes/(protected).

Hooks Functions

All hooks are created in $lib/hooks.

Form Schemas

All form schemas are created in $lib/schemas.

Constants

All constants data are created in $constants.

Typings

All types are created in $typings.

Utilities

All util or helper functions are created in $utils.

Styling

If you want to create styles or CSS that only affects inside its page or component just write it inside that file, if you want to create styles or CSS that affects globally you can write it in ./src/app.css.

Aliases

You may add some import aliases, you can edit it in svelte.config.js, we used $ as import alias, you must follow our standards to remain consistency.