add blog page

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
2026-05-24 09:22:55 +02:00
parent 7cd2dee64c
commit 2b6c7074c2
14 changed files with 407 additions and 22 deletions
@@ -0,0 +1,96 @@
+import {onReady} from "./main.ts";
+import {TesoftBlogArticle} from "../components/blog-article.ts";
+import {TesoftBlogArticleList} from "../components/blog-article-list.ts";
+
+class Parameters {
+    readonly id: number | null;
+    readonly page: number | null;
+    readonly tags: string[];
+
+    constructor(id: number | null, page: number | null, tags: string[]) {
+        this.id = id;
+        this.page = page;
+        this.tags = tags;
+    }
+
+    constructUrl(): URL {
+        const url = new URL(window.location.origin + window.location.pathname);
+
+        if (this.id !== null) {
+            url.searchParams.set("id", this.id.toString());
+        }
+        if (this.page !== null) {
+            url.searchParams.set("page", this.page.toString());
+        }
+        if (this.tags.length > 0) {
+            url.searchParams.set("tags", this.tags.join(","));
+        }
+
+        return url;
+    }
+
+    static parse(searchParams: URLSearchParams): Parameters {
+        let id: number | null = null;
+        if (searchParams.has("id")) {
+            id = parseInt(searchParams.get("id")!);
+        }
+
+        let page: number | null = null;
+        if (searchParams.has("page")) {
+            page = parseInt(searchParams.get("page")!);
+        }
+
+        let tags: string[] = [];
+        const tagsStr = searchParams.get("tags");
+        if (tagsStr) {
+            tags = tagsStr.split(",");
+        }
+
+        return new Parameters(id, page, tags);
+    }
+}
+
+class BlogSite {
+    private readonly blogArticle: TesoftBlogArticle;
+    private readonly blogArticleList: TesoftBlogArticleList;
+    private parameters: Parameters;
+
+    constructor(blogArticle: TesoftBlogArticle, blogArticleList: TesoftBlogArticleList, parameters: Parameters) {
+        this.blogArticle = blogArticle;
+        this.blogArticleList = blogArticleList;
+        this.parameters = parameters;
+    }
+
+    load() {
+        if (this.parameters.id === null) {
+            this.blogArticleList.load(this.parameters.page ?? 1, this.parameters.tags, (page, tags) => {
+                this.parameters = new Parameters(
+                    null,
+                    page,
+                    tags,
+                );
+                window.history.pushState(null, "", this.parameters.constructUrl());
+            });
+            this.blogArticleList.classList.remove("hidden");
+        } else {
+            this.blogArticle.load(this.parameters.id, (tag) => {
+                return new Parameters(
+                    null,
+                    null,
+                    Array.from(new Set(this.parameters.tags).add(tag)),
+                ).constructUrl().toString();
+            });
+            this.blogArticle.classList.remove("hidden");
+        }
+    }
+}
+
+onReady(async () => {
+    const blogSite = new BlogSite(
+        document.querySelector<TesoftBlogArticle>("tesoft-blog-article")!,
+        document.querySelector<TesoftBlogArticleList>("tesoft-blog-article-list")!,
+        Parameters.parse(new URLSearchParams(window.location.search)),
+    );
+
+    blogSite.load();
+});