feat: add contact form

src/pages/contact.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>{{ t('title') }}</h1>
+    <form data-static-form-name="contact">
+      <div>
+        <label>{{ t('name') }}<input type="text" name="name" /></label>
+      </div>
+      <div>
+        <label>{{ t('email') }}<input type="email" name="email" /></label>
+      </div>
+      <div>
+        <label>{{ t('message') }}<textarea name="message"></textarea></label>
+      </div>
+      <button type="submit">{{ t('send') }}</button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  email: E-Mail-Adresse
+  message: Nachricht
+  name: Name
+  send: Senden
+  title: Kontakt
+en:
+  email: Email address
+  message: Message
+  name: Name
+  send: Send
+  title: Contact
+</i18n>

src/public/functions/_middleware.ts

@@ -0,0 +1,17 @@
+import mailchannelsPlugin from '@cloudflare/pages-plugin-mailchannels'
+
+export const onRequest = mailchannelsPlugin({
+  personalizations: [
+    {
+      to: [
+        { name: 'Jonas Thelemann', email: 'e-mail+form@jonas-thelemann.de' },
+      ],
+    },
+  ],
+  from: { name: 'jonas-thelemann.de', email: 'no-reply@cloudflare.com' },
+  respondWith: () =>
+    new Response(null, {
+      status: 302,
+      headers: { Location: '/thank-you' },
+    }),
+})