betterpack
Version:
A Universal Node.js Package Manager CLI with automated agent capabilities
189 lines (171 loc) • 7.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BetterPack Documentation</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="https://raw.githubusercontent.com/involvex/betterpack/main/favicon.ico">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-brand">
<h1>BetterPack</h1>
<span class="version">v2.0.0</span>
</div>
<ul class="nav-menu">
<li><a href="#overview">Overview</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#commands">Commands</a></li>
<li><a href="api.html">API</a></li>
<li><a href="contributing.html">Contributing</a></li>
<li><a href="https://github.com/involvex/betterpack" target="_blank">GitHub</a></li>
</ul>
</div>
</nav>
<main class="container">
<section id="hero" class="hero">
<h1>BetterPack</h1>
<p class="hero-subtitle">Universal Package Manager Interface with AI-Powered Project Management</p>
<div class="hero-buttons">
<a href="#installation" class="btn btn-primary">Get Started</a>
<a href="https://npmjs.com/package/betterpack" class="btn btn-secondary" target="_blank">View on npm</a>
</div>
</section>
<section id="overview" class="section">
<h2>Overview</h2>
<p>BetterPack is a universal interface for package managers that provides a consistent set of commands across npm, yarn, pnpm, and bun. It automatically detects your project's package manager and translates commands accordingly.</p>
<div class="features-grid">
<div class="feature-card">
<h3>🚀 Universal Commands</h3>
<p>One set of commands works across all package managers</p>
</div>
<div class="feature-card">
<h3>🤖 AI Integration</h3>
<p>Built-in AI assistant for project management and code generation</p>
</div>
<div class="feature-card">
<h3>📦 Smart Bundling</h3>
<p>Bundle projects into executables, installers, and archives</p>
</div>
<div class="feature-card">
<h3>🔧 Auto-Detection</h3>
<p>Automatically detects and uses the right package manager</p>
</div>
</div>
</section>
<section id="installation" class="section">
<h2>Installation</h2>
<div class="code-block">
<pre><code>npm install -g betterpack</code></pre>
</div>
<p>Or using other package managers:</p>
<div class="code-tabs">
<div class="tab-content">
<pre><code># Using yarn
yarn global add betterpack
# Using pnpm
pnpm add -g betterpack
# Using bun
bun add -g betterpack</code></pre>
</div>
</div>
</section>
<section id="commands" class="section">
<h2>Universal Commands</h2>
<div class="commands-grid">
<div class="command-card">
<h3>bpack install</h3>
<p>Install all dependencies</p>
</div>
<div class="command-card">
<h3>bpack add <package></h3>
<p>Add a new package</p>
</div>
<div class="command-card">
<h3>bpack remove <package></h3>
<p>Remove a package</p>
</div>
<div class="command-card">
<h3>bpack update</h3>
<p>Update dependencies</p>
</div>
<div class="command-card">
<h3>bpack run <script></h3>
<p>Run a package script</p>
</div>
<div class="command-card">
<h3>bpack test</h3>
<p>Run tests</p>
</div>
</div>
<h3>BetterPack Specific Commands</h3>
<div class="command-list">
<div class="command-item">
<code>bpack create</code>
<span>Interactive AI-powered project builder</span>
</div>
<div class="command-item">
<code>bpack bundle</code>
<span>Bundle project into various formats (JS, ZIP, EXE, MSIX)</span>
</div>
<div class="command-item">
<code>bpack agent</code>
<span>Start automated project management agent</span>
</div>
<div class="command-item">
<code>bpack gemini</code>
<span>Interactive chat with Google's Gemini AI</span>
</div>
<div class="command-item">
<code>bpack host</code>
<span>Start local web server (default port 4020)</span>
</div>
<div class="command-item">
<code>bpack watch <file></code>
<span>Watch file for changes and auto-restart</span>
</div>
<div class="command-item">
<code>bpack git <command></code>
<span>Git wrapper with AI-generated commit messages</span>
</div>
</div>
</section>
<section id="examples" class="section">
<h2>Examples</h2>
<div class="example-block">
<h3>Basic Usage</h3>
<pre><code># Install dependencies
bpack install
# Add a package
bpack add express
# Run development server
bpack run dev
# Build project
bpack build</code></pre>
</div>
<div class="example-block">
<h3>AI-Powered Project Creation</h3>
<pre><code># Start interactive project builder
bpack create
# Bundle project as executable
bpack bundle --format exe --output myapp.exe
# Start automated agent
bpack agent start</code></pre>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2024 BetterPack. Open source project by <a href="https://github.com/involvex" target="_blank">InvolveX</a></p>
<div class="footer-links">
<a href="https://github.com/involvex/betterpack" target="_blank">GitHub</a>
<a href="https://npmjs.com/package/betterpack" target="_blank">npm</a>
<a href="contributing.html">Contributing</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>