added status to projects

This commit is contained in:
2026-02-25 19:16:21 +01:00
parent 0f7e2df3a9
commit 005684ad8c
2 changed files with 103 additions and 8 deletions

View File

@@ -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}
<p class="project-info project-status-c-{getStatusCode(project)}">
{#if project.date}
<p class="date-marker">{project.date}</p>
{/if}
{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>

View File

@@ -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,
},
];