fill home page with content

frontend/src/components/project-card.njk

@@ -0,0 +1,64 @@
+<template id="tesoft-project-card-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        :host > a {
+            background-color: var(--gray);
+            border-radius: 0.5rem;
+            display: grid;
+            gap: var(--small-padding);
+            grid-template-columns: 8rem auto 1fr;
+            grid-template-rows: auto auto;
+            padding: var(--medium-padding);
+            text-decoration: none;
+            text-align: justify;
+        }
+
+        :host > a:hover {
+            background-color: var(--gold);
+            color: var(--gray);
+            text-decoration: none;
+        }
+
+        :host > a:hover ::slotted(a) {
+            color: var(--gray) !important;
+        }
+
+        .logo {
+            display: grid;
+            grid-column: 1;
+            grid-row-start: 1;
+            grid-row-end: 3;
+        }
+
+        img {
+            width: 100%;
+        }
+
+        .separator {
+            border-left-color: var(--dark-gray);
+            border-left-style: solid;
+            border-left-width: 0.2rem;
+            grid-column: 2;
+            grid-row-start: 1;
+            grid-row-end: 3;
+        }
+    </style>
+
+    <a target="_blank" rel="noopener noreferrer">
+        <div class="logo">
+            <img src="">
+        </div>
+        <div class="separator"></div>
+        <div>
+            <h4>Title</h4>
+            <slot></slot>
+        </div>
+    </a>
+</template>
+
+<script src="/src/components/project-card.ts" type="module"></script>

frontend/src/components/project-card.ts

@@ -0,0 +1,36 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftProjectCard extends TesoftComponent {
+    static observedAttributes = ["href", "logo-src", "title-text"];
+
+    private readonly anchor: HTMLAnchorElement;
+    private readonly logoImage: HTMLImageElement;
+    private readonly heading: HTMLHeadingElement;
+
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-project-card-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+
+        this.anchor = shadowRoot.querySelector<HTMLAnchorElement>("a")!;
+        this.logoImage = shadowRoot.querySelector<HTMLImageElement>("img")!;
+        this.heading = shadowRoot.querySelector<HTMLHeadingElement>("h4")!;
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        if (name === "href") {
+            this.anchor.href = newValue ?? "";
+        } else if (name === "logo-src") {
+            this.logoImage.src = newValue ?? "";
+        } else if (name === "title-text") {
+            this.heading.textContent = newValue ?? "";
+        }
+    }
+}
+
+customElements.define("tesoft-project-card", TesoftProjectCard);

frontend/src/pages/index.njk

@@ -11,7 +11,32 @@
 {% endblock %}
 
 {% block components %}
+    {% includeOnce 'components/project-card.njk' %}
 {% endblock %}
 
 {% block content %}
+    <h3>Welcome</h3>
+    Welcome to my website. On this you can find my projects, a blog and information about me.
+
+    <h4>Current projects</h4>
+    <div class="projects">
+        <tesoft-project-card href="https://git.tesoft.dev/terbshaeusser/website" title-text="tesoft website"
+                             logo-src="https://git.tesoft.dev/terbshaeusser/website/raw/branch/develop/logo.svg">
+            Source code of this website programmed in Go and Typescript.
+            Blog articles are written in Markdown, parsed by
+            <a href="https://github.com/yuin/goldmark" target="_blank" rel="noopener noreferrer">goldmark</a> and stored
+            in an SQLite database via
+            <a href="https://github.com/mattn/go-sqlite3" target="_blank" rel="noopener noreferrer">go-sqlite3</a>.
+        </tesoft-project-card>
+        <tesoft-project-card href="https://schanz-online.de" title-text="SCHANZ website"
+                             logo-src="https://schanz-online.de/assets/favicon.svg">
+            Website of a small bar and event location.
+            The frontend is written in a combination of web components and Nunjucks to have proper file separation.
+            The backend uses Directus and a couple of self-made extensions to fit the needs of the operators.
+        </tesoft-project-card>
+        <tesoft-project-card href="https://git.tesoft.dev/terbshaeusser/ucalc" title-text="ucalc"
+                             logo-src="https://git.tesoft.dev/terbshaeusser/ucalc/raw/branch/develop/logo.svg">
+            A calculator for rental service charges written in C# with WPF. The interface language is German only.
+        </tesoft-project-card>
+    </div>
 {% endblock %}

frontend/src/styles/index.css

@@ -0,0 +1,10 @@
+h4 {
+    padding-top: var(--large-padding);
+}
+
+.projects {
+    display: grid;
+    gap: var(--medium-padding);
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+}