Sergey Vanyushkin
e2802d83f2
- 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
84 lines
3.8 KiB
HTML
84 lines
3.8 KiB
HTML
{% 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 %}
|