added sorting for location pages and changed default count items for … (#167)

* added sorting for location pages and changed default count items for each page

* prettier

* fix comment

* fix comment

Author: RobertSenkel

src/app/app.component.ts

@@ -6,11 +6,7 @@ import { FooterComponent } from './core/layout/footer/footer.component';
 @Component({
   selector: 'blog-root',
   standalone: true,
-  imports: [
-    NavigationComponent,
-    FooterComponent,
-    RouterOutlet
-  ],
+  imports: [NavigationComponent, FooterComponent, RouterOutlet],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })

src/app/app.config.ts

@@ -10,7 +10,7 @@ import {
   provideRouter,
   withComponentInputBinding,
   withInMemoryScrolling,
-  withRouterConfig
+  withRouterConfig,
 } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -24,7 +24,7 @@ import {
   AUTHORS_AVATAR_PATH_TOKEN,
   USE_PROCESSED_IMAGES,
   O11Y_CONFIG_TOKEN,
-  SPECIAL_CATEGORIES
+  SPECIAL_CATEGORIES,
 } from './core/config/configuration-tokens';
 import { HtmlInMarkdownService } from './core/services/html-in-markdown.service';
 import { ObservabilityConfig } from './core/model/observability.model';
@@ -68,8 +68,17 @@ export const appConfig: ApplicationConfig = {
     {
       provide: APP_INITIALIZER,
       multi: true,
-      useFactory: (...deps: any) => () => markdownConfig.apply(this, deps),
-      deps: [MarkdownService, DOCUMENT, HtmlInMarkdownService, AssetsService, Router],
+      useFactory:
+        (...deps: any) =>
+        () =>
+          markdownConfig.apply(this, deps),
+      deps: [
+        MarkdownService,
+        DOCUMENT,
+        HtmlInMarkdownService,
+        AssetsService,
+        Router,
+      ],
     },
     {
       provide: APP_INITIALIZER,
@@ -84,12 +93,10 @@ export const appConfig: ApplicationConfig = {
     {
       provide: USE_PROCESSED_IMAGES,
       useValue: !isDevMode(),
-    },{
+    },
+    {
       provide: SPECIAL_CATEGORIES,
-      useValue: [
-        'principles',
-        'meetups',
-      ]
-    }
+      useValue: ['principles', 'meetups'],
+    },
   ],
 };

src/app/app.meta.config.ts

@@ -1,9 +1,10 @@
-import { MetaDefinition } from "@angular/platform-browser";
-import { PostContent } from "./core/model/post.model";
+import { MetaDefinition } from '@angular/platform-browser';
+import { PostContent } from './core/model/post.model';
 
 const prodUrl = 'https://engineering.backbase.com/';
 const rootTitle = 'Backbase Engineering';
-const rootDescription = 'Backbase is a global fintech company creating the best digital banking solutions on the planet. We are a young-spirited, diverse (45+ nationalities), fast-growing and leading company in our niche.';
+const rootDescription =
+  'Backbase is a global fintech company creating the best digital banking solutions on the planet. We are a young-spirited, diverse (45+ nationalities), fast-growing and leading company in our niche.';
 
 export const defaultMeta: MetaDefinition[] = [
   {
@@ -36,10 +37,13 @@ export const notFoundMeta: MetaDefinition[] = [
   {
     name: 'robots',
     content: 'noindex, nofollow',
-  }
-]
+  },
+];
 
-export const getPostMeta = ({ excerpt, title, displayTeaser }: PostContent, url: string) => [
+export const getPostMeta = (
+  { excerpt, title, displayTeaser }: PostContent,
+  url: string
+) => [
   {
     name: 'description',
     content: excerpt,
@@ -60,4 +64,4 @@ export const getPostMeta = ({ excerpt, title, displayTeaser }: PostContent, url:
     property: 'og:description',
     content: excerpt,
   },
-];
+];

src/app/app.routes.map.ts

@@ -1,8 +1,14 @@
 import { Route } from '@angular/router';
 
 const routes = [
-  ['2023/12/13/angular-micro-frontends', '2023/12/13/micro-frontends-with-module-federation'],
-  ['2023/12/13/setup-microfrontend', '2023/12/13/micro-frontends-with-module-federation'],
+  [
+    '2023/12/13/angular-micro-frontends',
+    '2023/12/13/micro-frontends-with-module-federation',
+  ],
+  [
+    '2023/12/13/setup-microfrontend',
+    '2023/12/13/micro-frontends-with-module-federation',
+  ],
   ['2023/10/06/code-coverage', '2023/10/06/code-coverage-for-unit-tests'],
   [
     '2023/09/30/installing-hms-core-in-as-emulator',

src/app/app.routes.ts

@@ -1,4 +1,10 @@
-import { ActivatedRouteSnapshot, Route, Router, RouterStateSnapshot, Routes } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  Route,
+  Router,
+  RouterStateSnapshot,
+  Routes,
+} from '@angular/router';
 import { postRedirects } from './app.routes.map';
 import { EMPTY, Subject, catchError, map, tap } from 'rxjs';
 import { inject, makeStateKey, TransferState } from '@angular/core';
@@ -18,12 +24,16 @@ export const routes: Routes = [
       {
         path: '',
         loadComponent: () =>
-          import('./features/home/home.component').then(mod => mod.HomeComponent),
+          import('./features/home/home.component').then(
+            mod => mod.HomeComponent
+          ),
       },
       {
         path: 'people/:author',
         loadComponent: () =>
-          import('./features/author/author.component').then(m => m.AuthorComponent),
+          import('./features/author/author.component').then(
+            m => m.AuthorComponent
+          ),
       },
       {
         path: ':year/:month/:day/:permalink',
@@ -92,8 +102,8 @@ export const routes: Routes = [
           ),
         data: { meta: notFoundMeta },
       },
-    ]
-  }
+    ],
+  },
 ];
 
 function getRouteData(): Partial<Route> {
@@ -106,41 +116,57 @@ function getRouteData(): Partial<Route> {
         const transferState = inject(TransferState);
         const stateKey = makeStateKey<PostContent | undefined>(url);
         if (transferState.hasKey(stateKey)) {
-          const post = transferState.get<PostContent | undefined>(stateKey, undefined);
+          const post = transferState.get<PostContent | undefined>(
+            stateKey,
+            undefined
+          );
           postData.next(post as PostContent);
           return post;
         }
-        return inject(PostsService).getPost(url)
+        return inject(PostsService)
+          .getPost(url)
           .pipe(
             tap(post => {
               transferState.set<PostContent>(stateKey, post);
-              postData.next(post)}
-            ),
+              postData.next(post);
+            }),
             catchError((_: any) => {
               router.navigate(['**'], { skipLocationChange: true });
               return EMPTY;
             })
-          )
+          );
       },
       meta: (activatedRoute: ActivatedRouteSnapshot) => {
         const url = activatedRoute.url.map(({ path }) => path).join('/');
         const transferState = inject(TransferState);
         const stateKey = makeStateKey<PostContent | undefined>(url);
         if (transferState.hasKey(stateKey)) {
-          return getPostMeta(transferState.get<PostContent | undefined>(stateKey, undefined) as PostContent, url);
+          return getPostMeta(
+            transferState.get<PostContent | undefined>(
+              stateKey,
+              undefined
+            ) as PostContent,
+            url
+          );
         }
-        return postData.pipe(map((post) => getPostMeta(post, url)));
-      }
+        return postData.pipe(map(post => getPostMeta(post, url)));
+      },
     },
     title: (activatedRoute: ActivatedRouteSnapshot) => {
       const url = activatedRoute.url.map(({ path }) => path).join('/');
       const transferState = inject(TransferState);
       const stateKey = makeStateKey<PostContent | undefined>(url);
-      const getTitle = ({ title }: PostContent) => `${title} | ${activatedRoute.parent?.title}`;
+      const getTitle = ({ title }: PostContent) =>
+        `${title} | ${activatedRoute.parent?.title}`;
       if (transferState.hasKey(stateKey)) {
-        return getTitle(transferState.get<PostContent | undefined>(stateKey, undefined) as PostContent);
+        return getTitle(
+          transferState.get<PostContent | undefined>(
+            stateKey,
+            undefined
+          ) as PostContent
+        );
       }
-      return postData.pipe(map((post) => getTitle(post)));
-    }
-  }
+      return postData.pipe(map(post => getTitle(post)));
+    },
+  };
 }

src/app/components/author/author.component.html

@@ -5,13 +5,12 @@
       sm: size === 'sm',
       md: size === 'md',
       lg: size === 'lg',
-      muted: muted
+      muted: muted,
     }">
     <blog-avatar
       class="author__avatar"
       [url]="author.displayAvatar?.[size]"
-      format="circle"
-    ></blog-avatar>
+      format="circle"></blog-avatar>
     <div class="author__details">
       <div class="author__fullname">{{ author.fullname }}</div>
       @if (size === 'lg') {

src/app/components/author/author.component.ts

@@ -29,5 +29,4 @@ export class AuthorComponent {
   @Input() muted = false;
 
   author!: Author;
-
 }