Skip to content

Commit 4b86ed9

Browse files
cskiwicskiwi
committed
feat: got the styling working
1 parent eca3343 commit 4b86ed9

24 files changed

+388
-28
lines changed

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ This project is a Angular (With SSR) + Nestjs monorepo using Nx. It is a full-st
88
Feel free to contribute to this project by creating a pull request.
99

1010
- [ ] Check on how to build for bun runtime
11-
- [ ] Pre rendering routes doesn't spin up the server, so the HTTP calls are not made.
12-
- [ ] Create a material included starter
11+
- [x] Pre rendering routes doesn't spin up the server, so the HTTP calls are not working (Made a build workaround npm script)
12+
13+
## Other variants of this project
14+
- Just Angular: https://github.com/cskiwi/angular-nestjs-starter
15+
- With TypeORM and Postgres: TODO
1316

1417
## Directory Structure
1518

‎apps/app/project.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
"input": "apps/app/public"
2424
}
2525
],
26-
"styles": [
27-
"@angular/material/prebuilt-themes/magenta-violet.css",
28-
"apps/app/src/styles.scss"
29-
],
26+
"styles": ["apps/app/src/styles.scss"],
27+
"stylePreprocessorOptions": {
28+
"includePaths": ["node_modules/"]
29+
},
3030
"externalDependencies": [
31-
"@nestjs/microservices",
31+
"@nestjs/microservices",
3232
"@nestjs/microservices/microservices-module",
3333
"@nestjs/websockets",
3434
"@nestjs/websockets/socket-module",

‎apps/app/src/index.html‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>app</title>
5+
<title>Responsive sidenav</title>
66
<base href="/" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
87
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
10-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11-
</head>
12-
<body class="mat-typography">
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
16+
rel="stylesheet"
17+
/>
18+
</head>
19+
<body class="mat-app-background">
1320
<app-root></app-root>
1421
</body>
1522
</html>

‎apps/app/src/styles.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1+
@use '@angular/material' as mat;
2+
@use './styles/m3-theme.scss' as m3-theme;
3+
14
/* You can add global styles to this file, and also import other style files */
2-
html, body { height: 100%; }
3-
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
5+
html,
6+
body {
7+
height: 100%;
8+
}
9+
body {
10+
margin: 0;
11+
font-family: Roboto, 'Helvetica Neue', sans-serif;
12+
}
13+
14+
15+
html {
16+
@include mat.all-component-themes(m3-theme.$dark-theme);
17+
@include mat.color-variants-backwards-compatibility(m3-theme.$dark-theme);
18+
19+
@media (prefers-color-scheme: light) {
20+
@include mat.all-component-colors(m3-theme.$light-theme);
21+
@include mat.color-variants-backwards-compatibility(m3-theme.$light-theme);
22+
}
23+
}
24+
@include mat.core();

‎apps/app/src/styles/m3-theme.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// This file was generated by running 'ng generate @angular/material:m3-theme'.
2+
// Proceed with caution if making changes to this file.
3+
4+
@use 'sass:map';
5+
@use '@angular/material' as mat;
6+
@use './theme-functions' as theme;
7+
8+
$theme-warn: mat.$orange-palette;
9+
$theme-success: mat.$green-palette;
10+
$theme-danger: mat.$red-palette;
11+
12+
$dark-theme: theme.badman-theme(
13+
mat.$blue-palette,
14+
dark,
15+
$theme-warn,
16+
$theme-success,
17+
$theme-danger,
18+
-2
19+
);
20+
21+
$light-theme: theme.badman-theme(
22+
mat.$violet-palette,
23+
light,
24+
$theme-warn,
25+
$theme-success,
26+
$theme-danger,
27+
-2
28+
);

‎apps/app/src/styles/theme-functions.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@use '@angular/material' as mat;
2+
3+
/// Defines a dark color theme with success and danger colors.
4+
/// @param {Map} $primary The primary color map.
5+
/// @param {Map} $accent The accent color map.
6+
/// @param {Map} $warn The warn color map.
7+
/// @param {Map} $success The success color map.
8+
/// @param {Map} $danger The danger color map.
9+
10+
@function badman-theme(
11+
$primary,
12+
$type: dark,
13+
$warn: $mat-orange,
14+
$success: mat.$mat-green,
15+
$danger: mat.$mat-red,
16+
$density: -2
17+
) {
18+
$theme: mat.define-theme(
19+
(
20+
color: (
21+
theme-type: $type,
22+
primary: $primary,
23+
),
24+
density: (
25+
scale: $density
26+
),
27+
)
28+
);
29+
30+
$rest: (
31+
warn: $warn,
32+
success: $success,
33+
danger: $danger,
34+
);
35+
@return map-merge($theme, $rest);
36+
}

‎libs/frontend/pages/home/.eslintrc.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"extends": ["../../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": [
8+
"plugin:@nx/angular",
9+
"plugin:@angular-eslint/template/process-inline-templates"
10+
],
11+
"rules": {
12+
"@angular-eslint/directive-selector": [
13+
"error",
14+
{
15+
"type": "attribute",
16+
"prefix": "lib",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "lib",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nx/angular-template"],
33+
"rules": {}
34+
}
35+
]
36+
}

‎libs/frontend/pages/home/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# frontend-pages-home
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Running unit tests
6+
7+
Run `nx test frontend-pages-home` to execute the unit tests.

‎libs/frontend/pages/home/jest.config.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-disable */
2+
export default {
3+
displayName: 'frontend-pages-home',
4+
preset: '../../../../jest.preset.js',
5+
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
6+
coverageDirectory: '../../../../coverage/libs/frontend/pages/home',
7+
transform: {
8+
'^.+\\.(ts|mjs|js|html)$': [
9+
'jest-preset-angular',
10+
{
11+
tsconfig: '<rootDir>/tsconfig.spec.json',
12+
stringifyContentPathRegex: '\\.(html|svg)$',
13+
},
14+
],
15+
},
16+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
17+
snapshotSerializers: [
18+
'jest-preset-angular/build/serializers/no-ng-attributes',
19+
'jest-preset-angular/build/serializers/ng-snapshot',
20+
'jest-preset-angular/build/serializers/html-comment',
21+
],
22+
};

‎libs/frontend/pages/home/project.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "frontend-pages-home",
3+
"$schema": "../../../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "libs/frontend/pages/home/src",
5+
"prefix": "lib",
6+
"projectType": "library",
7+
"tags": [],
8+
"targets": {
9+
"test": {
10+
"executor": "@nx/jest:jest",
11+
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
12+
"options": {
13+
"jestConfig": "libs/frontend/pages/home/jest.config.ts"
14+
}
15+
},
16+
"lint": {
17+
"executor": "@nx/eslint:lint"
18+
}
19+
}
20+
}

0 commit comments

Comments
 (0)