mirror of
https://github.com/Aider-AI/aider.git
synced 2025-06-01 02:05:00 +00:00
924 lines
33 KiB
HTML
924 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aider - AI Pair Programming in Your Terminal</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
|
|
<style>
|
|
@font-face {
|
|
font-family: GlassTTYVT220;
|
|
src: local("Glass TTY VT220"), local("Glass TTY VT220 Medium"), url(/assets/Glass_TTY_VT220.ttf) format("truetype");
|
|
}
|
|
|
|
:root {
|
|
--primary: #4C6EF5;
|
|
--primary-dark: #3b5bdb;
|
|
--secondary: #12B886;
|
|
--dark: #212529;
|
|
--light: #F8F9FA;
|
|
--gray: #ADB5BD;
|
|
--code-bg: #282a36;
|
|
--terminal-green: #14b014;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--dark);
|
|
background-color: var(--light);
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
header {
|
|
background-color: white;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
font-family: 'GlassTTYVT220', monospace;
|
|
color: var(--terminal-green);
|
|
text-decoration: none;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--dark);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.hero {
|
|
padding: 80px 0;
|
|
background: linear-gradient(135deg, rgba(20, 176, 20, 0.15) 0%, rgba(20, 176, 20, 0.1) 25%, rgba(201, 214, 255, 0.7) 50%, rgba(179, 198, 255, 0.8) 75%, rgba(163, 189, 255, 0.9) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234c6ef5' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
opacity: 0.6;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
background: radial-gradient(circle, rgba(76, 110, 245, 0.2) 0%, rgba(20, 176, 20, 0.05) 50%, rgba(76, 110, 245, 0) 80%);
|
|
opacity: 0.7;
|
|
z-index: 0;
|
|
transform: rotate(30deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero .container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 40% 60%;
|
|
gap: 40px;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-content {
|
|
text-align: left;
|
|
}
|
|
|
|
.hero-video {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 24px;
|
|
color: var(--dark);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.2rem;
|
|
max-width: 700px;
|
|
margin: 0 0 40px;
|
|
color: #495057;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: flex-start;
|
|
margin-top: 32px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 14px 28px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-dark);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: white;
|
|
color: var(--primary);
|
|
border: 1px solid var(--primary);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #f8f9fa;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.video-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-container video {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.features {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
font-size: 2.5rem;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 40px;
|
|
}
|
|
|
|
.feature-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
border-left: 3px solid var(--primary);
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.feature-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 12px 15px;
|
|
background-color: rgba(76, 110, 245, 0.1);
|
|
border-radius: 6px;
|
|
border-bottom: 1px solid rgba(76, 110, 245, 0.2);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 1.8rem;
|
|
color: var(--primary);
|
|
margin-right: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 1.3rem;
|
|
color: var(--dark);
|
|
margin: 0;
|
|
}
|
|
|
|
.models {
|
|
padding: 80px 0;
|
|
background-color: #f8f9fb;
|
|
}
|
|
|
|
.code-block {
|
|
background-color: var(--code-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
color: white;
|
|
font-family: monospace;
|
|
margin: 20px 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.testimonials {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.testimonial-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: linear-gradient(135deg, rgba(18, 184, 134, 0.05) 0%, rgba(20, 176, 20, 0.1) 50%, rgba(76, 110, 245, 0.15) 100%);
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.6s, box-shadow 0.3s;
|
|
transform-style: preserve-3d;
|
|
perspective: 1000px;
|
|
backface-visibility: hidden;
|
|
border-left: 3px solid var(--primary);
|
|
}
|
|
|
|
.testimonial-text {
|
|
margin-bottom: 20px;
|
|
font-style: italic;
|
|
color: #495057;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.testimonial-card:hover {
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
|
background: linear-gradient(135deg, rgba(18, 184, 134, 0.1) 0%, rgba(20, 176, 20, 0.15) 50%, rgba(76, 110, 245, 0.2) 100%);
|
|
}
|
|
|
|
.testimonial-author {
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.testimonial-author a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.testimonial-author a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.info-section {
|
|
padding: 80px 0;
|
|
background-color: #f8f9fb;
|
|
}
|
|
|
|
.info-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.info-content h2 {
|
|
font-size: 2rem;
|
|
margin-bottom: 20px;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.info-content ul {
|
|
margin-left: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-content li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.info-content a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer {
|
|
background-color: var(--dark);
|
|
color: white;
|
|
padding: 40px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-links {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: white;
|
|
text-decoration: none;
|
|
margin: 0 10px;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.copyright {
|
|
color: var(--gray);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stats-container {
|
|
margin-bottom: 40px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.github-badge {
|
|
display: inline-flex;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
transition: transform 0.2s;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.github-badge:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.badge-label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
background-color: #555;
|
|
color: white;
|
|
height: 100%;
|
|
}
|
|
|
|
.badge-value {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
background-color: var(--primary);
|
|
color: white;
|
|
height: 100%;
|
|
}
|
|
|
|
.badge-stars .badge-value {
|
|
background-color: #f1c40f;
|
|
color: #333;
|
|
}
|
|
|
|
.badge-installs .badge-value {
|
|
background-color: #2ecc71;
|
|
}
|
|
|
|
.badge-router .badge-value {
|
|
background-color: #9b59b6;
|
|
}
|
|
|
|
.badge-tokens .badge-value {
|
|
background-color: #e74c3c;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.hero-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-content {
|
|
text-align: center;
|
|
order: 1;
|
|
}
|
|
|
|
.hero-video {
|
|
order: 2;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stats-container {
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<nav>
|
|
<a href="#" class="logo">aider</a>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#getting-started">Getting Started</a>
|
|
<a href="/docs/install.html">Documentation</a>
|
|
<a href="https://discord.gg/Tv2uQnR88V">Discord</a>
|
|
<a href="https://github.com/Aider-AI/aider">GitHub</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>AI Pair Programming in Your Terminal</h1>
|
|
|
|
<div class="stats-container">
|
|
<a href="https://github.com/Aider-AI/aider" class="github-badge badge-stars">
|
|
<span class="badge-label">⭐ GitHub Stars</span>
|
|
<span class="badge-value">29k</span>
|
|
</a>
|
|
<a href="https://pypi.org/project/aider-chat/" class="github-badge badge-installs">
|
|
<span class="badge-label">📦 Installs</span>
|
|
<span class="badge-value">1.6M</span>
|
|
</a>
|
|
<div class="github-badge badge-tokens">
|
|
<span class="badge-label">📈 Tokens/week</span>
|
|
<span class="badge-value">14.7B</span>
|
|
</div>
|
|
<a href="https://openrouter.ai/" class="github-badge badge-router">
|
|
<span class="badge-label">🏆 OpenRouter</span>
|
|
<span class="badge-value">Top 20</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hero-grid">
|
|
<div class="hero-content">
|
|
<p>Aider lets you pair program with LLMs, to edit code in your local git repository. Start a new project or work with an existing code base.</p>
|
|
|
|
<div class="buttons">
|
|
<a href="#getting-started" class="btn btn-primary">Get Started</a>
|
|
<a href="/docs/install.html" class="btn btn-secondary">Documentation</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-video">
|
|
<div class="video-container">
|
|
<video autoplay loop muted playsinline>
|
|
<source src="/assets/shell-cmds-small.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<h2 class="section-title">Features</h2>
|
|
<div class="feature-grid">
|
|
<a href="https://aider.chat/docs/llms.html" class="feature-card">
|
|
<div class="feature-card-header">
|
|
<div class="feature-icon">🧠</div>
|
|
<h3 class="feature-title">Works with all LLMs</h3>
|
|
</div>
|
|
<p>Aider works best with Claude 3.7 Sonnet, DeepSeek R1 & Chat V3, OpenAI o1, o3-mini & GPT-4o, but can connect to almost any LLM, including local models.</p>
|
|
</a>
|
|
<a href="https://aider.chat/docs/repomap.html" class="feature-card">
|
|
<div class="feature-card-header">
|
|
<div class="feature-icon">🗺️</div>
|
|
<h3 class="feature-title">Map Of Your Code</h3>
|
|
</div>
|
|
<p>Aider uses a map of your entire git repo, which helps it work well in larger codebases.</p>
|
|
</a>
|
|
<a href="https://aider.chat/docs/languages.html" class="feature-card">
|
|
<div class="feature-card-header">
|
|
<div class="feature-icon" style="font-family: monospace; font-weight: bold; font-size: 1.5rem;"></></div>
|
|
<h3 class="feature-title">Language Support</h3>
|
|
</div>
|
|
<p>Aider works with most popular programming languages: python, javascript, typescript, php, html, css, and dozens more.</p>
|
|
</a>
|
|
<a href="https://aider.chat/docs/git.html" class="feature-card">
|
|
<div class="feature-card-header">
|
|
<div class="feature-icon">🔀</div>
|
|
<h3 class="feature-title">Git Integration</h3>
|
|
</div>
|
|
<p>Aider automatically commits changes with sensible commit messages, making version control seamless.</p>
|
|
</a>
|
|
<a href="https://aider.chat/docs/usage/watch.html" class="feature-card">
|
|
<div class="feature-card-header">
|
|
<div class="feature-icon">🖥️</div>
|
|
<h3 class="feature-title">Use in Your IDE</h3>
|
|
</div>
|
|
<p>Use aider directly from your favorite IDE or text editor by adding AI comments right in your code.</p>
|
|
</a>
|
|
<a href="https://aider.chat/docs/usage/images-urls.html" class="feature-card">
|
|
<div class="feature-card-header">
|
|
<div class="feature-icon">🖼️</div>
|
|
<h3 class="feature-title">Image & URL Support</h3>
|
|
</div>
|
|
<p>Add images to the chat and share URLs, to provide visual context and references.</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="models" id="getting-started">
|
|
<div class="container">
|
|
<h2 class="section-title">Getting Started</h2>
|
|
<div class="info-content">
|
|
<p>If you already have python 3.8-3.13 installed, you can get started quickly like this:</p>
|
|
<div class="code-block">
|
|
<pre>python -m pip install aider-install
|
|
aider-install
|
|
|
|
# Change directory into your code base
|
|
cd /to/your/project
|
|
|
|
# Work with DeepSeek via DeepSeek's API
|
|
aider --model deepseek --api-key deepseek=your-key-goes-here
|
|
|
|
# Work with Claude 3.7 Sonnet via Anthropic's API
|
|
aider --model sonnet --api-key anthropic=your-key-goes-here
|
|
|
|
# Work with GPT-4o via OpenAI's API
|
|
aider --model gpt-4o --api-key openai=your-key-goes-here</pre>
|
|
</div>
|
|
<p>See the <a href="https://aider.chat/docs/install.html">installation instructions</a> and <a href="https://aider.chat/docs/usage.html">usage documentation</a> for more details.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="testimonials">
|
|
<div class="container">
|
|
<h2 class="section-title">What Users Say</h2>
|
|
<div class="testimonial-grid" id="testimonial-container">
|
|
<!-- Testimonials will be dynamically inserted here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// All testimonials from the README
|
|
const testimonials = [
|
|
{
|
|
text: "The best free open source AI coding assistant.",
|
|
author: "IndyDevDan",
|
|
link: "https://youtu.be/YALpX8oOn78"
|
|
},
|
|
{
|
|
text: "The best AI coding assistant so far.",
|
|
author: "Matthew Berman",
|
|
link: "https://www.youtube.com/watch?v=df8afeb1FY8"
|
|
},
|
|
{
|
|
text: "Aider ... has easily quadrupled my coding productivity.",
|
|
author: "SOLAR_FIELDS",
|
|
link: "https://news.ycombinator.com/item?id=36212100"
|
|
},
|
|
{
|
|
text: "It's a cool workflow... Aider's ergonomics are perfect for me.",
|
|
author: "qup",
|
|
link: "https://news.ycombinator.com/item?id=38185326"
|
|
},
|
|
{
|
|
text: "It's really like having your senior developer live right in your Git repo - truly amazing!",
|
|
author: "rappster",
|
|
link: "https://github.com/Aider-AI/aider/issues/124"
|
|
},
|
|
{
|
|
text: "What an amazing tool. It's incredible.",
|
|
author: "valyagolev",
|
|
link: "https://github.com/Aider-AI/aider/issues/6#issue-1722897858"
|
|
},
|
|
{
|
|
text: "Aider is such an astounding thing!",
|
|
author: "cgrothaus",
|
|
link: "https://github.com/Aider-AI/aider/issues/82#issuecomment-1631876700"
|
|
},
|
|
{
|
|
text: "It was WAY faster than I would be getting off the ground and making the first few working versions.",
|
|
author: "Daniel Feldman",
|
|
link: "https://twitter.com/d_feldman/status/1662295077387923456"
|
|
},
|
|
{
|
|
text: "THANK YOU for Aider! It really feels like a glimpse into the future of coding.",
|
|
author: "derwiki",
|
|
link: "https://news.ycombinator.com/item?id=38205643"
|
|
},
|
|
{
|
|
text: "It's just amazing. It is freeing me to do things I felt were out my comfort zone before.",
|
|
author: "Dougie",
|
|
link: "https://discord.com/channels/1131200896827654144/1174002618058678323/1174084556257775656"
|
|
},
|
|
{
|
|
text: "This project is stellar.",
|
|
author: "funkytaco",
|
|
link: "https://github.com/Aider-AI/aider/issues/112#issuecomment-1637429008"
|
|
},
|
|
{
|
|
text: "Amazing project, definitely the best AI coding assistant I've used.",
|
|
author: "joshuavial",
|
|
link: "https://github.com/Aider-AI/aider/issues/84"
|
|
},
|
|
{
|
|
text: "I absolutely love using Aider ... It makes software development feel so much lighter as an experience.",
|
|
author: "principalideal0",
|
|
link: "https://discord.com/channels/1131200896827654144/1133421607499595858/1229689636012691468"
|
|
},
|
|
{
|
|
text: "I have been recovering from multiple shoulder surgeries ... and have used aider extensively. It has allowed me to continue productivity.",
|
|
author: "codeninja",
|
|
link: "https://www.reddit.com/r/OpenAI/s/nmNwkHy1zG"
|
|
},
|
|
{
|
|
text: "I am an aider addict. I'm getting so much more work done, but in less time.",
|
|
author: "dandandan",
|
|
link: "https://discord.com/channels/1131200896827654144/1131200896827654149/1135913253483069470"
|
|
},
|
|
{
|
|
text: "After wasting $100 on tokens trying to find something better, I'm back to Aider. It blows everything else out of the water hands down, there's no competition whatsoever.",
|
|
author: "SystemSculpt",
|
|
link: "https://discord.com/channels/1131200896827654144/1131200896827654149/1178736602797846548"
|
|
},
|
|
{
|
|
text: "Aider is amazing, coupled with Sonnet 3.5 it's quite mind blowing.",
|
|
author: "Josh Dingus",
|
|
link: "https://discord.com/channels/1131200896827654144/1133060684540813372/1262374225298198548"
|
|
},
|
|
{
|
|
text: "Hands down, this is the best AI coding assistant tool so far.",
|
|
author: "IndyDevDan",
|
|
link: "https://www.youtube.com/watch?v=MPYFPvxfGZs"
|
|
},
|
|
{
|
|
text: "[Aider] changed my daily coding workflows. It's mind-blowing how a single Python application can change your life.",
|
|
author: "maledorak",
|
|
link: "https://discord.com/channels/1131200896827654144/1131200896827654149/1258453375620747264"
|
|
},
|
|
{
|
|
text: "Best agent for actual dev work in existing codebases.",
|
|
author: "Nick Dobos",
|
|
link: "https://twitter.com/NickADobos/status/1690408967963652097?s=20"
|
|
}
|
|
];
|
|
|
|
// Function to shuffle array
|
|
function shuffleArray(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
// Shuffle the testimonials for initial display
|
|
const shuffledTestimonials = shuffleArray([...testimonials]);
|
|
|
|
// Select the first 6 for display
|
|
const displayCount = Math.min(6, shuffledTestimonials.length);
|
|
const initialTestimonials = shuffledTestimonials.slice(0, displayCount);
|
|
|
|
// Function to create a testimonial card
|
|
function createTestimonialCard(testimonial, index) {
|
|
return `
|
|
<div class="testimonial-card" id="testimonial-${index}">
|
|
<p class="testimonial-text">"${testimonial.text}"</p>
|
|
<p class="testimonial-author">— <a href="${testimonial.link}" target="_blank">${testimonial.author}</a></p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Function to initialize the display
|
|
function initializeTestimonials() {
|
|
const container = document.getElementById('testimonial-container');
|
|
let html = '';
|
|
|
|
for (let i = 0; i < displayCount; i++) {
|
|
html += createTestimonialCard(initialTestimonials[i], i);
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
// Function to update a single testimonial
|
|
function updateSingleTestimonial(index, recentlyRemoved = []) {
|
|
// Get a new testimonial not currently displayed and not recently removed
|
|
const remainingTestimonials = testimonials.filter(t => {
|
|
// Not currently displayed in any card
|
|
const notCurrentlyDisplayed = !initialTestimonials.some(
|
|
it => it.author === t.author && it.text === t.text
|
|
);
|
|
|
|
// Not in the recently removed list
|
|
const notRecentlyRemoved = !recentlyRemoved.some(
|
|
rt => rt.author === t.author && rt.text === t.text
|
|
);
|
|
|
|
return notCurrentlyDisplayed && notRecentlyRemoved;
|
|
});
|
|
|
|
let newTestimonial;
|
|
if (remainingTestimonials.length > 0) {
|
|
const randomIndex = Math.floor(Math.random() * remainingTestimonials.length);
|
|
newTestimonial = remainingTestimonials[randomIndex];
|
|
} else {
|
|
// If we've used all available testimonials, pick a random one that's at least not currently displayed
|
|
const notDisplayed = testimonials.filter(
|
|
t => !initialTestimonials.some(it => it.author === t.author && it.text === t.text)
|
|
);
|
|
|
|
if (notDisplayed.length > 0) {
|
|
const randomIndex = Math.floor(Math.random() * notDisplayed.length);
|
|
newTestimonial = notDisplayed[randomIndex];
|
|
} else {
|
|
// Absolute fallback - just pick any random testimonial
|
|
const randomIndex = Math.floor(Math.random() * testimonials.length);
|
|
newTestimonial = testimonials[randomIndex];
|
|
}
|
|
}
|
|
|
|
// Replace the testimonial at the given index
|
|
initialTestimonials[index] = newTestimonial;
|
|
|
|
// Update the displayed testimonial
|
|
const testimonialElement = document.getElementById(`testimonial-${index}`);
|
|
if (testimonialElement) {
|
|
// Start the flip animation
|
|
testimonialElement.style.transform = "rotateY(90deg)";
|
|
|
|
// Update content when card is perpendicular to view (hidden)
|
|
setTimeout(() => {
|
|
testimonialElement.innerHTML = `
|
|
<p class="testimonial-text">"${newTestimonial.text}"</p>
|
|
<p class="testimonial-author">— <a href="${newTestimonial.link}" target="_blank">${newTestimonial.author}</a></p>
|
|
`;
|
|
|
|
// Complete the flip
|
|
testimonialElement.style.transform = "rotateY(0deg)";
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
// Initialize testimonials
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeTestimonials();
|
|
|
|
// Track the last flipped card index to avoid repeats
|
|
let lastFlippedIndex = -1;
|
|
|
|
// Track recently removed testimonials to prevent immediate reuse
|
|
let recentlyRemovedTestimonials = [];
|
|
|
|
// Rotate one testimonial at a time, randomly selecting which one to change
|
|
setInterval(function() {
|
|
// Select a random index that's different from the last flipped one
|
|
let randomIndex;
|
|
do {
|
|
randomIndex = Math.floor(Math.random() * displayCount);
|
|
} while (randomIndex === lastFlippedIndex && displayCount > 1);
|
|
|
|
// Store the testimonial being removed to prevent immediate reuse
|
|
const removedTestimonial = initialTestimonials[randomIndex];
|
|
recentlyRemovedTestimonials.push(removedTestimonial);
|
|
|
|
// Limit the recently removed list to avoid depleting the pool too much
|
|
if (recentlyRemovedTestimonials.length > 3) {
|
|
recentlyRemovedTestimonials.shift(); // Remove oldest entry
|
|
}
|
|
|
|
// Update the selected testimonial, passing the list of testimonials to avoid
|
|
updateSingleTestimonial(randomIndex, recentlyRemovedTestimonials);
|
|
|
|
// Store this index as the last flipped
|
|
lastFlippedIndex = randomIndex;
|
|
}, 3000);
|
|
});
|
|
</script>
|
|
|
|
<section class="info-section" id="more-info">
|
|
<div class="container">
|
|
<h2 class="section-title">More Information</h2>
|
|
<div class="info-content">
|
|
<ul>
|
|
<li><a href="/docs/install.html">Documentation</a></li>
|
|
<li><a href="https://aider.chat/docs/install.html">Installation</a></li>
|
|
<li><a href="https://aider.chat/docs/install.html">Usage</a></li>
|
|
<li><a href="https://aider.chat/docs/usage/tutorials.html">Tutorial videos</a></li>
|
|
<li><a href="https://aider.chat/docs/llms.html">Connecting to LLMs</a></li>
|
|
<li><a href="https://aider.chat/docs/config.html">Configuration</a></li>
|
|
<li><a href="https://aider.chat/docs/troubleshooting.html">Troubleshooting</a></li>
|
|
<li><a href="https://aider.chat/docs/leaderboards/">LLM Leaderboards</a></li>
|
|
<li><a href="https://github.com/Aider-AI/aider">GitHub</a></li>
|
|
<li><a href="https://discord.gg/Tv2uQnR88V">Discord</a></li>
|
|
<li><a href="https://aider.chat/blog/">Blog</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-links">
|
|
<a href="/docs/install.html">Documentation</a>
|
|
<a href="https://github.com/Aider-AI/aider">GitHub</a>
|
|
<a href="https://discord.gg/Tv2uQnR88V">Discord</a>
|
|
<a href="https://aider.chat/blog/">Blog</a>
|
|
</div>
|
|
<p class="copyright">© 2025 Aider. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|