From 023c8b7c8560d63e094876817207b975a777e188 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <git@martials.no>
Date: Sat, 15 Feb 2025 18:01:17 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Update=20general=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Smaller width of page
- Center navbar
- Fonts
- Catppuccin Mocha colours
- TODO.md
- Show all uses at the same time
- and more...
---
 TODO.md                                      | 40 +++++++++++++
 messages/en.json                             |  2 +-
 messages/nb.json                             |  2 +-
 src/components/ContactMeForm.astro           |  6 +-
 src/components/Footer.astro                  |  6 +-
 src/components/Greeting.astro                |  2 +-
 src/components/Input.astro                   |  2 +-
 src/components/Navbar.astro                  | 14 -----
 src/components/UsesPage.astro                | 31 ++++++++++
 src/components/UsesPage.svelte               | 44 --------------
 src/components/header/Header.astro           |  7 +++
 src/components/header/Navbar.astro           | 17 ++++++
 src/components/myLinks/LinksPage.astro       |  2 -
 src/components/projects/MyProjectsPage.astro |  1 -
 src/layouts/Layout.astro                     | 13 +++--
 src/links.ts                                 |  6 ++
 src/pages/en/uses.astro                      |  4 +-
 src/pages/index.astro                        |  4 +-
 src/pages/uses.astro                         |  4 +-
 src/styles/global.css                        | 61 ++++++++++++++------
 20 files changed, 168 insertions(+), 100 deletions(-)
 create mode 100644 TODO.md
 delete mode 100644 src/components/Navbar.astro
 create mode 100644 src/components/UsesPage.astro
 delete mode 100644 src/components/UsesPage.svelte
 create mode 100644 src/components/header/Header.astro
 create mode 100644 src/components/header/Navbar.astro

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..e4cdb06
--- /dev/null
+++ b/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
diff --git a/messages/en.json b/messages/en.json
index e065450..d6978bc 100644
--- a/messages/en.json
+++ b/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",
diff --git a/messages/nb.json b/messages/nb.json
index 49c6ccd..07aca11 100644
--- a/messages/nb.json
+++ b/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",
diff --git a/src/components/ContactMeForm.astro b/src/components/ContactMeForm.astro
index 911e351..d37cbb2 100644
--- a/src/components/ContactMeForm.astro
+++ b/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>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7228ef4..8b9bf77 100644
--- a/src/components/Footer.astro
+++ b/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">
diff --git a/src/components/Greeting.astro b/src/components/Greeting.astro
index 6f8e75a..f4db6d3 100644
--- a/src/components/Greeting.astro
+++ b/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
diff --git a/src/components/Input.astro b/src/components/Input.astro
index f3f1aed..e8a1589 100644
--- a/src/components/Input.astro
+++ b/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}
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
deleted file mode 100644
index e1fab57..0000000
--- a/src/components/Navbar.astro
+++ /dev/null
@@ -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>
diff --git a/src/components/UsesPage.astro b/src/components/UsesPage.astro
new file mode 100644
index 0000000..4aca7a4
--- /dev/null
+++ b/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>
diff --git a/src/components/UsesPage.svelte b/src/components/UsesPage.svelte
deleted file mode 100644
index d002404..0000000
--- a/src/components/UsesPage.svelte
+++ /dev/null
@@ -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>
diff --git a/src/components/header/Header.astro b/src/components/header/Header.astro
new file mode 100644
index 0000000..44405a1
--- /dev/null
+++ b/src/components/header/Header.astro
@@ -0,0 +1,7 @@
+---
+import Navbar from "./Navbar.astro"
+---
+
+<div class="m-auto">
+  <Navbar />
+</div>
diff --git a/src/components/header/Navbar.astro b/src/components/header/Navbar.astro
new file mode 100644
index 0000000..c4535bf
--- /dev/null
+++ b/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>
diff --git a/src/components/myLinks/LinksPage.astro b/src/components/myLinks/LinksPage.astro
index 436a265..9bfe5cf 100644
--- a/src/components/myLinks/LinksPage.astro
+++ b/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) => (
diff --git a/src/components/projects/MyProjectsPage.astro b/src/components/projects/MyProjectsPage.astro
index 0e0175d..edfc447 100644
--- a/src/components/projects/MyProjectsPage.astro
+++ b/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(
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9d1ea0e..eaacd34 100644
--- a/src/layouts/Layout.astro
+++ b/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 />
diff --git a/src/links.ts b/src/links.ts
index 90e9017..7116244 100644
--- a/src/links.ts
+++ b/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",
   },
 ]
 
diff --git a/src/pages/en/uses.astro b/src/pages/en/uses.astro
index 17a61b5..7a23c9d 100644
--- a/src/pages/en/uses.astro
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5d8d176..1cbe9b2 100644
--- a/src/pages/index.astro
+++ b/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/
 ---
diff --git a/src/pages/uses.astro b/src/pages/uses.astro
index 17a61b5..7a23c9d 100644
--- a/src/pages/uses.astro
+++ b/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>
diff --git a/src/styles/global.css b/src/styles/global.css
index a55637e..0dcd6b5 100644
--- a/src/styles/global.css
+++ b/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;
 }