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>