<div align=center id=top >

# Modern Web Boilerplate

<!-- Markdown badges will be added -->

This is a modern front-end boilerplate which is partially based on islands architecture with focus on improved DX (Developer Experience).

</div>

## Modern Features

<!-- <details align=center>

<summary>Click to view all features</summary> -->

<div align=center >

| Feature            | Advantage                               |
| ------------------ | --------------------------------------- |
| Dynamic Imports    | Reduced initial load times              |
| Bundle Splitting   | Reducing the loading and execution time |
| Tree Shaking       | Dead code removal                       |
| Auto Prefixing     | Supports more browsers                  |
| SPA                | Improved UX with routing                |
| PWA                | Native app like performance             |
| Image Optimization | Reduces Image size                      |
| Special Routing    | Lightweight SPA                         |
| Rough Annotations  | Modern site decorators                  |
| Type Checking      | Reduced Bugs                            |
| Linting            | Maintain Code Standards                 |
| Git Hooks          | Improved DX (Developer Experience)      |
| HMR                | Quick response on code change           |
| Workflows          | Automated github workflows              |

</div>

<!-- </details> -->

## Technologies Used

<!-- <details align=center>

<summary>Click to view all technologies</summary> -->

<div align=center >

| Technology                                                     | Why?                                                                          |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| [Svelte](https://svelte.dev/)                                  | DX, no Virtual DOM, build time compilation, reactivity and ease of use        |
| [Vite](https://vitejs.dev/)                                    | Blazing fast, DX, HMR, Extensible plugins and framework agnostic              |
| [TypeScript](https://www.typescriptlang.org/)                  | Type Checking, DX, Code Auto Completion and Superset of JavaScript            |
| [EsLint](https://eslint.org)                                   | Code Linting and Maintains Standards                                          |
| [Prettier](https://prettier.io/)                               | Code Formatting and Maintaining standards                                     |
| [Commitizen](https://commitizen-tools.github.io/commitizen/)   | Lints git commit messages                                                     |
| [Husky](https://typicode.github.io/husky/#/)                   | Git Hooks before and after git commit                                         |
| [Tinro](https://github.com/AlexxNB/tinro)                      | Lightweight Routing                                                           |
| [Terser](https://terser.org)                                   | JavaScript minification, mangling and tangling                                |
| [PostCSS](https://postcss.org)                                 | CSS transformations                                                           |
| [AutoPrefixer](https://autoprefixer.github.io)                 | Prefixes the CSS to support more browsers                                     |
| [GitHub Actions](https://github.com/features/actions)          | Building and Deploying the Code in Github Pages                               |
| [Dependabot](https://github.com/dependabot)                    | Automatic Dependency Updates                                                  |
| [CodeQL](https://codeql.github.com/)                           | Discover vulnerabilities across a codebase with semantic code analysis engine |
| [PWA](https://web.dev/progressive-web-apps/)                   | App like installation and Offline capabilities                                |
| [Rollup](https://www.rollupjs.org)                             | Aggressive Bundle Optimizations and TreeShaking                               |
| [EsBuild](https://esbuild.github.io)                           | Ultra fast dependency pre bundling                                            |
| [Conventional Commits](https://www.conventionalcommits.org/)   | Git commit messages standards                                                 |
| [Release Please](https://github.com/googleapis/release-please) | Automated versioning and releasing packages based on commits                  |
| [Image Sharp](https://sharp.pixelplumbing.com/)                | Image optimizations out-of-the-box                                            |

</div>

<!-- </details> -->

## Automation Scripts

### `yarn dev`

- Starts a fast web server with HMR at http://localhost:5173

<details>

<summary><strong>Runs<strong></summary>

```sh
vite
```

</details>

### `yarn build`

- Compiles the svelte code to highly optimized and bundled HTML, CSS and JavaScript in `dist/` folder
- Optimizes images using Sharp and downloads custom fonts from google and bundles it up
- Produces the production code to be hosted

<details>

<summary><strong>Runs<strong></summary>

```sh
vite build
```

</details>

### `yarn preview`

- Starts a simple server with builded production site

<details>

<summary><strong>Runs<strong></summary>

```sh
vite preview
```

</details>

### `yarn lint`

- Lints the code with `src` directory and tries to fix the issues to ensure the code quality and standards across the entire codebase

<details>

<summary><strong>Runs<strong></summary>

```sh
eslint --ext .js,.ts,.svelte --ignore-path .gitignore --fix src
```

</details>

### `yarn format`

- Formats the entire project with prettier to make the code base more clean which improves the the readability and thus makes the project more maintainable

<details>

<summary><strong>Runs<strong></summary>

```sh
prettier --write . '!**/dist'
```

</details>

### `yarn check`

- TypeChecks the svelte files with TypeScript to reduce runtime bugs

<details>

<summary><strong>Runs<strong></summary>

```sh
svelte-check --tsconfig tsconfig.json
```

</details>

### `yarn prepare`

- Setup Husky Git Hooks for various automation

<details>

<summary><strong>Runs<strong></summary>

```sh
husky install
```

</details>

### `yarn commit`

- Runs commitizen and lints the commit messages to make release-please workflow to work well

<details>

<summary><strong>Runs<strong></summary>

```sh
cz
```

</details>

## Automation Workflows

### Husky Git Hooks

#### Pre Commit

- Runs all necessary linting, formatting and build workflows
  ensures code standards and makes sure that everything works fine before committing

**Hook at:** [pre-commit](.husky/pre-commit)

<details>

<summary><strong>Runs following commands</strong></summary>

```bash
yarn lint #eslint linting
yarn format #prettier formatting
yarn build #vite-rollup building
```

</details>

#### Post Commit

- Runs commit message linting to make sure the commit message needs all [Conventional Commits](https://www.conventionalcommits.org/) standards which will be later used for automated versioning and release system by google's release please

**Hook at:** [prepare-commit-msg](.husky/prepare-commit-msg)

<details>

<summary><strong>Runs following command</strong></summary>

```bash
exec < /dev/tty && yarn commit --hook || true #lints commit with interactive prompts
```

</details>

### GitHub Actions

#### DependaBot

- Automated dependencies update including critical security updates
- Maintained by GitHub and used by top projects and organizations all over the world

**Workflow in:** [dependabot.yaml](.github/dependabot.yaml)

#### CodeQL

- Analyzes Code Quality to make sure the code is not bad and does static analysis to find out common security vulnerabilities

**Workflow in:** [codeql-analysis.yaml](.github/workflows/codeql-analysis.yaml)

#### Release Please

- Automated semantic versioning and releases based on the commits with automatic changelog generation and version bumps.
- Created by Google to use for their products

**Workflow in:** [release-please.yaml](.github/workflows/release-please.yml)

#### Deploy

- Automated build system which deploys the optimized compiled version of the site to `gh-pages` branch for GitHub Pages hosting

**Workflow in:** [deploy.yaml](.github/workflows/deploy.yaml)

<!-- Configurations  -->

<!-- Usage Guides -->

## LICENSE

[MIT](LICENSE)

## Contributions

All kind of contributions are welcomed

<div align=center >

---

Made with ❤️ by [Rajaniraiyn](https://rajaniraiyn.github.io)

---

<br />

[`⬆️⬆️ Move to Top ⬆️⬆️`](#top)

</div>