added location filter for meetups page (#162)

* added location filter for meetups page

* update posts with location

* fix comments

* update meetup-scaffold

Author: RobertSenkel

content/posts/meetups/arduino-weather-station-on-azure-iot/post.md

@@ -10,6 +10,8 @@ Category: meetups
 
 tags: krakow, meetup, Arduino, IoT, Azure
 
+Location: Krakow
+
 ---
 
 ## ✅ Book your spot

content/posts/meetups/challenges-of-machine-learning/post.md

@@ -9,6 +9,8 @@ Date: 2023-10-01T07:09:11.368Z
 Category: meetups
 
 tags: krakow, meetup, Machine Learning
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/easy-debugging-in-playwright/post.md

@@ -10,6 +10,8 @@ Category: meetups
 
 tags: krakow, meetup, Playwright, debugging
 
+Location: Krakow
+
 ---
 
 ## ✅ Book your spot

content/posts/meetups/friends-of-figma-x-backbase/post.md

@@ -9,6 +9,8 @@ Date: 2025-01-07T07:18:14.406Z
 Category: meetups
 
 tags: krakow, meetup, UX
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/generative-ai-friend-or-foe-/post.md

@@ -9,6 +9,8 @@ Date: 2024-02-01T07:15:19.654Z
 Category: meetups
 
 tags: krakow, meetup, AI
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/github-actions/post.md

@@ -10,6 +10,8 @@ Category: meetups
 
 tags: krakow, meetup, Github, GitHub Actions
 
+Location: Krakow
+
 ---
 
 ## ✅ Book your spot

content/posts/meetups/how-fintech-is-changing-financial-sector/post.md

@@ -9,6 +9,8 @@ Date: 2023-05-01T07:03:38.357Z
 Category: meetups
 
 tags: krakow, meetup, FinTech
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/impact-of-using-new-ai-tools/post.md

@@ -10,6 +10,8 @@ Category: meetups
 
 tags: krakow, meetup, AI, OpenAI
 
+Location: Krakow
+
 ---
 
 ## ✅ Book your spot

content/posts/meetups/innersourcing-on-backbase-customer/post.md

@@ -9,6 +9,8 @@ Date: 2023-06-01T07:05:04.716Z
 Category: meetups
 
 tags: krakow, meetup, iOS
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/learn-and-play-cybergames-meetup/post.md

@@ -9,6 +9,8 @@ Date: 2024-07-01T08:56:49.711Z
 Category: meetups
 
 tags: krakow, meetup, Cybergames
+
+Location: Krakow
 
 ---
 

content/posts/meetups/memory-management-for-data-structures/post.md

@@ -9,6 +9,8 @@ Date: 2024-11-01T08:59:33.493Z
 Category: meetups
 
 tags: krakow, meetup, Backend
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/methods-and-tools-for-effective-learning/post.md

@@ -9,6 +9,8 @@ Date: 2023-12-01T07:11:29.876Z
 Category: meetups
 
 tags: krakow, meetup, Learning
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/new-features-of-java/post.md

@@ -9,6 +9,8 @@ Date: 2023-11-01T07:10:03.011Z
 Category: meetups
 
 tags: krakow, meetup, Java, Back-end
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/new-trends-in-ai-your-ticket-to-the-states/post.md

@@ -9,6 +9,8 @@ Date: 2024-12-01T09:00:11.276Z
 Category: meetups
 
 tags: krakow, meetup, AI, Travel
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/preventing-cross-site-scripting-attacks/post.md

@@ -9,6 +9,8 @@ Date: 2023-09-01T07:06:24.046Z
 Category: meetups
 
 tags: krakow, meetup, hacking, backend
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/taking-care-of-mental-health/post.md

@@ -9,6 +9,8 @@ Date: 2024-06-01T08:56:12.211Z
 Category: meetups
 
 tags: krakow, meetup, Health
+
+Location: Krakow
 
 --- 
 

content/posts/meetups/zero-trust-principles-for-developers/post.md

@@ -9,6 +9,8 @@ Date: 2024-01-01T07:14:28.488Z
 Category: meetups
 
 tags: krakow, meetup, Zero-Trust
+
+Location: Krakow
 
 --- 
 

projects/utils/src/lib/post-metadata.ts

@@ -11,6 +11,7 @@ export function extractPostMetaData(post: string, metaonly: boolean = false) {
       ?.split(',')
       .map(n => n.trim()) || [],
     category: header.match(/^Category: ([^\n]+)/im)?.[1] || '',
+    location: header.match(/^Location: ([^\n]+)/im)?.[1] || '',
     tags: header
       .match(/^Tags: ([^\n]+)/im)?.[1]
       ?.split(',')

src/app/app.routes.ts

@@ -44,6 +44,13 @@ export const routes: Routes = [
             m => m.CategoryComponent
           ),
       },
+      {
+        path: 'meetups/:loc',
+        loadComponent: () =>
+          import('./features/location/location.component').then(
+            m => m.LocationComponent
+          ),
+      },
       {
         path: 'principles',
         loadComponent: () =>

src/app/components/locations/locations.component.html

@@ -0,0 +1,12 @@
+<div class="center-container">
+  <mat-tab-group
+    (selectedTabChange)="onChange($event)"
+    [selectedIndex]="active ? locations.indexOf(active) + 1 : 0"
+    multiple="true"
+    aria-label="Location selection">
+    <mat-tab labelClass="hide"></mat-tab>
+    @for (category of locations; track $index) {
+      <mat-tab [labelClass]="category" [label]="Location[category]"></mat-tab>
+    }
+  </mat-tab-group>
+</div>

src/app/components/locations/locations.component.scss

@@ -0,0 +1,4 @@
+:host {
+  background: var(--blog-palette-neutral);
+  display: block;
+}

src/app/components/locations/locations.component.spec.ts

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

src/app/components/locations/locations.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
+import { Location } from '../../core/model/locations.model';
+
+@Component({
+  selector: 'blog-locations',
+  standalone: true,
+  imports: [CommonModule, MatTabsModule],
+  templateUrl: './locations.component.html',
+  styleUrl: './locations.component.scss',
+})
+export class LocationsComponent {
+  @Input() locations!: Location[];
+  @Input() active!: Location | null;
+  @Output() selected = new EventEmitter<string | string[]>();
+
+  Location = Object.fromEntries(Object.entries(Location));
+
+  onChange(event: MatTabChangeEvent) {
+    this.selected.emit(event.tab.labelClass);
+  }
+}

src/app/components/meetup-footer/meetup-footer.component.html

@@ -0,0 +1,7 @@
+<div class="center-container">
+  <mat-card data-role="button">
+    <div class="image">
+      <img src="assets/email-banner.png" alt="" />
+    </div>
+  </mat-card>
+</div>

src/app/components/meetup-footer/meetup-footer.component.scss

@@ -0,0 +1,26 @@
+@use 'breakpoints' as responsive;
+
+mat-card {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+
+  .title {
+    margin: 0;
+    padding: 0 1rem;
+    flex-wrap: wrap;
+    display: flex;
+    align-content: center;
+  }
+}
+
+img {
+  width: 100%;
+}
+
+[data-role='button'] {
+  transition: 0.15s ease-out transform;
+  &:hover {
+    transform: scale(1.02);
+  }
+}

src/app/components/meetup-footer/meetup-footer.component.spec.ts

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

src/app/components/meetup-footer/meetup-footer.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
+
+@Component({
+  selector: 'blog-meetup-footer',
+  standalone: true,
+  imports: [MatCardModule, MatRippleModule],
+  templateUrl: './meetup-footer.component.html',
+  styleUrl: './meetup-footer.component.scss',
+})
+export class MeetupFooterComponent {
+}

src/app/core/layout/locations-tab/locations-tab.component.html

@@ -0,0 +1,6 @@
+@if (locations$ | async; as locations) {
+  <blog-locations
+    [locations]="locations"
+    [active]="selectedLocation$ | async"
+    (selected)="navigate($event)"></blog-locations>
+}

src/app/core/layout/locations-tab/locations-tab.component.scss

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

src/app/core/layout/locations-tab/locations-tab.component.spec.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PostsService } from '../../services/posts.service';
+import { Location } from '../../model/locations.model';
+import { LocationsComponent } from "../../../components/locations/locations.component";
+
+@Component({
+  selector: 'blog-locations-tab',
+  standalone: true,
+  imports: [AsyncPipe, LocationsComponent],
+  templateUrl: './locations-tab.component.html',
+  styleUrl: './locations-tab.component.scss',
+})
+export class LocationsTabComponent {
+  locations$: Observable<Location[]> = this.postsService
+    .getLocations();
+
+  selectedLocation$ = this.activatedRoute.paramMap.pipe(
+    map(params => params.get('loc') as Location)
+  );
+
+  constructor(
+    private postsService: PostsService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {}
+
+  navigate(selected: string | string[]) {
+    this.router.navigate(['location', selected]);
+  }
+}

src/app/core/layout/locations-tab/locations-tab.component.ts

@@ -0,0 +1,5 @@
+export enum Location {
+  'Krakow' = 'Krakow',
+  'Hyderabad' = 'Hyderabad',
+  'Amsterdam' = 'Amsterdam',
+}

src/app/core/model/locations.model.ts

@@ -1,6 +1,7 @@
 import { Author } from './author.model';
 import { Category } from './categories.model';
 import { ProcessedAsset } from './content.model';
+import { Location } from './locations.model';
 
 export interface Post {
   title: string;
@@ -11,6 +12,7 @@ export interface Post {
   authors: Array<Author | string>;
   featured?: boolean;
   category: Category;
+  location?: Location;
   tags: string[];
   readingTime: string;
   specialCategory: boolean;