add blog article component

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
2026-05-24 09:40:23 +02:00
parent c0919670ca
commit 5a659e59cd
4 changed files with 200 additions and 1 deletions
@@ -0,0 +1,81 @@
+<template id="tesoft-blog-article-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        tesoft-loader-section {
+            min-height: calc(100vh - 8rem);
+        }
+
+        .article {
+            display: grid;
+            gap: 1.6rem;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto;
+            width: 100%;
+        }
+
+        .header {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto;
+        }
+
+        .header > h1 {
+            align-items: center;
+            display: grid;
+            gap: 1rem;
+            grid-template-columns: auto auto;
+            grid-template-rows: auto;
+            justify-content: start;
+            font-size: 4.4rem;
+            line-height: 4.4rem;
+            padding-bottom: 0;
+        }
+
+        .dates {
+            padding-bottom: 1rem;
+        }
+
+        .tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        img {
+            object-fit: cover;
+            max-width: 100%;
+        }
+
+        tesoft-error {
+            height: 100%;
+        }
+    </style>
+
+    <tesoft-loader-section>
+        <div class="article">
+            <div class="header">
+                <h1></h1>
+                <div class="dates">
+                </div>
+                <div class="tags">
+                </div>
+            </div>
+
+            <div class="content"></div>
+        </div>
+
+        <tesoft-error class="hidden">
+        </tesoft-error>
+    </tesoft-loader-section>
+</template>
+
+<script src="/src/components/blog-article.ts" type="module"></script>
+{% includeOnce 'components/badge.njk' %}
+{% includeOnce 'components/error.njk' %}
+{% includeOnce 'components/loader-section.njk' %}
+{% includeOnce 'components/tag.njk' %}