robandClaude Opus 4.5
497fe87fc5
Major rename operation: - Rename Python package: smarttools -> cmdforge - Update CLI entry point: smarttools -> cmdforge - Update all imports and module references - Update pyproject.toml with new name, URLs, entry point - Update all HTML templates with new branding - Update documentation (CLAUDE.md, README.md, docs/*, wiki/*) - Update environment variables: - SMARTTOOLS_ENV -> CMDFORGE_ENV - SMARTTOOLS_REGISTRY_DB -> CMDFORGE_REGISTRY_DB - SMARTTOOLS_TOKEN -> CMDFORGE_TOKEN - SMARTTOOLS_REGISTRY_* -> CMDFORGE_REGISTRY_* - Update Dockerfile and docker-compose.yml - Update tests to use new package name - Update scripts and examples - Update package.json and tailwind.config.js All 158 unit tests pass. The CLI is working correctly with the new cmdforge command. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
196 lines
10 KiB
HTML
196 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% from "components/tutorial_card.html" import tutorial_card %}
|
|
|
|
{% block title %}Tutorials - CmdForge{% endblock %}
|
|
|
|
{% block meta_description %}Learn how to use CmdForge with step-by-step tutorials. From basic setup to advanced workflows.{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="bg-gray-50 min-h-screen">
|
|
<!-- Hero -->
|
|
<div class="bg-white border-b border-gray-200">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
|
|
<h1 class="text-3xl font-bold text-gray-900">Tutorials</h1>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Learn CmdForge from the ground up with step-by-step guides.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<!-- Getting Started Section -->
|
|
<section class="mb-16">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Getting Started</h2>
|
|
<p class="text-gray-600 mb-8">
|
|
New to CmdForge? Start here with the fundamentals.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{{ tutorial_card(
|
|
title="Installation & Setup",
|
|
description="Install CmdForge and configure your first AI provider.",
|
|
href=url_for('web.tutorials_path', path='installation'),
|
|
step_number=1
|
|
) }}
|
|
|
|
{{ tutorial_card(
|
|
title="Your First Tool",
|
|
description="Create a simple AI-powered command in under 5 minutes.",
|
|
href=url_for('web.tutorials_path', path='first-tool'),
|
|
step_number=2
|
|
) }}
|
|
|
|
{{ tutorial_card(
|
|
title="Understanding YAML Config",
|
|
description="Learn the structure of CmdForge configuration files.",
|
|
href=url_for('web.tutorials_path', path='yaml-config'),
|
|
step_number=3
|
|
) }}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Concepts Section -->
|
|
<section class="mb-16">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Core Concepts</h2>
|
|
<p class="text-gray-600 mb-8">
|
|
Understand the key concepts that power CmdForge.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{% for tutorial in core_tutorials %}
|
|
<a href="{{ url_for('web.tutorials_path', path=tutorial.slug) }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tutorial.title }}</h3>
|
|
<p class="text-gray-600 text-sm">{{ tutorial.description }}</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ url_for('web.tutorials_path', path='providers') }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Working with Providers</h3>
|
|
<p class="text-gray-600 text-sm">Configure and use different AI providers with your tools.</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('web.tutorials_path', path='arguments') }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Custom Arguments</h3>
|
|
<p class="text-gray-600 text-sm">Add flags and options to make your tools flexible.</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('web.tutorials_path', path='multi-step') }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Multi-Step Workflows</h3>
|
|
<p class="text-gray-600 text-sm">Chain prompts and code steps together.</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('web.tutorials_path', path='code-steps') }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Code Steps</h3>
|
|
<p class="text-gray-600 text-sm">Add Python code processing between AI calls.</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Advanced Section -->
|
|
<section class="mb-16">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Advanced Topics</h2>
|
|
<p class="text-gray-600 mb-8">
|
|
Take your tools to the next level with advanced techniques.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<a href="{{ url_for('web.tutorials_path', path='publishing') }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Publishing Tools</h3>
|
|
<p class="text-gray-600 text-sm">Share your tools with the community via the registry.</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('web.tutorials_path', path='advanced-workflows') }}"
|
|
class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Advanced Workflows</h3>
|
|
<p class="text-gray-600 text-sm">Complex multi-provider and branching workflows.</p>
|
|
<span class="mt-4 inline-flex items-center text-sm text-indigo-600">
|
|
Read tutorial
|
|
<svg class="w-4 h-4 ml-1" 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>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Video Tutorials -->
|
|
{% if video_tutorials %}
|
|
<section>
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Video Tutorials</h2>
|
|
<p class="text-gray-600 mb-8">
|
|
Prefer watching? Check out our video guides.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{% for video in video_tutorials %}
|
|
<a href="{{ video.url }}"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
|
|
<div class="relative">
|
|
<img src="{{ video.thumbnail }}"
|
|
alt="{{ video.title }}"
|
|
class="w-full h-48 object-cover">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-16 h-16 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
|
|
<svg class="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="font-semibold text-gray-900">{{ video.title }}</h3>
|
|
<p class="text-sm text-gray-500 mt-1">{{ video.duration }}</p>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|