Implement a cat submission form site

src/content/config.ts

@@ -3,7 +3,7 @@ import { z, defineCollection } from 'astro:content';
 const cats = defineCollection({
   type: 'data',
   schema: z.object({
-    name: z.string().max(20),
+    name: z.string().max(25),
     dateAdded: z
       .string()
       .or(z.date())

src/pages/submit.astro

@@ -0,0 +1,117 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<script is:inline src="https://www.google.com/recaptcha/api.js" async defer
+></script>
+
+<BaseLayout title="Submit a cat" description="Submit a cat to Cats Of Tech">
+  <h1 class="text-center">Submit a cat</h1>
+  <p>
+    If you work in the tech industry and own a cat that you'd like to share,
+    then you've come to the right place! Fill out the form below and <a
+      href="https://maciejpedzi.ch">Mac</a
+    > should add your feline friend.
+  </p>
+  <div id="guidelines" class="bg-primary text-white">
+    <h3>Guidelines</h3>
+    <ul>
+      <li>Only cats, please. This is not dogsof.dev or peopleof.tech</li>
+      <li>
+        I'm fine with any resolution, orientation, and aspect ratio as along as
+        the photo's size doesn't exceed 1 MB
+      </li>
+      <li>
+        Refrain from adding artsy filters or stickers/overlays. Let your cat be
+        the star
+      </li>
+      <li>If you own multiple cats, please submit them separately</li>
+      <li>
+        If you wish to have your cat's entry updated (e.g. if it passed away), <a
+          class="text-white"
+          href="mailto:contact@maciejpedzi.ch">email Mac</a
+        > or <a
+          class="text-white"
+          href="https://github.com/maciejpedzich/catsof.tech/issues"
+          >open an issue on GitHub</a
+        >
+      </li>
+    </ul>
+  </div>
+  <form
+    id="submissionForm"
+    action="https://usebasin.com/f/7c7567856fa3"
+    method="POST"
+    enctype="multipart/form-data"
+  >
+    <div>
+      <label for="name">Cat's name</label>
+      <input type="text" name="name" required maxlength="25" />
+      <small>Maximum length: 25 characters</small>
+    </div>
+    <div>
+      <label for="photo">Cat's photo</label>
+      <input type="file" name="photo" required accept="image/*" />
+    </div>
+    <div>
+      <label for="description">Cat's description (optional)</label>
+      <textarea name="description" maxlength="300"></textarea>
+      <small>
+        Some ideas: nicknames, age, breed(s), where you adopted this cat
+      </small>
+    </div>
+    <div>
+      <label for="name">Owner's name</label>
+      <input type="text" name="ownerName" required />
+    </div>
+    <div>
+      <label for="name">Owner's link (optional)</label>
+      <input type="url" name="ownerLink" />
+      <small>Link to your website or a social media account</small>
+    </div>
+    <input type="hidden" name="_imascriptkiddie" />
+    <div
+      class="g-recaptcha"
+      data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy"
+    >
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </form>
+</BaseLayout>
+
+<style>
+  h1 {
+    margin-bottom: 0;
+  }
+
+  h3 {
+    margin-bottom: 0.75rem;
+  }
+
+  ul {
+    margin-top: 0.5rem;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  form {
+    margin-bottom: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  button[type='submit'] {
+    margin-top: 0.5rem;
+  }
+
+  #guidelines {
+    padding: 0.05rem 1rem 0.5rem 2rem;
+    padding-top: 0.05rem;
+    margin-bottom: 1.5rem;
+  }
+</style>