blog-new.html
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
{{partial "head"}}
<title>New Post - {{site_name}}</title>
</head>
<body class="min-h-screen bg-base-200 flex flex-col">
{{partial "header"}}
<main class="container mx-auto p-8 flex-1">
<div class="max-w-3xl mx-auto">
<div class="mb-8">
<a href="/blog" class="btn btn-ghost btn-sm gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back to Blog
</a>
</div>
<h1 class="text-3xl font-bold mb-8">New Post</h1>
<form id="new-post-form"
hx-post="/admin/collections/blog_posts/documents"
hx-swap="none"
hx-headers='{"X-Redirect-URL": "/blog-view?id={{id}}"}'
class="space-y-6">
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Title</span>
</label>
<input type="text" name="title" id="title"
class="input input-bordered w-full" required
oninput="generateSlug(this.value)" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Slug</span>
</label>
<input type="text" name="slug" id="slug"
class="input input-bordered w-full" required />
<label class="label">
<span class="label-text-alt text-base-content/50">URL-friendly identifier (auto-generated from title)</span>
</label>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Excerpt</span>
</label>
<textarea name="excerpt" rows="2"
class="textarea textarea-bordered w-full"
placeholder="Brief summary shown in blog listing"></textarea>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Content</span>
</label>
<textarea name="content" rows="12"
class="textarea textarea-bordered w-full font-mono"
placeholder="Write your post content here..."></textarea>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Author</span>
</label>
<input type="text" name="author" value="Admin"
class="input input-bordered w-full" />
</div>
<div class="form-control">
<label class="label cursor-pointer justify-start gap-3">
<input type="checkbox" name="featured" value="true"
class="checkbox checkbox-primary" />
<span class="label-text font-medium">Featured post</span>
</label>
</div>
<div class="flex justify-end gap-3 pt-4 border-t border-base-300">
<a href="/blog" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Create Post
</button>
</div>
</form>
</div>
</main>
{{partial "footer"}}
<script>
// Generate URL-friendly slug from title
function generateSlug(title) {
const slug = title
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '');
document.getElementById('slug').value = slug;
}
</script>
</body>
</html>