new.astro

---
import { ID } from 'appwrite';
import { marked } from 'marked';

import { databases } from '@/lib/appwrite';

import Layout from '@/layouts/Layout.astro';
import Container from '@/components/Container.astro';

if (Astro.request.method === "POST") {
  const formData = await Astro.request.formData();
  const data = {
    title: String(formData.get('title')),
    slug: String(formData.get('slug')),
    content: await marked(String(formData.get('content'))),
    excerpt: String(formData.get('excerpt')),
  }
  const results = await databases.createDocument(
    import.meta.env.PUBLIC_APPWRITE_DATABASE_ID,
    import.meta.env.PUBLIC_APPWRITE_COLLECTION_ID,
    ID.unique(),
    data
  );
  return Astro.redirect(`/posts/${results.slug}`);
}
---
<Layout title="New Post - My Blog">
	<Container>
    <h1 class="text-2xl font-bold mb-6">New Post</h1>
    <form method="POST">
      <div class="mb-6">
        <label class="block text-sm font-semibold mb-3" for="title">Title</label>
        <input
          id="title"
          class="block w-full text-slate-900 border-slate-400 rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
          type="text"
          name="title"
        />
      </div>
      <div class="mb-6">
        <label class="block text-sm font-semibold mb-3" for="slug">Slug</label>
        <input
          id="slug"
          class="block w-full text-slate-900 border-slate-400 rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
          type="text"
          name="slug"
        />
      </div>
      <div class="mb-6">
        <label class="block text-sm font-semibold mb-1" for="content">Content</label>
        <p class="text-xs text-slate-600 italic mb-3">Supports Markdown</p>
        <textarea
          id="content"
          class="block w-full min-h-80 text-slate-900 border-slate-400 rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
          name="content"
        />
      </div>
      <div class="mb-6">
        <label class="block text-sm font-semibold mb-3" for="excerpt">Excerpt</label>
        <input
          id="excerpt"
          class="block w-full text-slate-900 border-slate-400 rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
          type="text"
          name="excerpt"
        />
      </div>
      <button class="inline-block rounded py-2.5 px-6 text-sm font-bold uppercase text-white bg-slate-600 hover:bg-slate-500 dark:bg-slate-500 dark:hover:bg-slate-400">Submit</button>
    </form>
  </Container>
</Layout>