added status to projects

src/routes/projects/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import TableOfContents from "$lib/components/table-of-contents.svelte";
-    import { type Project, games, hardware, apps, music } from './projects';
+    import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
     import LinkList from "$lib/lists/link-list.svelte";
     import Content from "$lib/viewport/content.svelte";
+    import OutlinedButton from "$lib/components/outlined-button.svelte";
 </script>
 
 <svelte:head>
@@ -52,15 +53,16 @@
     {#if project.banner}
         <div class="project-banner-container">
             <img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
-            {#if project.date}
-                <p class="date-marker project-date-embed">{project.date}</p>
-            {/if}
         </div>
-    {:else}
-        {#if project.date}
-            <p class="date-marker">{project.date}</p>
-        {/if}
     {/if}
+
+    <p class="project-info project-status-c-{getStatusCode(project)}">
+        {#if project.date}
+            {project.date} | 
+        {/if}
+        {getStatusText(project)}
+    </p>
+
     {#if project.icon}
         <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
     {/if}
@@ -101,4 +103,41 @@
         left: 0;
         bottom: 0;
     }
+
+    .project-info {
+        width: fit-content;
+        display: flex;
+        flex-direction: row;
+        margin-top: 16px;
+        background-color: color-mix(in srgb, var(--color-status) 6%, transparent);
+        border: var(--border-style) var(--border-dash-size) var(--color-status);
+        padding: 2px 8px;
+
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        font-weight: 700;
+        color: var(--color-status);
+    }
+
+    /* #region Project Status Colours */
+    .project-status-c-act {
+        --color-status: var(--color-highlight);
+    }
+
+    .project-status-c-ina {
+        --color-status: #B89751;
+    }
+
+    .project-status-c-aba {
+        --color-status: #D15555;
+    }
+
+    .project-status-c-fin {
+        --color-status: #5486D8;
+    }
+
+    .project-status-c-eol {
+        --color-status: #C353C1;
+    }
+    /* #endregion */
 </style>

src/routes/projects/projects.ts

@@ -8,13 +8,56 @@ export interface Project {
     subtitle: string;
     paragraphs: string[];
     links: Link[];
+    status: ProjectStatus;
 };
 
+export enum ProjectStatus {
+    ACTIVE,
+    INACTIVE,
+    ABANDONED,
+    FINISHED,
+    EOL, // end of life
+}
+
 export interface Link {
     text: string;
     link: string;
 }
 
+export function getStatusText(project: Project): String {
+    switch (project.status) {
+        case ProjectStatus.ACTIVE:
+            return "active";
+        case ProjectStatus.INACTIVE:
+            return "inactive";
+        case ProjectStatus.ABANDONED:
+            return "abandoned";
+        case ProjectStatus.FINISHED:
+            return "finished";
+        case ProjectStatus.EOL:
+            return "end-of-life";
+    }
+}
+
+/**
+ * Returns static codes that can be used to reference same-name CSS classes
+ * without relying on display text.
+ */
+export function getStatusCode(project: Project): String {
+    switch (project.status) {
+        case ProjectStatus.ACTIVE:
+            return "act";
+        case ProjectStatus.INACTIVE:
+            return "ina";
+        case ProjectStatus.ABANDONED:
+            return "aba";
+        case ProjectStatus.FINISHED:
+            return "fin";
+        case ProjectStatus.EOL:
+            return "eol";
+    }
+}
+
 export const games: Project[] = [
     {
         id: "projectn5",
@@ -42,6 +85,7 @@ export const games: Project[] = [
                 link: "https://files.denizk0461.dev/projectn5",
             },
         ],
+        status: ProjectStatus.ACTIVE,
     },
     {
         id: "magician",
@@ -61,6 +105,7 @@ export const games: Project[] = [
                 link: "https://apps.denizk0461.dev/magician",
             },
         ],
+        status: ProjectStatus.ABANDONED,
     },
     {
         id: "projektike",
@@ -76,6 +121,7 @@ export const games: Project[] = [
         ],
         links: [
         ],
+        status: ProjectStatus.ABANDONED,
     },
     {
         id: "swordsnstuff",
@@ -96,6 +142,7 @@ export const games: Project[] = [
                 link: "https://apps.denizk0461.dev/swordsnstuff",
             },
         ],
+        status: ProjectStatus.ABANDONED,
     },
     {
         id: "tads",
@@ -119,6 +166,7 @@ export const games: Project[] = [
                 link: "https://apps.denizk0461.dev/tads/2",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
 ];
 
@@ -148,6 +196,7 @@ export const hardware: Project[] = [
                 link: "https://codeberg.org/denizk0461/daisy-fm-synth",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
 ];
 
@@ -175,6 +224,7 @@ export const apps: Project[] = [
                 link: "https://play.google.com/store/apps/details?id=com.denizk0461.weserplaner",
             },
         ],
+        status: ProjectStatus.EOL,
     },
     {
         id: "textbasic",
@@ -198,6 +248,7 @@ export const apps: Project[] = [
                 link: "https://play.google.com/store/apps/details?id=com.denizk0461.textbasic",
             },
         ],
+        status: ProjectStatus.EOL,
     },
     {
         id: "qwark",
@@ -218,6 +269,7 @@ export const apps: Project[] = [
                 link: "https://github.com/denizk0461/qwark",
             },
         ],
+        status: ProjectStatus.EOL,
     },
     {
         id: "avhplan",
@@ -243,6 +295,7 @@ export const apps: Project[] = [
                 link: "https://github.com/denizk0461/avh-plan-ios",
             },
         ],
+        status: ProjectStatus.EOL,
     },
 ];
 
@@ -267,6 +320,7 @@ export const music: Project[] = [
                 link: "https://files.denizk0461.dev/my_tracks/Dreamworld/",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
     {
         id: "anewbeginning",
@@ -286,6 +340,7 @@ export const music: Project[] = [
                 link: "https://files.denizk0461.dev/my_tracks/A%20New%20Beginning/",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
     {
         id: "soundcloud",
@@ -308,5 +363,6 @@ export const music: Project[] = [
                 link: "https://soundcloud.com/djd4rkn355",
             },
         ],
+        status: ProjectStatus.INACTIVE,
     },
 ];