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,88 @@
+<template id="tesoft-blog-article-list-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        :host > div {
+            display: grid;
+            gap: 1rem;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto 1fr auto;
+        }
+
+        tesoft-loader-section, .list, tesoft-error {
+            min-height: calc(var(--full-content-height) - 10rem);
+        }
+
+        .tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .list {
+            align-content: start;
+            display: grid;
+            gap: 2rem;
+            grid-template-columns: 1fr;
+            grid-auto-rows: auto;
+            width: 100%;
+        }
+
+        .item {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto;
+            text-decoration: none;
+        }
+
+        .item > h3 {
+            align-items: center;
+            display: grid;
+            gap: 1rem;
+            grid-auto-columns: auto;
+            grid-auto-flow: column;
+            justify-content: start;
+            padding-bottom: 0;
+        }
+
+        .item > .dates {
+            padding-bottom: 0.6rem;
+        }
+
+        tesoft-pagination {
+            justify-self: center;
+        }
+    </style>
+
+    <div>
+        <div class="tags"></div>
+        <tesoft-loader-section>
+            <div class="list">
+            </div>
+
+            <tesoft-error class="hidden">
+            </tesoft-error>
+        </tesoft-loader-section>
+        <tesoft-pagination class="hidden">
+        </tesoft-pagination>
+    </div>
+</template>
+
+<template id="tesoft-blog-article-list-item-template">
+    <a class="item">
+        <h3>Title</h3>
+        <div class="dates">
+        </div>
+        <div class="tags">
+        </div>
+    </a>
+</template>
+
+<script src="/src/components/blog-article-list.ts" type="module"></script>
+{% includeOnce 'components/button.njk' %}
+{% includeOnce 'components/loader-section.njk' %}
+{% includeOnce 'components/pagination.njk' %}