feat(ui): add web UI with Jinja2 templates and Gitea themes
- Add Jinja2 templates with data-testid attributes for testing - Create light/dark themes based on Gitea color scheme - Add theme switching with localStorage persistence - Create base CSS, components, and layout styles - Add mock web routes for UI demonstration - Register web router and static files in main.py - Add data-testid requirements to AGENTS.md - Install jinja2 dependency
This commit is contained in:
83
app/presentation/templates/pages/index.html
Normal file
83
app/presentation/templates/pages/index.html
Normal file
@@ -0,0 +1,83 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Blog - Home{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-header" data-testid="page-header-home">
|
||||
<div class="page-header-flex">
|
||||
<div data-testid="page-header-content">
|
||||
<h1 class="page-title" data-testid="page-title-home">Latest Posts</h1>
|
||||
<p class="page-subtitle" data-testid="page-subtitle-home">Discover stories, thinking, and expertise from writers on any topic.</p>
|
||||
</div>
|
||||
<a href="/posts/new" class="btn btn-primary" data-testid="btn-create-post-header">
|
||||
Write a Post
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if posts %}
|
||||
<section class="post-list" data-testid="post-list">
|
||||
{% for post in posts %}
|
||||
<article class="card post-card" data-testid="post-card-{{ post.id }}">
|
||||
<div class="post-card-header" data-testid="post-card-header-{{ post.id }}">
|
||||
<h2 class="post-card-title" data-testid="post-title-{{ post.id }}">
|
||||
<a href="/posts/{{ post.id }}" data-testid="post-title-link-{{ post.id }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
{% if post.published %}
|
||||
<span class="badge badge-success" data-testid="post-status-{{ post.id }}">Published</span>
|
||||
{% else %}
|
||||
<span class="badge" data-testid="post-status-{{ post.id }}">Draft</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="post-card-meta" data-testid="post-meta-{{ post.id }}">
|
||||
<span class="post-card-meta-item" data-testid="post-author-{{ post.id }}">
|
||||
<span class="avatar avatar-sm" data-testid="post-author-avatar-{{ post.id }}">{{ post.author_id[0]|upper }}</span>
|
||||
<span data-testid="post-author-name-{{ post.id }}">{{ post.author_id }}</span>
|
||||
</span>
|
||||
<span class="post-card-meta-item" data-testid="post-date-{{ post.id }}">
|
||||
{{ post.created_at.strftime('%B %d, %Y') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="post-card-content" data-testid="post-content-preview-{{ post.id }}">
|
||||
{{ post.content.value[:200] }}{% if post.content.value|length > 200 %}...{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="post-card-footer" data-testid="post-card-footer-{{ post.id }}">
|
||||
<div class="post-card-tags" data-testid="post-tags-{{ post.id }}">
|
||||
{% for tag in post.tags %}
|
||||
<span class="tag" data-testid="post-tag-{{ post.id }}-{{ loop.index }}">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="/posts/{{ post.id }}" class="btn btn-sm" data-testid="btn-read-more-{{ post.id }}">Read more</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<nav class="pagination" data-testid="pagination" aria-label="Pagination">
|
||||
{% if has_prev %}
|
||||
<a href="/?page={{ current_page - 1 }}" class="pagination-item" data-testid="pagination-prev">Previous</a>
|
||||
{% else %}
|
||||
<span class="pagination-item disabled" data-testid="pagination-prev">Previous</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="pagination-item active" data-testid="pagination-current">{{ current_page }}</span>
|
||||
|
||||
{% if has_next %}
|
||||
<a href="/?page={{ current_page + 1 }}" class="pagination-item" data-testid="pagination-next">Next</a>
|
||||
{% else %}
|
||||
<span class="pagination-item disabled" data-testid="pagination-next">Next</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% else %}
|
||||
<div class="empty-state" data-testid="empty-state">
|
||||
<div class="empty-state-icon" data-testid="empty-state-icon">📝</div>
|
||||
<h3 data-testid="empty-state-title">No posts yet</h3>
|
||||
<p data-testid="empty-state-description">Be the first to write a post!</p>
|
||||
<a href="/posts/new" class="btn btn-primary" data-testid="btn-create-first-post">Create your first post</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
58
app/presentation/templates/pages/post_detail.html
Normal file
58
app/presentation/templates/pages/post_detail.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ post.title }} - Blog{% endblock %}
|
||||
{% block meta_description %}{{ post.content.value[:160] }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<article class="post-detail" data-testid="post-detail">
|
||||
<header class="post-detail-header" data-testid="post-detail-header">
|
||||
<h1 class="post-detail-title" data-testid="post-detail-title">{{ post.title }}</h1>
|
||||
|
||||
<div class="post-detail-meta" data-testid="post-detail-meta">
|
||||
<span class="post-card-meta-item" data-testid="post-detail-author">
|
||||
<span class="avatar avatar-sm" data-testid="post-detail-author-avatar">{{ post.author_id[0]|upper }}</span>
|
||||
<span data-testid="post-detail-author-name">{{ post.author_id }}</span>
|
||||
</span>
|
||||
<span class="post-card-meta-item" data-testid="post-detail-date">
|
||||
{{ post.created_at.strftime('%B %d, %Y') }}
|
||||
</span>
|
||||
{% if post.published %}
|
||||
<span class="badge badge-success" data-testid="post-detail-status">Published</span>
|
||||
{% else %}
|
||||
<span class="badge" data-testid="post-detail-status">Draft</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="post-detail-content" data-testid="post-detail-content">
|
||||
{{ post.content.value|nl2br }}
|
||||
</div>
|
||||
|
||||
<footer class="post-detail-footer" data-testid="post-detail-footer">
|
||||
<div class="post-detail-tags" data-testid="post-detail-tags">
|
||||
{% for tag in post.tags %}
|
||||
<span class="tag" data-testid="post-detail-tag-{{ loop.index }}">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="divider" data-testid="post-detail-divider"></div>
|
||||
|
||||
<div class="flex justify-between items-center" data-testid="post-detail-actions">
|
||||
<a href="/" class="btn" data-testid="btn-back-to-posts">
|
||||
← Back to posts
|
||||
</a>
|
||||
|
||||
<div class="flex gap-2" data-testid="post-detail-edit-actions">
|
||||
<a href="/posts/{{ post.id }}/edit" class="btn" data-testid="btn-edit-post">
|
||||
Edit
|
||||
</a>
|
||||
<form action="/posts/{{ post.id }}/delete" method="POST" style="display: inline;" data-testid="form-delete-post">
|
||||
<button type="submit" class="btn btn-danger" data-testid="btn-delete-post" onclick="return confirm('Are you sure you want to delete this post?');">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
{% endblock %}
|
||||
99
app/presentation/templates/pages/post_form.html
Normal file
99
app/presentation/templates/pages/post_form.html
Normal file
@@ -0,0 +1,99 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% if is_edit %}Edit Post{% else %}New Post{% endif %} - Blog{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-header" data-testid="page-header-form">
|
||||
<h1 class="page-title" data-testid="page-title-form">
|
||||
{% if is_edit %}Edit Post{% else %}Create New Post{% endif %}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="{% if is_edit %}/posts/{{ post.id }}/edit{% else %}/posts/new{% endif %}"
|
||||
class="card"
|
||||
data-testid="form-post"
|
||||
>
|
||||
<div class="card-body" data-testid="form-post-body">
|
||||
<div class="form-group" data-testid="form-group-title">
|
||||
<label for="title" class="form-label form-label-required" data-testid="label-title">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
class="input input-lg"
|
||||
value="{% if post %}{{ post.title.value }}{% endif %}"
|
||||
placeholder="Enter post title"
|
||||
required
|
||||
data-testid="input-title"
|
||||
>
|
||||
<span class="form-hint" data-testid="hint-title">A catchy title for your post</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" data-testid="form-group-content">
|
||||
<label for="content" class="form-label form-label-required" data-testid="label-content">
|
||||
Content
|
||||
</label>
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
class="textarea"
|
||||
rows="12"
|
||||
placeholder="Write your post content here..."
|
||||
required
|
||||
data-testid="textarea-content"
|
||||
>{% if post %}{{ post.content.value }}{% endif %}</textarea>
|
||||
<span class="form-hint" data-testid="hint-content">The main content of your post. Markdown is supported.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" data-testid="form-group-tags">
|
||||
<label for="tags" class="form-label" data-testid="label-tags">
|
||||
Tags
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="tags"
|
||||
name="tags"
|
||||
class="input"
|
||||
value="{% if post %}{{ post.tags|join(', ') }}{% endif %}"
|
||||
placeholder="python, fastapi, tutorial"
|
||||
data-testid="input-tags"
|
||||
>
|
||||
<span class="form-hint" data-testid="hint-tags">Comma-separated list of tags</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" data-testid="form-group-published">
|
||||
<label class="form-label" data-testid="label-published">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="published"
|
||||
value="true"
|
||||
{% if post and post.published %}checked{% endif %}
|
||||
data-testid="checkbox-published"
|
||||
>
|
||||
Publish immediately
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer" data-testid="form-post-footer">
|
||||
<div class="flex justify-between items-center" data-testid="form-actions">
|
||||
<a href="{% if is_edit %}/posts/{{ post.id }}{% else %}/{% endif %}" class="btn" data-testid="btn-cancel">
|
||||
Cancel
|
||||
</a>
|
||||
|
||||
<div class="flex gap-2" data-testid="form-submit-actions">
|
||||
<button type="submit" name="action" value="draft" class="btn" data-testid="btn-save-draft">
|
||||
Save as Draft
|
||||
</button>
|
||||
<button type="submit" name="action" value="publish" class="btn btn-primary" data-testid="btn-publish-post">
|
||||
{% if is_edit %}Update Post{% else %}Publish Post{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user