fix(build): remove unused Angular imports (NG8113) and chartist CSS

Migrates to Angular 21.0.0: updates tsconfig lib to es2022, migrates
bootstrap options in main.ts, and completes control flow migration
(*ngFor/*ngIf → @for/@if) in jumps and jumps-by-month templates to
resolve duplicate ng-template name conflicts skipped by the schematic.
Also fixes pre-commit hook to load nvm before running tests.

.claude/settings.json

@@ -0,0 +1,16 @@
+{
+    "permissions": {
+        "allow": [
+            "Bash(grep \" FAILED$\")",
+            "Bash(grep -A2 \" FAILED$\")",
+            "Bash(grep -A3 \" FAILED$\")",
+            "Bash(grep -v \"Executed\\\\|^--$\")",
+            "Bash(grep -E \"TOTAL:|FAILED$\")",
+            "Bash(node -e \"const c = require\\('chart.js'\\); console.log\\(Object.keys\\(c\\).filter\\(k => k.includes\\('Doughnut'\\) || k.includes\\('Controller'\\)\\)\\)\")",
+            "Bash(npm list *)",
+            "Bash(ng update *)",
+            "Bash(npm run *)",
+            "Bash(nvm ls *)"
+        ]
+    }
+}

.env.development

@@ -0,0 +1,2 @@
+APP_ENV="development"
+API_BASE_URL=http://localhost:3201

.env.production

@@ -0,0 +1,2 @@
+APP_ENV="production"
+API_BASE_URL=http://api.adastra-cbd.com/api

.env.sample

@@ -0,0 +1,2 @@
+APP_ENV="development"
+API_BASE_URL=http://localhost:3200/api

.eslintrc.json

@@ -1,19 +1,21 @@
 {
     "root": true,
-    "ignorePatterns": [
+    "ignorePatterns": ["projects/**/*"],
-        "projects/**/*"
+    "overrides": [
-    ],
+        {
-    "overrides": [{
+            "files": ["*.ts"],
-            "files": [
-                "*.ts"
-            ],
             "extends": [
                 "eslint:recommended",
                 "plugin:@typescript-eslint/recommended",
                 "plugin:@angular-eslint/recommended",
-                "plugin:@angular-eslint/template/process-inline-templates"
+                "plugin:@angular-eslint/template/process-inline-templates",
+                "prettier"
             ],
             "rules": {
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+                ],
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -33,13 +35,8 @@
             }
         },
         {
-            "files": [
+            "files": ["*.html"],
-                "*.html"
+            "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended",
-                "plugin:@angular-eslint/template/accessibility"
-            ],
             "rules": {}
         }
     ]

.husky/pre-commit

@@ -0,0 +1,5 @@
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+nvm use 20.19.6
+npm test -- --watch=false
+npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+20.19.6

.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+
+# auto generated files
+src/generated

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

angular.json

@@ -4,9 +4,7 @@
     "cli": {
         "packageManager": "npm",
         "analytics": false,
-    "schematicCollections": [
+        "schematicCollections": ["@angular-eslint/schematics"]
-      "@angular-eslint/schematics"
-    ]
     },
     "newProjectRoot": "projects",
     "projects": {
@@ -32,10 +30,7 @@
                         },
                         "index": "src/index.html",
                         "tsConfig": "tsconfig.app.json",
-            "polyfills": [
+                        "polyfills": ["@angular/localize/init", "zone.js"],
-              "@angular/localize/init",
-              "zone.js"
-            ],
                         "inlineStyleLanguage": "scss",
                         "assets": [
                             "src/favicon.ico",
@@ -47,10 +42,7 @@
                                 "output": "/"
                             }
                         ],
-            "styles": [
+                        "styles": ["src/styles/styles.scss"],
-              "node_modules/chartist/dist/index.scss",
-              "src/styles/styles.scss"
-            ],
                         "stylePreprocessorOptions": {
                             "includePaths": ["src/styles"]
                         },
@@ -67,8 +59,8 @@
                             "budgets": [
                                 {
                                     "type": "initial",
-                  "maximumWarning": "500kb",
+                                    "maximumWarning": "3mb",
-                  "maximumError": "1mb"
+                                    "maximumError": "5mb"
                                 },
                                 {
                                     "type": "anyComponentStyle",
@@ -140,33 +132,50 @@
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
-            "polyfills": [
+                        "polyfills": ["zone.js", "zone.js/testing"],
-              "zone.js",
-              "zone.js/testing"
-            ],
                         "tsConfig": "tsconfig.spec.json",
                         "inlineStyleLanguage": "scss",
-            "assets": [
+                        "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
-              "src/favicon.ico",
+                        "styles": ["src/styles/styles.scss"],
-              "src/assets",
+                        "scripts": [],
-              "src/manifest.webmanifest"
+                        "stylePreprocessorOptions": {
-            ],
+                            "includePaths": ["src/styles"]
-            "styles": [
+                        }
-              "src/styles/styles.scss"
-            ],
-            "scripts": []
                     }
                 },
                 "lint": {
                     "builder": "@angular-eslint/builder:lint",
                     "options": {
-            "lintFilePatterns": [
+                        "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
                     }
                 }
             }
         }
+    },
+    "schematics": {
+        "@schematics/angular:component": {
+            "type": "component"
+        },
+        "@schematics/angular:directive": {
+            "type": "directive"
+        },
+        "@schematics/angular:service": {
+            "type": "service"
+        },
+        "@schematics/angular:guard": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:interceptor": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:module": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:pipe": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:resolver": {
+            "typeSeparator": "."
+        }
     }
 }

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -17,51 +17,64 @@
         "test": "ng test"
     },
     "engines": {
-    "node": "^18.19.1 || ^20.11.1"
+        "node": "^20.19.0 || ^22.12.0"
     },
     "private": true,
     "dependencies": {
-    "@angular/animations": "^18.2.14",
+        "@angular/animations": "^21.2.10",
-    "@angular/cdk": "^18.2.14",
+        "@angular/cdk": "^21.2.8",
-    "@angular/common": "^18.2.14",
+        "@angular/common": "^21.2.10",
-    "@angular/compiler": "^18.2.14",
+        "@angular/compiler": "^21.2.10",
-    "@angular/core": "^18.2.14",
+        "@angular/core": "^21.2.10",
-    "@angular/forms": "^18.2.14",
+        "@angular/forms": "^21.2.10",
-    "@angular/google-maps": "^17.3.8",
+        "@angular/google-maps": "^21.2.8",
-    "@angular/localize": "^18.2.14",
+        "@angular/localize": "^21.2.10",
-    "@angular/material": "^18.2.14",
+        "@angular/material": "^21.2.8",
-    "@angular/platform-browser": "^18.2.14",
+        "@angular/platform-browser": "^21.2.10",
-    "@angular/platform-browser-dynamic": "^18.2.14",
+        "@angular/platform-browser-dynamic": "^21.2.10",
-    "@angular/router": "^18.2.14",
+        "@angular/router": "^21.2.10",
         "bootstrap": "^5.3.7",
         "chart.js": "^4.4.2",
         "chartist": "^1.3.0",
-    "ng-chartist": "^8.2.0",
         "ng2-charts": "^6.0.1",
         "ngx-skeleton-loader": "^9.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
-    "zone.js": "^0.14.10"
+        "zone.js": "^0.15.1"
     },
     "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.21",
+        "@angular-devkit/build-angular": "^21.2.8",
-    "@angular-eslint/builder": "18.4.3",
+        "@angular-eslint/builder": "21.3.1",
-    "@angular-eslint/eslint-plugin": "18.4.3",
+        "@angular-eslint/eslint-plugin": "21.3.1",
-    "@angular-eslint/eslint-plugin-template": "18.4.3",
+        "@angular-eslint/eslint-plugin-template": "21.3.1",
-    "@angular-eslint/schematics": "18.4.3",
+        "@angular-eslint/schematics": "21.3.1",
-    "@angular-eslint/template-parser": "18.4.3",
+        "@angular-eslint/template-parser": "21.3.1",
-    "@angular/cli": "^18.2.21",
+        "@angular/cli": "^21.2.8",
-    "@angular/compiler-cli": "^18.2.14",
+        "@angular/compiler-cli": "^21.2.10",
         "@types/jasmine": "~5.1.0",
         "@typescript-eslint/eslint-plugin": "7.2.0",
         "@typescript-eslint/parser": "7.2.0",
         "eslint": "^8.57.0",
+        "eslint-config-prettier": "^10.1.8",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
+        "lint-staged": "^16.4.0",
+        "prettier": "^3.8.3",
+        "typescript": "~5.9.3"
+    },
+    "lint-staged": {
+        "*.{ts,html,scss,json,md}": [
+            "prettier --write"
+        ],
+        "*.ts": [
+            "eslint --max-warnings=0"
+        ],
+        "*.html": [
+            "eslint --max-warnings=0"
+        ]
     }
 }

public/favicon/browserconfig.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/ms-icon-70x70.png"/>
+            <square150x150logo src="/ms-icon-150x150.png"/>
+            <square310x310logo src="/ms-icon-310x310.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/fonts/icomoon.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="home" d="M1024 369.556l-512 397.426-512-397.428v162.038l512 397.426 512-397.428zM896 384v-384h-256v256h-256v-256h-256v384l384 288z" />
+<glyph unicode="&#xe905;" glyph-name="pencil" d="M864 960c88.364 0 160-71.634 160-160 0-36.020-11.91-69.258-32-96l-64-64-224 224 64 64c26.742 20.090 59.978 32 96 32zM64 224l-64-288 288 64 592 592-224 224-592-592zM715.578 596.422l-448-448-55.156 55.156 448 448 55.156-55.156z" />
+<glyph unicode="&#xe93a;" glyph-name="cart" d="M384 32c0-53.019-42.981-96-96-96s-96 42.981-96 96c0 53.019 42.981 96 96 96s96-42.981 96-96zM1024 32c0-53.019-42.981-96-96-96s-96 42.981-96 96c0 53.019 42.981 96 96 96s96-42.981 96-96zM1024 448v384h-768c0 35.346-28.654 64-64 64h-192v-64h128l48.074-412.054c-29.294-23.458-48.074-59.5-48.074-99.946 0-70.696 57.308-128 128-128h768v64h-768c-35.346 0-64 28.654-64 64 0 0.218 0.014 0.436 0.016 0.656l831.984 127.344z" />
+<glyph unicode="&#xe942;" glyph-name="phone" d="M704 320c-64-64-64-128-128-128s-128 64-192 128-128 128-128 192 64 64 128 128-128 256-192 256-192-192-192-192c0-128 131.5-387.5 256-512s384-256 512-256c0 0 192 128 192 192s-192 256-256 192z" />
+<glyph unicode="&#xe945;" glyph-name="envelop" d="M928 832h-832c-52.8 0-96-43.2-96-96v-640c0-52.8 43.2-96 96-96h832c52.8 0 96 43.2 96 96v640c0 52.8-43.2 96-96 96zM398.74 409.628l-270.74-210.892v501.642l270.74-290.75zM176.38 704h671.24l-335.62-252-335.62 252zM409.288 398.302l102.712-110.302 102.71 110.302 210.554-270.302h-626.528l210.552 270.302zM625.26 409.628l270.74 290.75v-501.642l-270.74 210.892z" />
+<glyph unicode="&#xe953;" glyph-name="calendar" d="M320 576h128v-128h-128zM512 576h128v-128h-128zM704 576h128v-128h-128zM128 192h128v-128h-128zM320 192h128v-128h-128zM512 192h128v-128h-128zM320 384h128v-128h-128zM512 384h128v-128h-128zM704 384h128v-128h-128zM128 384h128v-128h-128zM832 960v-64h-128v64h-448v-64h-128v64h-128v-1024h960v1024h-128zM896 0h-832v704h832v-704z" />
+<glyph unicode="&#xe971;" glyph-name="user" d="M576 253.388v52.78c70.498 39.728 128 138.772 128 237.832 0 159.058 0 288-192 288s-192-128.942-192-288c0-99.060 57.502-198.104 128-237.832v-52.78c-217.102-17.748-384-124.42-384-253.388h896c0 128.968-166.898 235.64-384 253.388z" />
+<glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
+<glyph unicode="&#xe9cb;" glyph-name="link" d="M440.236 324.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-52c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
+</font></defs></svg>

public/images/logo_ad_astra_small_001.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Logo_Ad_Astra" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="218px" height="48px" viewBox="0 0 218 48" enable-background="new 0 0 218 48" xml:space="preserve">
+<g id="Ad_Astra_3_">
+	<g>
+		<polygon fill="#D7C067" points="66.158,26.352 64.543,20.319 54.508,20.319 52.896,26.352 		"/>
+		<polygon fill="#D7C067" points="62.985,38.615 63.716,41.5 70.209,41.5 66.724,28.614 60.308,28.614 61.658,33.665 57.394,33.665 
+			58.745,28.614 52.25,28.614 48.842,41.5 55.299,41.5 56.069,38.615 		"/>
+	</g>
+	<g>
+		<path fill="#D7C067" d="M92.467,26.352v-1.212c0-1.325-0.508-2.472-1.51-3.409c-1.003-0.937-2.23-1.412-3.647-1.412H71.733v6.033
+			H92.467z"/>
+		<path fill="#D7C067" d="M92.467,28.614h-6.456v6.853H78.19v-6.853h-6.457V41.5H87.31c1.418,0,2.645-0.475,3.647-1.411
+			c1.002-0.938,1.51-2.083,1.51-3.409V28.614z"/>
+	</g>
+	<g>
+		<polygon fill="#D7C067" points="119.495,26.352 117.88,20.319 107.846,20.319 106.232,26.352 		"/>
+		<polygon fill="#D7C067" points="116.322,38.615 117.053,41.5 123.546,41.5 120.061,28.614 113.644,28.614 114.995,33.665 
+			110.73,33.665 112.081,28.614 105.588,28.614 102.179,41.5 108.635,41.5 109.406,38.615 		"/>
+	</g>
+	<g>
+		<path fill="#D7C067" d="M145.803,33.434c0-1.324-0.508-2.471-1.509-3.408c-1.002-0.937-2.229-1.412-3.647-1.412h-15.571
+			c0.056,1.229,0.561,2.297,1.505,3.179c1.001,0.936,2.229,1.41,3.647,1.41h9.121v2.264H125.07V41.5h15.576
+			c1.418,0,2.645-0.475,3.647-1.411c1.001-0.938,1.509-2.083,1.509-3.409V33.434z"/>
+		<path fill="#D7C067" d="M125.07,26.352h20.732v-6.033h-15.575c-1.417,0-2.646,0.475-3.647,1.412
+			c-1.002,0.936-1.51,2.084-1.51,3.409V26.352z"/>
+	</g>
+	<g>
+		<rect x="155.362" y="28.614" fill="#D7C067" width="6.456" height="12.886"/>
+		<rect x="148.223" y="20.319" fill="#D7C067" width="20.733" height="6.033"/>
+	</g>
+	<g>
+		<path fill="#D7C067" d="M192.109,26.352v-1.212c0-1.325-0.508-2.472-1.51-3.409c-1.003-0.937-2.23-1.412-3.647-1.412h-15.576
+			v6.033H192.109z"/>
+		<path fill="#D7C067" d="M171.375,41.5h6.456v-8.296h7.823V41.5h6.456v-8.066c0-0.679-0.481-1.473-1.432-2.362l-0.174-0.163
+			l0.174-0.163c0.846-0.79,1.319-1.506,1.414-2.132h-20.716V41.5z"/>
+	</g>
+	<g>
+		<polygon fill="#D7C067" points="207.776,38.615 208.508,41.5 215,41.5 211.515,28.614 205.099,28.614 206.45,33.665 
+			202.185,33.665 203.536,28.614 197.041,28.614 193.632,41.5 200.088,41.5 200.861,38.615 		"/>
+		<polygon fill="#D7C067" points="210.948,26.352 209.335,20.319 199.3,20.319 197.686,26.352 		"/>
+	</g>
+</g>
+<g id="Star_1_">
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#DDDCDB" d="M67.011,15.14c-15.125-0.415-30.13,11.212-42.833,19.917
+		l5.321-16.303l2.163,5.883c0.43,1.075,0.917,0.809,2.133,0.276C45.682,19.162,51.53,13.062,67.011,15.14z"/>
+	<path fill="#D7C067" d="M21.111,39.24l8.584-6.51l9.078,9.012l-8.772-5.538L16.491,46l4.396-17.216L3,19.504l21.795,7.159
+		L21.111,39.24z"/>
+	<path fill="#D7C067" d="M25.738,23.656L7.23,18.529l16.482,1.101l2.655-8.707l2.032,5.081L25.738,23.656z"/>
+	<path fill="#D7C067" d="M28.784,3l6.61,15.685c0.112,0.257,0.211,0.435,0.442,0.326c9.763-4.918,17.872-12.196,41.689-4.196
+		c-25.071-5.188-30.394,2.068-43.894,8.159c-0.269,0.111-0.497-0.09-0.729-0.662L27.238,8.07L28.784,3z"/>
+</g>
+</svg>

public/images/logo_ad_astra_web_001.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Logo_Ad_Astra" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="272px" height="60px" viewBox="0 0 272 60" enable-background="new 0 0 272 60" xml:space="preserve">
+<g id="Ad_Astra_3_">
+	<g>
+		<polygon fill="#D7C067" points="82.246,32.325 80.22,24.75 67.628,24.75 65.604,32.325 		"/>
+		<polygon fill="#D7C067" points="78.265,47.726 79.182,51.349 87.329,51.349 82.955,35.167 74.905,35.167 76.599,41.509 
+			71.25,41.509 72.944,35.166 64.795,35.167 60.519,51.349 68.62,51.349 69.587,47.726 		"/>
+	</g>
+	<g>
+		<path fill="#D7C067" d="M115.256,32.325v-1.523c0-1.663-0.637-3.104-1.895-4.28c-1.258-1.176-2.797-1.773-4.575-1.773H89.241
+			v7.576H115.256z"/>
+		<path fill="#D7C067" d="M115.256,35.167h-8.1v8.606h-9.814v-8.606h-8.101v16.182h19.544c1.779,0,3.318-0.596,4.575-1.772
+			c1.258-1.177,1.895-2.617,1.895-4.28V35.167z"/>
+	</g>
+	<g>
+		<polygon fill="#D7C067" points="149.168,32.325 147.142,24.75 134.552,24.75 132.527,32.325 		"/>
+		<polygon fill="#D7C067" points="145.187,47.726 146.104,51.349 154.25,51.349 149.878,35.167 141.827,35.167 143.522,41.509 
+			138.171,41.509 139.866,35.166 131.718,35.167 127.441,51.349 135.542,51.349 136.51,47.726 		"/>
+	</g>
+	<g>
+		<path fill="#D7C067" d="M182.177,41.219c0-1.662-0.637-3.103-1.894-4.279c-1.257-1.177-2.797-1.773-4.576-1.773h-19.537
+			c0.07,1.543,0.704,2.885,1.888,3.992c1.257,1.175,2.797,1.771,4.576,1.771h11.444v2.843h-17.915v7.576h19.543
+			c1.779,0,3.319-0.596,4.576-1.772c1.256-1.177,1.894-2.617,1.894-4.28V41.219z"/>
+		<path fill="#D7C067" d="M156.164,32.325h26.013V24.75h-19.542c-1.778,0-3.319,0.597-4.576,1.773
+			c-1.257,1.175-1.895,2.617-1.895,4.28V32.325z"/>
+	</g>
+	<g>
+		<rect x="194.171" y="35.167" fill="#D7C067" width="8.101" height="16.182"/>
+		<rect x="185.214" y="24.75" fill="#D7C067" width="26.015" height="7.576"/>
+	</g>
+	<g>
+		<path fill="#D7C067" d="M240.278,32.325v-1.523c0-1.663-0.637-3.104-1.895-4.28c-1.259-1.176-2.798-1.773-4.576-1.773h-19.544
+			v7.576H240.278z"/>
+		<path fill="#D7C067" d="M214.264,51.349h8.1V40.93h9.815v10.418h8.1V41.219c0-0.852-0.604-1.85-1.796-2.966l-0.219-0.204
+			l0.219-0.205c1.061-0.992,1.655-1.891,1.774-2.677h-25.992V51.349z"/>
+	</g>
+	<g>
+		<polygon fill="#D7C067" points="259.936,47.726 260.854,51.349 269,51.349 264.627,35.167 256.577,35.167 258.272,41.509 
+			252.92,41.509 254.616,35.166 246.466,35.167 242.189,51.349 250.291,51.349 251.26,47.726 		"/>
+		<polygon fill="#D7C067" points="263.916,32.325 261.893,24.75 249.301,24.75 247.275,32.325 		"/>
+	</g>
+</g>
+<g id="Star_1_">
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#DDDCDB" d="M83.315,18.245c-18.977-0.521-37.805,14.08-53.743,25.012
+		l6.676-20.473l2.715,7.387c0.54,1.35,1.15,1.016,2.676,0.347C56.554,23.297,63.892,15.637,83.315,18.245z"/>
+	<path fill="#D7C067" d="M25.725,48.51l10.771-8.175l11.39,11.317l-11.007-6.955L19.927,57l5.516-21.621L3,23.726l27.347,8.99
+		L25.725,48.51z"/>
+	<path fill="#D7C067" d="M31.53,28.94L8.308,22.501l20.681,1.383l3.331-10.934l2.55,6.38L31.53,28.94z"/>
+	<path fill="#D7C067" d="M35.352,3l8.294,19.697c0.14,0.322,0.265,0.545,0.554,0.408C56.45,16.93,66.625,7.79,96.508,17.836
+		c-31.457-6.516-38.135,2.598-55.074,10.246c-0.337,0.14-0.624-0.113-0.914-0.832L33.412,9.368L35.352,3z"/>
+</g>
+</svg>

public/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/favicon\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/favicon\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/favicon\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/favicon\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/favicon\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/favicon\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/app/_components/feedArticleList/feedArticleList.tsx

@@ -0,0 +1,34 @@
+import { Pagination, PaginationItem } from "@/modules/common/components/pagination";
+import { calcTotalPageNumber } from "@/modules/common/functions/pagination";
+import { ArticleCard } from "@/modules/features/article/components/articleCard";
+import { fetchFeedArticles } from "@/modules/features/article/fetch/fetchArticleList";
+
+const Pages = ({ totalPages, currentPage }: { totalPages: number; currentPage: number }) => (
+  <Pagination>
+    {[...Array(totalPages)].map((_, index) => {
+      const page = index + 1;
+      const href = `/?tab=global&page=${page}`;
+      return (
+        <PaginationItem href={href} active={page === currentPage} key={index}>
+          {page}
+        </PaginationItem>
+      );
+    })}
+  </Pagination>
+);
+
+export const FeedArticleList = async ({ currentPage }: { currentPage: number }) => {
+  const { articles, articlesCount } = await fetchFeedArticles(currentPage);
+  const totalPages = calcTotalPageNumber(articlesCount, 10);
+
+  return articles.length < 1 ? (
+    <p>No articles found.</p>
+  ) : (
+    <>
+      {articles.map((article, index) => (
+        <ArticleCard key={index} article={article} />
+      ))}
+      {1 < totalPages && <Pages currentPage={currentPage} totalPages={totalPages} />}
+    </>
+  );
+};

src/app/_components/feedArticleList/index.ts

@@ -0,0 +1 @@
+export * from "./feedArticleList";

src/app/_components/globalArticleList/globalArticleList.tsx

@@ -0,0 +1,34 @@
+import { Pagination, PaginationItem } from "@/modules/common/components/pagination";
+import { calcTotalPageNumber } from "@/modules/common/functions/pagination";
+import { ArticleCard } from "@/modules/features/article/components/articleCard";
+import { fetchGlobalArticles } from "@/modules/features/article/fetch/fetchArticleList";
+
+const Pages = ({ totalPages, currentPage }: { totalPages: number; currentPage: number }) => (
+  <Pagination>
+    {[...Array(totalPages)].map((_, index) => {
+      const page = index + 1;
+      const href = `/?tab=global&page=${page}`;
+      return (
+        <PaginationItem href={href} active={page === currentPage} key={index}>
+          {page}
+        </PaginationItem>
+      );
+    })}
+  </Pagination>
+);
+
+export const GlobalArticleList = async ({ currentPage }: { currentPage: number }) => {
+  const { articles, articlesCount } = await fetchGlobalArticles(currentPage);
+  const totalPages = calcTotalPageNumber(articlesCount, 10);
+
+  return articles.length < 1 ? (
+    <p>No articles found.</p>
+  ) : (
+    <>
+      {articles.map((article, index) => (
+        <ArticleCard key={index} article={article} />
+      ))}
+      {1 < totalPages && <Pages currentPage={currentPage} totalPages={totalPages} />}
+    </>
+  );
+};

src/app/_components/globalArticleList/index.ts

@@ -0,0 +1 @@
+export * from "./globalArticleList";

src/app/_components/layoutElements/index.ts

@@ -0,0 +1,2 @@
+export * from "./logoHeader";
+export * from "./logoSmall";

src/app/_components/layoutElements/logoHeader.tsx

@@ -0,0 +1,44 @@
+const LogoHeader: React.FC = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="272" height="60" viewBox="0 0 272 60">
+        <g id="Ad_Astra_3_">
+            <g>
+                <polygon fill="#D7C067" points="82.246,32.325 80.22,24.75 67.628,24.75 65.604,32.325   " />
+                <polygon fill="#D7C067" points="78.265,47.726 79.182,51.349 87.329,51.349 82.955,35.167 74.905,35.167 76.599,41.509     71.25,41.509 72.944,35.166 64.795,35.167 60.519,51.349 68.62,51.349 69.587,47.726   " />
+            </g>
+            <g>
+                <path fill="#D7C067" d="M115.256,32.325v-1.523c0-1.663-0.637-3.104-1.895-4.28c-1.258-1.176-2.797-1.773-4.575-1.773H89.241    v7.576H115.256z" />
+                <path fill="#D7C067" d="M115.256,35.167h-8.1v8.606h-9.814v-8.606h-8.101v16.182h19.544c1.779,0,3.318-0.596,4.575-1.772    c1.258-1.177,1.895-2.617,1.895-4.28V35.167z" />
+            </g>
+            <g>
+                <polygon fill="#D7C067" points="149.168,32.325 147.142,24.75 134.552,24.75 132.527,32.325   " />
+                <polygon fill="#D7C067" points="145.187,47.726 146.104,51.349 154.25,51.349 149.878,35.167 141.827,35.167 143.522,41.509     138.171,41.509 139.866,35.166 131.718,35.167 127.441,51.349 135.542,51.349 136.51,47.726   " />
+            </g>
+            <g>
+                <path fill="#D7C067" d="M182.177,41.219c0-1.662-0.637-3.103-1.894-4.279c-1.257-1.177-2.797-1.773-4.576-1.773h-19.537    c0.07,1.543,0.704,2.885,1.888,3.992c1.257,1.175,2.797,1.771,4.576,1.771h11.444v2.843h-17.915v7.576h19.543    c1.779,0,3.319-0.596,4.576-1.772c1.256-1.177,1.894-2.617,1.894-4.28V41.219z" />
+                <path fill="#D7C067" d="M156.164,32.325h26.013V24.75h-19.542c-1.778,0-3.319,0.597-4.576,1.773    c-1.257,1.175-1.895,2.617-1.895,4.28V32.325z" />
+            </g>
+            <g>
+                <rect x="194.171" y="35.167" fill="#D7C067" width="8.101" height="16.182" />
+                <rect x="185.214" y="24.75" fill="#D7C067" width="26.015" height="7.576" />
+            </g>
+            <g>
+                <path fill="#D7C067" d="M240.278,32.325v-1.523c0-1.663-0.637-3.104-1.895-4.28c-1.259-1.176-2.798-1.773-4.576-1.773h-19.544    v7.576H240.278z" />
+                <path fill="#D7C067" d="M214.264,51.349h8.1V40.93h9.815v10.418h8.1V41.219c0-0.852-0.604-1.85-1.796-2.966l-0.219-0.204    l0.219-0.205c1.061-0.992,1.655-1.891,1.774-2.677h-25.992V51.349z" />
+            </g>
+            <g>
+                <polygon fill="#D7C067" points="259.936,47.726 260.854,51.349 269,51.349 264.627,35.167 256.577,35.167 258.272,41.509     252.92,41.509 254.616,35.166 246.466,35.167 242.189,51.349 250.291,51.349 251.26,47.726   " />
+                <polygon fill="#D7C067" points="263.916,32.325 261.893,24.75 249.301,24.75 247.275,32.325   " />
+            </g>
+        </g>
+        <g id="Star_1_">
+            <path fillRule="evenodd" clipRule="evenodd" fill="#DDDCDB" d="M83.315,18.245c-18.977-0.521-37.805,14.08-53.743,25.012   l6.676-20.473l2.715,7.387c0.54,1.35,1.15,1.016,2.676,0.347C56.554,23.297,63.892,15.637,83.315,18.245z" />
+            <path fill="#D7C067" d="M25.725,48.51l10.771-8.175l11.39,11.317l-11.007-6.955L19.927,57l5.516-21.621L3,23.726l27.347,8.99   L25.725,48.51z" />
+            <path fill="#D7C067" d="M31.53,28.94L8.308,22.501l20.681,1.383l3.331-10.934l2.55,6.38L31.53,28.94z" />
+            <path fill="#D7C067" d="M35.352,3l8.294,19.697c0.14,0.322,0.265,0.545,0.554,0.408C56.45,16.93,66.625,7.79,96.508,17.836   c-31.457-6.516-38.135,2.598-55.074,10.246c-0.337,0.14-0.624-0.113-0.914-0.832L33.412,9.368L35.352,3z" />
+        </g>
+        </svg>
+    );
+};
+
+export default LogoHeader;

src/app/_components/layoutElements/logoSmall.tsx

@@ -0,0 +1,44 @@
+const LogoSmall: React.FC = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="218" height="48" viewBox="0 0 218 48">
+        <g id="Ad_Astra_3_">
+            <g>
+                <polygon fill="#D7C067" points="66.158,26.352 64.543,20.319 54.508,20.319 52.896,26.352   " />
+                <polygon fill="#D7C067" points="62.985,38.615 63.716,41.5 70.209,41.5 66.724,28.614 60.308,28.614 61.658,33.665 57.394,33.665     58.745,28.614 52.25,28.614 48.842,41.5 55.299,41.5 56.069,38.615   " />
+            </g>
+            <g>
+                <path fill="#D7C067" d="M92.467,26.352v-1.212c0-1.325-0.508-2.472-1.51-3.409c-1.003-0.937-2.23-1.412-3.647-1.412H71.733v6.033    H92.467z" />
+                <path fill="#D7C067" d="M92.467,28.614h-6.456v6.853H78.19v-6.853h-6.457V41.5H87.31c1.418,0,2.645-0.475,3.647-1.411    c1.002-0.938,1.51-2.083,1.51-3.409V28.614z" />
+            </g>
+            <g>
+                <polygon fill="#D7C067" points="119.495,26.352 117.88,20.319 107.846,20.319 106.232,26.352   " />
+                <polygon fill="#D7C067" points="116.322,38.615 117.053,41.5 123.546,41.5 120.061,28.614 113.644,28.614 114.995,33.665     110.73,33.665 112.081,28.614 105.588,28.614 102.179,41.5 108.635,41.5 109.406,38.615   " />
+            </g>
+            <g>
+                <path fill="#D7C067" d="M145.803,33.434c0-1.324-0.508-2.471-1.509-3.408c-1.002-0.937-2.229-1.412-3.647-1.412h-15.571    c0.056,1.229,0.561,2.297,1.505,3.179c1.001,0.936,2.229,1.41,3.647,1.41h9.121v2.264H125.07V41.5h15.576    c1.418,0,2.645-0.475,3.647-1.411c1.001-0.938,1.509-2.083,1.509-3.409V33.434z" />
+                <path fill="#D7C067" d="M125.07,26.352h20.732v-6.033h-15.575c-1.417,0-2.646,0.475-3.647,1.412    c-1.002,0.936-1.51,2.084-1.51,3.409V26.352z" />
+            </g>
+            <g>
+                <rect x="155.362" y="28.614" fill="#D7C067" width="6.456" height="12.886" />
+                <rect x="148.223" y="20.319" fill="#D7C067" width="20.733" height="6.033" />
+            </g>
+            <g>
+                <path fill="#D7C067" d="M192.109,26.352v-1.212c0-1.325-0.508-2.472-1.51-3.409c-1.003-0.937-2.23-1.412-3.647-1.412h-15.576    v6.033H192.109z" />
+                <path fill="#D7C067" d="M171.375,41.5h6.456v-8.296h7.823V41.5h6.456v-8.066c0-0.679-0.481-1.473-1.432-2.362l-0.174-0.163    l0.174-0.163c0.846-0.79,1.319-1.506,1.414-2.132h-20.716V41.5z" />
+            </g>
+            <g>
+                <polygon fill="#D7C067" points="207.776,38.615 208.508,41.5 215,41.5 211.515,28.614 205.099,28.614 206.45,33.665     202.185,33.665 203.536,28.614 197.041,28.614 193.632,41.5 200.088,41.5 200.861,38.615   " />
+                <polygon fill="#D7C067" points="210.948,26.352 209.335,20.319 199.3,20.319 197.686,26.352   " />
+            </g>
+        </g>
+        <g id="Star_1_">
+            <path fillRule="evenodd" clipRule="evenodd" fill="#DDDCDB" d="M67.011,15.14c-15.125-0.415-30.13,11.212-42.833,19.917   l5.321-16.303l2.163,5.883c0.43,1.075,0.917,0.809,2.133,0.276C45.682,19.162,51.53,13.062,67.011,15.14z" />
+            <path fill="#D7C067" d="M21.111,39.24l8.584-6.51l9.078,9.012l-8.772-5.538L16.491,46l4.396-17.216L3,19.504l21.795,7.159   L21.111,39.24z" />
+            <path fill="#D7C067" d="M25.738,23.656L7.23,18.529l16.482,1.101l2.655-8.707l2.032,5.081L25.738,23.656z" />
+            <path fill="#D7C067" d="M28.784,3l6.61,15.685c0.112,0.257,0.211,0.435,0.442,0.326c9.763-4.918,17.872-12.196,41.689-4.196   c-25.071-5.188-30.394,2.068-43.894,8.159c-0.269,0.111-0.497-0.09-0.729-0.662L27.238,8.07L28.784,3z" />
+        </g>
+        </svg>
+    );
+};
+
+export default LogoSmall;

src/app/_components/tagArticleList/index.ts

@@ -0,0 +1 @@
+export * from "./tagArticleList";

src/app/_components/tagArticleList/tagArticleList.tsx

@@ -0,0 +1,34 @@
+import { Pagination, PaginationItem } from "@/modules/common/components/pagination";
+import { calcTotalPageNumber } from "@/modules/common/functions/pagination";
+import { ArticleCard } from "@/modules/features/article/components/articleCard";
+import { fetchArticlesByTag } from "@/modules/features/article/fetch/fetchArticleList";
+
+const Pages = ({ totalPages, currentPage }: { totalPages: number; currentPage: number }) => (
+  <Pagination>
+    {[...Array(totalPages)].map((_, index) => {
+      const page = index + 1;
+      const href = `/?tab=global&page=${page}`;
+      return (
+        <PaginationItem href={href} active={page === currentPage} key={index}>
+          {page}
+        </PaginationItem>
+      );
+    })}
+  </Pagination>
+);
+
+export const TagArticleList = async ({ tag, currentPage }: { tag: string; currentPage: number }) => {
+  const { articles, articlesCount } = await fetchArticlesByTag(tag, currentPage);
+  const totalPages = calcTotalPageNumber(articlesCount, 10);
+
+  return articles.length < 1 ? (
+    <p>No articles found.</p>
+  ) : (
+    <>
+      {articles.map((article, index) => (
+        <ArticleCard key={index} article={article} />
+      ))}
+      {1 < totalPages && <Pages currentPage={currentPage} totalPages={totalPages} />}
+    </>
+  );
+};

src/app/_components/tagList/container.tsx

@@ -0,0 +1,7 @@
+import { fetchTagsList } from "@/modules/features/article/fetch/fetchTagsList";
+import { TagList as TagListPresentation } from "./presentation";
+
+export const TagList = async () => {
+  const tags = await fetchTagsList();
+  return <TagListPresentation tags={tags} />;
+};

src/app/_components/tagList/index.ts

@@ -0,0 +1 @@
+export * from "./container";

src/app/_components/tagList/presentation.tsx

@@ -0,0 +1,16 @@
+import { Tag } from "@/modules/features/article/components/tag";
+
+type Props = { tags: string[] };
+
+export const TagList = ({ tags }: Props) => (
+  <div className="sidebar">
+    <p>Popular Tags</p>
+    <div className="tag-list">
+      {tags.map((tag, index) => (
+        <Tag component="a" variant="filled" href={`/?tab=tag&tag=${tag}`} key={index}>
+          {tag}
+        </Tag>
+      ))}
+    </div>
+  </div>
+);

src/app/_components/timeClock/index.ts

@@ -0,0 +1 @@
+export * from "./timeClock";

src/app/_components/timeClock/timeClock.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+const TimeClock: React.FC = () => {
+    useEffect(() => {
+        const numbers = [
+            [1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1], // 0
+            [1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], // 1
+            [1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1], // 2
+            [1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 3
+            [1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1], // 4
+            [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 5
+            [1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 6
+            [1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], // 7
+            [1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 8
+            [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 9
+        ];
+
+        const blocks: Array<Element[]> = [];
+        const digits = Array.from(document.querySelectorAll(".block"));
+
+        for (let i = 0; i < 4; i++) {
+            blocks.push(digits.slice(i * 15, i * 15 + 15));
+        }
+
+        const setNum = (block: Array<Element>, num: number) => {
+            const n = numbers[num];
+            for (let i = 0; i < block.length; i++) {
+                block[i].classList[n[i] === 1 ? "add" : "remove"]("active");
+            }
+        };
+
+        const time = {
+            s: "",
+            m: "",
+            h: "",
+            p: 0,
+        };
+
+        // time loop
+        const animator = () => {
+            const d = new Date();
+            let h = d.getHours().toString(),
+                m = d.getMinutes().toString(),
+                s = d.getSeconds().toString();
+
+            s = s.length === 1 ? "0" + s : s;
+            m = m.length === 1 ? "0" + m : m;
+            h = h.length === 1 ? "0" + h : h;
+
+            if (s !== time.s) {
+                for (let i = 0; i < digits.length; i++) {
+                    const d = digits[i];
+                    if (i === +s) {
+                        d.classList.add("second");
+                        if (time.p !== null) digits[time.p].classList.remove("second");
+                        time.p = i;
+                        time.s = s;
+                    }
+                }
+            }
+
+            if (m !== time.m) {
+                setNum(blocks[2], parseInt(Array.from(m)[0]));
+                setNum(blocks[3], parseInt(Array.from(m)[1]));
+                time.m = m;
+            }
+
+            if (h !== time.h) {
+                setNum(blocks[0], parseInt(Array.from(h)[0]));
+                setNum(blocks[1], parseInt(Array.from(h)[1]));
+                time.h = h;
+            }
+            window.requestAnimationFrame(animator);
+        };
+
+        // init
+        window.requestAnimationFrame(animator);
+
+        // toggle button
+        const d = new Date();
+        const days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
+        const months = [
+            "Janvier",
+            "Février",
+            "Mars",
+            "Avril",
+            "Mai",
+            "Juin",
+            "Juillet",
+            "Août",
+            "Septembre",
+            "Octobre",
+            "Novembre",
+            "Décembre",
+        ];
+        const lib_d = days[d.getDay()];
+        const lib_m = months[d.getMonth()];
+        const lib_n = d.getDate();
+        const lib_y = d.getFullYear();
+        document.getElementById("datelib")!.innerHTML = lib_d + " " + lib_n + " " + lib_m + " " + lib_y;
+    }, []);
+
+    return (
+        <>
+            <div className="date d-flex mb-2 pt-2">
+                <div className="flex-grow-1"></div>
+                <div className="datelib mt-2 pt-1 ps-1 font-monospace fs-5">
+                    <span className="icon-calendar me-2" aria-hidden="true"></span>
+                    <span id="datelib"></span>
+                </div>
+            </div>
+            <div className="time d-flex">
+                <div className="flex-grow-1"></div>
+                <div className="clock position-relative d-flex flex-column flex-wrap">
+                    <div className="block" data-num="0"></div>
+                    <div className="block" data-num="1"></div>
+                    <div className="block" data-num="2"></div>
+                    <div className="block" data-num="3"></div>
+                    <div className="block" data-num="4"></div>
+                    <div className="block" data-num="5"></div>
+                    <div className="block" data-num="6"></div>
+                    <div className="block" data-num="7"></div>
+                    <div className="block" data-num="8"></div>
+                    <div className="block" data-num="9"></div>
+                    <div className="block" data-num="10"></div>
+                    <div className="block" data-num="11"></div>
+                    <div className="block" data-num="12"></div>
+                    <div className="block" data-num="13"></div>
+                    <div className="block" data-num="14"></div>
+                    <div className="block" data-num="15"></div>
+                    <div className="block" data-num="16"></div>
+                    <div className="block" data-num="17"></div>
+                    <div className="block" data-num="18"></div>
+                    <div className="block" data-num="19"></div>
+                    <div className="block" data-num="20"></div>
+                    <div className="block" data-num="21"></div>
+                    <div className="block" data-num="22"></div>
+                    <div className="block" data-num="23"></div>
+                    <div className="block" data-num="24"></div>
+                    <div className="block" data-num="25"></div>
+                    <div className="block" data-num="26"></div>
+                    <div className="block" data-num="27"></div>
+                    <div className="block" data-num="28"></div>
+                    <div className="block" data-num="29"></div>
+                    <div className="block" data-num="30"></div>
+                    <div className="block" data-num="31"></div>
+                    <div className="block" data-num="32"></div>
+                    <div className="block" data-num="33"></div>
+                    <div className="block" data-num="34"></div>
+                    <div className="block" data-num="35"></div>
+                    <div className="block" data-num="36"></div>
+                    <div className="block" data-num="37"></div>
+                    <div className="block" data-num="38"></div>
+                    <div className="block" data-num="39"></div>
+                    <div className="block" data-num="40"></div>
+                    <div className="block" data-num="41"></div>
+                    <div className="block" data-num="42"></div>
+                    <div className="block" data-num="43"></div>
+                    <div className="block" data-num="44"></div>
+                    <div className="block" data-num="45"></div>
+                    <div className="block" data-num="46"></div>
+                    <div className="block" data-num="47"></div>
+                    <div className="block" data-num="48"></div>
+                    <div className="block" data-num="49"></div>
+                    <div className="block" data-num="50"></div>
+                    <div className="block" data-num="51"></div>
+                    <div className="block" data-num="52"></div>
+                    <div className="block" data-num="53"></div>
+                    <div className="block" data-num="54"></div>
+                    <div className="block" data-num="55"></div>
+                    <div className="block" data-num="56"></div>
+                    <div className="block" data-num="57"></div>
+                    <div className="block" data-num="58"></div>
+                    <div className="block" data-num="59"></div>
+                    <div className="divider position-absolute"></div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default TimeClock;

src/app/_types/index.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const SearchParams = z.object({
+  page: z.coerce.number().int().min(1).catch(1),
+  tab: z.enum(["yours", "global", "tag"]).default("global"),
+  tag: z.string().optional(),
+});
+
+export type SearchParams = z.infer<typeof SearchParams>;

src/app/app.component.spec.ts

@@ -1,10 +1,20 @@
 import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNativeDateAdapter } from '@angular/material/core';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        provideNativeDateAdapter(),
+      ],
     }).compileComponents();
   });
 
@@ -14,16 +24,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'adastra_angular' title`, () => {
+  it(`should have the 'Ad Astra' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('adastra_angular');
+    expect(app.title).toEqual('Ad Astra');
   });
 
-  it('should render title', () => {
+  it('should render the full layout', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, adastra_angular');
+    expect(compiled.querySelector('app-full-layout')).toBeTruthy();
   });
 });

src/app/app.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, AfterContentInit } from '@angular/core';
+import { Component, OnInit, AfterContentInit, inject } from '@angular/core';
 import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, provideNativeDateAdapter } from '@angular/material/core';
 import { Title } from '@angular/platform-browser';
 
 import { FullComponent } from '@components/shared/layout';
-import { UserService } from "@services";
+import { UserService } from '@services';
 
 export const MY_FORMATS = {
     parse: {
@@ -19,24 +19,22 @@ export const MY_FORMATS = {
 
 @Component({
     selector: 'app-root',
-    standalone: true,
+    imports: [FullComponent],
-    imports: [
-        FullComponent
-    ],
     providers: [
         { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
         { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        provideNativeDateAdapter(MY_FORMATS)
+        provideNativeDateAdapter(MY_FORMATS),
     ],
     templateUrl: './app.component.html',
-    styleUrl: './app.component.scss'
+    styleUrl: './app.component.scss',
 })
 export class AppComponent implements OnInit, AfterContentInit {
+    private userService = inject(UserService);
+    private titleService = inject(Title);
+
     public title = 'Ad Astra';
     public appClass = 'grayscale';
 
-    constructor(private userService: UserService, private titleService: Title) { }
-
     ngOnInit() {
         this.userService.populate();
         this.titleService.setTitle(this.title);

src/app/article/[slug]/_components/articleArea/articleArea.module.css

@@ -0,0 +1,9 @@
+.actions {
+  & * + * {
+    margin-left: 10px;
+  }
+}
+
+.action-btn + .action-btn {
+  margin-left: 5px;
+}

src/app/article/[slug]/_components/articleArea/articleArea.tsx

@@ -0,0 +1,80 @@
+import { Container, Col, Row } from "react-bootstrap";
+import { Button } from "@/modules/common/components/button";
+import { DeleteArticleButton } from "@/modules/features/article/components/deleteArticleButton";
+import { FavoriteButton } from "@/modules/features/article/components/favoriteButton";
+import { Tag } from "@/modules/features/article/components/tag";
+import { fetchArticle } from "@/modules/features/article/fetch/fetchArticle";
+import { convertMarkdownToHtml } from "@/modules/features/article/functions";
+import { FollowButton } from "@/modules/features/profile/components/followButton";
+import { Article, User } from "@/utils/types/models";
+import Link from "next/link";
+import Image from "next/image";
+import { ReactNode } from "react";
+import styles from "./articleArea.module.css";
+import { showDeleteArticleButton, showEditArticleButton, showFollowButton } from "./functions";
+import { getSession } from "@/utils/auth/session";
+import { fetchCurrentUser } from "@/modules/features/auth/fetch/fetchCurrentUser";
+
+const Actions = ({ article, currentUser }: { article: Article; currentUser?: User }) => {
+    const profile = article.author;
+
+    return (
+        <div className="article-meta">
+            <Link href={`/profile/${profile.username}`}>{profile.image && <Image src={profile.image} alt="" />}</Link>
+            <div className="info">
+                <Link href={`/profile/${profile.username}`} className="author">
+                    {profile.username}
+                </Link>
+                <span className="date">{article.createdAt.toDateString()}</span>
+            </div>
+            {showFollowButton(profile.username, currentUser) && (
+                <FollowButton {...profile} className={styles["action-btn"]} />
+            )}
+            <FavoriteButton {...article} showMessage={true} className={styles["action-btn"]} />
+            {showEditArticleButton(profile.username, currentUser) && (
+                <Button component="a" href={`/editor/${article.slug}`} color="secondary" className={styles["action-btn"]}>
+                    <i className="ion-edit"></i> Edit Article
+                </Button>
+            )}
+            {showDeleteArticleButton(profile.username, currentUser) && (
+                <DeleteArticleButton slug={article.slug} className={styles["action-btn"]} />
+            )}
+        </div>
+    );
+};
+
+export const ArticleArea = async ({ slug, children }: { slug: string; children: ReactNode }) => {
+    const article = await fetchArticle(slug);
+    const body = await convertMarkdownToHtml(article.body);
+    const currentUser = (await getSession()) ? await fetchCurrentUser() : undefined;
+
+    return (
+        <section className="article-page">
+            <Container className="banner">
+                <h1>{article.title}</h1>
+                <Actions article={article} currentUser={currentUser} />
+            </Container>
+            <Container className="page">
+                <Row className="article-content">
+                    <Col xs={12}>
+                        <div dangerouslySetInnerHTML={{ __html: body }} />
+                        <ul className="list-unstyled list-inline">
+                            {article.tagList.map((tag, index) => (
+                                <li className="list-inline-item me-2" key={index}>
+                                    <Tag component="badge" color="success">
+                                        {tag}
+                                    </Tag>
+                                </li>
+                            ))}
+                        </ul>
+                    </Col>
+                </Row>
+                <hr />
+                <div className="article-actions">
+                    <Actions article={article} currentUser={currentUser} />
+                </div>
+                {children}
+            </Container>
+        </section>
+    );
+};

src/app/article/[slug]/_components/articleArea/functions.ts

@@ -0,0 +1,13 @@
+import { User } from "@/utils/types/models";
+
+export const showFollowButton = (authorUsername: string, currentUser: User | undefined) => {
+  return authorUsername !== currentUser?.username;
+};
+
+export const showEditArticleButton = (authorUsername: string, currentUser: User | undefined) => {
+  return authorUsername === currentUser?.username;
+};
+
+export const showDeleteArticleButton = (authorUsername: string, currentUser: User | undefined) => {
+  return authorUsername === currentUser?.username;
+};

src/app/article/[slug]/_components/articleArea/index.ts

@@ -0,0 +1 @@
+export * from "./articleArea";

src/app/article/[slug]/_components/commentCard/action.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import { createApiClient } from "@/utils/api/apiClient";
+import { getSession } from "@/utils/auth/session";
+import { revalidateTag } from "next/cache";
+import { redirect } from "next/navigation";
+import { Inputs } from "./types";
+
+export const deleteCommentAction = async (_prevState: undefined, inputs: Inputs): Promise<undefined> => {
+  if ((await getSession()) == null) {
+    redirect("/login");
+  }
+
+  const apiClient = createApiClient({
+    path: "/articles/{slug}/comments/{id}",
+    method: "delete",
+    params: {
+      path: inputs,
+    },
+  });
+
+  const response = await apiClient.sendRequest();
+
+  if (response.result === "success") {
+    revalidateTag("");
+    return undefined;
+  }
+
+  throw new Error("api error");
+};

src/app/article/[slug]/_components/commentCard/container.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Comment, User } from "@/utils/types/models";
+import { use, useActionState } from "react";
+import { deleteCommentAction as serverAction } from "./action";
+import { CommentCard as CommentCardPresentation } from "./presentation";
+import { showDeleteCommentButton } from "./functions";
+
+type Props = {
+  slug: string;
+  comment: Comment;
+  currentUserPromise?: Promise<User>;
+};
+
+export const CommentCard = ({ slug, comment, currentUserPromise }: Props) => {
+  const [_state, dispatch, isPending] = useActionState(serverAction, undefined);
+
+  const action = () => {
+    if (!confirm("Delete comment?")) {
+      return;
+    }
+    dispatch({ slug, id: comment.id });
+  };
+
+  return (
+    <CommentCardPresentation
+      comment={comment}
+      showDeleteCommentButton={showDeleteCommentButton(
+        comment.author.username,
+        currentUserPromise && use(currentUserPromise),
+      )}
+      deleteCommentAction={action}
+      isPending={isPending}
+    />
+  );
+};

src/app/article/[slug]/_components/commentCard/functions.ts

@@ -0,0 +1,5 @@
+import { User } from "@/utils/types/models";
+
+export const showDeleteCommentButton = (commentAuthorUsername: string, currentUser?: User) => {
+  return commentAuthorUsername === currentUser?.username;
+};

src/app/article/[slug]/_components/commentCard/index.ts

@@ -0,0 +1 @@
+export * from "./container";

src/app/article/[slug]/_components/commentCard/presentation.module.css

@@ -0,0 +1,13 @@
+.form {
+  display: inline;
+
+  & button {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
+}

src/app/article/[slug]/_components/commentCard/presentation.tsx

@@ -0,0 +1,39 @@
+import { Button, Form } from "react-bootstrap";
+import Link from "next/link";
+import Image from "next/image";
+import { Comment } from "@/utils/types/models";
+import styles from "./presentation.module.css";
+
+type Props = {
+    comment: Comment;
+    showDeleteCommentButton?: boolean;
+    deleteCommentAction?: () => void;
+    isPending?: boolean;
+};
+
+export const CommentCard = ({ comment, showDeleteCommentButton, deleteCommentAction }: Props) => {
+    return (
+        <div className="card">
+            <div className="card-block">
+                <p className="card-text">{comment.body}</p>
+            </div>
+            <div className="card-footer">
+                <Link href={`/profile/${comment.author.username}`} className="comment-author">
+                    {comment.author.image && <Image src={comment.author.image} className="comment-author-img" alt="" />}
+                </Link>
+                &nbsp;
+                <Link href={`/profile/${comment.author.username}`} className="comment-author">
+                    {comment.author.username}
+                </Link>
+                <span className="date-posted">{comment.createdAt.toDateString()}</span>
+                {showDeleteCommentButton && (
+                    <Form action={deleteCommentAction} className={styles["form"]}>
+                        <Button className="mod-options" variant="primary" type="submit">
+                            <i className="icon-trash" />
+                        </Button>
+                    </Form>
+                )}
+            </div>
+        </div>
+    );
+};

src/app/article/[slug]/_components/commentCard/types.ts

@@ -0,0 +1,4 @@
+export type Inputs = {
+  slug: string;
+  id: string;
+};

src/app/article/[slug]/_components/commentForm/action.ts

@@ -0,0 +1,57 @@
+"use server";
+
+import { createApiClient } from "@/utils/api/apiClient";
+import { getSession } from "@/utils/auth/session";
+import { SubmissionResult } from "@conform-to/react";
+import { parseWithZod } from "@conform-to/zod";
+import { revalidateTag } from "next/cache";
+import { redirect } from "next/navigation";
+import { inputsSchema } from "./types";
+
+export const postCommentAction = async (
+  _prevState: unknown,
+  formData: FormData,
+): Promise<SubmissionResult<string[]>> => {
+  if ((await getSession()) == null) {
+    redirect("/login");
+  }
+
+  const submission = parseWithZod(formData, { schema: inputsSchema });
+
+  if (submission.status !== "success") {
+    return submission.reply();
+  }
+
+  const { slug, body } = submission.value;
+
+  const apiClient = createApiClient({
+    path: "/articles/{slug}/comments",
+    method: "post",
+    params: {
+      path: {
+        slug,
+      },
+      body: {
+        comment: {
+          body,
+        },
+      },
+    },
+  });
+
+  const response = await apiClient.sendRequest();
+
+  if (response.result === "success") {
+    revalidateTag("");
+    return submission.reply();
+  }
+
+  switch (response.statusCode) {
+    case 422:
+      return submission.reply({
+        formErrors: Object.values(response.error.errors).flat(),
+      });
+    default:
+      throw new Error("api error");
+  }
+};

src/app/article/[slug]/_components/commentForm/container.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { User } from "@/utils/types/models";
+import { use, useActionState } from "react";
+import { postCommentAction } from "./action";
+import { CommentForm as CommentFormPresentation } from "./presentation";
+
+type Props = {
+  slug: string;
+  currentUserPromise?: Promise<User>;
+};
+
+export const CommentForm = ({ slug, currentUserPromise }: Props) => {
+  const currentUser = currentUserPromise && use(currentUserPromise);
+  const [state, action, isPending] = useActionState(postCommentAction, undefined);
+
+  return (
+    <CommentFormPresentation
+      slug={slug}
+      authorImage={currentUser?.image}
+      result={state}
+      postCommentAction={action}
+      isPending={isPending}
+    />
+  );
+};

src/app/article/[slug]/_components/commentForm/index.ts

@@ -0,0 +1 @@
+export * from "./container";

src/app/article/[slug]/_components/commentForm/presentation.tsx

@@ -0,0 +1,68 @@
+import { Button, Form } from "react-bootstrap";
+import Image from "next/image";
+import { ErrorMessage } from "@/modules/common/components/errorMessage";
+import { SubmissionResult, useForm } from "@conform-to/react";
+import { parseWithZod } from "@conform-to/zod";
+import { startTransition } from "react";
+import { inputsSchema } from "./types";
+
+type Props = {
+    slug?: string;
+    authorImage?: string;
+    result?: SubmissionResult<string[]>;
+    postCommentAction?: (formData: FormData) => void;
+    isPending?: boolean;
+};
+
+export const CommentForm = ({ slug, authorImage, result, postCommentAction, isPending }: Props) => {
+    const [form, fields] = useForm({
+        defaultValue: {
+            slug,
+        },
+        lastResult: result,
+        onValidate({ formData }) {
+            return parseWithZod(formData, { schema: inputsSchema });
+        },
+        // onSubmit is defined to avoid resetting form after successful submission
+        // see https://github.com/edmundhung/conform/discussions/606
+        onSubmit(event, { formData }) {
+            event.preventDefault();
+            startTransition(() => {
+                postCommentAction?.(formData);
+            });
+        },
+        shouldRevalidate: "onBlur",
+    });
+
+    const errors = Object.values(form.allErrors).flat();
+
+    return (
+        <>
+            <Form className="card comment-form" id={form.id} action={postCommentAction} onSubmit={form.onSubmit} noValidate={true}>
+                <Form.Control
+                    type="hidden"
+                    key={fields.slug.key}
+                    name={fields.slug.name}
+                    defaultValue={fields.slug.initialValue}
+                />
+                <div className="card-block">
+                    <textarea
+                        key={fields.body.key}
+                        name={fields.body.name}
+                        defaultValue={fields.body.initialValue}
+                        placeholder="Write a comment..."
+                        rows={3}
+                        className="form-control"
+                    ></textarea>
+                    <ErrorMessage messages={errors} />
+                </div>
+                <div className="card-footer">
+                    {authorImage && <Image src={authorImage} alt="" className="comment-author-img" />}
+                    <Button variant="primary" type="submit" disabled={isPending}>
+                        Post Comment
+                    </Button>
+                </div>
+            </Form>
+        </>
+    );
+};

src/app/article/[slug]/_components/commentForm/types.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const inputsSchema = z.object({
+  slug: z.string().max(200),
+  body: z.string().max(200),
+});
+
+export type Inputs = z.infer<typeof inputsSchema>;

src/app/article/[slug]/_components/commentList/commentList.tsx

@@ -0,0 +1,21 @@
+import { fetchComments } from "@/modules/features/article/fetch/fetchComments";
+import { fetchCurrentUser } from "@/modules/features/auth/fetch/fetchCurrentUser";
+import { getSession } from "@/utils/auth/session";
+import { CommentCard } from "../commentCard";
+
+type Props = {
+  slug: string;
+};
+
+export const CommentList = async ({ slug }: Props) => {
+  const comments = await fetchComments(slug);
+  const currentUserPromise = (await getSession()) ? fetchCurrentUser() : undefined;
+
+  return (
+    <>
+      {comments.map((comment, index) => (
+        <CommentCard key={index} slug={slug} comment={comment} currentUserPromise={currentUserPromise} />
+      ))}
+    </>
+  );
+};

src/app/article/[slug]/_components/commentList/index.ts

@@ -0,0 +1 @@
+export * from "./commentList";

src/app/article/[slug]/page.tsx

@@ -0,0 +1,31 @@
+import { Col, Row } from "react-bootstrap";
+import { Suspense } from "react";
+import { fetchCurrentUser } from "@/modules/features/auth/fetch/fetchCurrentUser";
+import { getSession } from "@/utils/auth/session";
+import { ArticleArea } from "./_components/articleArea";
+import { CommentForm } from "./_components/commentForm";
+import { CommentList } from "./_components/commentList";
+
+type Params = Promise<{
+    slug: string;
+}>;
+
+const Page = async (props: { params: Params }) => {
+    const currentUserPromise = (await getSession()) ? fetchCurrentUser() : undefined;
+    const params = await props.params;
+
+    return (
+        <ArticleArea slug={params.slug}>
+            <Row>
+                <Col xs={12} md={{ span: 8, offset: 2 }}>
+                    <CommentForm slug={params.slug} currentUserPromise={currentUserPromise} />
+                    <Suspense fallback={<p>⌛Loading comments...</p>}>
+                        <CommentList slug={params.slug} />
+                    </Suspense>
+                </Col>
+            </Row>
+        </ArticleArea>
+    );
+};
+
+export default Page;

src/app/articles/page.tsx

@@ -0,0 +1,78 @@
+import { Container, Col, Row } from "react-bootstrap";
+import { getSession } from "@/utils/auth/session";
+import { ExhaustiveError } from "@/utils/errors";
+import clsx from "clsx";
+import Link from "next/link";
+import { Suspense } from "react";
+import { FeedArticleList } from "../_components/feedArticleList";
+import { GlobalArticleList } from "../_components/globalArticleList";
+import { TagArticleList } from "../_components/tagArticleList";
+import { TagList } from "../_components/tagList";
+import { SearchParams } from "../_types";
+//import { ArticlesList } from "./_components/articlesList";
+
+const ArticleList = (searchParams: SearchParams) => {
+    switch (searchParams.tab) {
+        case "yours":
+            return <FeedArticleList currentPage={searchParams.page} />;
+        case "global":
+            return <GlobalArticleList currentPage={searchParams.page} />;
+        case "tag":
+            return <TagArticleList currentPage={searchParams.page} tag={searchParams.tag ?? ""} />;
+        default:
+            throw new ExhaustiveError(searchParams.tab, "all tab cases are not covered");
+    }
+};
+
+const Page = async (props: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) => {
+    const session = await getSession();
+    const searchParams = SearchParams.parse(await props.searchParams);
+
+    return (
+        <section className="auth-page">
+            <Container className="page">
+                <hr className="col-1 my-5 mx-0" />
+                <Row>
+                    <Col md={9}>
+                        <div className="feed-toggle">
+                            <ul className="nav nav-pills outline-active">
+                                {session && (
+                                    <li className="nav-item">
+                                        <Link className={clsx("nav-link", searchParams.tab === "yours" && "active")} href="/?tab=yours">
+                                            Your Feed
+                                        </Link>
+                                    </li>
+                                )}
+                                <li className="nav-item">
+                                    <Link className={clsx("nav-link", searchParams.tab === "global" && "active")} href="/?tab=global">
+                                        Global Feed
+                                    </Link>
+                                </li>
+                                {searchParams.tag && (
+                                    <li className="nav-item">
+                                        <Link
+                                            className={clsx("nav-link", searchParams.tab === "tag" && "active")}
+                                            href={`/?tab=tag&tag=${searchParams.tag}`}
+                                        >
+                                            #{searchParams.tag}
+                                        </Link>
+                                    </li>
+                                )}
+                            </ul>
+                        </div>
+                        <Suspense key={JSON.stringify(searchParams)} fallback={<p>⌛Chargement...</p>}>
+                            <ArticleList {...searchParams} />
+                        </Suspense>
+                    </Col>
+                    <Col md={3}>
+                        <Suspense fallback={<p>⌛Chargement...</p>}>
+                            <TagList />
+                        </Suspense>
+                    </Col>
+                </Row>
+            </Container>
+        </section>
+    );
+};
+
+export default Page;

src/app/components/aeronefs/aeronefs.component.spec.ts

@@ -1,5 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
+import { MenuItems } from '@components/shared';
 import { AeronefsComponent } from './aeronefs.component';
 
 describe('AeronefsComponent', () => {
@@ -8,7 +12,13 @@ describe('AeronefsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AeronefsComponent]
+      imports: [AeronefsComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
     })
     .compileComponents();
     

src/app/components/aeronefs/aeronefs.component.ts

@@ -1,7 +1,7 @@
 import { DatePipe } from '@angular/common';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
@@ -22,30 +22,35 @@ import { AeronefByImat, AeronefByYear } from '@models';
 
 @Component({
     selector: 'app-aeronefs',
-    standalone: true,
     imports: [
         DatePipe,
-        MatBadgeModule, MatButtonModule, MatCardModule, MatDividerModule,
+        MatBadgeModule,
-        MatExpansionModule, MatGridListModule, MatIconModule, MatMenuModule,
+        MatButtonModule,
-        BarsChartComponent, HistoryTableComponent, PieChartComponent
+        MatCardModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+        BarsChartComponent,
+        HistoryTableComponent,
+        PieChartComponent,
     ],
     templateUrl: './aeronefs.component.html',
     styleUrl: './aeronefs.component.scss',
     animations: [
         trigger('flyInOut', [
             state('in', style({ transform: 'translateX(0)' })),
-            transition('void => *', [
+            transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(200)]),
-                style({ transform: 'translateX(-100%)' }),
+            transition('* => void', [style({ transform: 'translateX(100%)' }), animate(200)]),
-                animate(200)
         ]),
-            transition('* => void', [
+    ],
-                style({ transform: 'translateX(100%)' }),
-                animate(200)
-            ])
-        ])
-    ]
 })
 export class AeronefsComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
     private _data: Subscription = new Subscription();
     private _aeronefsByImat!: Array<AeronefByImat>;
     private _aeronefsByYear!: Array<AeronefByYear>;
@@ -59,23 +64,21 @@ export class AeronefsComponent implements OnInit, OnDestroy {
     public seriesValue: number[] = [];
     public seriesRow: Array<Array<number>> = [];
     public seriesColor: {
-        backgroundColor: string[],
+        backgroundColor: string[];
-        borderColor: string[]
+        borderColor: string[];
     } = {
         backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
-        borderColor: this._utilitiesService.getSeriesColors(1, 'all')
+        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
     };
     public seriesColorClass: string[] = this._utilitiesService.getChartColors();
 
-    constructor(
-        private route: ActivatedRoute,
-        private _utilitiesService: UtilitiesService,
-        public menuItems: MenuItems
-    ) { }
-
     ngOnInit() {
-        const data$: Observable<{ aeronefsPageData: AeronefsPageData }> = this.route.data as Observable<{ aeronefsPageData: AeronefsPageData }>;
+        const data$: Observable<{ aeronefsPageData: AeronefsPageData }> = this.route.data as Observable<{
-        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { aeronefsPageData: AeronefsPageData }) => {
+            aeronefsPageData: AeronefsPageData;
+        }>;
+        this._data = data$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data: { aeronefsPageData: AeronefsPageData }) => {
                 const pageData: AeronefsPageData = data.aeronefsPageData;
                 this.lastJump = pageData.lastjump;
                 this._loadAeronefByImat(pageData);

src/app/components/auth/auth.component.spec.ts

@@ -1,4 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 import { AuthComponent } from './auth.component';
 
@@ -8,7 +11,12 @@ describe('AuthComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    imports: [AuthComponent]
+      imports: [AuthComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+      ],
     });
     fixture = TestBed.createComponent(AuthComponent);
     component = fixture.componentInstance;

src/app/components/auth/auth.component.ts

@@ -1,6 +1,15 @@
 import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { UntypedFormBuilder, UntypedFormGroup, AbstractControl, Validators, ValidatorFn, ValidationErrors, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+    UntypedFormBuilder,
+    UntypedFormGroup,
+    AbstractControl,
+    Validators,
+    ValidatorFn,
+    ValidationErrors,
+    FormsModule,
+    ReactiveFormsModule,
+} from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
@@ -12,10 +21,9 @@ import { take } from 'rxjs/operators';
 
 import { Errors } from '@models';
 import { UserService } from '@services';
-import { ListErrorsComponent, ShowAuthedDirective } from '@components/shared';
+import { ListErrorsComponent } from '@components/shared';
 
 @Component({
-    standalone: true,
     imports: [
         RouterLink,
         FormsModule,
@@ -24,13 +32,18 @@ import { ListErrorsComponent, ShowAuthedDirective } from '@components/shared';
         MatInputModule,
         MatButtonModule,
         ListErrorsComponent,
-        ShowAuthedDirective
     ],
     selector: 'app-auth',
     templateUrl: './auth.component.html',
-    styleUrl: './auth.component.scss'
+    styleUrl: './auth.component.scss',
 })
 export class AuthComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private router = inject(Router);
+    private titleService = inject(Title);
+    private userService = inject(UserService);
+    private fb = inject(UntypedFormBuilder);
+
     private _url: Subscription = new Subscription();
     private _user: Subscription = new Subscription();
     authType = '';
@@ -41,13 +54,7 @@ export class AuthComponent implements OnInit, OnDestroy {
     authForm!: UntypedFormGroup;
     destroyRef = inject(DestroyRef);
 
-    constructor(
+    constructor() {
-        private route: ActivatedRoute,
-        private router: Router,
-        private titleService: Title,
-        private userService: UserService,
-        private fb: UntypedFormBuilder
-    ) {
         this._resetErrors();
         // use FormBuilder to create a form group
         const controlsConfig = {
@@ -59,7 +66,7 @@ export class AuthComponent implements OnInit, OnDestroy {
             licence: '',
             poids: '',
             password: ['', Validators.required],
-            confirmPassword: ''
+            confirmPassword: '',
         };
         this.authForm = this.fb.group(controlsConfig, { validators: this.checkPasswords });
     }
@@ -68,8 +75,7 @@ export class AuthComponent implements OnInit, OnDestroy {
         // you would normally unsubscribe from this observable subscription
         // the active route observables are exemptions from unsubribe always rule
         // see notes on: https://angular.io/guide/router#observable-parammap-and-component-reuse
-        this.route.url.pipe(take(1))
+        this.route.url.pipe(take(1)).subscribe((data) => {
-        .subscribe(data => {
             // Get the last piece of the URL (it's either 'login' or 'register')
             this.authType = data[data.length - 1].path;
             // Set a title for the page accordingly
@@ -104,14 +110,16 @@ export class AuthComponent implements OnInit, OnDestroy {
         if (this.authForm.valid) {
             this._resetErrors();
             const credentials = this.authForm.value;
-            const user$ = this.userService.attemptAuth(this.authType, credentials).pipe(takeUntilDestroyed(this.destroyRef));
+            const user$ = this.userService
+                .attemptAuth(this.authType, credentials)
+                .pipe(takeUntilDestroyed(this.destroyRef));
             this._user = user$.subscribe({
                 next: () => void this.router.navigateByUrl('/'),
                 error: (err) => {
                     console.log(err);
                     this.errors = err;
                     this.isSubmitting = false;
-                }
+                },
             });
         }
     }
@@ -157,12 +165,11 @@ export class AuthComponent implements OnInit, OnDestroy {
             return null;
         }
         const pass = group.get('password')!.value;
-        const confirmPass = group.get('confirmPassword')!.value
+        const confirmPass = group.get('confirmPassword')!.value;
-        return (pass === confirmPass && pass !== '') ? null : { notSame: true }
+        return pass === confirmPass && pass !== '' ? null : { notSame: true };
-    }
+    };
 
     private _resetErrors(): void {
         this.errors = { errors: {} };
     }
-
 }

src/app/components/calculator/calculator.component.spec.ts

@@ -1,5 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, LineElement, PointElement } from 'chart.js';
+Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, LineElement, PointElement);
 
+import { MenuItems } from '@components/shared';
 import { CalculatorComponent } from './calculator.component';
 
 describe('CalculatorComponent', () => {
@@ -8,7 +14,13 @@ describe('CalculatorComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    imports: [CalculatorComponent]
+      imports: [CalculatorComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
     });
     fixture = TestBed.createComponent(CalculatorComponent);
     component = fixture.componentInstance;

src/app/components/calculator/calculator.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, ViewChild, inject } from '@angular/core';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -18,36 +18,57 @@ import { BaseChartDirective } from 'ng2-charts';
 import { Observable, Subscription } from 'rxjs';
 
 import { MenuItems } from '@components/shared';
-import { CalculatorInfo, CalculatorResult, CalculatorState, InputParams, Jump, LineConfig, WeightSizeRange, TableHeader, User, WeightSize, weightSizes } from '@models';
+import {
+    CalculatorInfo,
+    CalculatorResult,
+    CalculatorState,
+    InputParams,
+    Jump,
+    LineConfig,
+    WeightSizeRange,
+    TableHeader,
+    User,
+    WeightSize,
+    weightSizes,
+} from '@models';
 import { CalculatorService, JumpsService, UserService, UtilitiesService } from '@services';
 
 @Component({
     selector: 'app-calculator',
-    standalone: true,
     imports: [
-        CommonModule, FormsModule, RouterModule,
+        CommonModule,
-        MatButtonModule, MatCardModule, MatDividerModule,
+        FormsModule,
-        MatFormFieldModule, MatInputModule, MatIconModule, MatMenuModule,
+        RouterModule,
-        MatPaginatorModule, MatProgressBarModule, MatSortModule, MatTableModule,
+        MatButtonModule,
-        BaseChartDirective
+        MatCardModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatTableModule,
+        BaseChartDirective,
     ],
     templateUrl: './calculator.component.html',
     styleUrl: './calculator.component.scss',
     animations: [
         trigger('flyInOut', [
             state('in', style({ transform: 'translateY(0)' })),
-            transition('void => *', [
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
-                style({ transform: 'translateY(-100%)' }),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
-                animate(200)
         ]),
-            transition('* => void', [
+    ],
-                style({ transform: 'translateY(100%)' }),
-                animate(200)
-            ])
-        ])
-    ]
 })
 export class CalculatorComponent implements OnInit, OnDestroy {
+    private _calculatorService = inject(CalculatorService);
+    private _jumpsService = inject(JumpsService);
+    private _userService = inject(UserService);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
     //private _lastjump!: Subscription; // = new Subscription();
     //private _currentUser!: Subscription; // = new Subscription();
     private _subscriptions: Array<Subscription> = [];
@@ -71,41 +92,31 @@ export class CalculatorComponent implements OnInit, OnDestroy {
         charges: <CalculatorResult>{ current: 0, min: 0, min11: 0 },
         sizesFeet: <CalculatorResult>{ current: 0, min: 0, min11: 0 },
         sizesMeter: <CalculatorResult>{ current: 0, min: 0, min11: 0 },
-        state: <CalculatorState>{ color: 'danger' }
+        state: <CalculatorState>{ color: 'danger' },
-    }
+    };
 
     @Input() canopy_size_table!: MatTableDataSource<WeightSize>;
-    @Input() inputs: InputParams = <InputParams>{
+    @Input() inputs: InputParams = (<InputParams>{
         jumps: 0,
         weight: 60,
         gear: 10,
-        current: 190
+        current: 190,
-    } as InputParams;
+    }) as InputParams;
 
     @ViewChild(MatSort) sort!: MatSort;
     @ViewChild(MatPaginator) paginator!: MatPaginator;
 
-    constructor(
-        private _calculatorService: CalculatorService,
-        private _jumpsService: JumpsService,
-        private _userService: UserService,
-        private _utilitiesService: UtilitiesService,
-        public menuItems: MenuItems
-    ) { }
-
     ngOnInit() {
         const currentUser$: Observable<User> = this._userService.currentUser;
         const lastjump$: Observable<Jump> = this._jumpsService.getLastJump();
 
         weightSizes[0].ranges.forEach((range: WeightSizeRange) => {
             const header: TableHeader = { name: range.label, active: range.active };
-            this.tableHeader.push(header)
+            this.tableHeader.push(header);
             this.sizesHeader.push(header);
             this.displayedColumns.push(range.name);
         });
-        this.chartConfig.lineChartData.labels = [...this.sizesHeader.map(
+        this.chartConfig.lineChartData.labels = [...this.sizesHeader.map((data: TableHeader): string => data.name)];
-            (data: TableHeader): string => data.name
-        )];
         this.chartConfig.lineChartData.datasets = [
             {
                 label: 'Tailles min -11%',
@@ -114,7 +125,7 @@ export class CalculatorComponent implements OnInit, OnDestroy {
                 stepped: true,
                 pointStyle: false,
                 borderColor: 'rgba(241, 80, 80, 1)',
-                backgroundColor: 'rgba(241, 80, 80, 0.3)'
+                backgroundColor: 'rgba(241, 80, 80, 0.3)',
             },
             {
                 label: 'Tailles min',
@@ -123,8 +134,8 @@ export class CalculatorComponent implements OnInit, OnDestroy {
                 stepped: true,
                 pointStyle: false,
                 borderColor: 'rgba(32, 182, 252, 1)',
-                backgroundColor: 'rgba(32, 182, 252, 0.3)'
+                backgroundColor: 'rgba(32, 182, 252, 0.3)',
-            }
+            },
         ];
         this._subscriptions.push(
             currentUser$.subscribe((userData: User) => {
@@ -137,9 +148,9 @@ export class CalculatorComponent implements OnInit, OnDestroy {
                         this.inputs.current = jump.taille!;
                         this.canopy_size_table = new MatTableDataSource<WeightSize>(weightSizes);
                         this.refresh();
-                    })
+                    }),
                 );
-            })
+            }),
         );
     }
 
@@ -159,25 +170,25 @@ export class CalculatorComponent implements OnInit, OnDestroy {
         if (this.inputs.weight < 60) {
             weight = 60;
         }
-        weightSizes.forEach(element => {
+        weightSizes.forEach((element) => {
             element.active = '';
-            element.ranges.forEach(range => {
+            element.ranges.forEach((range) => {
                 range.active = '';
             });
         });
-        this.tableHeader.forEach(element => {
+        this.tableHeader.forEach((element) => {
             element.active = '';
         });
         if (weight >= 60 && weight <= 110) {
-            weightSizes[(weight - 60)].active = 'active';
+            weightSizes[weight - 60].active = 'active';
         }
         if (this.inputs.jumps >= 0) {
             const num = this._calculatorService.getRangeNum(this.inputs.jumps);
             this.tableHeader[num].active = 'active';
-            weightSizes.forEach(element => {
+            weightSizes.forEach((element) => {
-                element.ranges[(num-1)].active = 'active';
+                element.ranges[num - 1].active = 'active';
             });
-            this.currentRange = weightSizes[0].ranges[(num-1)];
+            this.currentRange = weightSizes[0].ranges[num - 1];
         }
     }
 
@@ -200,13 +211,13 @@ export class CalculatorComponent implements OnInit, OnDestroy {
         this.info.sizesMeter = {
             current: this._calculatorService.convertFeet2Meters(this.inputs.current),
             min: this._calculatorService.convertFeet2Meters(this.info.sizesFeet.min),
-            min11: this._calculatorService.convertFeet2Meters(this.info.sizesFeet.min11)
+            min11: this._calculatorService.convertFeet2Meters(this.info.sizesFeet.min11),
-        }
+        };
         this.info.charges = {
             current: this._calculatorService.getCharge(this.inputs.current, this.inputs.weight, this.inputs.gear),
             min: this._calculatorService.getCharge(this.info.sizesFeet.min, this.inputs.weight, this.inputs.gear),
-            min11: this._calculatorService.getCharge(this.info.sizesFeet.min11, this.inputs.weight, this.inputs.gear)
+            min11: this._calculatorService.getCharge(this.info.sizesFeet.min11, this.inputs.weight, this.inputs.gear),
-        }
+        };
         this.info.state.color = this._calculatorService.getStateColor(this.info.sizesFeet);
 
         this.chartConfig.lineChartData.datasets[0].data = this.sizesMinValuesFeet;
@@ -218,5 +229,4 @@ export class CalculatorComponent implements OnInit, OnDestroy {
         this.inputs.weight = weight;
         this.refresh();
     }
-
 }