feat(blog): angular in depth category (#285)

mateuszbasinski · web-flow · commit f13615e9235b · 2024-09-09T11:04:03.000+02:00
diff --git a/apps/blog-e2e/e2e/migrated-articles.spec.ts b/apps/blog-e2e/e2e/migrated-articles.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+const slugs = [];
+
+test.describe('migrated articles', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  slugs.forEach(({ slug }) => {
+    test(`should proper display ${slug}`, async ({ page }) => {
+      await page.goto(`/en/${slug}`);
+
+      const title = await page.locator('#article-title');
+
+      await expect(title).toBeVisible();
+      await expect(page).toHaveURL(`/en/${slug}`);
+    });
+  });
+});
diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json
@@ -6,7 +6,8 @@
     "angularNews": "Angular News",
     "guides": "Guides",
     "partners": "Community partners",
-    "mainPartner": "Main partner"
+    "mainPartner": "Main partner",
+    "angularInDepth": "Angular In Depth"
   },
   "nav": {
     "home": "Home Page",
diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json
@@ -6,7 +6,8 @@
     "angularNews": "Wiadomości ze świata Angulara",
     "guides": "Poradniki",
     "partners": "Community partnerzy",
-    "mainPartner": "Główny partner"
+    "mainPartner": "Główny partner",
+    "angularInDepth": "Angular In Depth"
   },
   "nav": {
     "home": "Strona Główna",
diff --git a/libs/blog-contracts/articles/src/lib/articles.ts b/libs/blog-contracts/articles/src/lib/articles.ts
@@ -4,6 +4,7 @@ export const articleCategories = [
   'recommended',
   'authors',
   'latest',
+  'angular-in-depth',
 ] as const;
 
 export type ArticleCategory = (typeof articleCategories)[number];
diff --git a/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts b/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts
@@ -48,13 +48,15 @@ export class FeatureAboutUsComponent implements OnInit {
   private readonly _pageSize = this._authorListStore.pageSize;
   private readonly _sortedTitles =
     'key_contributor,contributor,gde,hoa,blogger';
+  private readonly _acfFormat = 'standard';
 
   ngOnInit(): void {
     if (this.authorsCards().length === 0) {
       this._authorListStore.fetchAuthorList({
         take: this._pageSize(),
         skip: 0,
         sortedTitles: this._sortedTitles,
+        acfFormat: this._acfFormat,
       });
     }
   }
@@ -65,6 +67,7 @@ export class FeatureAboutUsComponent implements OnInit {
         take: this._pageSize(),
         skip: this._skip() + this._pageSize(),
         sortedTitles: this._sortedTitles,
+        acfFormat: this._acfFormat,
       });
     }
   }
diff --git a/libs/blog/articles/data-access/src/lib/dto/articles.query.ts b/libs/blog/articles/data-access/src/lib/dto/articles.query.ts
@@ -6,4 +6,5 @@ export type ArticlesQuery = {
   skip?: number;
   category?: ArticleCategory;
   excludeRecent?: number;
+  excludeCategory?: string;
 } | null;
diff --git a/libs/blog/articles/feature-angular-in-depth/.eslintrc.json b/libs/blog/articles/feature-angular-in-depth/.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": "al",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "al",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/blog/articles/feature-angular-in-depth/README.md b/libs/blog/articles/feature-angular-in-depth/README.md
@@ -0,0 +1,7 @@
+# feature-angular-in-depth
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test feature-angular-in-depth` to execute the unit tests.
diff --git a/libs/blog/articles/feature-angular-in-depth/jest.config.ts b/libs/blog/articles/feature-angular-in-depth/jest.config.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'feature-angular-in-depth',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory:
+    '../../../../coverage/libs/blog/articles/feature-angular-in-depth',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/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/articles/feature-angular-in-depth/project.json b/libs/blog/articles/feature-angular-in-depth/project.json
@@ -0,0 +1,20 @@
+{
+  "name": "feature-angular-in-depth",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/blog/articles/feature-angular-in-depth/src",
+  "prefix": "al",
+  "projectType": "library",
+  "tags": ["scope:client", "type:feature"],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/blog/articles/feature-angular-in-depth/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}
diff --git a/libs/blog/articles/feature-angular-in-depth/src/index.ts b/libs/blog/articles/feature-angular-in-depth/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/feature-angular-in-depth/feature-angular-in-depth.component';
diff --git a/libs/blog/articles/feature-angular-in-depth/src/lib/feature-angular-in-depth/feature-angular-in-depth.component.html b/libs/blog/articles/feature-angular-in-depth/src/lib/feature-angular-in-depth/feature-angular-in-depth.component.html
@@ -0,0 +1,30 @@
+<h2 id="angular-in-depth-title" class="mb-8 text-4xl font-bold">
+  Angular In Depth
+</h2>
+
+<section
+  aria-labelledby="angular-in-depth-title"
+  aria-live="polite"
+  class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+>
+  @if (!articleStore.isFetchArticleListLoading()) {
+    @for (article of articleStore.articles(); track article.slug) {
+      <al-article-card [article]="article" cardType="regular" />
+    }
+  } @else {
+    <al-article-regular-card-skeleton
+      *alRepeat="pagination().take"
+      class="animate-pulse-from-0"
+    />
+  }
+</section>
+
+<footer class="bg-al-card mt-16 rounded-lg border px-1 py-5">
+  <al-pagination
+    alQueryPagination
+    [pageSize]="pagination().take"
+    [skip]="pagination().skip"
+    [total]="articleStore.total()"
+    (pageChange)="pageChange($event)"
+  />
+</footer>
diff --git a/libs/blog/articles/feature-angular-in-depth/src/lib/feature-angular-in-depth/feature-angular-in-depth.component.ts b/libs/blog/articles/feature-angular-in-depth/src/lib/feature-angular-in-depth/feature-angular-in-depth.component.ts
@@ -0,0 +1,56 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+
+import { ArticleListStore } from '@angular-love/blog/articles/data-access';
+import {
+  ArticleCompactCardSkeletonComponent,
+  ArticleRegularCardSkeletonComponent,
+  UiArticleCardComponent,
+} from '@angular-love/blog/articles/ui-article-card';
+import {
+  PageChangeEvent,
+  PaginationComponent,
+  QueryPaginationDirective,
+} from '@angular-love/blog/shared/ui-pagination';
+import { RepeatDirective } from '@angular-love/utils';
+
+@Component({
+  selector: 'al-angular-in-depth',
+  standalone: true,
+  imports: [
+    PaginationComponent,
+    QueryPaginationDirective,
+    UiArticleCardComponent,
+    ArticleCompactCardSkeletonComponent,
+    ArticleRegularCardSkeletonComponent,
+    RepeatDirective,
+  ],
+  templateUrl: './feature-angular-in-depth.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'flex flex-col  h-full w-full',
+  },
+})
+export class FeatureAngularInDepthComponent {
+  pagination = signal({ take: 12, skip: 0 });
+
+  protected readonly articleStore = inject(ArticleListStore);
+
+  constructor() {
+    const query = computed(() => ({
+      ...this.pagination(),
+      category: 'angular-in-depth' as const,
+    }));
+
+    this.articleStore.fetchArticleList(query);
+  }
+  protected pageChange(event: PageChangeEvent) {
+    window.scrollTo(0, 0);
+    this.pagination.set(event);
+  }
+}
diff --git a/libs/blog/articles/feature-angular-in-depth/src/test-setup.ts b/libs/blog/articles/feature-angular-in-depth/src/test-setup.ts
@@ -0,0 +1,9 @@
+import 'jest-preset-angular/setup-jest';
+
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
diff --git a/libs/blog/articles/feature-angular-in-depth/tsconfig.json b/libs/blog/articles/feature-angular-in-depth/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "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/articles/feature-angular-in-depth/tsconfig.lib.json b/libs/blog/articles/feature-angular-in-depth/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/articles/feature-angular-in-depth/tsconfig.spec.json b/libs/blog/articles/feature-angular-in-depth/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/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
@@ -51,6 +51,7 @@ export class FeatureLatestArticlesComponent {
   constructor() {
     this._articleListStore.fetchArticleList({
       take: 5,
+      excludeCategory: 'angular-in-depth-en',
     });
   }
 }
diff --git a/libs/blog/articles/feature-latest-articles/src/lib/latest-articles-page/latest-articles-page.component.ts b/libs/blog/articles/feature-latest-articles/src/lib/latest-articles-page/latest-articles-page.component.ts
@@ -43,6 +43,7 @@ export class FeatureLatestArticlesPageComponent {
   constructor() {
     const query = computed(() => ({
       ...this.pagination(),
+      excludeCategory: 'angular-in-depth-en',
     }));
 
     this.articleStore.fetchArticleList(query);
diff --git a/libs/blog/articles/feature-list/src/lib/articles-list-container.component.html b/libs/blog/articles/feature-list/src/lib/articles-list-container.component.html
@@ -6,6 +6,13 @@
     category="recommended"
   />
 </div>
+
+@if (activeLang === 'en') {
+  <div class="mb-10 mt-10">
+    <al-category-section-container category="angular-in-depth" />
+  </div>
+}
+
 <div class="mt-10">
   <al-category-section-container category="news" />
 </div>
diff --git a/libs/blog/articles/feature-list/src/lib/articles-list-container.component.ts b/libs/blog/articles/feature-list/src/lib/articles-list-container.component.ts
@@ -4,6 +4,7 @@ import {
   inject,
   Signal,
 } from '@angular/core';
+import { TranslocoService } from '@jsverse/transloco';
 
 import { ArticleListStore } from '@angular-love/blog/articles/data-access';
 import { ArticlePreview } from '@angular-love/contracts/articles';
@@ -19,6 +20,7 @@ import { CategorySectionContainerComponent } from './category-section-container/
   standalone: true,
 })
 export class ArticlesListContainerComponent {
+  readonly activeLang = inject(TranslocoService).getActiveLang();
   private readonly _articleListStore = inject(ArticleListStore);
 
   readonly isFetchArticleListLoading: Signal<boolean> =
diff --git a/libs/blog/articles/feature-list/src/lib/category-section-container/category-section-container.component.ts b/libs/blog/articles/feature-list/src/lib/category-section-container/category-section-container.component.ts
@@ -25,6 +25,7 @@ const displayNameDict: Record<ArticleCategory, string> = {
   recommended: 'homePage.recommended',
   latest: 'homePage.latest',
   authors: 'homePage.authors',
+  'angular-in-depth': 'homePage.angularInDepth',
 };
 
 // TODO: Rethink if we need seperated lib for this smart component (usage only for feature-list)
@@ -66,7 +67,6 @@ export class CategorySectionContainerComponent {
     const query = computed(() => ({
       category: this.category(),
       take: this.take(),
-      excludeRecent: 5,
     }));
 
     this.articleStore.fetchArticleList(query);
diff --git a/libs/blog/articles/feature-shell/src/lib/routes.ts b/libs/blog/articles/feature-shell/src/lib/routes.ts
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
diff --git a/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss b/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss
diff --git a/libs/blog/authors/data-access/src/lib/dto/authors.query.ts b/libs/blog/authors/data-access/src/lib/dto/authors.query.ts
diff --git a/tsconfig.base.json b/tsconfig.base.json

Original file line number	Diff line number	Diff line change
`@@ -48,13 +48,15 @@ export class FeatureAboutUsComponent implements OnInit {`
`48`	`48`	`private readonly _pageSize = this._authorListStore.pageSize;`
`49`	`49`	`private readonly _sortedTitles =`
`50`	`50`	`'key_contributor,contributor,gde,hoa,blogger';`
	`51`	`+ private readonly _acfFormat = 'standard';`
`51`	`52`
`52`	`53`	`ngOnInit(): void {`
`53`	`54`	`if (this.authorsCards().length === 0) {`
`54`	`55`	`this._authorListStore.fetchAuthorList({`
`55`	`56`	`take: this._pageSize(),`
`56`	`57`	`skip: 0,`
`57`	`58`	`sortedTitles: this._sortedTitles,`
	`59`	`+ acfFormat: this._acfFormat,`
`58`	`60`	`});`
`59`	`61`	`}`
`60`	`62`	`}`
`@@ -65,6 +67,7 @@ export class FeatureAboutUsComponent implements OnInit {`
`65`	`67`	`take: this._pageSize(),`
`66`	`68`	`skip: this._skip() + this._pageSize(),`
`67`	`69`	`sortedTitles: this._sortedTitles,`
	`70`	`+ acfFormat: this._acfFormat,`
`68`	`71`	`});`
`69`	`72`	`}`
`70`	`73`	`}`