added status to projects
This commit is contained in:
@@ -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>
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user