@nclamvn/vibecode-cli 1.6.0 → 1.8.0

package/docs-site/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "docs-site",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/preset-classic": "3.9.2",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.562.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/tsconfig": "3.9.2",
+    "@docusaurus/types": "3.9.2",
+    "typescript": "~5.6.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0"
+  }
+}

package/docs-site/sidebars.ts

@@ -0,0 +1,70 @@
+import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+
+const sidebars: SidebarsConfig = {
+  docsSidebar: [
+    'intro',
+    'getting-started',
+    'installation',
+    {
+      type: 'category',
+      label: 'Commands',
+      collapsed: false,
+      items: [
+        'commands/index',
+        {
+          type: 'category',
+          label: 'Workflow',
+          items: [
+            'commands/init',
+            'commands/start',
+            'commands/status',
+            'commands/lock',
+            'commands/doctor',
+          ],
+        },
+        {
+          type: 'category',
+          label: 'Build',
+          items: [
+            'commands/plan',
+            'commands/build',
+            'commands/review',
+            'commands/snapshot',
+            'commands/config',
+          ],
+        },
+        {
+          type: 'category',
+          label: 'Power Features',
+          items: [
+            'commands/go',
+            'commands/agent',
+            'commands/debug',
+            'commands/assist',
+          ],
+        },
+        {
+          type: 'category',
+          label: 'Polish',
+          items: [
+            'commands/undo',
+            'commands/learn',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Guides',
+      items: [
+        'guides/magic-mode',
+        'guides/agent-mode',
+        'guides/debug-mode',
+      ],
+    },
+    'configuration',
+    'faq',
+  ],
+};
+
+export default sidebars;

package/docs-site/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,72 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import { Wand2, Bot, Search } from 'lucide-react';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  Icon: React.ComponentType<{size?: number; className?: string}>;
+  description: ReactNode;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Magic Mode',
+    Icon: Wand2,
+    description: (
+      <>
+        One command to build an entire project. Just describe what you want and
+        Vibecode handles requirements, architecture, and implementation.
+      </>
+    ),
+  },
+  {
+    title: 'Agent Mode',
+    Icon: Bot,
+    description: (
+      <>
+        Build complex multi-module systems autonomously. Self-healing capabilities
+        automatically fix errors and retry failed builds.
+      </>
+    ),
+  },
+  {
+    title: 'Debug Mode',
+    Icon: Search,
+    description: (
+      <>
+        Intelligent 9-step debugging protocol. Analyze errors, generate hypotheses,
+        apply fixes, and learn from solutions.
+      </>
+    ),
+  },
+];
+
+function Feature({title, Icon, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Icon size={64} className={styles.featureIcon} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): ReactNode {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/docs-site/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,16 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
+
+.featureIcon {
+  color: var(--ifm-color-primary);
+  margin-bottom: 1rem;
+}

package/docs-site/src/css/custom.css

@@ -0,0 +1,30 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}

package/docs-site/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/docs-site/src/pages/index.tsx

@@ -0,0 +1,44 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import Heading from '@theme/Heading';
+
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro">
+            Get Started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): ReactNode {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title="AI-Assisted Development with Guardrails"
+      description="Build software faster with AI assistance while maintaining discipline and control. Magic Mode, Agent Mode, Debug Mode, and more.">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

package/docs-site/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

package/docs-site/src/theme/Footer/index.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import { Github, Package, Terminal, Zap, Bot, Bug, BookOpen, Settings, HelpCircle, ArrowRight } from 'lucide-react';
+import styles from './styles.module.css';
+
+function Footer(): JSX.Element {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.gradientTop} />
+
+      <div className={styles.container}>
+        {/* Brand Section */}
+        <div className={styles.brandSection}>
+          <div className={styles.brand}>
+            <Terminal size={32} className={styles.brandIcon} />
+            <span className={styles.brandName}>Vibecode</span>
+          </div>
+          <p className={styles.brandTagline}>
+            Build software with discipline.<br />
+            AI coding with guardrails.
+          </p>
+          <div className={styles.socialLinks}>
+            <a
+              href="https://github.com/nclamvn/vibecode-cli"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.socialLink}
+              aria-label="GitHub"
+            >
+              <Github size={20} />
+            </a>
+            <a
+              href="https://www.npmjs.com/package/@nclamvn/vibecode-cli"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.socialLink}
+              aria-label="npm"
+            >
+              <Package size={20} />
+            </a>
+          </div>
+        </div>
+
+        {/* Links Grid */}
+        <div className={styles.linksGrid}>
+          {/* Getting Started */}
+          <div className={styles.linkColumn}>
+            <h4 className={styles.columnTitle}>
+              <BookOpen size={16} />
+              Getting Started
+            </h4>
+            <ul className={styles.linkList}>
+              <li><Link to="/docs/intro">Introduction</Link></li>
+              <li><Link to="/docs/getting-started">Quick Start</Link></li>
+              <li><Link to="/docs/installation">Installation</Link></li>
+              <li><Link to="/docs/configuration">Configuration</Link></li>
+            </ul>
+          </div>
+
+          {/* Core Features */}
+          <div className={styles.linkColumn}>
+            <h4 className={styles.columnTitle}>
+              <Zap size={16} />
+              Core Features
+            </h4>
+            <ul className={styles.linkList}>
+              <li><Link to="/docs/commands/go">Magic Mode</Link></li>
+              <li><Link to="/docs/commands/agent">Agent Mode</Link></li>
+              <li><Link to="/docs/commands/debug">Debug Mode</Link></li>
+              <li><Link to="/docs/commands/assist">Assist Mode</Link></li>
+            </ul>
+          </div>
+
+          {/* More Commands */}
+          <div className={styles.linkColumn}>
+            <h4 className={styles.columnTitle}>
+              <Terminal size={16} />
+              More Commands
+            </h4>
+            <ul className={styles.linkList}>
+              <li><Link to="/docs/commands/build">Build</Link></li>
+              <li><Link to="/docs/commands/undo">Undo/Rollback</Link></li>
+              <li><Link to="/docs/commands/learn">Learning</Link></li>
+              <li><Link to="/docs/commands">All Commands</Link></li>
+            </ul>
+          </div>
+
+          {/* Resources */}
+          <div className={styles.linkColumn}>
+            <h4 className={styles.columnTitle}>
+              <HelpCircle size={16} />
+              Resources
+            </h4>
+            <ul className={styles.linkList}>
+              <li><Link to="/docs/faq">FAQ</Link></li>
+              <li>
+                <a href="https://github.com/nclamvn/vibecode-cli/issues" target="_blank" rel="noopener noreferrer">
+                  Report Issue
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/nclamvn/vibecode-cli" target="_blank" rel="noopener noreferrer">
+                  Contribute
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Bar */}
+      <div className={styles.bottomBar}>
+        <div className={styles.bottomContainer}>
+          <p className={styles.copyright}>
+            &copy; {new Date().getFullYear()} Vibecode. Open source under MIT License.
+          </p>
+          <div className={styles.installHint}>
+            <code>npm install -g @nclamvn/vibecode-cli</code>
+            <ArrowRight size={14} />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default React.memo(Footer);