✨ More style changes, removed test projects, favicon

- Fix missing aria-labels
- Fix breadcrumbs on specific projects
- Removed uses from NavBar
- Center image on project page
- Colour link on project page
- Initial README

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/components/Footer.astro

@@ -16,7 +16,11 @@ const giteaLink = `${GIT_URL}/martials/martials.no`
   <div>
     <GiteaLink href={giteaLink} />
     <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
-      <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
+      <PajamasIcon
+        name="pajamas:status-health"
+        class="w-6 h-6 mr-2"
+        aria-label="Status health icon"
+      />
       {m.status()}
     </ExternalLink>
   </div>

src/components/badge/Badge.astro

@@ -5,4 +5,4 @@ interface Props {
 const { tag } = Astro.props
 ---
 
-<div class="badge badge-outline">{tag}</div>
+<div class="badge badge-outline !text-cat-lavender">{tag}</div>

src/components/icons/Gitea.astro

@@ -1,10 +0,0 @@
----
-import PajamasIcon from "./PajamasIcon.astro"
-interface Props {
-  class?: string
-}
-
-const { class: clazz } = Astro.props
----
-
-<PajamasIcon name="pajamas:gitea" class={clazz} />

src/components/links/GiteaLink.astro

@@ -1,16 +1,21 @@
 ---
 import ExternalLink from "./ExternalLink.astro"
 import * as m from "@/paraglide/messages"
-import Gitea from "../icons/Gitea.astro"
+import PajamasIcon from "../icons/PajamasIcon.astro"
 interface Props {
   href: string
+  class?: string
 }
-const { href } = Astro.props
+const { href, class: clazz } = Astro.props
 ---
 
 <div>
-  <ExternalLink href={href} class="flex items-center gap-1">
-    <Gitea class="w-6 h-6" />
+  <ExternalLink
+    href={href}
+    class:list={["flex items-center gap-1", clazz]}
+    title="Gitea"
+  >
+    <PajamasIcon name="pajamas:gitea" class="w-6 h-6" aria-label="Gitea icon" />
     {m.sourceCode()}
   </ExternalLink>
 </div>

src/components/myLinks/LinkCard.astro

@@ -8,12 +8,28 @@ interface Props extends MyLink {
 }
 
 const { title, message, url, icon, class: clazz } = Astro.props
+const iconStyle = "w-6 h-6"
+console.log(icon)
 ---
 
 <ExternalLink href={url} noStyle>
   <div class:list={["card bg-base-300", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
-      <PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
+      {
+        icon ? (
+          <PajamasIcon
+            name={icon.src}
+            class={iconStyle}
+            aria-label={icon.alt}
+          />
+        ) : (
+          <PajamasIcon
+            name={"pajamas:link"}
+            class={iconStyle}
+            aria-label="Link icon"
+          />
+        )
+      }
       <div>
         <h5 class="card-title">{title}</h5>
         <p class="prose">{message}</p>

src/components/myLinks/myLinks.ts

@@ -6,7 +6,10 @@ export interface MyLink {
   title: string
   url: string
   message?: string
-  icon?: PajamasIcon
+  icon?: {
+    src: PajamasIcon
+    alt: string
+  }
 }
 
 export default [
@@ -14,28 +17,43 @@ export default [
     title: "Codeberg",
     url: "https://codeberg.org/martials",
     message: m.forMirrors(),
-    icon: "pajamas:git",
+    icon: {
+      src: "pajamas:git",
+      alt: "Git icon",
+    },
   },
   {
     title: "Gitea",
     url: `${GIT_URL}/martials`,
     message: m.forPersonalProjects(),
-    icon: "pajamas:gitea",
+    icon: {
+      src: "pajamas:gitea",
+      alt: "Gitea icon",
+    },
   },
   {
     title: "GitHub",
     url: "https://github.com/emberal",
-    icon: "pajamas:github",
+    icon: {
+      src: "pajamas:github",
+      alt: "GitHub icon",
+    },
   },
   {
     title: "LinkedIn",
     url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
-    icon: "pajamas:linkedin",
+    icon: {
+      src: "pajamas:linkedin",
+      alt: "LinkedIn icon",
+    },
   },
   {
     title: "Mastodon (Snabelen.no)",
     url: "https://snabelen.no/@Martials",
-    icon: "pajamas:mastodon",
+    icon: {
+      src: "pajamas:mastodon",
+      alt: "Mastodon icon",
+    },
   },
   {
     title: "Pixelfed",
@@ -49,4 +67,4 @@ export default [
     title: "Trakt.tv",
     url: "https://trakt.tv/users/martials",
   },
-] as MyLink[]
+] satisfies MyLink[]

src/components/projects/ProjectCard.astro

@@ -19,7 +19,7 @@ const { title, description, tags, image, imageAlt, linkTo } = Astro.props
 
 <LocaleLink
   to={linkTo}
-  class="card bg-base-100 max-w-96 shadow-xl hover:scale-105 transition"
+  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition"
 >
   <figure>
     <Image src={image} alt={imageAlt} />

src/components/projects/ProjectPage.astro

@@ -2,10 +2,10 @@
 import Layout from "@/layouts/Layout.astro"
 import { Image } from "astro:assets"
 import { getEntry, render } from "astro:content"
-import BadgeList from "../badge/BadgeList.astro"
+import BadgeList from "@/components/badge/BadgeList.astro"
 import * as m from "@/paraglide/messages"
 import { languageTag } from "@/paraglide/runtime"
-import GiteaLink from "../links/GiteaLink.astro"
+import GiteaLink from "@/components/links/GiteaLink.astro"
 import "@/styles/global.css"
 
 interface Props {
@@ -28,7 +28,7 @@ const {
 } = entry!.data
 ---
 
-<!--TODO day.js for dates?-->
+<!--TODO day.js / Temporal API for dates?-->
 <Layout title={title} class="mx-auto max-w-[750px]">
   <div class="flex justify-between my-2">
     <div>
@@ -44,9 +44,9 @@ const {
       </p>
     </div>
   </div>
-  <Image src={heroImage} alt={heroImageAlt} />
+  <Image src={heroImage} alt={heroImageAlt} class="m-auto" />
 
-  <GiteaLink href={source} />
+  <GiteaLink href={source} class="text-cat-mauve my-2" />
 
   <p class="my-2">{description}</p>
   <Content />