QoL update

This commit is contained in:
Ben Mosley
2026-04-22 22:09:08 -05:00
parent 4d091a15cd
commit 7c9b904985
15 changed files with 449 additions and 291 deletions

View File

@@ -2,6 +2,10 @@
{% block title %}New Blog Post{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
{% endblock %}
{% block content %}
<!-- Hero -->
@@ -12,21 +16,21 @@
<!-- Form -->
<section class="py-16 bg-black text-white">
<div class="max-w-3xl mx-auto px-6 max-h-[85vh] overflow-y-auto">
<div class="max-w-3xl mx-auto px-6">
<form action="{{ url_for('new_blog') }}" method="post" enctype="multipart/form-data" class="space-y-6">
<!-- Title -->
<div>
<label for="title" class="block font-semibold mb-1">Post Title</label>
<input type="text" id="title" name="title" required
class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
</div>
<!-- Content -->
<div>
<label for="content" class="block font-semibold mb-1">Post Content</label>
<textarea id="content" name="content" required
class="text-black w-full border border-gray-300 rounded px-4 py-2 leading-relaxed text-base focus:ring-2 focus:ring-orange-400 focus:outline-none resize-none overflow-hidden"
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 leading-relaxed text-base focus:ring-2 focus:ring-orange-400 focus:outline-none resize-none overflow-hidden"
rows="1"></textarea>
</div>
@@ -34,14 +38,14 @@
<div>
<label for="category" class="block font-semibold mb-1">Category</label>
<input type="text" id="category" name="category" placeholder="What's This Post About?"
class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
</div>
<!-- Tags -->
<div>
<label for="tags" class="block font-semibold mb-1">Tags (comma-separated)</label>
<input type="text" id="tags" name="tags" placeholder="e.g., Flask, SQLite, API"
class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
</div>
<!-- Images -->
@@ -52,10 +56,14 @@
</div>
<!-- Submit -->
<div class="pt-4">
<button type="submit"
<div class="pt-4 flex gap-3">
<button type="submit" name="action" value="draft"
class="bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-500 transition">
Save as Draft
</button>
<button type="submit" name="action" value="publish"
class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
Submit Post
Publish Post
</button>
</div>
</form>
@@ -67,18 +75,13 @@
</div>
</section>
<!-- Textarea autoresize -->
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const textarea = document.getElementById('content');
if (textarea) {
const resize = () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
};
resize(); // Initial sizing
textarea.addEventListener('input', resize);
}
new EasyMDE({
element: document.getElementById('content'),
spellChecker: false,
autosave: { enabled: true, uniqueId: 'new_blog' },
toolbar: ['bold','italic','heading','|','quote','unordered-list','ordered-list','|','link','image','|','preview','side-by-side','fullscreen','|','guide'],
});
</script>