src/app/post/components/post-card/post-card.component.html

@@ -17,13 +17,7 @@
     />
   </div>
   <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center">
-    <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]">
-      <span>{{ post.tags[0].name }}</span>
-    </div>
-    <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]">
-      <span>info</span>
-    </div>
-
+    <app-post-tag [post]="post"></app-post-tag>
     <div fxLayout="row" class="title">
       {{ post.title }}
     </div>

src/app/post/components/post-card/post-card.component.scss

@@ -15,13 +15,7 @@
       }
     }
   }
-  .tag {
-    @include cn-bold-16;
-    text-transform: uppercase;
-    color: $secondary-color;
-    fill: $secondary-color;
-    stroke: $secondary-color;
-  }
+
   .title {
     @media #{$large-phone} {
       @include cn-bold-18;

src/app/post/components/post-card/post-card.component.ts

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { TagEnum } from '../../enum/tag.enum';
 import { Post } from '../../models/post.model';
@@ -19,6 +19,6 @@ export class PostCardComponent {
   }
 
   public isAppelAProjet(): boolean {
-    return this.post.tags[0].slug === this.tagEnum.appels;
+    return this.post.tags[0] && this.post.tags[0].slug === this.tagEnum.appels;
   }
 }

src/app/post/components/post-details/post-details.component.html

@@ -9,12 +9,7 @@
   </div>
   <div class="gh-canvas">
     <div fxLayout="column" fxLayoutAlign="center none">
-      <div *ngIf="post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
-        <span>{{ post.tags[0].name }}</span>
-      </div>
-      <div *ngIf="!post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
-        <span>Infos</span>
-      </div>
+      <app-post-tag [post]="post"></app-post-tag>
       <div fxLayout="row" class="title">{{ post.title }}</div>
       <div fxLayout="column" class="informations">
         <div>{{ post.author }}</div>

src/app/post/components/post-details/post-details.component.scss

@@ -14,13 +14,6 @@
   }
 }
 
-.tag {
-  @include cn-bold-16;
-  text-transform: uppercase;
-  color: $secondary-color;
-  fill: $secondary-color;
-  stroke: $secondary-color;
-}
 .informations {
   @include cn-regular-16;
   div:nth-child(2n) {

src/app/post/components/post-list/post-list.component.scss

@@ -130,6 +130,7 @@ h2 {
     grid-template-columns: repeat(auto-fill, minmax(7%, 1fr));
     grid-column-gap: 1%;
     grid-row-gap: 40px;
+    max-width: 1080px;
     .col:nth-child(6n + 1) {
       @include big-container;
       @media #{$news-max} {

src/app/post/components/post-list/post-list.component.ts

@@ -68,14 +68,20 @@ export class PostListComponent implements OnInit {
     });
   }
 
+  /**
+   * Fill articles list with headline handling
+   * @param news {PostWithMeta}
+   */
   public fillArticles(news: PostWithMeta): void {
     this.setNews(news);
-    const headLineTag = this.allPosts.filter((post: Post) => post.tags.some((tag) => tag.slug === TagEnum.aLaUne));
+    const headLineTag = this.allPosts.filter((post: Post) =>
+      post.tags.some((tag) => tag && tag.slug === TagEnum.aLaUne)
+    );
 
     const headIndex = this.allPosts.findIndex((post) => post.id === headLineTag[0].id);
     this.allPosts.splice(headIndex, 1);
 
-    this.allPosts = [...headLineTag, ...this.allPosts];
+    this.allPosts = [...headLineTag, ..._.difference(this.allPosts, headLineTag)];
   }
 
   public getPosts(filters?: Tag[]): void {

src/app/post/components/post-tag/post-tag.component.html

+<div>
+  <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]">
+    <span>{{ displayTag(post) }}</span>
+  </div>
+  <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]">
+    <span>infos</span>
+  </div>
+</div>

src/app/post/components/post-tag/post-tag.component.scss

+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+
+.tag {
+  @include cn-bold-16;
+  text-transform: uppercase;
+  color: $secondary-color;
+  fill: $secondary-color;
+  stroke: $secondary-color;
+}

src/app/post/components/post-tag/post-tag.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostTagComponent } from './post-tag.component';
+
+describe('PostTagComponent', () => {
+  let component: PostTagComponent;
+  let fixture: ComponentFixture<PostTagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostTagComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostTagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/post/components/post-tag/post-tag.component.ts

+import { Component, Input } from '@angular/core';
+import { TagEnum } from '../../enum/tag.enum';
+import { Post } from '../../models/post.model';
+
+@Component({
+  selector: 'app-post-tag',
+  templateUrl: './post-tag.component.html',
+  styleUrls: ['./post-tag.component.scss'],
+})
+export class PostTagComponent {
+  @Input() post: Post;
+
+  public displayTag(post: Post): string {
+    if (post.tags.length > 1) {
+      return post.tags.filter((tag) => tag.slug !== TagEnum.aLaUne)[0].name;
+    }
+    return post.tags[0].name;
+  }
+}

src/app/post/post.module.ts

@@ -10,6 +10,7 @@ import { PostCardComponent } from './components/post-card/post-card.component';
 import { PostPublishComponent } from './components/post-publish/post-publish.component';
 import { PostModalFiltersComponent } from './components/post-modal-filters/post-modal-filters.component';
 import { TagResolver } from './resolvers/tags.resolver';
+import { PostTagComponent } from './components/post-tag/post-tag.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { TagResolver } from './resolvers/tags.resolver';
     PostCardComponent,
     PostModalFiltersComponent,
     PostPublishComponent,
+    PostTagComponent,
   ],
   imports: [CommonModule, PostRoutingModule, SharedModule],
   providers: [TagResolver],