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>

astro.config.mjs

@@ -6,7 +6,7 @@ import { loadEnv } from "vite"
 import mdx from "@astrojs/mdx"
 import svelte from "@astrojs/svelte"
 
-import icon from "astro-icon";
+import icon from "astro-icon"
 
 const { url } = process.env.URL
   ? loadEnv(process.env.URL, process.cwd(), "")
@@ -15,6 +15,7 @@ const { url } = process.env.URL
 // https://astro.build/config
 export default defineConfig({
   site: url,
+  // output: "server", TODO server | also required for i18n
   i18n: {
     defaultLocale: "nb",
     locales: ["nb", "en"]

messages/en.json

@@ -13,5 +13,10 @@
   "createdAt": "Created at",
   "updatedAt": "Updated at",
   "forPersonalProjects": "For personal projects",
-  "status": "Status"
+  "status": "Status",
+  "name": "Name",
+  "subject": "Subject",
+  "email": "Email",
+  "message": "Message",
+  "send": "Send"
 }

messages/nb.json

@@ -13,5 +13,10 @@
   "createdAt": "Opprettet",
   "updatedAt": "Oppdatert",
   "forPersonalProjects": "For personlige prosjekter",
-  "status": "Status"
+  "status": "Status",
+  "name": "Navn",
+  "subject": "Emne",
+  "email": "E-post",
+  "message": "Melding",
+  "send": "Send"
 }

package.json

@@ -9,7 +9,8 @@
     "preview": "astro preview",
     "astro": "astro",
     "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
-    "format": "prettier --write \"./src/**/*.{js,mjs,ts,astro,svelte,css,md,json}\""
+    "format": "prettier --write \"./src/**/*.{js,mjs,ts,astro,svelte,css,md,json}\"",
+    "watch-translations": "paraglide-js compile --watch --project ./project.inlang --outdir ./src/paraglide"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.3",

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" action="https://formspree.io/f/mknykgbn">
-
+  <Input label={m.name()} type="text" name="name" required />
-<form class="flex flex-col gap-2 max-w-[500px] mx-auto" method="post">
+  <Input label={m.subject()} name="subject" required />
-  <Input label="Name" type="text" name="name" required />
+  <Input label={m.email()} name="_replyto" />
-  <Input label="Subject" name="subject" required />
+  <input name="_gotcha" type="text" class={"hidden"} /> { /*Honeypot spam filter*/}
-  <Input label="Email" name="email" />
+  <label class="flex flex-col">
-  <label class="flex flex-col"
+    {m.message()}
-    >Message
+    <textarea name="message" class="textarea textarea-bordered" required></textarea>
-    <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>

src/layouts/Layout.astro

@@ -1,31 +1,31 @@
 ---
-import Navbar from "../components/Navbar.astro"
+import Navbar from "@/components/Navbar.astro"
+import Footer from "@/components/Footer.astro"
+import { languageTag } from "@/paraglide/runtime"
+
 interface Props {
   title: string
   class?: string
 }
 const { title, class: clazz } = Astro.props
-
-import { languageTag } from "../paraglide/runtime"
-import Footer from "../components/Footer.astro"
 ---
 
 <!doctype html>
 <html lang={languageTag()} dir={"ltr"}>
-  <head>
+<head>
-    <meta charset="UTF-8" />
+  <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
+  <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
+  <meta name="viewport" content="width=device-width" />
-    <link rel="sitemap" href="/sitemap-index.xml" />
+  <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
+  <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
+  <title>{title}</title>
-  </head>
+</head>
-  <body class="flex flex-col h-screen">
+<body class="flex flex-col h-screen">
-    <Navbar />
+<Navbar />
-    <main class:list={["grow", clazz]}>
+<main class:list={["grow", clazz]}>
-      <slot />
+  <slot />
-    </main>
+</main>
-    <Footer />
+<Footer />
-  </body>
+</body>
 </html>

src/pages/contact-me.astro

@@ -1,11 +1,9 @@
 ---
-// TODO form
+import ContactMeForm from "@/components/ContactMeForm.astro"
-// TODO self-host email server
+import Layout from "@/layouts/Layout.astro"
-import "../styles/global.css"
+import "@/styles/global.css"
-import ContactMeForm from "../components/ContactMeForm.astro"
-import Layout from "../layouts/Layout.astro"
 ---
 
 <Layout title="Kontakt meg">
-  <!--<ContactMeForm client:load />-->
+  <ContactMeForm />
 </Layout>

src/pages/en/contact-me.astro

@@ -1,3 +1,9 @@
 ---
+import ContactMeForm from "@/components/ContactMeForm.astro"
+import Layout from "@/layouts/Layout.astro"
+import "@/styles/global.css"
+---
 
----
+<Layout title="Kontakt meg">
+  <ContactMeForm />
+</Layout>