Registry Features (Phases 1-6): - Tool manifest format and validation - Registry client for API communication - Resolver integration for tool installation - CLI commands: install, search, browse, publish, auth - TUI browse interface with urwid - Smart features: auto-categorization, similarity suggestions Web UI (Phase 7): - Flask blueprint with server-side sessions - Authentication routes (login, register, logout) - Public pages: landing, tools browse, tool detail, search - Dashboard: overview, tools management, API tokens, settings - Template components: cards, forms, callouts, code blocks - Tailwind CSS build pipeline - SEO infrastructure (sitemap, robots.txt) - Cookie consent and privacy compliance Infrastructure: - SQLite database with FTS5 search - Rate limiting for API endpoints - Git-based tool submission workflow - Session management with auto-cleanup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
54 lines
2.4 KiB
HTML
54 lines
2.4 KiB
HTML
{# Tutorial card macro #}
|
|
{% macro tutorial_card(tutorial=none, title=none, description=none, href=none, slug=none, thumbnail=none, step_number=none) %}
|
|
{% if tutorial is none %}
|
|
{% set tutorial = {
|
|
"slug": slug,
|
|
"title": title,
|
|
"description": description,
|
|
"thumbnail": thumbnail
|
|
} %}
|
|
{% endif %}
|
|
{% if href is none and tutorial.slug %}
|
|
{% set href = url_for('web.tutorial', slug=tutorial.slug) %}
|
|
{% endif %}
|
|
<article class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
|
|
<!-- Thumbnail (optional) -->
|
|
{% if tutorial.thumbnail %}
|
|
<div class="aspect-video bg-gray-100 relative">
|
|
<img src="{{ tutorial.thumbnail }}"
|
|
alt="{{ tutorial.title }}"
|
|
class="w-full h-full object-cover"
|
|
loading="lazy">
|
|
</div>
|
|
{% else %}
|
|
<div class="aspect-video bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-white opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="p-4">
|
|
{% if step_number %}
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-500 mb-2">Step {{ step_number }}</p>
|
|
{% endif %}
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
<a href="{{ href or '#' }}"
|
|
class="hover:text-indigo-600 transition-colors">
|
|
{{ tutorial.title }}
|
|
</a>
|
|
</h3>
|
|
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
|
|
{{ tutorial.description or 'Learn how to use SmartTools effectively.' }}
|
|
</p>
|
|
<a href="{{ href or '#' }}"
|
|
class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 transition-colors">
|
|
Read More
|
|
<svg class="ml-1 w-4 h-4" 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>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
{% endmacro %}
|