feat: add blog draft generator and fix broken routes
Blog drafting section (dev-only): - BlogDraftGenerator gathers project data (gaps, proposals, stats) as context and calls Claude to produce Medium-style blog posts - DB schema: blog_drafts table with title, content, tags, cost tracking - Web UI: list, generate (async with live preview), detail (rendered + source toggle), edit, and export routes - 6 writing styles: deep-dive, overview, opinion, listicle, comparison, series-post - Nav link added to sidebar under Proposals Bug fixes found via route testing (scripts/test_all_routes.py): - /authors/<id>: Draft.status → Draft.states (correct attribute name) - /false-positives: add missing `import re` in ratings.py Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
138
src/webui/templates/blog_drafts.html
Normal file
138
src/webui/templates/blog_drafts.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{% extends "base.html" %}
|
||||
{% set active_page = "blog" %}
|
||||
|
||||
{% block title %}Blog Drafts — IETF Draft Analyzer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="mb-6 flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Blog Drafts</h1>
|
||||
<p class="text-slate-400 text-sm mt-1">{{ drafts | length }} blog draft{{ 's' if drafts | length != 1 }}. Generate Medium-style posts from project data.</p>
|
||||
</div>
|
||||
<a href="/blog/generate" class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium rounded-lg transition shrink-0">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
Generate New
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Status filter pills -->
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
<button onclick="filterStatus('all')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-800 text-slate-300 ring-1 ring-slate-700" data-status="all">
|
||||
All ({{ drafts | length }})
|
||||
</button>
|
||||
{% set ns = namespace(draft=0, review=0, published=0, archived=0) %}
|
||||
{% for d in drafts %}
|
||||
{% if d.status == 'draft' %}{% set ns.draft = ns.draft + 1 %}
|
||||
{% elif d.status == 'review' %}{% set ns.review = ns.review + 1 %}
|
||||
{% elif d.status == 'published' %}{% set ns.published = ns.published + 1 %}
|
||||
{% elif d.status == 'archived' %}{% set ns.archived = ns.archived + 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<button onclick="filterStatus('draft')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30" data-status="draft">
|
||||
Draft ({{ ns.draft }})
|
||||
</button>
|
||||
<button onclick="filterStatus('review')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30" data-status="review">
|
||||
Review ({{ ns.review }})
|
||||
</button>
|
||||
<button onclick="filterStatus('published')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-green-500/20 text-green-400 ring-1 ring-green-500/30" data-status="published">
|
||||
Published ({{ ns.published }})
|
||||
</button>
|
||||
<button onclick="filterStatus('archived')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-600/20 text-slate-500 ring-1 ring-slate-600/30" data-status="archived">
|
||||
Archived ({{ ns.archived }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Blog draft cards -->
|
||||
<div class="space-y-4" id="blogList">
|
||||
{% for d in drafts %}
|
||||
<a href="/blog/{{ d.id }}" class="blog-card block bg-slate-900 rounded-xl border border-slate-800 hover:border-slate-600 p-5 transition group"
|
||||
data-status="{{ d.status }}" data-title="{{ d.title | lower }}">
|
||||
<div class="flex items-start justify-between gap-3 mb-2">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-white group-hover:text-blue-400 transition">{{ d.title }}</h2>
|
||||
{% if d.subtitle %}
|
||||
<p class="text-sm text-slate-400 mt-0.5">{{ d.subtitle }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold whitespace-nowrap
|
||||
{% if d.status == 'draft' %}bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30
|
||||
{% elif d.status == 'review' %}bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30
|
||||
{% elif d.status == 'published' %}bg-green-500/20 text-green-400 ring-1 ring-green-500/30
|
||||
{% else %}bg-slate-600/20 text-slate-500 ring-1 ring-slate-600/30{% endif %}">
|
||||
{{ d.status | upper }}
|
||||
</span>
|
||||
<svg class="w-4 h-4 text-slate-600 group-hover:text-blue-400 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-slate-500 mt-3">
|
||||
{% if d.style %}
|
||||
<span class="px-2 py-0.5 rounded bg-slate-800 text-slate-400">{{ d.style }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if d.tags %}
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{% for tag in d.tags[:5] %}
|
||||
<span class="px-1.5 py-0.5 rounded bg-slate-800/50 text-slate-500">#{{ tag }}</span>
|
||||
{% endfor %}
|
||||
{% if d.tags | length > 5 %}
|
||||
<span class="text-slate-600">+{{ d.tags | length - 5 }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if d.model_used %}
|
||||
<span class="text-slate-600">|</span>
|
||||
<span>{{ d.model_used }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if d.cost_usd %}
|
||||
<span class="text-slate-600">|</span>
|
||||
<span>${{ "%.3f" | format(d.cost_usd) }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if d.updated_at %}
|
||||
<span class="text-slate-600">|</span>
|
||||
<span>{{ d.updated_at[:10] }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
{% if not drafts %}
|
||||
<div class="bg-slate-900 rounded-xl border border-slate-800 p-12 text-center">
|
||||
<svg class="w-12 h-12 text-slate-700 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
|
||||
<p class="text-slate-400 mb-4">No blog drafts yet. Generate your first post from project data.</p>
|
||||
<a href="/blog/generate" class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium rounded-lg transition">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
Generate First Post
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
let currentStatus = 'all';
|
||||
|
||||
function filterStatus(status) {
|
||||
currentStatus = status;
|
||||
document.querySelectorAll('.status-pill').forEach(pill => {
|
||||
if (pill.dataset.status === status) {
|
||||
pill.style.outline = '2px solid rgba(96, 165, 250, 0.5)';
|
||||
pill.style.outlineOffset = '1px';
|
||||
} else {
|
||||
pill.style.outline = 'none';
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('.blog-card').forEach(card => {
|
||||
const match = currentStatus === 'all' || card.dataset.status === currentStatus;
|
||||
card.style.display = match ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
filterStatus('all');
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user