chore: clearer organizational distinction between data-generated (dynamic) pages and strictly markdown ones

src/pages/static/contact.html

@@ -0,0 +1,48 @@
+---
+title: Contact
+layout: default
+permalink: /contact.html
+description: How to contact me.
+---
+<h2 class="page-header">{{ title }}</h2>
+<div class="contact-wrapper">
+  <div class="column description">
+    <p>Fill out the form to get in touch. Or I've got other options 👇🏻</p>
+    <ul>
+      <li>Ping me on <a href="https://social.lol/@cory">Mastodon</a></li>
+      <li>Message me on Signal or iMessage (if you have my phone number)</li>
+      <li><a href="mailto:{{ globals.email }}">Email me directly</a> if you have a client set up to use <code>mailto:</code> links</li>
+      <li>File an issue on the appropriate repo over at <a href="https://github.com/cdransf">GitHub</a></li>
+    </ul>
+  </div>
+  <form data-form="contact" class="column" method="POST" action="https://coryd.dev/api/contact" name="contact">
+    <label class="hidden">
+      Don't fill this out if you're human: <input type="text" name="hp_name">
+    </label>
+    <label>
+      <span class="hidden">Name</span>
+      <input type="text" name="name" placeholder="Name" required />
+    </label>
+    <label>
+      <span class="hidden">Email</span>
+      <input type="email" name="email" placeholder="Email" required />
+    </label>
+    <textarea name="message" placeholder="Message" required></textarea>
+    <div class="flex-centered justify-centered">
+      <button type="submit">Send message</button>
+    </div>
+  </form>
+</div>
+<script>
+  document.querySelector('[data-form="contact"]').addEventListener('submit', function(event) {
+    if (typeof plausible === 'function') {
+      plausible('Contact form submitted', {
+        props: {
+          name: this.name.value,
+          email: this.email.value,
+          message: this.message.value
+        }
+      })
+    }
+  })
+</script>