TODO.md

@@ -1,7 +1,7 @@
 # TODO
 
 ## Code
-- [ ] day.js for dates
+- [ ] Temporal API or day.js for dates
 
 ## SSE
 - [x] Correct Sitemap.xml
@@ -12,18 +12,15 @@
 - [x] Show current page
 - [x] Correct bg colour on entire page
 - [x] Hamburger menu on mobile
-- [ ] Dark mode toggle
-- [ ] Navigate using pathname / breadcrumbs
 
 ## Accessibility
-- [x] Fix colours on buttons
+- [ ] Fix colours on buttons
 - [x] Correct contrast
 - [ ] All interactable elements have labels
-- [x] Colour links, also in MDX posts
+- [ ] Colour links, also in MDX posts
 
 ## ~/
 - [ ] About me description
-- [ ] Latest projects
 - [ ] Non-cat image
 
 ## ~/about
@@ -32,7 +29,6 @@
 ## ~/links
 - [ ] Add Bluesky link
 - [ ] Add MusicBrainz link
-- [ ] Add Archidekt link
 
 ## ~/slashes
 - [ ] List of all slashes

src/components/ContactMeForm.astro

@@ -4,28 +4,20 @@ import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
 ---
 
-<div class="max-w-[500px] mx-auto">
+<form
-  <form
+  class="flex flex-col gap-2 max-w-[500px] mx-auto"
-    class="flex flex-col gap-2 w-full"
+  method="post"
-    method="post"
+  action="https://formspree.io/f/mknykgbn"
-    action="https://formspree.io/f/mknykgbn"
+>
-  >
+  <Input label={m.name()} type="text" name="name" required />
-    <Input label={m.name()} type="text" name="name" required />
+  <Input label={m.subject()} name="subject" required />
-    <Input label={m.subject()} name="subject" required />
+  <Input label={m.email()} name="_replyto" />
-    <Input label={m.email()} name="_replyto" />
+  {/*Honeypot spam filter*/}
-    {/*Honeypot spam filter*/}
+  <input name="_gotcha" type="text" class={"hidden"} />
-    <input name="_gotcha" type="text" class={"hidden"} />
+  <label class="flex flex-col">
-    <label class="flex flex-col">
+    {m.message()}
-      {m.message()}
+    <textarea name="message" class="textarea textarea-bordered w-full" required
-      <textarea
+    ></textarea>
-        name="message"
+  </label>
-        class="textarea textarea-bordered w-full bg-cat-base"
+</form>
-        required></textarea>
+<button type="submit" class="btn mt-2" title={m.send()}>{m.send()}</button>
-    </label>
-  </form>
-  <button
-    type="submit"
-    class="btn mt-2 bg-cat-base border-cat-surface0"
-    title={m.send()}>{m.send()}</button
-  >
-</div>

src/components/Footer.astro

@@ -11,15 +11,11 @@ const giteaLink = `${GIT_URL}/martials/martials.no`
 
 <div class="divider bg-inherit"></div>
 <div
-  class="max-w-[1000px] sm:min-w-[500px] mx-auto py-5 flex flex-row flex-wrap gap-5 justify-around items-center bg-inherit px-5"
+  class="py-5 flex flex-row gap-1 justify-around w-full items-center bg-inherit"
 >
   <div>
-    <GiteaLink href={giteaLink} class="!text-cat-text" />
+    <GiteaLink href={giteaLink} />
-    <ExternalLink
+    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
-      href={STATUS_URL}
-      class="flex items-center !text-cat-text"
-      title="Status"
-    >
       <PajamasIcon
         name="pajamas:status-health"
         class="w-6 h-6 mr-2"

src/components/Input.astro

@@ -16,10 +16,10 @@ const {
 } = Astro.props
 ---
 
-<label class="flex flex-col w-full">
+<label class="flex flex-col">
   {label}
   <input
-    class="input input-bordered w-full bg-cat-base"
+    class="input input-bordered w-full"
     type={type}
     name={name}
     required={required}

src/components/LanguageButtonGroup.astro

@@ -2,26 +2,14 @@
 import LocaleLink from "./links/LocaleLink.astro"
 import { type NavLink, resolvePathname } from "@/utils/linking"
 
-const pathname = Astro.url.pathname
+const currentPath = resolvePathname(Astro.url.pathname)
-const currentPath = resolvePathname(pathname)
-const isEnglish = pathname.startsWith("/en")
 ---
 
 <div class="join">
-  <LocaleLink
+  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item"
-    to={currentPath as NavLink}
+    >Norsk</LocaleLink
-    lang="nb"
-    class:list={[
-      "btn join-item !text-cat-text border-cat-surface0",
-      !isEnglish ? "bg-cat-mantle" : "bg-cat-base",
-    ]}>Norsk</LocaleLink
   >
-  <LocaleLink
+  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item"
-    to={currentPath as NavLink}
+    >English</LocaleLink
-    lang="en"
-    class:list={[
-      "btn join-item !text-cat-text border-cat-surface0",
-      isEnglish ? "bg-cat-mantle" : "bg-cat-base",
-    ]}>English</LocaleLink
   >
 </div>

src/components/badge/BadgeList.astro

@@ -7,6 +7,6 @@ interface Props {
 const { tags } = Astro.props
 ---
 
-<div class="flex flex-wrap gap-1 py-0.5">
+<div class="flex flex-wrap gap-1">
   {tags.map((tag) => <Badge tag={tag} />)}
 </div>

src/components/header/Navbar.astro

@@ -8,7 +8,7 @@ import Links from "@/links"
     Links.map(({ to, label }) => (
       <LocaleLink
         to={to}
-        class={"m-2 not-hover:!text-cat-text font-bold font-mono"}
+        class={"m-2 hover:text-cat-mauve font-bold font-mono"}
       >
         ~/{label()}
       </LocaleLink>

src/components/landing/IndexPage.astro

@@ -1,7 +0,0 @@
----
-import Greeting from "./Greeting.astro"
-import LatestProjects from "./LatestProjects.astro"
----
-
-<Greeting />
-<LatestProjects />

src/components/landing/LatestProjects.astro

@@ -1,10 +0,0 @@
----
-import { getCollection } from "astro:content"
-import ProjectGrid from "@/components/projects/ProjectGrid.astro"
-
-const projects = await getCollection("projects")
----
-
-<div class="divider"></div>
-
-<ProjectGrid projects={projects} />

src/components/myLinks/LinkCard.astro

@@ -12,7 +12,7 @@ const iconStyle = "w-6 h-6"
 ---
 
 <ExternalLink href={url} noStyle>
-  <div class:list={["card bg-cat-mantle text-cat-text", clazz]}>
+  <div class:list={["card bg-base-300", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
       {
         icon ? (

src/components/projects/MyProjectsPage.astro

@@ -1,12 +1,32 @@
 ---
-import ProjectGrid from "./ProjectGrid.astro"
+import ProjectCard from "./ProjectCard.astro"
 import { type CollectionEntry } from "astro:content"
+import { type NavLink } from "@/utils/linking"
 
 interface Props {
   projects: CollectionEntry<"projects">[]
 }
 
 const { projects } = Astro.props
+
+const baseUrl: NavLink = "/projects"
 ---
 
-<ProjectGrid projects={projects} />
+<div class="flex flex-wrap justify-around">
+  {
+    projects.map(
+      ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
+        <div class="my-5 px-2">
+          <ProjectCard
+            title={title}
+            linkTo={`${baseUrl}/${id}`}
+            description={description}
+            tags={tags}
+            image={heroImage}
+            imageAlt={heroImageAlt}
+          />
+        </div>
+      ),
+    )
+  }
+</div>

src/components/projects/ProjectCard.astro

@@ -19,13 +19,12 @@ const { title, description, tags, image, imageAlt, linkTo } = Astro.props
 
 <LocaleLink
   to={linkTo}
-  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition border border-cat-surface0"
+  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition"
 >
   <figure>
     <Image src={image} alt={imageAlt} />
-    <figcaption class="sr-only">{imageAlt}</figcaption>
   </figure>
-  <div class="card-body text-cat-text">
+  <div class="card-body">
     <h2 class="card-title">
       {title}
     </h2>

src/components/projects/ProjectGrid.astro

@@ -1,32 +0,0 @@
----
-import type { Project } from "@/types/types"
-import type { NavLink } from "@/utils/linking"
-import ProjectCard from "./ProjectCard.astro"
-
-interface Props {
-  projects: ReadonlyArray<Project>
-}
-
-const { projects } = Astro.props
-
-const baseUrl: NavLink = "/projects"
----
-
-<div class="flex flex-wrap justify-around">
-  {
-    projects.map(
-      ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
-        <div class="my-5 px-2">
-          <ProjectCard
-            title={title}
-            linkTo={`${baseUrl}/${id}`}
-            description={description}
-            tags={tags}
-            image={heroImage}
-            imageAlt={heroImageAlt}
-          />
-        </div>
-      ),
-    )
-  }
-</div>

src/components/projects/ProjectPage.astro

@@ -29,7 +29,7 @@ const {
 ---
 
 <!--TODO day.js / Temporal API for dates?-->
-<Layout title={title} class="mx-auto max-w-[750px]">
+<Layout title={title} class="mx-auto max-w-[750px] px-3">
   <div class="flex justify-between my-2">
     <div>
       <h2>{title}</h2>
@@ -46,7 +46,7 @@ const {
   </div>
   <Image src={heroImage} alt={heroImageAlt} class="m-auto" />
 
-  <GiteaLink href={source} class="my-2" />
+  <GiteaLink href={source} class="text-cat-mauve my-2" />
 
   <p class="my-2">{description}</p>
   <Content />

src/content/projects/homepage.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Welcome"
+title: "Hjemmeside"
 description: "Welcome to my homepage / portfolio"
 heroImage: "assets/recursive-meme.png"
 heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"

src/layouts/Layout.astro

@@ -9,8 +9,7 @@ interface Props {
   class?: string
 }
 const { title, class: clazz } = Astro.props
-const mainClass =
+const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px]"
-  "grow max-w-[1000px] m-auto sm:min-w-[500px] not-sm:w-full px-5"
 ---
 
 <!doctype html>

src/pages/en/index.astro

@@ -1,9 +1,9 @@
 ---
-import IndexPage from "@/components/landing/IndexPage.astro"
+import OnePager from "../../components/Greeting.astro"
-import Layout from "@/layouts/Layout.astro"
+import Layout from "../../layouts/Layout.astro"
 import "@/styles/global.css"
 ---
 
 <Layout title="Welcome">
-  <IndexPage />
+  <OnePager />
 </Layout>

src/pages/index.astro

@@ -1,9 +1,10 @@
 ---
-import IndexPage from "@/components/landing/IndexPage.astro"
 import Layout from "@/layouts/Layout.astro"
-import "@/styles/global.css"
+import Greeting from "@/components/Greeting.astro"
+
+// https://slashpages.net/
 ---
 
 <Layout title="Velkommen">
-  <IndexPage />
+  <Greeting />
 </Layout>

src/styles/global.css

@@ -48,6 +48,6 @@ h3 {
 
 /* TODO change default style*/
 a {
-    @apply link text-cat-mauve;
+    @apply link;
     text-decoration-line: none;
 }