Ryan Malloy
1e1d4a995d
Major Features Added: • Automated hook installation scripts (install-hooks.sh and setup-hooks) • User-scope installation with automatic domain configuration • 7 pre-configured hook profiles for different user types • Comprehensive documentation updates across all guides Hook Installation System: • ./setup-hooks - One-liner installation for most users • ./install-hooks.sh - Full-featured installer with profile selection • Automatic domain replacement using $DOMAIN environment variable • Settings backup and verification capabilities • Safe uninstallation with rollback support Documentation Enhancements: • Updated README.md with complete project overview and proper git repository URL • Enhanced Getting Started guide with automated hook installation • Improved Docker deployment guide with hook installation step • Reorganized documentation index with better visual hierarchy • Added repository URL: https://git.supported.systems/claude/claude-code-tracker.git Technical Improvements: • Rebuilt Docker containers with all latest changes • Verified application health and functionality • Updated all installation examples with correct repository URL • Improved quick start workflow with 3-step visual process 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
392 lines
22 KiB
HTML
392 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-book me-3"></i>Documentation</h2>
|
|
<div class="text-muted">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Comprehensive guide to using Claude Code Tracker
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Getting Started -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-primary bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-rocket fa-lg text-primary"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">Getting Started</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Learn the basics of Claude Code Tracker and get up and running quickly.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/getting-started" class="btn btn-primary">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
Read Guide
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Import -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-secondary bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-cloud-upload-alt fa-lg text-secondary"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">Data Import Guide</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Step-by-step guide to importing your .claude.json file using file upload or file paths.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/data-import" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
Import Data
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Docker Deployment -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-info bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fab fa-docker fa-lg text-info"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">Docker Deployment</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Deploy Claude Code Tracker using Docker with Caddy reverse proxy integration.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/docker-deployment" class="btn btn-info">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
Deploy
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hook Setup -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-success bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-link fa-lg text-success"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">Hook Setup Guide</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Configure Claude Code hooks to automatically track your development activity.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/hook-setup" class="btn btn-success">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
Setup Hooks
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hook Reference -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-dark bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-book-open fa-lg text-dark"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">Hook Reference</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Complete reference for all 39+ available Claude Code hooks and configurations.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/hook-reference" class="btn btn-dark">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
Browse Hooks
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Reference -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-warning bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-code fa-lg text-warning"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">API Reference</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Detailed API documentation for integrating with Claude Code Tracker.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/api-reference" class="btn btn-warning">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
View API
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ -->
|
|
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-danger bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-question-circle fa-lg text-danger"></i>
|
|
</div>
|
|
</div>
|
|
<h5 class="card-title text-center">FAQ</h5>
|
|
<p class="card-text text-center text-muted flex-grow-1">
|
|
Frequently asked questions and troubleshooting guide.
|
|
</p>
|
|
<div class="text-center">
|
|
<a href="/dashboard/docs/faq" class="btn btn-danger">
|
|
<i class="fas fa-arrow-right me-1"></i>
|
|
Get Help
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Start Section -->
|
|
<div class="row mt-5">
|
|
<div class="col-md-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<h4 class="mb-0"><i class="fas fa-rocket me-2"></i>Quick Start - Get Running in 3 Steps</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<p class="lead">Get started with Claude Code Tracker in just a few minutes:</p>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4 mb-3">
|
|
<div class="card border-primary h-100">
|
|
<div class="card-body text-center">
|
|
<div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 40px; height: 40px;">
|
|
<strong>1</strong>
|
|
</div>
|
|
<h6>Deploy with Docker</h6>
|
|
<small class="text-muted">Set up the tracker server using Docker & Caddy</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mb-3">
|
|
<div class="card border-success h-100">
|
|
<div class="card-body text-center">
|
|
<div class="bg-success rounded-circle text-white d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 40px; height: 40px;">
|
|
<strong>2</strong>
|
|
</div>
|
|
<h6>Import Data</h6>
|
|
<small class="text-muted">Upload your .claude.json file with file upload</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mb-3">
|
|
<div class="card border-info h-100">
|
|
<div class="card-body text-center">
|
|
<div class="bg-info rounded-circle text-white d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 40px; height: 40px;">
|
|
<strong>3</strong>
|
|
</div>
|
|
<h6>Install Hooks</h6>
|
|
<small class="text-muted">Run ./setup-hooks for automatic tracking</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a href="/dashboard/docs/docker-deployment" class="btn btn-info btn-lg">
|
|
<i class="fab fa-docker me-2"></i>
|
|
Docker Setup
|
|
</a>
|
|
<a href="/dashboard/import" class="btn btn-success">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
Import Data
|
|
</a>
|
|
<a href="/dashboard/docs/hook-setup" class="btn btn-warning">
|
|
<i class="fas fa-magic me-2"></i>
|
|
Setup Hooks
|
|
</a>
|
|
<a href="/dashboard/docs/getting-started" class="btn btn-outline-primary">
|
|
<i class="fas fa-book me-2"></i>
|
|
Full Guide
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Overview -->
|
|
<div class="row mt-5">
|
|
<div class="col-md-12">
|
|
<h3 class="mb-4"><i class="fas fa-star me-2"></i>Key Features</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 bg-light h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start">
|
|
<div class="bg-primary bg-opacity-10 rounded p-2 me-3">
|
|
<i class="fas fa-chart-line text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="card-title">Development Analytics</h6>
|
|
<p class="card-text small text-muted">Track sessions, time spent, and productivity trends across all your projects.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 bg-light h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start">
|
|
<div class="bg-success bg-opacity-10 rounded p-2 me-3">
|
|
<i class="fas fa-comments text-success"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="card-title">Conversation History</h6>
|
|
<p class="card-text small text-muted">Search and browse through all your Claude Code conversations with powerful filtering.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 bg-light h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start">
|
|
<div class="bg-info bg-opacity-10 rounded p-2 me-3">
|
|
<i class="fas fa-timeline text-info"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="card-title">Project Timelines</h6>
|
|
<p class="card-text small text-muted">Visualize your development journey with chronological project timelines.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 bg-light h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start">
|
|
<div class="bg-warning bg-opacity-10 rounded p-2 me-3">
|
|
<i class="fas fa-link text-warning"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="card-title">Hook Integration</h6>
|
|
<p class="card-text small text-muted">Automatically capture data through Claude Code hooks for real-time tracking.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 bg-light h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start">
|
|
<div class="bg-secondary bg-opacity-10 rounded p-2 me-3">
|
|
<i class="fas fa-database text-secondary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="card-title">Data Import/Export</h6>
|
|
<p class="card-text small text-muted">Import existing data from Claude.json and export your analytics.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 bg-light h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start">
|
|
<div class="bg-danger bg-opacity-10 rounded p-2 me-3">
|
|
<i class="fas fa-shield-alt text-danger"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="card-title">Privacy First</h6>
|
|
<p class="card-text small text-muted">All data stays local - no external services or cloud dependencies.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- External Links -->
|
|
<div class="row mt-5">
|
|
<div class="col-md-12">
|
|
<div class="card border-0 bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<h5 class="card-title mb-2">
|
|
<i class="fas fa-external-link-alt me-2"></i>
|
|
Additional Resources
|
|
</h5>
|
|
<p class="card-text mb-0">
|
|
Explore the interactive API documentation and source code
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<a href="/docs" target="_blank" class="btn btn-light me-2">
|
|
<i class="fas fa-book me-1"></i>
|
|
API Docs
|
|
</a>
|
|
<a href="https://github.com/claude/claude-tracker" target="_blank" class="btn btn-outline-light">
|
|
<i class="fab fa-github me-1"></i>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |