✨ 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>
2025-02-15 19:25:44 +01:00 · 2025-02-15 19:25:44 +01:00 · 54db411930
commit 54db411930
parent 023c8b7c85
24 changed files with 89 additions and 161 deletions
--- a/README.md
+++ b/README.md
@ -1,54 +1,5 @@
-# Astro Starter Kit: Basics
+# Homepage / portfolio

-```sh
-npm create astro@latest -- --template basics
-```
+> This repository is mirrored on [Codeberg](https://codeberg.org/martials/martials.no)

-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+More to come!
--- a/TODO.md
+++ b/TODO.md
@ -11,6 +11,7 @@
 - [ ] Fix colours on buttons
 - [ ] Correct contrast
 - [ ] All interactable elements have labels
+- [ ] Colour links, also in MDX posts

 ## ~/
 - [ ] About me description
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -28,9 +28,8 @@ export default defineConfig({
    svelte(),
    icon(),
    paraglide({
-      // recommended settings
      project: "./project.inlang",
-      outdir: "./src/paraglide", //where your files should be
+      outdir: "./src/paraglide",
    }),
  ],
  adapter: node({
--- a/public/favicon.jpg
+++ b/public/favicon.jpg
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
--- a/src/components/Footer.astro
+++ b/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>
--- a/src/components/badge/Badge.astro
+++ b/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>
--- a/src/components/icons/Gitea.astro
+++ b/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} />
--- a/src/components/links/GiteaLink.astro
+++ b/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>
--- a/src/components/myLinks/LinkCard.astro
+++ b/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>
--- a/src/components/myLinks/myLinks.ts
+++ b/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[]
--- a/src/components/projects/ProjectCard.astro
+++ b/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} />
--- a/src/components/projects/ProjectPage.astro
+++ b/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 />
--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -10,9 +10,9 @@ const projectCollection = defineCollection({
      heroImage: image(),
      heroImageAlt: z.string(),
      tags: z.array(z.string()),
-      source: z.string(),
-      createdAt: z.string(),
-      updatedAt: z.string(),
+      source: z.string().url(),
+      createdAt: z.string().date(),
+      updatedAt: z.string().date(),
    }),
 })

--- a/src/content/projects/Calendar
+++ b/src/content/projects/Calendar
--- a/src/content/projects/Simplify-truths-website.png
+++ b/src/content/projects/Simplify-truths-website.png
--- a/src/content/projects/assets/recursive-meme.png
+++ b/src/content/projects/assets/recursive-meme.png
--- a/src/content/projects/homepage.mdx
+++ b/src/content/projects/homepage.mdx
@ -1,14 +1,17 @@
 ---
 title: "Hjemmeside"
-description: "Hjemmesiden"
-heroImage: "./kevin-james.jpg"
-heroImageAlt: "The homepage of this site"
-tags: [Astro, Svelte, TypeScript, I18n]
-source: "https://example.com"
+description: "Welcome to my homepage / portfolio"
+heroImage: "assets/recursive-meme.png"
+heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"
+tags: [Astro, Svelte, TypeScript, I18n, TailwindCSS, Docker]
+source: "https://git.martials.no/martials/martials.no"
 createdAt: "2024-09-22"
-updatedAt: "2024-09-22"
+updatedAt: "2025-02-15"
 ---

-This is a short meta post about the homepage of this site.
-It is a simple landing page with a short introduction to the site and a list of the latest posts.
-The site is not built with GatsbyJS and Contentful.
+This is a short meta post about my homepage which you are looking at right now.
+
+This page is going to be a simple site where I will share my projects, stuff i've accomplished and things about me.
+It is still a work in progress, so it will be updated for the forseable future.
+
+In the meantime, you can see what i'm working on at [Gitea](https://git.martials.no/martials?tab=activity).
--- a/src/content/projects/hvl-ics-simplifier.mdx
+++ b/src/content/projects/hvl-ics-simplifier.mdx
@ -1,16 +0,0 @@
---
-title: "API for å forenkle TimeEdit iCalendar filer"
-description: "Et API som forenkler tittler i ICS filer fra TimeEdit"
-heroImage: "./Calendar before and after.png"
-heroImageAlt: "En kalender før og etter APIet har blitt brukt. Venstre side er før, høyre etter."
-tags: [API, Kotlin, Spring Boot, Tomcat, iCal4j, CI/CD]
-source: "https://github.com/emberal/hvl_ics_simplifier"
-createdAt: "2023-08-08"
-updatedAt: "2024-10-20"
---
-
-Ble lei av hvor vanskelig det var å lese iCalendar filer fra HVL sin kalender i TimeEdit, så jeg lagde et API som gjør det enklere.
-Data for tittelen blir hentet fra den gamle tittelen.
-For å finne hvilken type hendselse det er, sjekkes beskrivelsen og lokasjonen.
-
-APIet er skrevet i Kotlin med Spring boot, og hosted på en selvhostet tomcat server.
--- a/src/content/projects/kevin-james.jpg
+++ b/src/content/projects/kevin-james.jpg
--- a/src/content/projects/simplify-truths.mdx
+++ b/src/content/projects/simplify-truths.mdx
@ -1,26 +0,0 @@
---
-title: "Forenkle sannhetsverdier og sannhetstabeller"
-description: "Forenkle sannhetsuttrykk og opprette sannhetstabeller"
-heroImage: "./Simplify-truths-website.png"
-heroImageAlt: "Nettsiden med en sannhetstabell"
-tags: [TypeScript, SolidJS, Tailwind css, Nettside, Java, API, Spring Boot, Raspberry Pi, Apache, Tomcat]
-source: "https://github.com/h600878/martials.no"
-createdAt: "2022-11-08"
-updatedAt: "2024-10-20"
---
-{/* TODO change to Rust */}
-Noen sannhetsverdier kan bli ganske store, og kompliserte. Derfor har jeg laget dette programmet for å forenkle uttrykk mest mulig.
-Programmet bruker flere kjente metoder for å skrive om uttrykkene. Hvilke uttrykk som er brukt og hvilke endringer de gjorde,
-kan vises i menyen under søkefeltet.
-<br />
-I tillegg til å bare forenkle uttrykk, kan man også generere en sannhetstabell med alle mulige verdier i uttrykket.
-Hvis man ikke ønsker å forenkle uttrykket, men bare generere tabellen, kan man enkelt skru av forenkling. I tillegg har
-man muligheten til å filtrere resultat, enten ved å skjule sanne eller usanne verdier. Eller ved å sortere etter sanne
-eller usanne først.
-<br />
-Nettsiden er laget med TypeScript, SolidJS og Tailwind CSS. API-et er laget med Java og Spring Boot.
-Begge kjører på min egen raspberry pi 4, nettsiden er hostet på en apache2 tjener, mens API-et ligger på en tomcat tjener.
-<a href={"https://martials.no/simplify-truths.html"}>Lenke til nettsiden.</a>
-<br />
-Spørringer kan gjøres mot API-et kan utføres med GET eller POST. API-et returnerer JSON.
-[Lenke til API-docs](https://api.martials.no/simplify-truths)
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,8 +1,8 @@
 ---
 import Footer from "@/components/Footer.astro"
-import Header from "../components/header/Header.astro"
+import Header from "@/components/header/Header.astro"
 import { languageTag } from "@/paraglide/runtime"
-import { resolvePathname } from "../utils/linking"
+import { resolvePathname } from "@/utils/linking"

 interface Props {
  title: string
@ -19,14 +19,14 @@ const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px] mt-5"
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/jpg" href="/favicon.jpg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title} | Martin Berg Alstad</title>
  </head>
  <body class="flex flex-col min-h-screen bg-cat-base text-cat-text">
    <Header />
    <main class:list={[mainClass, clazz]}>
-      <h1>~{resolvePathname(Astro.routePattern)}</h1>
+      <h1 class="text-center">~{resolvePathname(Astro.originPathname)}</h1>
      <slot />
    </main>
    <Footer />
--- a/src/links.ts
+++ b/src/links.ts
@ -4,34 +4,24 @@ import type { NavLink } from "@/utils/linking.ts"
 interface Link {
  label: () => string
  to: NavLink
-  color: string
 }

 const Links: Link[] = [
  {
    label: m.home,
    to: "/",
-    color: "text-cat-rosewater",
  },
  {
    label: m.myProjects,
    to: "/projects",
-    color: "text-cat-flamingo",
  },
  {
    label: m.myLinks,
    to: "/links",
-    color: "text-cat-pink",
-  },
-  {
-    label: m.uses,
-    to: "/uses",
-    color: "text-cat-mauve",
  },
  {
    label: m.contactMe,
    to: "/contact",
-    color: "text-cat-red",
  },
 ]

--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -19,7 +19,9 @@
    --color-cat-blue: #89b4fa;
    --color-cat-lavender: #b4befe;
    --color-cat-text: #cdd6f4;
+    --color-cat-surface0: #313244;
    --color-cat-base: #1e1e2e;
+    --color-cat-mantle: #181825;
 }

@layer utilities {