feat/display-author-titles (#316)

* feat(client): show author titles in his/her card

* feat: add AuthorTitle type, improve styling

Author: dokolyski

apps/blog/src/assets/i18n/en.json

@@ -19,6 +19,14 @@
   "authorPage": {
     "posted_by": "Posted by {{name}}"
   },
+  "authorCard": {
+    "titles": {
+      "blogger": "Blogger",
+      "key_contributor": "Key Contributor",
+      "contributor": "Contributor",
+      "gde": "Google Developer Expert"
+    }
+  },
   "becomeAuthorPage": {
     "title": "Become a part of angular.love!",
     "improvements": {

apps/blog/src/assets/i18n/pl.json

@@ -22,6 +22,14 @@
   "authorPage": {
     "posted_by": "Opublikowane przez {{name}}"
   },
+  "authorCard": {
+    "titles": {
+      "blogger": "Blogger",
+      "key_contributor": "Key Contributor",
+      "contributor": "Contributor",
+      "gde": "Google Developer Expert"
+    }
+  },
   "becomeAuthorPage": {
     "title": "Zostań częścią angular.love!",
     "improvements": {

libs/blog-bff/articles/api/src/lib/dtos.ts

@@ -1,3 +1,5 @@
+import { AuthorTitle } from '@angular-love/blog/contracts/authors';
+
 export interface WPPostDto {
   date: string;
   slug: string;
@@ -70,7 +72,7 @@ export interface WPPostDetailsDto {
     github: string;
     twitter: string;
     linkedin: string;
-    titles: string[];
+    titles: AuthorTitle[];
   };
   acf: {
     reading_time: string | number;

libs/blog-bff/authors/api/src/lib/dtos.ts

@@ -1,3 +1,5 @@
+import { AuthorTitle } from '@angular-love/blog/contracts/authors';
+
 export interface WPAuthorDto {
   name: string;
   slug: string;
@@ -9,7 +11,7 @@ export interface WPAuthorDto {
     al_github_nickname: string;
     al_twitter_handle: string;
     al_linkedin_id: string;
-    al_titles: string[];
+    al_titles: AuthorTitle[];
     user_description_pl: string;
     user_description_en: string;
   };

libs/blog-contracts/articles/src/lib/articles.ts

@@ -1,3 +1,5 @@
+import { AuthorTitle } from '@angular-love/blog/contracts/authors';
+
 export const articleCategories = [
   'news',
   'guides',
@@ -89,6 +91,7 @@ export interface Article {
     description: string;
     avatarUrl: string;
     position: string;
+    titles: AuthorTitle[];
     slug: string;
     github: string | null;
     twitter: string | null;

libs/blog-contracts/authors/src/lib/authors.ts

@@ -1,3 +1,10 @@
+export type AuthorTitle =
+  | 'gde'
+  | 'hoa'
+  | 'contributor'
+  | 'key_contributor'
+  | 'blogger';
+
 export interface Author {
   slug: string;
   name: string;
@@ -10,4 +17,5 @@ export interface Author {
   github: string | null;
   twitter: string | null;
   linkedin: string | null;
+  titles: AuthorTitle[];
 }

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts

@@ -10,6 +10,7 @@ import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { GiscusCommentsComponent } from '@angular-love/blog/articles/feature-comments';
 import { RelatedArticlesComponent } from '@angular-love/blog/articles/feature-related-articles';
+import { ArticleCompactCardSkeletonComponent } from '@angular-love/blog/articles/ui-article-card';
 import { ArticleContentComponent } from '@angular-love/blog/articles/ui-article-content';
 import {
   TableOfContentsComponent,
@@ -26,10 +27,9 @@ import {
 } from '@angular-love/blog/shared/ui-card';
 import { UiDifficultyComponent } from '@angular-love/blog/shared/ui-difficulty';
 import { Article } from '@angular-love/contracts/articles';
+import { RepeatDirective } from '@angular-love/utils';
 
 import { ArticleShareIconsComponent } from '../article-share-icons/article-share-icons.component';
-import { ArticleCompactCardSkeletonComponent } from "@angular-love/blog/articles/ui-article-card";
-import { RepeatDirective } from "@angular-love/utils";
 
 @Component({
   selector: 'al-article-details',

libs/blog/articles/feature-article/src/lib/article-details/article-details.stories.ts

@@ -48,6 +48,7 @@ const articleDetails: Article = {
     github: '',
     linkedin: '',
     twitter: '',
+    titles: ['Software Engineer', 'GDE'],
   },
   anchors: [],
   publishDate: new Date('2021-01-01').toISOString(),

libs/blog/authors/data-access/src/lib/state/author-details.store.ts

@@ -9,7 +9,7 @@ import {
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { filter, pipe, switchMap, tap } from 'rxjs';
 
-import { UiAuthorCard } from '@angular-love/blog/authors/types';
+import { UiAuthorCard } from '@angular-love/blog/authors/ui-author-card';
 import { Author } from '@angular-love/blog/contracts/authors';
 import { withLangState } from '@angular-love/blog/i18n/data-access';
 import {

libs/blog/authors/data-access/src/lib/state/author-list-store.ts

@@ -9,7 +9,7 @@ import {
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe, switchMap, tap } from 'rxjs';
 
-import { UiAuthorCard } from '@angular-love/blog/authors/types';
+import { UiAuthorCard } from '@angular-love/blog/authors/ui-author-card';
 import { Author } from '@angular-love/blog/contracts/authors';
 import { withLangState } from '@angular-love/blog/i18n/data-access';
 import {