Feat/#260 dynamic blog page frontend

apps/webstore/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { ProfileComponent } from './pages/auth/profile/profile.component';
 import { ResetPasswordComponent } from './pages/auth/reset-password/reset-password.component';
 import { SignupComponent } from './pages/auth/signup/signup.component';
 import { UnsubscribeComponent } from './pages/auth/unsubscribe/unsubscribe.component';
+import { BlogListComponent } from './pages/blog-list/blog-list.component';
 import { HomeComponent } from './pages/home/home.component';
 import { PageNotFoundComponent } from './pages/issues/page-not-found/page-not-found.component';
 import { PaymentCancelledComponent } from './pages/payment-cancelled/payment-cancelled.component';
@@ -24,6 +25,7 @@ const routes: Routes = [
   { path: '', pathMatch: 'full', component: HomeComponent },
   { path: 'home', redirectTo: '' }, // Handle legacy /home route
   { path: 'about-us', component: AboutUsComponent },
+  { path: 'blog-page', component: BlogListComponent },
   { path: 'login', component: LoginComponent },
   {
     path: 'resetPassword/:token',

apps/webstore/src/app/app.module.ts

@@ -52,6 +52,7 @@ import { StickyNewsletterButtonComponent } from './shared/components/sticky-news
 import { ToastsContainerComponent } from './shared/components/toast/toast-container.component';
 import { authInterceptorProviders } from './shared/helpers/auth.interceptor';
 import { GoogleAnalyticsService } from './shared/services/google-analytics/google-analytics.service';
+import { BlogListComponent } from './pages/blog-list/blog-list.component';
 
 @NgModule({
   declarations: [
@@ -99,6 +100,7 @@ import { GoogleAnalyticsService } from './shared/services/google-analytics/googl
     CustomOrderComponent,
     CustomOrderDisplayComponent,
     StickyNewsletterButtonComponent,
+    BlogListComponent,
   ],
   imports: [
     BrowserModule,

apps/webstore/src/app/pages/blog-list/blog-list.component.html

@@ -0,0 +1,3 @@
+<main class="page-container">
+    <div class="page-wrapper">blog page stuff</div>
+</main>

apps/webstore/src/app/pages/blog-list/blog-list.component.scss

@@ -0,0 +1,12 @@
+.page-container {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+
+.page-wrapper {
+  max-width: 1300px;
+  min-height: 100vh;
+  width: 100%;
+  margin-top: 4em;
+}

apps/webstore/src/app/pages/blog-list/blog-list.component.spec.ts

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

apps/webstore/src/app/pages/blog-list/blog-list.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'webstore-blog-list',
+  templateUrl: './blog-list.component.html',
+  styleUrls: ['./blog-list.component.scss'],
+})
+export class BlogListComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}