WIP: added listing pages and masonary layout

src/app/app-routing.module.ts

@@ -13,6 +13,13 @@ const routes: Routes = [
           import('./pages/home/home.module').then((m) => m.HomeModule),
       },
       { path: '', redirectTo: 'home', pathMatch: 'full' },
+      {
+        path: 'listings',
+        loadChildren: async () =>
+          await (
+            await import('./pages/listings/listings.module')
+          ).ListingsModule,
+      },
     ],
   },
 ];

src/app/global/header/header.component.html

@@ -15,10 +15,10 @@
             </form>
         </div>
         <div class="ml-auto flex align-center  h-100">
-            <button title="Create a Post on Dev.to" class="post-button">
+            <button title="Create a Post on Dev.to" class="btn post-button">
                 Create Post
             </button>
-            <button class="icon-button">
+            <button class="btn icon-button">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
                     aria-labelledby="akj1rei8d87dyx7nuhetj7qa5a2ylnvs" class="crayons-icon">
                     <title id="akj1rei8d87dyx7nuhetj7qa5a2ylnvs">Connect to people</title>
@@ -27,14 +27,14 @@
                     </path>
                 </svg>
             </button>
-            <button class="icon-button">
+            <button class="btn icon-button">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
                     aria-labelledby="apyef7jrvot9esiwen8r6djnpc2j9a8m" class="crayons-icon">
                     <title id="apyef7jrvot9esiwen8r6djnpc2j9a8m">Notifications</title>
                     <path d="M20 17h2v2H2v-2h2v-7a8 8 0 1116 0v7zm-2 0v-7a6 6 0 10-12 0v7h12zm-9 4h6v2H9v-2z"></path>
                 </svg>
             </button>
-            <button class="icon-button">
+            <button class="btn icon-button">
                 <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CpZlDEKK--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/298681/cea07f4f-852d-44d2-84c5-b5806a5dd542.jpeg" class="avatar-image"/>
             </button>
         </div>

src/app/models/Listings.ts

@@ -0,0 +1,30 @@
+
+  export interface Author {
+      username: string;
+      name: string;
+      profile_image_90: string;
+  }
+
+  export interface Listing {
+      id: number;
+      body_markdown: string;
+      bumped_at: Date;
+      category: string;
+      contact_via_connect: boolean;
+      expires_at?: any;
+      originally_published_at: Date;
+      location: string;
+      processed_html: string;
+      published: boolean;
+      slug: string;
+      title: string;
+      user_id: number;
+      tags: string[];
+      author: Author;
+  }
+
+
+
+
+
+export type Listings = Listings[];

src/app/pages/home/articles/services/article-api.service.ts

@@ -24,4 +24,5 @@ export class ArticleApiService {
     if(params) requestParams = requestParams.set('top', 3);
     return requestParams.toString();
   }
+
 }

src/app/pages/listings/contents/listing-card/listing-card.component.html

@@ -0,0 +1,36 @@
+<div class="listing-card">
+  <div class="listing-card-header">
+    <h2 class="listing-header-title">
+      <a href="">{{ listing.title }}</a>
+    </h2>
+    <time [attr.title]="listing.title" [attr.datetime]="listing.published">
+      {{ listing.bumped_at | date: "MMM d" }}
+    </time>
+    <div class="listing-tags">
+      <a
+        class="listing-tag-link"
+        href=""
+        *ngFor="let tag of listing.tags; let i = index"
+      >
+        <span [class.negative-margin]="i === 0" class="listing-tag-prefix"
+          >#</span
+        >{{ tag }}
+      </a>
+    </div>
+  </div>
+  <div class="listing-card-body" [innerHTML]="listing.processed_html">
+  </div>
+ <div class="author-details flex align-center">
+      <a class="author-profile" href="">
+          <img width="32" height="32" class="author-profile-img" [src]="listing.author.profile_image_90" alt="">
+      </a>
+      <div class="author-name">
+        <a href="" class="author-name-link">
+            {{listing.author.name}}
+        </a>
+        <div class="listing-category">
+          <a href="">{{listing.category}}</a>
+        </div>
+      </div>
+  </div> 
+</div>

src/app/pages/listings/contents/listing-card/listing-card.component.scss

@@ -0,0 +1,115 @@
+:host {
+  border-radius: 5px;
+  background: #fff;
+  color: #08090a;
+  box-shadow: 0 0 0 1px rgba(8, 9, 10, 0.1);
+  overflow-wrap: anywhere;
+}
+.listing-card {
+  position: relative;
+  padding: 1rem;
+}
+.listing-header-title {
+  padding-right: 48px;
+}
+
+.listing-header-title {
+  line-height: 1.25;
+  a:hover {
+    color: #323ebe;
+  }
+}
+::ng-deep .listing-card-body {
+  p {
+    margin: 0;
+    word-break: break-word;
+  }
+}
+.negative-margin {
+  margin-left: -4px;
+}
+h2 {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+a {
+  color: #202428;
+}
+.listing-card-header {
+  margin-bottom: 12px;
+}
+time {
+  color: #64707d;
+  font-size: 0.85em;
+}
+.listing-card-body {
+  margin-bottom: 1rem;
+}
+
+.listing-category {
+  line-height: 1.125rem;
+  margin: 0;
+  a {
+    font-size: 0.75rem;
+    color: #64707d;
+  }
+}
+
+.author-name-link {
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.listing-tags {
+  font-size: 0.875rem;
+}
+.listing-tag-link:hover {
+  color: #08090a;
+}
+.listing-tag-link {
+  padding: 4px;
+  color: #64707d;
+  display: inline-block;
+  line-height: 1.3;
+  border-radius: 5px;
+}
+.listing-tag-prefix {
+  opacity: 0.4;
+  font-weight: normal;
+}
+
+.author-profile {
+  position: relative;
+}
+.author-profile::after {
+  content: "";
+  border: 1px solid #08090a;
+  opacity: 0.15;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 100%;
+  pointer-events: none;
+}
+
+.author-details {
+  font-size: 0.875rem;
+  gap: 8px;
+}
+.author-profile-img {
+  border-radius: 100%;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.author-profile {
+  width: 2rem;
+  display: inline-block;
+  border-radius: 100%;
+  position: relative;
+  background-color: #64707d;
+  height: 2rem;
+}

src/app/pages/listings/contents/listing-card/listing-card.component.spec.ts

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

src/app/pages/listings/contents/listing-card/listing-card.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Listing } from 'src/app/models/Listings';
+
+@Component({
+  selector: 'app-listing-card',
+  templateUrl: './listing-card.component.html',
+  styleUrls: ['./listing-card.component.scss']
+})
+export class ListingCardComponent implements OnInit {
+  @Input() listing!:Listing;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/listings/contents/listings-content/listings-content.component.html

@@ -0,0 +1,7 @@
+<div class="listing-container">
+    <div class="l" appMasonary>
+        <!-- <ng-container> -->
+            <app-listing-card  *ngFor="let listing of listingStore$|push" [attr.id]="listing.id" [listing]="listing" ></app-listing-card>
+        <!-- </ng-container> -->
+    </div>
+</div>

src/app/pages/listings/contents/listings-content/listings-content.component.scss

@@ -0,0 +1,8 @@
+.listing-container{
+    font-size: 16px;
+}
+.l{
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+}

src/app/pages/listings/contents/listings-content/listings-content.component.spec.ts

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

src/app/pages/listings/contents/listings-content/listings-content.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { ListingsStore } from '../service/listings-store';
+
+@Component({
+  selector: 'app-listings-content',
+  templateUrl: './listings-content.component.html',
+  styleUrls: ['./listings-content.component.scss']
+})
+export class ListingsContentComponent implements OnInit {
+  listingStore$ = this.listingsStore.listings$;
+
+  constructor(private listingsStore:ListingsStore) { }
+
+  ngOnInit(): void {
+  }
+
+}