feat: Add documentation website

This commit introduces a basic documentation website for aicommit. The website includes: - A hero section with a title and subtitle. - Sections for features, installation, and usage. - A navigation bar with links to different sections and the GitHub repo. - A footer with social links. - Basic styling using CSS. Additionally, the aicommit logo has been moved to the `docs` directory.
suenot · Jan 14, 2025 · ad7d123 · ad7d123
1 parent 0ac3970
commit ad7d123
Show file tree

Hide file tree

Showing 4 changed files with 372 additions and 1 deletion.
diff --git a/aicommit-logo.png → docs/aicommit-logo.png b/aicommit-logo.png → docs/aicommit-logo.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AICommit - Smart Git Commit Messages with AI</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="container">
+                <div class="logo">
+                    <img src="./aicommit-logo.png" alt="AICommit Logo">
+                    <span>AICommit</span>
+                </div>
+                <div class="nav-links">
+                    <a href="#features">Features</a>
+                    <a href="#installation">Installation</a>
+                    <a href="#usage">Usage</a>
+                    <a href="https://github.com/suenot/aicommit" class="github-link">
+                        <i class="fab fa-github"></i> GitHub
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="hero">
+            <div class="container">
+                <h1>Generate Smart Commit Messages with AI</h1>
+                <p class="subtitle">A powerful CLI tool that creates meaningful git commit messages using LLMs</p>
+                <div class="cta-buttons">
+                    <a href="#installation" class="btn primary">Get Started</a>
+                    <a href="https://github.com/suenot/aicommit" class="btn secondary">View on GitHub</a>
+                </div>
+            </div>
+        </section>
+
+        <section id="features" class="features">
+            <div class="container">
+                <h2>Key Features</h2>
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <i class="fas fa-robot"></i>
+                        <h3>AI-Powered</h3>
+                        <p>Generate meaningful commit messages using state-of-the-art LLMs</p>
+                    </div>
+                    <div class="feature-card">
+                        <i class="fas fa-plug"></i>
+                        <h3>Multiple Providers</h3>
+                        <p>Support for OpenRouter, Ollama, and various AI services</p>
+                    </div>
+                    <div class="feature-card">
+                        <i class="fas fa-terminal"></i>
+                        <h3>CLI-First</h3>
+                        <p>Fast and efficient - works directly from your terminal</p>
+                    </div>
+                    <div class="feature-card">
+                        <i class="fas fa-cog"></i>
+                        <h3>Customizable</h3>
+                        <p>Easy configuration and provider management</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="installation" class="installation">
+            <div class="container">
+                <h2>Installation</h2>
+                <div class="install-options">
+                    <div class="install-card">
+                        <h3>Via Cargo</h3>
+                        <pre><code>cargo install aicommit</code></pre>
+                    </div>
+                    <div class="install-card">
+                        <h3>From Source</h3>
+                        <pre><code>git clone https://github.com/suenot/aicommit
+cd aicommit
+cargo install --path .</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="usage" class="usage">
+            <div class="container">
+                <h2>Quick Start</h2>
+                <div class="usage-steps">
+                    <div class="step">
+                        <span class="step-number">1</span>
+                        <h3>Add a Provider</h3>
+                        <pre><code>aicommit --add</code></pre>
+                    </div>
+                    <div class="step">
+                        <span class="step-number">2</span>
+                        <h3>Make Changes</h3>
+                        <p>Make changes to your code</p>
+                    </div>
+                    <div class="step">
+                        <span class="step-number">3</span>
+                        <h3>Create Commit</h3>
+                        <pre><code>aicommit</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <div class="container">
+            <p>AICommit is licensed under the MIT License</p>
+            <div class="social-links">
+                <a href="https://github.com/suenot/aicommit">
+                    <i class="fab fa-github"></i>
+                </a>
+                <a href="https://crates.io/crates/aicommit">
+                    <i class="fas fa-box"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,245 @@
+:root {
+    --primary-color: #6366f1;
+    --secondary-color: #4f46e5;
+    --background-color: #ffffff;
+    --text-color: #1f2937;
+    --gray-light: #f3f4f6;
+    --gray-medium: #9ca3af;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+/* Navigation */
+nav {
+    background-color: var(--background-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 1rem 0;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.logo img {
+    height: 32px;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+}
+
+nav .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+nav a {
+    text-decoration: none;
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+.github-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Hero Section */
+.hero {
+    padding: 8rem 0 4rem;
+    background: linear-gradient(to bottom right, #f0f7ff, #e0e7ff);
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.subtitle {
+    font-size: 1.25rem;
+    color: #4b5563;
+    margin-bottom: 2rem;
+}
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.375rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.secondary {
+    background-color: white;
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+    margin-left: 1rem;
+}
+
+.cta-buttons {
+    margin-top: 2rem;
+}
+
+/* Features Section */
+.features {
+    padding: 4rem 0;
+    background-color: var(--gray-light);
+}
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.feature-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card i {
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+/* Installation Section */
+.installation {
+    padding: 4rem 0;
+}
+
+.install-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.install-card {
+    background: var(--gray-light);
+    padding: 2rem;
+    border-radius: 0.5rem;
+}
+
+pre {
+    background: #1a1a1a;
+    color: #fff;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    margin-top: 1rem;
+}
+
+/* Usage Section */
+.usage {
+    padding: 4rem 0;
+    background-color: var(--gray-light);
+}
+
+.usage-steps {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.step {
+    background: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.step-number {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 2rem;
+    margin-bottom: 1rem;
+}
+
+/* Footer */
+footer {
+    background: var(--text-color);
+    color: white;
+    padding: 2rem 0;
+    text-align: center;
+}
+
+footer .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.social-links {
+    display: flex;
+    gap: 1rem;
+}
+
+.social-links a {
+    color: white;
+    font-size: 1.5rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+
+    .hero h1 {
+        font-size: 2rem;
+    }
+
+    .feature-grid,
+    .install-options,
+    .usage-steps {
+        grid-template-columns: 1fr;
+    }
+
+    footer .container {
+        flex-direction: column;
+        gap: 1rem;
+    }
+}
diff --git a/readme.md b/readme.md
@@ -1,5 +1,5 @@
 # aicommit
-![logo](./aicommit-logo.png)
+![logo](./docs/aicommit-logo.png)
 
 [![Crates.io](https://img.shields.io/crates/v/aicommit.svg)](https://crates.io/crates/aicommit)
 [![Documentation](https://docs.rs/aicommit/badge.svg)](https://docs.rs/aicommit)