From 5ecccc41aea5565f454a9b06d581648663b68440 Mon Sep 17 00:00:00 2001 From: Valery Melou Date: Sun, 26 May 2024 13:09:52 +0100 Subject: [PATCH] feat: add the blog home page --- .gitignore | 1 + apps/website/plugins/env.js | 19 ++++++ apps/website/project.json | 7 ++- apps/website/src/app/app.config.ts | 19 +++++- apps/website/src/app/app.routes.ts | 8 ++- apps/website/src/types.d.ts | 7 +++ apps/website/tailwind.config.js | 2 +- libs/blog/feature-home/.eslintrc.json | 36 +++++++++++ libs/blog/feature-home/README.md | 7 +++ libs/blog/feature-home/jest.config.ts | 22 +++++++ libs/blog/feature-home/project.json | 20 ++++++ libs/blog/feature-home/src/index.ts | 1 + .../src/lib/blog-home.component.html | 63 +++++++++++++++++++ .../src/lib/blog-home.component.spec.ts | 41 ++++++++++++ .../src/lib/blog-home.component.ts | 42 +++++++++++++ libs/blog/feature-home/src/test-setup.ts | 8 +++ libs/blog/feature-home/tsconfig.json | 29 +++++++++ libs/blog/feature-home/tsconfig.lib.json | 17 +++++ libs/blog/feature-home/tsconfig.spec.json | 16 +++++ .../projects/src/lib/projects.component.html | 2 +- libs/shared/layout/src/lib/animations.ts | 2 +- .../base-layout/base-layout.component.html | 2 +- .../src/lib/footer/footer.component.html | 20 ++---- .../layout/src/lib/footer/footer.component.ts | 3 +- .../src/lib/navbar/navbar.component.html | 4 +- libs/shared/ui/src/index.ts | 2 + .../ui/src/lib/link/link.component.html | 1 + .../ui/src/lib/link/link.component.spec.ts | 21 +++++++ libs/shared/ui/src/lib/link/link.component.ts | 30 +++++++++ tsconfig.base.json | 7 ++- 30 files changed, 430 insertions(+), 29 deletions(-) create mode 100644 apps/website/plugins/env.js create mode 100644 apps/website/src/types.d.ts create mode 100644 libs/blog/feature-home/.eslintrc.json create mode 100644 libs/blog/feature-home/README.md create mode 100644 libs/blog/feature-home/jest.config.ts create mode 100644 libs/blog/feature-home/project.json create mode 100644 libs/blog/feature-home/src/index.ts create mode 100644 libs/blog/feature-home/src/lib/blog-home.component.html create mode 100644 libs/blog/feature-home/src/lib/blog-home.component.spec.ts create mode 100644 libs/blog/feature-home/src/lib/blog-home.component.ts create mode 100644 libs/blog/feature-home/src/test-setup.ts create mode 100644 libs/blog/feature-home/tsconfig.json create mode 100644 libs/blog/feature-home/tsconfig.lib.json create mode 100644 libs/blog/feature-home/tsconfig.spec.json create mode 100644 libs/shared/ui/src/lib/link/link.component.html create mode 100644 libs/shared/ui/src/lib/link/link.component.spec.ts create mode 100644 libs/shared/ui/src/lib/link/link.component.ts diff --git a/.gitignore b/.gitignore index f9418f1b..08339d29 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ Thumbs.db .nx/cache .angular +.env diff --git a/apps/website/plugins/env.js b/apps/website/plugins/env.js new file mode 100644 index 00000000..cd37222c --- /dev/null +++ b/apps/website/plugins/env.js @@ -0,0 +1,19 @@ +const myOrgEnvRegex = /^VM_/i; + +const envVarPlugin = { + name: 'env-var-plugin', + setup(build) { + const options = build.initialOptions; + + const envVars = {}; + for (const key in process.env) { + if (myOrgEnvRegex.test(key)) { + envVars[key] = process.env[key]; + } + } + + options.define['process.env'] = JSON.stringify(envVars); + }, +}; + +module.exports = envVarPlugin; diff --git a/apps/website/project.json b/apps/website/project.json index 78635944..673db942 100644 --- a/apps/website/project.json +++ b/apps/website/project.json @@ -7,7 +7,7 @@ "tags": [], "targets": { "build": { - "executor": "@angular-devkit/build-angular:application", + "executor": "@nx/angular:application", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/apps/website", @@ -18,7 +18,8 @@ "inlineStyleLanguage": "scss", "assets": ["apps/website/src/favicon.ico", "apps/website/src/assets"], "styles": ["apps/website/src/styles.scss"], - "scripts": [] + "scripts": [], + "plugins": ["apps/website/plugins/env.js"] }, "configurations": { "production": { @@ -45,7 +46,7 @@ "defaultConfiguration": "production" }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", + "executor": "@nx/angular:dev-server", "configurations": { "production": { "buildTarget": "website:build:production" diff --git a/apps/website/src/app/app.config.ts b/apps/website/src/app/app.config.ts index 0c47be91..93314c15 100644 --- a/apps/website/src/app/app.config.ts +++ b/apps/website/src/app/app.config.ts @@ -3,7 +3,24 @@ import { provideAnimations } from '@angular/platform-browser/animations'; import { provideRouter } from '@angular/router'; import { appRoutes } from './app.routes'; +import { + CONTENTFUL_ACCESS_TOKEN, + CONTENTFUL_ENVIRONMENT, + CONTENTFUL_SPACE, +} from '@valerymelou/cms/contentful'; export const appConfig: ApplicationConfig = { - providers: [provideAnimations(), provideRouter(appRoutes)], + providers: [ + provideAnimations(), + provideRouter(appRoutes), + { provide: CONTENTFUL_SPACE, useValue: process.env.VM_CONTENTFUL_SPACE }, + { + provide: CONTENTFUL_ACCESS_TOKEN, + useValue: process.env.VM_CONTENTFUL_ACCESS_TOKEN, + }, + { + provide: CONTENTFUL_ENVIRONMENT, + useValue: process.env.VM_CONTENTFUL_ENVIRONMENT, + }, + ], }; diff --git a/apps/website/src/app/app.routes.ts b/apps/website/src/app/app.routes.ts index f35f982f..bb0a3091 100644 --- a/apps/website/src/app/app.routes.ts +++ b/apps/website/src/app/app.routes.ts @@ -26,10 +26,16 @@ export const appRoutes: Route[] = [ path: 'projects', loadComponent: () => import('@valerymelou/pages/projects').then( - (c) => c.ProjectsComponent + (c) => c.ProjectsComponent, ), data: { animation: 'ProjectsPage' }, }, + { + path: 'blog', + loadComponent: () => + import('@valerymelou/blog/home').then((c) => c.BlogHomeComponent), + data: { animation: 'BlogHomePage' }, + }, ], }, ]; diff --git a/apps/website/src/types.d.ts b/apps/website/src/types.d.ts new file mode 100644 index 00000000..d21ae3bd --- /dev/null +++ b/apps/website/src/types.d.ts @@ -0,0 +1,7 @@ +declare const process: { + env: { + VM_CONTENTFUL_SPACE: string; + VM_CONTENTFUL_ENVIRONMENT: string; + VM_CONTENTFUL_ACCESS_TOKEN: string; + }; +}; diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js index baef770c..a254bb93 100644 --- a/apps/website/tailwind.config.js +++ b/apps/website/tailwind.config.js @@ -16,7 +16,7 @@ module.exports = { dark: colors.slate[900], secondary: { dark: '#112240', - base: '#1e3a8a', + light: colors.slate[200], }, accent: { base: '#068477', diff --git a/libs/blog/feature-home/.eslintrc.json b/libs/blog/feature-home/.eslintrc.json new file mode 100644 index 00000000..28b8d978 --- /dev/null +++ b/libs/blog/feature-home/.eslintrc.json @@ -0,0 +1,36 @@ +{ + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": [ + "plugin:@nx/angular", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "blog", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "blog", + "style": "kebab-case" + } + ] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] +} diff --git a/libs/blog/feature-home/README.md b/libs/blog/feature-home/README.md new file mode 100644 index 00000000..c3bda8ba --- /dev/null +++ b/libs/blog/feature-home/README.md @@ -0,0 +1,7 @@ +# feature-home + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test feature-home` to execute the unit tests. diff --git a/libs/blog/feature-home/jest.config.ts b/libs/blog/feature-home/jest.config.ts new file mode 100644 index 00000000..ae09a056 --- /dev/null +++ b/libs/blog/feature-home/jest.config.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +export default { + displayName: 'feature-home', + preset: '../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../coverage/libs/blog/feature-home', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], +}; diff --git a/libs/blog/feature-home/project.json b/libs/blog/feature-home/project.json new file mode 100644 index 00000000..71aa745a --- /dev/null +++ b/libs/blog/feature-home/project.json @@ -0,0 +1,20 @@ +{ + "name": "feature-home", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/blog/feature-home/src", + "prefix": "blog", + "projectType": "library", + "tags": [], + "targets": { + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/blog/feature-home/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/libs/blog/feature-home/src/index.ts b/libs/blog/feature-home/src/index.ts new file mode 100644 index 00000000..92b646ad --- /dev/null +++ b/libs/blog/feature-home/src/index.ts @@ -0,0 +1 @@ +export * from './lib/blog-home.component'; diff --git a/libs/blog/feature-home/src/lib/blog-home.component.html b/libs/blog/feature-home/src/lib/blog-home.component.html new file mode 100644 index 00000000..e277b66d --- /dev/null +++ b/libs/blog/feature-home/src/lib/blog-home.component.html @@ -0,0 +1,63 @@ +
+

+ Inside my head +

+

+ I talk about Django, Angular... Web Development in general and many other + topics. These are just a few of the things in my head. +

+ +
+
+ @if (articles$ | async; as articles) { + @for (article of articles.items; track article.slug) { + +
+

+ {{ article.title }} +

+

+ {{ article.createdAt | date: 'mediumDate' }} +

+
+

+ {{ article.abstract }} +

+
+ @for (tag of article.tags; track tag.id) { + {{ tag.label }} + } +
+ + } + } +
+
+

Topics

+ @if (tags$ | async; as tags) { +
+ @for (tag of tags.items; track tag.id) { + {{ tag.label }} + } +
+ } +
+
+
diff --git a/libs/blog/feature-home/src/lib/blog-home.component.spec.ts b/libs/blog/feature-home/src/lib/blog-home.component.spec.ts new file mode 100644 index 00000000..b51bdb0d --- /dev/null +++ b/libs/blog/feature-home/src/lib/blog-home.component.spec.ts @@ -0,0 +1,41 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { BlogHomeComponent } from './blog-home.component'; +import { + Article, + ArticleService, + TagService, +} from '@valerymelou/blob/data-access'; +import { of } from 'rxjs'; + +describe('BlogHomeComponent', () => { + let component: BlogHomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BlogHomeComponent], + providers: [ + { + provide: ArticleService, + useValue: { + get: () => of({ data: [new Article(), new Article()] }), + }, + }, + { + provide: TagService, + useValue: { + getAll: () => of({ data: [{ label: 'Django', id: 'django' }] }), + }, + }, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(BlogHomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/blog/feature-home/src/lib/blog-home.component.ts b/libs/blog/feature-home/src/lib/blog-home.component.ts new file mode 100644 index 00000000..2a9d7302 --- /dev/null +++ b/libs/blog/feature-home/src/lib/blog-home.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Observable } from 'rxjs'; + +import { + Article, + ArticleService, + Results, + Tag, + TagService, +} from '@valerymelou/blob/data-access'; +import { LinkComponent } from '@valerymelou/shared/ui'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'blog-blog-home', + standalone: true, + imports: [CommonModule, RouterModule, LinkComponent], + templateUrl: './blog-home.component.html', +}) +export class BlogHomeComponent implements OnInit { + articles$!: Observable>; + tags$!: Observable>; + + ngOnInit(): void { + this.loadArticles(); + this.loadTags(); + } + + constructor( + private articleService: ArticleService, + private tagService: TagService, + ) {} + + loadArticles(): void { + this.articles$ = this.articleService.get({}); + } + + loadTags(): void { + this.tags$ = this.tagService.getAll(); + } +} diff --git a/libs/blog/feature-home/src/test-setup.ts b/libs/blog/feature-home/src/test-setup.ts new file mode 100644 index 00000000..ab1eeeb3 --- /dev/null +++ b/libs/blog/feature-home/src/test-setup.ts @@ -0,0 +1,8 @@ +// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment +globalThis.ngJest = { + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, +}; +import 'jest-preset-angular/setup-jest'; diff --git a/libs/blog/feature-home/tsconfig.json b/libs/blog/feature-home/tsconfig.json new file mode 100644 index 00000000..5cf0a165 --- /dev/null +++ b/libs/blog/feature-home/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/libs/blog/feature-home/tsconfig.lib.json b/libs/blog/feature-home/tsconfig.lib.json new file mode 100644 index 00000000..9b49be75 --- /dev/null +++ b/libs/blog/feature-home/tsconfig.lib.json @@ -0,0 +1,17 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "src/**/*.spec.ts", + "src/test-setup.ts", + "jest.config.ts", + "src/**/*.test.ts" + ], + "include": ["src/**/*.ts"] +} diff --git a/libs/blog/feature-home/tsconfig.spec.json b/libs/blog/feature-home/tsconfig.spec.json new file mode 100644 index 00000000..f858ef78 --- /dev/null +++ b/libs/blog/feature-home/tsconfig.spec.json @@ -0,0 +1,16 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/libs/pages/projects/src/lib/projects.component.html b/libs/pages/projects/src/lib/projects.component.html index d4d5cf53..dc16de33 100644 --- a/libs/pages/projects/src/lib/projects.component.html +++ b/libs/pages/projects/src/lib/projects.component.html @@ -19,7 +19,7 @@ >Mapping of organizations working on the SDGs -
+

I built the frontend of the of this platform listing the organizations working on Sustainable Development Goals as diff --git a/libs/shared/layout/src/lib/animations.ts b/libs/shared/layout/src/lib/animations.ts index c08bc0a8..5188c2ea 100644 --- a/libs/shared/layout/src/lib/animations.ts +++ b/libs/shared/layout/src/lib/animations.ts @@ -9,7 +9,7 @@ import { AnimationMetadata, } from '@angular/animations'; -const pages = ['HomePage', 'AboutPage', 'ProjectsPage', 'BlogPage']; +const pages = ['HomePage', 'AboutPage', 'ProjectsPage', 'BlogHomePage']; const transissions: AnimationMetadata[] = []; const isMobile = matchMedia('(max-width: 768px)').matches; diff --git a/libs/shared/layout/src/lib/base-layout/base-layout.component.html b/libs/shared/layout/src/lib/base-layout/base-layout.component.html index 5c11f7ab..a3355921 100644 --- a/libs/shared/layout/src/lib/base-layout/base-layout.component.html +++ b/libs/shared/layout/src/lib/base-layout/base-layout.component.html @@ -2,7 +2,7 @@

diff --git a/libs/shared/layout/src/lib/footer/footer.component.html b/libs/shared/layout/src/lib/footer/footer.component.html index 1c1dd6e0..c53d671b 100644 --- a/libs/shared/layout/src/lib/footer/footer.component.html +++ b/libs/shared/layout/src/lib/footer/footer.component.html @@ -1,36 +1,28 @@ -