Fix form on contact-me page.

Fix wrong link to source code.

Eager loading of image on landing page.

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/components/ContactMeForm.astro

@@ -1,37 +1,17 @@
 ---
-// TODO form
+import Input from "@/components/Input.astro"
+import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
-import "../styles/global.css"
-import Input from "../components/Input.astro"
-import * as console from "node:console"
-
-if (Astro.request.method === "POST") {
-  try {
-    const data = await Astro.request.formData()
-    const name = data.get("name")
-    const subject = data.get("subject")
-    const email = data.get("email")
-    const message = data.get("message")
-    // TODO Do something with the data
-    console.info({ name, subject, email, message })
-  } catch (error) {
-    if (error instanceof Error) {
-      console.error(error.message)
-    }
-  }
-}
 ---
 
-<div class="text-red-600 text-center">In development</div>
-
-<form class="flex flex-col gap-2 max-w-[500px] mx-auto" method="post">
-  <Input label="Name" type="text" name="name" required />
-  <Input label="Subject" name="subject" required />
-  <Input label="Email" name="email" />
-  <label class="flex flex-col"
-    >Message
-    <textarea name="message" class="textarea textarea-bordered" required
-    ></textarea>
+<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" />
+  <input name="_gotcha" type="text" class={"hidden"} /> { /*Honeypot spam filter*/}
+  <label class="flex flex-col">
+    {m.message()}
+    <textarea name="message" class="textarea textarea-bordered" required></textarea>
   </label>
-  <button type="submit">Send</button>
+  <button type="submit">{m.send()}</button>
 </form>

src/components/Footer.astro

@@ -3,13 +3,14 @@ import GiteaLink from "./links/GiteaLink.astro"
 import ExternalLink from "./links/ExternalLink.astro"
 import PajamasIcon from "./icons/PajamasIcon.astro"
 import * as m from "@/paraglide/messages"
+
 const gitUrl = import.meta.env.GIT_URL
 const statusUrl = import.meta.env.STATUS_URL
 ---
 
 <div class="divider"></div>
 <div class="mx-auto py-5 flex flex-col gap-1 items-center">
-  <GiteaLink href={gitUrl} />
+  <GiteaLink href={`${gitUrl}/martials/martials.no`} />
   <ExternalLink href={statusUrl} class="flex items-center" title="Status">
     <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
     {m.status()}

src/components/Greeting.astro

@@ -16,7 +16,7 @@ import "@/styles/global.css"
     </h1>
     <p class="mx-1 sm:my-10">{m.aboutMe()}</p>
   </div>
-  <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" />
+  <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" loading={"eager"} />
 </div>
 <!-- Mastodon verification -->
 <a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>