✨ Update general style

- Smaller width of page
- Center navbar
- Fonts
- Catppuccin Mocha colours
- TODO.md
- Show all uses at the same time
- and more...

TODO.md

@@ -0,0 +1,40 @@
+# TODO
+
+## Code
+- [ ] Temporal API or day.js for dates
+
+## Layout
+- [ ] Show current page in navbar
+- [x] Correct bg colour on entire page
+
+## Accessibility
+- [ ] Fix colours on buttons
+- [ ] Correct contrast
+- [ ] All interactable elements have labels
+
+## ~/
+- [ ] About me description
+- [ ] Non-cat image
+
+## ~/about
+- [ ] About me
+
+## ~/links
+- [ ] Add Bluesky link
+- [ ] Add MusicBrainz link
+
+## ~/slashes
+- [ ] List of all slashes
+
+## ~/uses
+- [ ] Homelab uses
+- [ ] Raspberry PI uses
+- [ ] Hardware anchor
+
+## ~/certifications
+- [ ] Embed certifications
+
+## ~/tools
+
+### /simplify-truths
+- [ ] Merge simplify truths implementation

messages/en.json

@@ -2,7 +2,7 @@
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "hiIm": "Hi, I'm",
   "position": "Software Engineer",
-  "aboutMe": "Some bullshit about me",
+  "aboutMe": "Dedicated developer currently working at Capgemini Bergen.",
   "home": "Home",
   "contactMe": "Contact me",
   "myLinks": "My links",

messages/nb.json

@@ -2,7 +2,7 @@
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "hiIm": "Hei, jeg er",
   "position": "Programvareutvikler",
-  "aboutMe": "Bunntekst",
+  "aboutMe": "Engasjert utvikler som for tiden jobber hos Capgemini Bergen",
   "home": "Hjem",
   "contactMe": "Kontakt meg",
   "myLinks": "Mine lenker",

src/components/ContactMeForm.astro

@@ -12,12 +12,12 @@ import * as m from "@/paraglide/messages.js"
   <Input label={m.name()} type="text" name="name" required />
   <Input label={m.subject()} name="subject" required />
   <Input label={m.email()} name="_replyto" />
-  <input name="_gotcha" type="text" class={"hidden"} />
   {/*Honeypot spam filter*/}
+  <input name="_gotcha" type="text" class={"hidden"} />
   <label class="flex flex-col">
     {m.message()}
-    <textarea name="message" class="textarea textarea-bordered" required
+    <textarea name="message" class="textarea textarea-bordered w-full" required
     ></textarea>
   </label>
-  <button type="submit">{m.send()}</button>
 </form>
+<button type="submit" class="btn mt-2" title={m.send()}>{m.send()}</button>

src/components/Footer.astro

@@ -9,8 +9,10 @@ import * as m from "@/paraglide/messages"
 const giteaLink = `${GIT_URL}/martials/martials.no`
 ---
 
-<div class="divider"></div>
-<div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
+<div class="divider bg-inherit"></div>
+<div
+  class="py-5 flex flex-row gap-1 justify-around w-full items-center bg-inherit"
+>
   <div>
     <GiteaLink href={giteaLink} />
     <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">

src/components/Greeting.astro

@@ -7,7 +7,7 @@ import "@/styles/global.css"
 
 <div class="flex items-center justify-around flex-wrap">
   <div class="m-5">
-    <h1 class="sm:text-7xl font-bold">
+    <h1>
       {m.hiIm()}
       <br />
       Martin Berg Alstad

src/components/Input.astro

@@ -19,7 +19,7 @@ const {
 <label class="flex flex-col">
   {label}
   <input
-    class="input input-bordered"
+    class="input input-bordered w-full"
     type={type}
     name={name}
     required={required}

src/components/Navbar.astro

@@ -1,14 +0,0 @@
----
-import LocaleLink from "./links/LocaleLink.astro"
-import Links from "@/links"
----
-
-<div class="flex justify-end">
-  {
-    Links.map(({ to, label }) => (
-      <LocaleLink to={to} class="m-2 hover:underline">
-        {label()}
-      </LocaleLink>
-    ))
-  }
-</div>

src/components/UsesPage.astro

@@ -0,0 +1,31 @@
+---
+import Select from "./Select.svelte"
+import * as m from "@/paraglide/messages"
+import CollapseList from "@/components/collapse/CollapseList.svelte"
+import type { CollectionEntry } from "astro:content"
+
+interface Props {
+  uses: ReadonlyArray<CollectionEntry<"uses">>
+}
+
+const { uses } = Astro.props
+// TODO set url anchor to selected hardware
+---
+
+<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
+  {
+    uses.map((hardware) => (
+      <div class="my-5">
+        <h3>{hardware.data.title}</h3>
+        <CollapseList items={hardware.data.hardware} title={m.hardware()} />
+        <div class="my-2" />
+        {hardware.data.accessories && (
+          <CollapseList
+            items={hardware.data.accessories}
+            title={m.accessories()}
+          />
+        )}
+      </div>
+    ))
+  }
+</div>

src/components/UsesPage.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import Select from "./Select.svelte"
-  import * as m from "@/paraglide/messages"
-  import CollapseList from "@/components/collapse/CollapseList.svelte"
-  import type { CollectionEntry } from "astro:content"
-
-  interface Props {
-    uses: CollectionEntry<"uses">[]
-  }
-
-  const { uses }: Props = $props()
-
-  const hardwareOptions = uses.map((item) => ({
-    key: item.id,
-    value: item.data.title,
-  }))
-
-  let selectedHardwareKey = $state(uses[0].id)
-  let selectedHardware = $derived(
-    uses.find((item) => item.id === selectedHardwareKey)!,
-  )
-  // TODO set url query param to selected hardware
-</script>
-
-<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
-  <h1 class="text-center">{m.uses()}</h1>
-  <div>
-    <Select
-      options={hardwareOptions}
-      bind:selected={selectedHardwareKey}
-      class="mx-auto w-max"
-    />
-  </div>
-  <br />
-
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
-  <div class="my-2"></div>
-  {#if selectedHardware.data.accessories}
-    <CollapseList
-      items={selectedHardware.data.accessories}
-      title={m.accessories()}
-    />
-  {/if}
-</div>

src/components/header/Header.astro

@@ -0,0 +1,7 @@
+---
+import Navbar from "./Navbar.astro"
+---
+
+<div class="m-auto">
+  <Navbar />
+</div>

src/components/header/Navbar.astro

@@ -0,0 +1,17 @@
+---
+import LocaleLink from "@/components/links/LocaleLink.astro"
+import Links from "@/links"
+---
+
+<div class="flex justify-end">
+  {
+    Links.map(({ to, label }) => (
+      <LocaleLink
+        to={to}
+        class={"m-2 hover:text-cat-mauve font-bold font-mono"}
+      >
+        ~/{label()}
+      </LocaleLink>
+    ))
+  }
+</div>

src/components/myLinks/LinksPage.astro

@@ -2,10 +2,8 @@
 import links from "./myLinks"
 import LinkCard from "./LinkCard.astro"
 import "@/styles/global.css"
-import * as m from "@/paraglide/messages"
 ---
 
-<h1 class="text-center">{m.myLinks()}</h1>
 <div class="flex flex-col mx-auto w-fit gap-5">
   {
     links.map((link) => (

src/components/projects/MyProjectsPage.astro

@@ -13,7 +13,6 @@ const { projects } = Astro.props
 const baseUrl: NavLink = "/projects"
 ---
 
-<h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
 <div class="flex flex-wrap justify-around">
   {
     projects.map(

src/layouts/Layout.astro

@@ -1,13 +1,15 @@
 ---
-import Navbar from "@/components/Navbar.astro"
 import Footer from "@/components/Footer.astro"
+import Header from "../components/header/Header.astro"
 import { languageTag } from "@/paraglide/runtime"
+import { resolvePathname } from "../utils/linking"
 
 interface Props {
   title: string
   class?: string
 }
 const { title, class: clazz } = Astro.props
+const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px] mt-5"
 ---
 
 <!doctype html>
@@ -19,11 +21,12 @@ const { title, class: clazz } = Astro.props
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
+    <title>{title} | Martin Berg Alstad</title>
   </head>
-  <body class="flex flex-col h-screen">
-    <Navbar />
-    <main class:list={["grow", clazz]}>
+  <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>
       <slot />
     </main>
     <Footer />

src/links.ts

@@ -4,28 +4,34 @@ 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",
   },
 ]
 

src/pages/en/uses.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import UsesPage from "@/components/UsesPage.svelte"
+import UsesPage from "@/components/UsesPage.astro"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"
 
@@ -8,5 +8,5 @@ const uses = await getCollection("uses")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <UsesPage client:load uses={uses} />
+  <UsesPage uses={uses} />
 </Layout>

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from "../layouts/Layout.astro"
-import Greeting from "../components/Greeting.astro"
+import Layout from "@/layouts/Layout.astro"
+import Greeting from "@/components/Greeting.astro"
 
 // https://slashpages.net/
 ---

src/pages/uses.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import UsesPage from "@/components/UsesPage.svelte"
+import UsesPage from "@/components/UsesPage.astro"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"
 
@@ -8,5 +8,5 @@ const uses = await getCollection("uses")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <UsesPage client:load uses={uses} />
+  <UsesPage uses={uses} />
 </Layout>

src/styles/global.css

@@ -1,28 +1,51 @@
 @import "tailwindcss";
+
 @plugin "@tailwindcss/typography";
 @plugin "daisyui";
 
+@theme {
+    --color-cat-rosewater: #f5e0dc;
+    --color-cat-flamingo: #f2cdcd;
+    --color-cat-pink: #f5c2e7;
+    --color-cat-mauve: #cba6f7;
+    --color-cat-red: #f38ba8;
+    --color-cat-maroon: #eba0ac;
+    --color-cat-peach: #fab387;
+    --color-cat-yellow: #f9e2af;
+    --color-cat-green: #a6e3a1;
+    --color-cat-teal: #94e2d5;
+    --color-cat-sky: #89dceb;
+    --color-cat-sapphire: #74c7ec;
+    --color-cat-blue: #89b4fa;
+    --color-cat-lavender: #b4befe;
+    --color-cat-text: #cdd6f4;
+    --color-cat-base: #1e1e2e;
+}
+
 @layer utilities {
-  .debug {
-    @apply border border-red-500;
-  }
+    .debug {
+        @apply border border-red-500;
+    }
 }
 
-@layer base {
-  br {
+br {
     @apply my-0.5;
-  }
-
-  h1 {
-    @apply text-4xl font-bold mb-2;
-  }
-
-  h2 {
-    @apply text-3xl font-bold mb-2;
-  }
-
-  /* TODO change default style*/
-  a {
-    @apply link;
-  }
+}
+
+h1 {
+    @apply text-4xl font-bold mb-2;
+}
+
+h2 {
+    @apply text-3xl font-bold mb-2;
+}
+
+h3 {
+    @apply text-2xl font-bold mb-2;
+}
+
+/* TODO change default style*/
+a {
+    @apply link;
+    text-decoration-line: none;
 }