user pushed

Author: ajitsinghkaler

src/app/app-routing.module.ts

@@ -26,7 +26,7 @@ const routes: Routes = [
           ),
       },
       {
-        path: 'user/username',
+        path: 'users/:username',
         loadChildren: () =>
           import('./pages/user-profile/user-profile.module').then(
             (m) => m.UserProfileModule

src/app/pages/article-detail/user/user-detail/user-detail.component.html

@@ -1,7 +1,7 @@
 <aside>
     <div class="aside-card">
         <div class="aside-username">
-            <a href="/{{user.username}}" class="flex">
+            <a href="/users/{{user.username}}" class="flex">
                 <span class="aside-avatar">
                     <img [src]="user.profile_image" alt="" loading="lazy">
                 </span>

src/app/pages/home/articles/article-card/article-card.component.ts

@@ -1,6 +1,11 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Article } from 'src/app/models/articles';
 
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DateagoPipe } from 'src/app/global/pipes/dateago/dateago.pipe';
+import { RouterLink, RouterModule } from '@angular/router';
+
 @Component({
   selector: 'app-article-card',
   templateUrl: './article-card.component.html',
@@ -16,3 +21,10 @@ export class ArticleCardComponent implements OnChanges {
       this.article?.organization?.slug || this.article.user.username;
   }
 }
+
+@NgModule({
+  declarations: [ArticleCardComponent, DateagoPipe],
+  imports: [CommonModule,RouterModule.forChild([])],
+  exports: [ArticleCardComponent],
+})
+export class ArticleCardModule {}

src/app/pages/home/articles/article-card/article-card.module.ts

@@ -6,12 +6,11 @@ import { SidebarTagsComponent } from './sidebar/sidebar-tags/sidebar-tags.compon
 import { SidebarAdvertisementComponent } from './sidebar/sidebar-advertisement/sidebar-advertisement.component';
 import { SidebarSocialLinksComponent } from './sidebar/sidebar-social-links/sidebar-social-links.component';
 import { FeaturedArticleComponent } from './articles/featured-article/featured-article.component';
-import { ArticleCardComponent } from './articles/article-card/article-card.component';
+import { ArticleCardComponent, ArticleCardModule } from './articles/article-card/article-card.component';
 import { ArticleContainerComponent } from './articles/article-container/article-container.component';
 import { ArticleHeaderComponent } from './articles/article-header/article-header.component';
 import { HomeComponent } from './home.component';
 import { LetModule, PushModule } from '@rx-angular/template';
-import { DateagoPipe } from 'src/app/global/pipes/dateago/dateago.pipe';
 import { ListingsComponent } from './rightbar/listings/listings.component';
 import { RightbarContainerComponent } from './rightbar/rightbar-container/rightbar-container.component';
 import { TagArticleComponent } from './rightbar/tag-article/tag-article.component';
@@ -22,17 +21,17 @@ import { TagArticleComponent } from './rightbar/tag-article/tag-article.componen
     SidebarAdvertisementComponent,
     SidebarSocialLinksComponent,
     FeaturedArticleComponent,
-    ArticleCardComponent,
     ArticleContainerComponent,
     ArticleHeaderComponent,
     HomeComponent,
-    DateagoPipe,
+
     ListingsComponent,
     RightbarContainerComponent,
     TagArticleComponent,
   ],
   imports: [
     LetModule,
+    ArticleCardModule,
     PushModule,
     CommonModule,
     RouterModule.forChild([

src/app/pages/home/home.module.ts

@@ -79,42 +79,6 @@
                 Listings
             </a>
 
-            <a href="/pod" class="sidebar-nav-link">
-                <span class="sidebar-link-icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
-                        <g class="nc-icon-wrapper">
-                            <path fill="#292F33"
-                                d="M10 19h24v2H10zm15 15c0 2.208-.792 4-3 4-2.209 0-3-1.792-3-4s.791-2 3-2c2.208 0 3-.208 3 2z">
-                            </path>
-                            <path fill="#66757F" d="M22 35c-6.627 0-10 1.343-10 3v2h20v-2c0-1.657-3.373-3-10-3z">
-                            </path>
-                            <path fill="#99AAB5" d="M22 4a9 9 0 00-9 9v7h18v-7a9 9 0 00-9-9z"></path>
-                            <g fill="#292F33" transform="translate(4 4)">
-                                <circle cx="15.5" cy="2.5" r="1.5"></circle>
-                                <circle cx="20.5" cy="2.5" r="1.5"></circle>
-                                <circle cx="17.5" cy="6.5" r="1.5"></circle>
-                                <circle cx="22.5" cy="6.5" r="1.5"></circle>
-                                <circle cx="12.5" cy="6.5" r="1.5"></circle>
-                                <circle cx="15.5" cy="10.5" r="1.5"></circle>
-                                <circle cx="10.5" cy="10.5" r="1.5"></circle>
-                                <circle cx="20.5" cy="10.5" r="1.5"></circle>
-                                <circle cx="25.5" cy="10.5" r="1.5"></circle>
-                                <circle cx="17.5" cy="14.5" r="1.5"></circle>
-                                <circle cx="22.5" cy="14.5" r="1.5"></circle>
-                                <circle cx="12.5" cy="14.5" r="1.5"></circle>
-                            </g>
-                            <path fill="#66757F" d="M13 19.062V21c0 4.971 4.029 9 9 9s9-4.029 9-9v-1.938H13z">
-                            </path>
-                            <path fill="#66757F"
-                                d="M34 18a1 1 0 00-1 1v2c0 6.074-4.925 11-11 11s-11-4.926-11-11v-2a1 1 0 00-2 0v2c0 7.18 5.82 13 13 13s13-5.82 13-13v-2a1 1 0 00-1-1z">
-                            </path>
-                        </g>
-                    </svg>
-
-                </span>
-                Podcasts
-            </a>
-
             <a href="/videos" class="sidebar-nav-link">
                 <span class="sidebar-link-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
@@ -152,12 +116,7 @@
                 </span>
                 Tags
             </a>
-
-
-            <a *ngIf="!showMore" (click)="showMore=true" href="javascript:void(0)"
-                class="more-link">More...</a>
-
-            <div *ngIf="showMore">
+            <div>
                 <a href="/code-of-conduct" class="sidebar-nav-link">
                     <span class="sidebar-link-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
@@ -199,24 +158,6 @@
                     FAQ
                 </a>
 
-                <a href="https://shop.dev.to/" class="sidebar-nav-link">
-                    <span class="sidebar-link-icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
-                            <g class="nc-icon-wrapper">
-                                <path fill="#F4900C" d="M15 4a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z">
-                                </path>
-                                <path fill="#DD2E44" d="M5 12l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H5z"></path>
-                                <path fill="#FFCC4D" d="M29 9a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z">
-                                </path>
-                                <path fill="#744EAA" d="M19 17l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H19z">
-                                </path>
-                            </g>
-                        </svg>
-
-                    </span>
-                    DEV Shop
-                </a>
-
                 <a href="/sponsors" class="sidebar-nav-link">
                     <span class="sidebar-link-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">

src/app/pages/home/sidebar/sidebar/sidebar.component.html

@@ -0,0 +1,73 @@
+<header>
+    <div class="profile-header">
+        <span class="img-container">
+            <img [src]="user.profile_image" class="crayons-avatar__image">
+        </span>
+    </div>
+
+    <div class="profile-header-details">
+        <h1>{{user.name}}</h1>
+        <p class="user-summary">{{user.summary}}</p>
+
+        <div class="profile-header-meta">
+            <span class="item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
+                    aria-labelledby="a3xkbc3f5m10eo7hk1nzp5q1qe2ucrgd" fill="currentColor">
+                    <title id="a3xkbc3f5m10eo7hk1nzp5q1qe2ucrgd">Location</title>
+                    <path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1112.728 0zM12 13a2 2 0 100-4 2 2 0 000 4z">
+                    </path>
+                </svg>
+
+                {{user.location}}
+            </span>
+
+            <span class="item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
+                    aria-labelledby="akim0j43z2hwtb3thdyfl4p0yzonmkz4" fill="currentColor">
+                    <title id="akim0j43z2hwtb3thdyfl4p0yzonmkz4">Joined</title>
+                    <path
+                        d="M8 6v3.999h3V6h2v3.999h3V6h2v3.999L19 10a3 3 0 012.995 2.824L22 13v1c0 1.014-.377 1.94-.999 2.645L21 21a1 1 0 01-1 1H4a1 1 0 01-1-1v-4.36a4.025 4.025 0 01-.972-2.182l-.022-.253L2 14v-1a3 3 0 012.824-2.995L5 10l1-.001V6h2zm11 6H5a1 1 0 00-.993.883L4 13v.971l.003.147a2 2 0 003.303 1.4c.363-.312.602-.744.674-1.218l.015-.153.005-.176c.036-1.248 1.827-1.293 1.989-.134l.01.134.004.147a2 2 0 003.992.031l.012-.282c.124-1.156 1.862-1.156 1.986 0l.012.282a2 2 0 003.99 0L20 14v-1a1 1 0 00-.883-.993L19 12zM7 1c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 11-2.898-.776C5.85 2.002 7 2.5 7 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C10.85 2.002 12 2.5 12 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C15.85 2.002 17 2.5 17 1z">
+                    </path>
+                </svg>
+
+                Joined on&nbsp;
+                <time datetime="2019-12-22T18:18:27Z" class="date">{{user.joined_at}}</time>
+            </span>
+
+            <a [href]="user.website_url" target="_blank" rel="noopener me" class="item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
+                    aria-labelledby="aebnezdzwf5e4o5wmaxg1njyfr0rjm7f" fill="currentColor">
+                    <title id="aebnezdzwf5e4o5wmaxg1njyfr0rjm7f">Personal website</title>
+                    <path
+                        d="M10 6v2H5v11h11v-5h2v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z">
+                    </path>
+                </svg>
+
+                {{user.website_url}}
+            </a>
+
+            <a href="https://github.com/{{user.github_username}}" target="_blank" rel="noopener me"
+                class="item p-1">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
+                    aria-labelledby="alew5grzyihmlmjw8r3tn7d8qlmmfyuy" class="crayons-icon shrink-0">
+                    <title id="alew5grzyihmlmjw8r3tn7d8qlmmfyuy">github website</title>
+                    <path
+                        d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z">
+                    </path>
+                </svg>
+
+            </a>
+            <a href="https://twitter.com/{{user.twitter_username}}" target="_blank" rel="noopener me"
+                class="item p-1">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img"
+                    aria-labelledby="ad10oxf6c94z8heubxzlzwcqvveec5dw" class="crayons-icon shrink-0">
+                    <title id="ad10oxf6c94z8heubxzlzwcqvveec5dw">twitter website</title>
+                    <path
+                        d="M22.162 5.656a8.383 8.383 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 00-7.126 3.814 11.874 11.874 0 01-8.62-4.37 4.168 4.168 0 00-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 01-1.894-.523v.052a4.185 4.185 0 003.355 4.101 4.211 4.211 0 01-1.89.072A4.185 4.185 0 007.97 16.65a8.395 8.395 0 01-6.191 1.732 11.83 11.83 0 006.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.495 8.495 0 002.087-2.165l-.001-.001z"
+                        fill="#65bbf2"></path>
+                </svg>
+
+            </a>
+        </div>
+    </div>
+</header>

src/app/pages/user-profile/user-header/user-header.component.html

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  padding: 1rem;
+  padding-top: 2rem;
+  margin: 0 auto;
+  max-width: 1024px;
+}
+
+header {
+  border-radius: 5px;
+  background: #fff;
+  color: #08090a;
+  box-shadow: 0 0 0 1px rgba(8, 9, 10, 0.1);
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+
+.profile-header {
+  position: relative;
+}
+
+img {
+  padding: 0.5rem;
+  width: 8rem;
+  height: 8rem;
+  border-radius: 100%;
+}
+
+.profile-header-details {
+  padding: 1.5rem;
+  h1 {
+    font-weight: 800;
+    font-size: 1.875rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .user-summary {
+    font-size: 1.125rem;
+    margin-bottom: 1rem;
+    color: #202408;
+  }
+}
+
+.profile-header-meta {
+  font-size: 0.875rem;
+  color: #64707d;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  .item {
+    display: flex;
+    align-items: center;
+  }
+  svg {
+    margin-right: 0.5rem;
+  }
+}
+
+a {
+  color: #64707d;
+}

src/app/pages/user-profile/user-header/user-header.component.scss

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

src/app/pages/user-profile/user-header/user-header.component.spec.ts

@@ -0,0 +1,11 @@
+import { Component, Input,  } from '@angular/core';
+import { UserDetails } from 'src/app/models/user';
+
+@Component({
+  selector: 'app-user-header',
+  templateUrl: './user-header.component.html',
+  styleUrls: ['./user-header.component.scss'],
+})
+export class UserHeaderComponent {
+  @Input() user!: UserDetails;
+}