prettier format

wellwind · Dec 5, 2024 · 57f5ef6 · 57f5ef6
1 parent 09e09c9
commit 57f5ef6
Show file tree

Hide file tree

Showing 20 changed files with 767 additions and 739 deletions.
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "postcss": "^8.4.17",
+    "prettier": "^3.4.2",
     "shx": "^0.3.3",
     "tailwindcss": "^3.1.8",
     "ts-node": "^10.2.1",

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,14 +15,14 @@ import { filter, pairwise, startWith } from 'rxjs';
 declare const gtag: (
   command: string,
   action: string,
-  config: { page_path: string }
+  config: { page_path: string },
 ) => void;
 
 @Component({
-    selector: 'app-root',
-    imports: [LayoutComponent],
-    template: `<app-layout></app-layout>`,
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-root',
+  imports: [LayoutComponent],
+  template: `<app-layout></app-layout>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
   private router = inject(Router);
@@ -46,12 +46,12 @@ export class AppComponent implements OnInit {
       .pipe(
         filter((event) => event instanceof NavigationEnd),
         startWith(null),
-        pairwise()
+        pairwise(),
       )
       .subscribe((events) => {
         if (!this.platformService.isServer && environment.production) {
           this.trackService.sendTrack(
-            (events[0] as NavigationEnd | null)?.url || ''
+            (events[0] as NavigationEnd | null)?.url || '',
           );
           gtag('event', 'page_view', {
             page_path: (events[1] as NavigationEnd | null)?.url || '',

diff --git a/src/app/blog/blog-archives/blog-archives.component.ts b/src/app/blog/blog-archives/blog-archives.component.ts
@@ -14,44 +14,42 @@ import { getPagePosts } from '../get-page-posts';
 const PAGE_SIZE = 10;
 
 @Component({
-    selector: 'app-blog-archives',
-    template: `
+  selector: 'app-blog-archives',
+  template: `
     @for (yearPosts of posts(); track yearPosts.year) {
-
-    <mat-toolbar class="year-header mat-elevation-z4 !mb-2">
-      <h1>{{ yearPosts.year }}</h1>
-      <h2>年 (共 {{ yearPosts.postCount }} 篇文章)</h2>
-    </mat-toolbar>
-
-    @for (post of yearPosts.posts; track post.slug) {
-
-    <mat-card appearance="outlined" class="blog-post">
-      <mat-card-title class="blog-post-title">
-        <a [routerLink]="post | postDateAsPath">{{ post.title }}</a>
-      </mat-card-title>
-
-      <mat-card-subtitle class="blog-post-subtitle">
-        <app-blog-post-subtitle [postMeta]="post"></app-blog-post-subtitle>
-      </mat-card-subtitle>
-
-      <mat-card-content class="blog-post-content">
-        <div [innerHTML]="post.summary"></div>
-      </mat-card-content>
-
-      <mat-card-footer>
-        <a
-          class="read-more"
-          [routerLink]="post | postDateAsPath"
-          mat-raised-button
-          color="primary"
-        >
-          <mat-icon>read_more</mat-icon>
-          <span>繼續閱讀</span>
-        </a>
-      </mat-card-footer>
-    </mat-card>
-
-    } }
+      <mat-toolbar class="year-header mat-elevation-z4 !mb-2">
+        <h1>{{ yearPosts.year }}</h1>
+        <h2>年 (共 {{ yearPosts.postCount }} 篇文章)</h2>
+      </mat-toolbar>
+
+      @for (post of yearPosts.posts; track post.slug) {
+        <mat-card appearance="outlined" class="blog-post">
+          <mat-card-title class="blog-post-title">
+            <a [routerLink]="post | postDateAsPath">{{ post.title }}</a>
+          </mat-card-title>
+
+          <mat-card-subtitle class="blog-post-subtitle">
+            <app-blog-post-subtitle [postMeta]="post"></app-blog-post-subtitle>
+          </mat-card-subtitle>
+
+          <mat-card-content class="blog-post-content">
+            <div [innerHTML]="post.summary"></div>
+          </mat-card-content>
+
+          <mat-card-footer>
+            <a
+              class="read-more"
+              [routerLink]="post | postDateAsPath"
+              mat-raised-button
+              color="primary"
+            >
+              <mat-icon>read_more</mat-icon>
+              <span>繼續閱讀</span>
+            </a>
+          </mat-card-footer>
+        </mat-card>
+      }
+    }
 
     <mat-card appearance="outlined" class="pagination">
       <app-pagination
@@ -61,62 +59,68 @@ const PAGE_SIZE = 10;
       ></app-pagination>
     </mat-card>
   `,
-    styles: ``,
-    imports: [
-        MatToolbarModule,
-        MatCardModule,
-        RouterLink,
-        BlogPostSubtitleComponent,
-        MatButtonModule,
-        MatIconModule,
-        PaginationComponent,
-        PostDateAsPathPipe,
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  styles: ``,
+  imports: [
+    MatToolbarModule,
+    MatCardModule,
+    RouterLink,
+    BlogPostSubtitleComponent,
+    MatButtonModule,
+    MatIconModule,
+    PaginationComponent,
+    PostDateAsPathPipe,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlogArchivesComponent {
   protected currentPage = getRouteParam(
     (paramMap) => +(paramMap.get('page') || 1),
-    1
+    1,
   );
 
   protected totalPosts = getRouteData(
     (data) => data.posts as Array<PostMetaWithSlug>,
-    []
+    [],
   );
 
   protected yearPostsCount = computed(() => {
-    return this.totalPosts().reduce((prev, curr) => {
-      const year = curr.date.substr(0, 4);
-      if (!prev[year]) {
-        prev[year] = 0;
-      }
-      prev[year] += 1;
-      return prev;
-    }, {} as { [key: string]: number });
+    return this.totalPosts().reduce(
+      (prev, curr) => {
+        const year = curr.date.substr(0, 4);
+        if (!prev[year]) {
+          prev[year] = 0;
+        }
+        prev[year] += 1;
+        return prev;
+      },
+      {} as { [key: string]: number },
+    );
   });
 
   protected posts = computed(() => {
     const totalPosts = this.totalPosts();
     const pageNum = this.currentPage();
     const pagePosts = getPagePosts(pageNum, PAGE_SIZE, totalPosts);
     const yearPostsCount = this.yearPostsCount();
-    return pagePosts.reduce((prev, curr) => {
-      const year = curr.date.slice(0, 4);
-
-      const yearPosts = prev.find((item) => item.year === year);
-      if (!yearPosts) {
-        prev.push({
-          year,
-          postCount: yearPostsCount[year],
-          posts: [curr],
-        });
-      } else {
-        yearPosts.posts.push(curr);
-      }
-
-      return prev;
-    }, [] as { year: string; postCount: number; posts: PostMetaWithSlug[] }[]);
+    return pagePosts.reduce(
+      (prev, curr) => {
+        const year = curr.date.slice(0, 4);
+
+        const yearPosts = prev.find((item) => item.year === year);
+        if (!yearPosts) {
+          prev.push({
+            year,
+            postCount: yearPostsCount[year],
+            posts: [curr],
+          });
+        } else {
+          yearPosts.posts.push(curr);
+        }
+
+        return prev;
+      },
+      [] as { year: string; postCount: number; posts: PostMetaWithSlug[] }[],
+    );
   });
 
   protected totalPage = computed(() => {

diff --git a/src/app/blog/blog-categories/blog-categories-posts.component.ts b/src/app/blog/blog-categories/blog-categories-posts.component.ts
@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -16,41 +22,39 @@ import { getPagePosts } from '../get-page-posts';
 const PAGE_SIZE = 10;
 
 @Component({
-    selector: 'app-blog-categories-posts',
-    template: `
+  selector: 'app-blog-categories-posts',
+  template: `
     <mat-toolbar class="categories-header mat-elevation-z4 !mb-2">
       <h1>{{ categorySlug() || '' | unslugify }}</h1>
       <h2>分類 (共 {{ categoryPostsCount() }} 篇文章)</h2>
     </mat-toolbar>
 
     @for (post of posts(); track post.slug) {
+      <mat-card appearance="outlined" class="blog-post">
+        <mat-card-title class="blog-post-title">
+          <a [routerLink]="post | postDateAsPath">{{ post.title }}</a>
+        </mat-card-title>
 
-    <mat-card appearance="outlined" class="blog-post">
-      <mat-card-title class="blog-post-title">
-        <a [routerLink]="post | postDateAsPath">{{ post.title }}</a>
-      </mat-card-title>
+        <mat-card-subtitle class="blog-post-subtitle">
+          <app-blog-post-subtitle [postMeta]="post"></app-blog-post-subtitle>
+        </mat-card-subtitle>
 
-      <mat-card-subtitle class="blog-post-subtitle">
-        <app-blog-post-subtitle [postMeta]="post"></app-blog-post-subtitle>
-      </mat-card-subtitle>
-
-      <mat-card-content class="blog-post-content">
-        <div [innerHTML]="post.summary"></div>
-      </mat-card-content>
-
-      <mat-card-footer>
-        <a
-          class="read-more"
-          [routerLink]="post | postDateAsPath"
-          mat-raised-button
-          color="primary"
-        >
-          <mat-icon>read_more</mat-icon>
-          <span>繼續閱讀</span>
-        </a>
-      </mat-card-footer>
-    </mat-card>
+        <mat-card-content class="blog-post-content">
+          <div [innerHTML]="post.summary"></div>
+        </mat-card-content>
 
+        <mat-card-footer>
+          <a
+            class="read-more"
+            [routerLink]="post | postDateAsPath"
+            mat-raised-button
+            color="primary"
+          >
+            <mat-icon>read_more</mat-icon>
+            <span>繼續閱讀</span>
+          </a>
+        </mat-card-footer>
+      </mat-card>
     }
 
     <mat-card appearance="outlined" class="pagination">
@@ -61,41 +65,41 @@ const PAGE_SIZE = 10;
       ></app-pagination>
     </mat-card>
   `,
-    styles: ``,
-    imports: [
-        MatToolbarModule,
-        MatCardModule,
-        RouterLink,
-        BlogPostSubtitleComponent,
-        MatButtonModule,
-        MatIconModule,
-        PaginationComponent,
-        UnslugifyPipe,
-        PostDateAsPathPipe,
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  styles: ``,
+  imports: [
+    MatToolbarModule,
+    MatCardModule,
+    RouterLink,
+    BlogPostSubtitleComponent,
+    MatButtonModule,
+    MatIconModule,
+    PaginationComponent,
+    UnslugifyPipe,
+    PostDateAsPathPipe,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlogCategoriesPostsComponent {
   private siteMetaService = inject(SiteMetaService);
 
   protected categorySlug = getRouteParam(
     (paramMap) => paramMap.get('category-slug'),
-    ''
+    '',
   );
   protected currentPage = getRouteParam(
     (paramMap) => +(paramMap.get('page') || 1),
-    1
+    1,
   );
   protected categoryPosts = getRouteData(
     (data) => data.posts as Array<PostMetaWithSlug>,
-    []
+    [],
   );
   protected categoryPostsCount = computed(() => this.categoryPosts().length);
   protected posts = computed(() =>
-    getPagePosts(this.currentPage(), PAGE_SIZE, this.categoryPosts())
+    getPagePosts(this.currentPage(), PAGE_SIZE, this.categoryPosts()),
   );
   protected totalPage = computed(() =>
-    Math.ceil(this.categoryPostsCount() / PAGE_SIZE)
+    Math.ceil(this.categoryPostsCount() / PAGE_SIZE),
   );
 
   private _updateMetaEffect = effect(() => {