✨ Latest projects on landing page, moved landing page components

TODO.md

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

src/components/ContactMeForm.astro

@@ -4,20 +4,28 @@ import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
 ---
 
-<form
-  class="flex flex-col gap-2 max-w-[500px] mx-auto"
-  method="post"
-  action="https://formspree.io/f/mknykgbn"
->
-  <Input label={m.name()} type="text" name="name" required />
-  <Input label={m.subject()} name="subject" required />
-  <Input label={m.email()} name="_replyto" />
-  {/*Honeypot spam filter*/}
-  <input name="_gotcha" type="text" class={"hidden"} />
-  <label class="flex flex-col">
-    {m.message()}
-    <textarea name="message" class="textarea textarea-bordered w-full" required
-    ></textarea>
-  </label>
-</form>
-<button type="submit" class="btn mt-2" title={m.send()}>{m.send()}</button>
+<div class="max-w-[500px] mx-auto">
+  <form
+    class="flex flex-col gap-2 w-full"
+    method="post"
+    action="https://formspree.io/f/mknykgbn"
+  >
+    <Input label={m.name()} type="text" name="name" required />
+    <Input label={m.subject()} name="subject" required />
+    <Input label={m.email()} name="_replyto" />
+    {/*Honeypot spam filter*/}
+    <input name="_gotcha" type="text" class={"hidden"} />
+    <label class="flex flex-col">
+      {m.message()}
+      <textarea
+        name="message"
+        class="textarea textarea-bordered w-full bg-cat-base"
+        required></textarea>
+    </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,11 +11,15 @@ const giteaLink = `${GIT_URL}/martials/martials.no`
 
 <div class="divider bg-inherit"></div>
 <div
-  class="py-5 flex flex-row gap-1 justify-around w-full items-center bg-inherit"
+  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"
 >
   <div>
-    <GiteaLink href={giteaLink} />
-    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
+    <GiteaLink href={giteaLink} class="!text-cat-text" />
+    <ExternalLink
+      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">
+<label class="flex flex-col w-full">
   {label}
   <input
-    class="input input-bordered w-full"
+    class="input input-bordered w-full bg-cat-base"
     type={type}
     name={name}
     required={required}

src/components/LanguageButtonGroup.astro

@@ -2,14 +2,26 @@
 import LocaleLink from "./links/LocaleLink.astro"
 import { type NavLink, resolvePathname } from "@/utils/linking"
 
-const currentPath = resolvePathname(Astro.url.pathname)
+const pathname = Astro.url.pathname
+const currentPath = resolvePathname(pathname)
+const isEnglish = pathname.startsWith("/en")
 ---
 
 <div class="join">
-  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item"
-    >Norsk</LocaleLink
+  <LocaleLink
+    to={currentPath as NavLink}
+    lang="nb"
+    class:list={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      !isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>Norsk</LocaleLink
   >
-  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item"
-    >English</LocaleLink
+  <LocaleLink
+    to={currentPath as NavLink}
+    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">
+<div class="flex flex-wrap gap-1 py-0.5">
   {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 hover:text-cat-mauve font-bold font-mono"}
+        class={"m-2 not-hover:!text-cat-text font-bold font-mono"}
       >
         ~/{label()}
       </LocaleLink>

src/components/landing/IndexPage.astro

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

src/components/landing/LatestProjects.astro

@@ -0,0 +1,10 @@
+---
+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-base-300", clazz]}>
+  <div class:list={["card bg-cat-mantle text-cat-text", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
       {
         icon ? (

src/components/projects/MyProjectsPage.astro

@@ -1,32 +1,12 @@
 ---
-import ProjectCard from "./ProjectCard.astro"
+import ProjectGrid from "./ProjectGrid.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"
 ---
 
-<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>
+<ProjectGrid projects={projects} />

src/components/projects/ProjectCard.astro

@@ -19,12 +19,13 @@ 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"
+  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition border border-cat-surface0"
 >
   <figure>
     <Image src={image} alt={imageAlt} />
+    <figcaption class="sr-only">{imageAlt}</figcaption>
   </figure>
-  <div class="card-body">
+  <div class="card-body text-cat-text">
     <h2 class="card-title">
       {title}
     </h2>

src/components/projects/ProjectGrid.astro

@@ -0,0 +1,32 @@
+---
+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] px-3">
+<Layout title={title} class="mx-auto max-w-[750px]">
   <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="text-cat-mauve my-2" />
+  <GiteaLink href={source} class="my-2" />
 
   <p class="my-2">{description}</p>
   <Content />

src/content/projects/homepage.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Hjemmeside"
+title: "Welcome"
 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,7 +9,8 @@ interface Props {
   class?: string
 }
 const { title, class: clazz } = Astro.props
-const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px]"
+const mainClass =
+  "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 OnePager from "../../components/Greeting.astro"
-import Layout from "../../layouts/Layout.astro"
+import IndexPage from "@/components/landing/IndexPage.astro"
+import Layout from "@/layouts/Layout.astro"
 import "@/styles/global.css"
 ---
 
 <Layout title="Welcome">
-  <OnePager />
+  <IndexPage />
 </Layout>

src/pages/index.astro

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

src/styles/global.css

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