feat: show article series

src/app/components/series-list/series-list.component.html

@@ -0,0 +1,15 @@
+<section class="article-series">
+  <h2 class="sub-heading">Artikelserie</h2>
+  <ol class="alt">
+    @for (related of relatedPosts; track related.slug) {
+      <li>
+        <a
+          [routerLink]="['..', related.slug]"
+          routerLinkActive="current"
+          ariaCurrentWhenActive="page"
+          >{{ related.attributes.title }}</a
+        >
+      </li>
+    }
+  </ol>
+</section>

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

@@ -0,0 +1,7 @@
+@import '../../../sass/libs/vars';
+
+.article-series {
+  li:has(.current:not(:hover)) {
+    background-color: lighten($c12, 3%);
+  }
+}

src/app/components/series-list/series-list.component.spec.ts

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

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

@@ -0,0 +1,23 @@
+import { injectContentFiles } from '@analogjs/content';
+import { Component, Input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { PostAttributes } from '../../types';
+
+@Component({
+  selector: 'dk-series-list',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './series-list.component.html',
+  styleUrl: './series-list.component.scss',
+})
+export class SeriesListComponent {
+  @Input({ required: true }) series!: string;
+
+  readonly allPosts = injectContentFiles<PostAttributes>();
+
+  get relatedPosts() {
+    return this.allPosts.filter(
+      (p) => p.attributes.series && p.attributes.series === this.series,
+    );
+  }
+}

src/app/pages/blog/[slug].page.ts

@@ -11,6 +11,7 @@ import { MetaService } from '../../meta.service';
 
 import { PostAttributes } from '../../types';
 import { SharePostComponent } from '../../components/share-post/share-post.component';
+import { SeriesListComponent } from '../../components/series-list/series-list.component';
 
 @Component({
   standalone: true,
@@ -20,6 +21,7 @@ import { SharePostComponent } from '../../components/share-post/share-post.compo
     DatePipe,
     RouterLink,
     SharePostComponent,
+    SeriesListComponent,
   ],
   template: `
     <article class="wrapper alt">
@@ -109,22 +111,8 @@ import { SharePostComponent } from '../../components/share-post/share-post.compo
               }
             </section>
           }
-          @if (post.attributes.related) {
-            <section class="article-series">
-              <h2 class="sub-heading">Artikelserie</h2>
-              <ol class="alt">
-                @for (related of post.attributes.related; track related.slug) {
-                  <li
-                    [routerLink]="related.slug"
-                    [class.current]="post.slug === related.slug"
-                  >
-                    <a [routerLink]="['..', related.slug]">{{
-                      related.title
-                    }}</a>
-                  </li>
-                }
-              </ol>
-            </section>
+          @if (post.attributes.series) {
+            <dk-series-list [series]="post.attributes.series"></dk-series-list>
           }
 
           <section class="blog-content">

src/app/pages/blog/slug.page.style.scss

@@ -25,12 +25,6 @@ h2.sub-heading {
   gap: 0.2rem;
 }
 
-.article-series {
-  .current {
-    background-color: lighten($c01, 3%);
-  }
-}
-
 .published-at,
 .external-links,
 .edit-on-github {