Skip to content

Commit 248038f

Browse files
ju4n97ju4n97
committed
Merge branch 'release/0.5.0' into main
2 parents 49fd72e + 4090b1c commit 248038f

File tree

74 files changed

+799
-316
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+799
-316
lines changed

‎.eslintrc.json renamed to ‎.eslintrc

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
21
{
32
"root": true,
43
"overrides": [
4+
{
5+
"files": ["*.js"],
6+
"parserOptions": {
7+
"ecmaVersion": 2018
8+
}
9+
},
510
{
611
"files": ["*.ts"],
712
"parserOptions": {

‎README.md

+119-37
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,97 @@
11
# Angular Boilerplate
22

3-
Angular starter for enterprise-grade front-end projects built under a clean architecture that helps to scale and maintain a fast workflow.
3+
Angular starter for enterprise-grade front-end projects, built under a clean architecture that helps to scale and maintain a fast workflow.
44

5-
## Main features
5+
## ⚗️ Features
66

77
- Lazy loading.
8-
- Smart and dumb components pattern.
8+
- Smart and pure components pattern.
99
- Components types (e.g. component, page).
10+
- Self-contained components and encapsulated modules.
11+
- Auth scheme
12+
- Settings scheme
13+
- User scheme
14+
- PWA
15+
- i18n
1016
- Dynamic titles and content meta tags.
11-
- Global error handler.
12-
- Generic type-safe HTTP service.
13-
- Generic partial UI modules.
17+
- TailwindCSS + Autoprefixer + PurgeCSS setup.
18+
- Dark mode and theme configuration.
1419
- Scalable CSS architecture with [ITCSS](https://itcss.io/).
1520
- [Lighthouse](https://developers.google.com/web/tools/lighthouse) reports improved.
16-
- Authentication based on roles.
17-
- PWA.
18-
- i18n
19-
- SEO good practices.
21+
- Migration from TSLint to ESLint.
22+
- Husky hooks
2023

21-
### Project structure
24+
## 📄 Pages
2225

23-
```
24-
└───src
25-
├───app
26-
│ ├───+auth
27-
│ │ └───pages
28-
│ │ ├───forgot-password
29-
│ │ ├───forgot-password-email-sent
30-
│ │ ├───password-reset
31-
│ │ ├───password-reset-failed
32-
│ │ ├───password-reset-succeeded
33-
│ │ ├───sign-in
34-
│ │ └───sign-up
35-
│ ├───+settings
36-
│ │ └───pages
37-
│ ├───+user
38-
│ │ └───pages
26+
- General
27+
- home
28+
- not-found
29+
- Auth
30+
- sign-in
31+
- sign-up
32+
- forgot-password
33+
- forgot-password-email-sent
34+
- password-reset
35+
- password-reset-succeeded
36+
- password-reset-failed
37+
- Settings
38+
- account
39+
- appearance
40+
- billing
41+
- blocked-Users
42+
- Notifications
43+
- security
44+
- security-log
45+
- User
46+
- my-profile
47+
- overview
48+
49+
## 🧱 Self-contained components
50+
51+
- breadcrumb
52+
- footer
53+
- header
54+
55+
## 📛 Custom directives
56+
57+
- click-outside (detects when the user clicks outside an element).
58+
59+
## 🧪 Custom pipes
60+
61+
- bytes (transforms a numeric value into bytes, KB, MB, GB, etc.).
62+
63+
## 🛠️ Customizing to your preference
64+
65+
- Change application title:
66+
67+
Go to `src/index.html` and inside the `title` tag, replace "Angular Boilerplate" with your app name.
68+
69+
- Change paths of the pages:
70+
71+
Go to `src/app/core/structs/path.enum.ts` to find all the registered routes in an enum file.
72+
73+
For example, you could replace `sign-in` with `SignIn`, `login` or `iniciar_sesion`
74+
75+
- Change titles, descriptions, and robots of the pages:
76+
77+
Every page has a `.route` file that contains an exported constant that holds the title and description and a robot's metatag that indicates if it can be indexed or followed by a web crawler.
78+
79+
- Change light and dark mode colors:
80+
81+
Go to `src/css/01-settings/variables.scss` and tweak it to your preference.
82+
83+
- Change your TailwindCSS configuration:
84+
85+
Go to `config/tailwind.config.js` and tweak it to your preference. You can refer to https://tailwindcss.com/docs/configuration to learn how to do it.
86+
87+
- Add new PostCSS plugins
88+
89+
Go to `config/webpack-dev.config.js` for development and testing or to `config/webpack-prod.config.js` for production settings and add the new plugins inside the plugins array.
90+
91+
## ⛩️ Project structure
92+
93+
```console
94+
├───app
3995
│ ├───@components
4096
│ │ ├───breadcrumb
4197
│ │ ├───footer
@@ -54,6 +110,28 @@ Angular starter for enterprise-grade front-end projects built under a clean arch
54110
│ │ │ └───seo
55111
│ │ ├───structs
56112
│ │ └───utils
113+
│ ├───+auth
114+
│ │ └───pages
115+
│ │ ├───forgot-password
116+
│ │ ├───forgot-password-email-sent
117+
│ │ ├───password-reset
118+
│ │ ├───password-reset-failed
119+
│ │ ├───password-reset-succeeded
120+
│ │ ├───sign-in
121+
│ │ └───sign-up
122+
│ ├───+settings
123+
│ │ └───pages
124+
│ │ ├───account
125+
│ │ ├───appearance
126+
│ │ ├───billing
127+
│ │ ├───blocked-users
128+
│ │ ├───notifications
129+
│ │ ├───security
130+
│ │ └───security-log
131+
│ ├───+user
132+
│ │ └───pages
133+
│ │ ├───my-profile
134+
│ │ └───overview
57135
│ └───features
58136
├───assets
59137
├───css
@@ -70,14 +148,18 @@ Angular starter for enterprise-grade front-end projects built under a clean arch
70148
└───icons
71149
```
72150

73-
## Current page speed insights
74-
75-
### Mobile
76-
77-
![Light house metrics](https://i.imgur.com/ppul95L.png)
78-
79-
### Desktop
80-
81-
![Light house metrics](https://imgur.com/eMCTu25.png)
151+
## 🧙‍♂️ Commands
82152

83-
If you want to check that out by yourself, you can do it [here](https://developers.google.com/speed/pagespeed/insights/?hl=es&url=https%3A%2F%2Fangularboilerplate.netlify.app%2Flogin%3FreturnUrl%3D%252F&tab=desktop)
153+
| Command | Description | NPM | Yarn | Background command |
154+
| ---------- | ------------------------------------------------ | ------------------ | --------------- | ------------------------------------------------------------------ |
155+
| ng | See available commands | npm run ng | yarn ng | ng |
156+
| start | Run your app in development mode | npm start | yarn start | ng serve |
157+
| start:es | Run your app in development mode in spanish | npm run start:es | yarn start:es | ng serve -c=es --port 4201 |
158+
| build | Build your app | npm run build | yarn build | ng build |
159+
| build:prod | Build your app ready for production | npm run build:prod | yarn build:prod | ng build --prod --build-optimizer --aot --stats-json |
160+
| build:i18n | Build your multilingual app ready for production | npm run build:i18n | yarn build:i18n | ng build --prod --build-optimizer --aot --stats-json --localize |
161+
| test | Run your unit tests | npm run test | yarn test | ng test |
162+
| lint | Use ESLint to lint your app | npm run lint | yarn lint | ng lint |
163+
| e2e | Run your e2e integration tests | npm run e2e | yarn e2e | ng e2e |
164+
| extract | Extract i18n messages from i18n directives | npm run extract | yarn extract | ng extract-i18n --output-path locale --ivy |
165+
| analyze | Open webpack-bundle-analyzer | npm run analyze | yarn analyze | webpack-bundle-analyzer dist/angular-boilerplate/stats-es2015.json |

‎angular.json

+7-25
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,6 @@
7171
"localize": [
7272
"es"
7373
]
74-
},
75-
"fr": {
76-
"localize": [
77-
"fr"
78-
]
79-
},
80-
"ja": {
81-
"localize": [
82-
"ja"
83-
]
8474
}
8575
}
8676
},
@@ -106,28 +96,22 @@
10696
"src/css/styles.scss"
10797
],
10898
"scripts": []
99+
}
100+
},
101+
"serve": {
102+
"builder": "@angular-builders/custom-webpack:dev-server",
103+
"options": {
104+
"browserTarget": "angular-boilerplate:build-dev"
109105
},
110106
"configurations": {
111107
"production": {
112108
"browserTarget": "angular-boilerplate:build:production"
113109
},
114110
"es": {
115111
"browserTarget": "angular-boilerplate:build:es"
116-
},
117-
"fr": {
118-
"browserTarget": "angular-boilerplate:build:fr"
119-
},
120-
"ja": {
121-
"browserTarget": "angular-boilerplate:build:ja"
122112
}
123113
}
124114
},
125-
"serve": {
126-
"builder": "@angular-builders/custom-webpack:dev-server",
127-
"options": {
128-
"browserTarget": "angular-boilerplate:build-dev"
129-
}
130-
},
131115
"extract-i18n": {
132116
"builder": "@angular-devkit/build-angular:extract-i18n",
133117
"options": {
@@ -178,9 +162,7 @@
178162
"i18n": {
179163
"sourceLocale": "en-US",
180164
"locales": {
181-
"es": "src/locale/messages.es.xlf",
182-
"fr": "src/locale/messages.fr.xlf",
183-
"ja": "src/locale/messages.ja.xlf"
165+
"es": "locale/messages.es.xlf"
184166
}
185167
}
186168
}

‎config/tailwind.config.js

+57-58
Original file line numberDiff line numberDiff line change
@@ -8,82 +8,81 @@ module.exports = {
88
theme: {
99
extend: {
1010
fontSize: {
11-
"7xl": "5rem",
12-
"8xl": "6rem",
11+
'7xl': '5rem',
12+
'8xl': '6rem',
1313
},
1414
},
1515
container: {
1616
center: true,
17-
padding: "1.5rem",
17+
padding: '1.5rem',
1818
},
1919
colors: {
20-
inherit: "inherit",
21-
transparent: "transparent",
22-
current: "currentColor",
20+
inherit: 'inherit',
21+
transparent: 'transparent',
22+
current: 'currentColor',
2323

24-
white: "#fff",
25-
black: "#000",
24+
white: '#fff',
25+
black: '#000',
2626

27-
background: "var(--bg)",
28-
accent: "var(--accent)",
29-
primary: "var(--primary)",
30-
secondary: "var(--secondary)",
27+
background: 'var(--bg)',
28+
accent: 'var(--accent)',
29+
primary: 'var(--primary)',
30+
secondary: 'var(--secondary)',
3131

3232
gray: {
33-
100: "#e8eaed",
34-
200: "#d1d6db",
35-
300: "#bac1c8",
36-
400: "#a3adb6",
37-
500: "#8c98a4",
38-
600: "#707a83",
39-
700: "#545b62",
40-
800: "#383d42",
41-
900: "#1c1e21",
33+
100: '#e8eaed',
34+
200: '#d1d6db',
35+
300: '#bac1c8',
36+
400: '#a3adb6',
37+
500: '#8c98a4',
38+
600: '#707a83',
39+
700: '#545b62',
40+
800: '#383d42',
41+
900: '#1c1e21',
4242
},
43-
4443
primary: {
45-
100: "#d7e5ff",
46-
200: "#afcbff",
47-
300: "#87b1ff",
48-
400: "#5f97ff",
49-
500: "#377dff",
50-
600: "#2c64cc",
51-
700: "#214b99",
52-
800: "#163266",
53-
900: "#0b1933",
44+
100: '#d7e5ff',
45+
200: '#afcbff',
46+
300: '#87b1ff',
47+
400: '#5f97ff',
48+
500: '#377dff',
49+
600: '#2c64cc',
50+
700: '#214b99',
51+
800: '#163266',
52+
900: '#0b1933',
5453
},
5554
success: {
56-
100: "#ccf4ed",
57-
200: "#99e9dc",
58-
300: "#66dfca",
59-
400: "#33d4b9",
60-
500: "#00c9a7",
61-
600: "#00a186",
62-
700: "#007964",
63-
800: "#005043",
64-
900: "#002821",
55+
100: '#ccf4ed',
56+
200: '#99e9dc',
57+
300: '#66dfca',
58+
400: '#33d4b9',
59+
500: '#00c9a7',
60+
600: '#00a186',
61+
700: '#007964',
62+
800: '#005043',
63+
900: '#002821',
6564
},
6665
warning: {
67-
100: "#fdf4eb",
68-
200: "#fbead6",
69-
300: "#f9dfc2",
70-
400: "#f7d5ad",
71-
500: "#f5ca99",
72-
600: "#c4a27a",
73-
700: "#93795c",
74-
800: "#62513d",
75-
900: "#31281f",
66+
100: '#fdf4eb',
67+
200: '#fbead6',
68+
300: '#f9dfc2',
69+
400: '#f7d5ad',
70+
500: '#f5ca99',
71+
600: '#c4a27a',
72+
700: '#93795c',
73+
800: '#62513d',
74+
900: '#31281f',
7675
},
7776
danger: {
78-
100: "#fcd8e2",
79-
200: "#f9b1c5",
80-
300: "#f58ba7",
81-
400: "#f2648a",
82-
500: "#ef3d6d",
83-
600: "#bf3157",
84-
700: "#8f2541",
85-
800: "#60182c",
86-
900: "#300c16",
77+
100: '#fcd8e2',
78+
200: '#f9b1c5',
79+
300: '#f58ba7',
80+
400: '#f2648a',
81+
500: '#ef3d6d',
82+
600: '#bf3157',
83+
700: '#8f2541',
84+
800: '#60182c',
85+
900: '#300c16',
8786
},
8887
},
8988
},

0 commit comments

Comments
 (0)