Skip to content

feat(install): add clawd.bot-inspired one-liner quickstart #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abrichr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(install): add clawd.bot-inspired one-liner quickstart #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 57 additions & 13 deletions components/InstallSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWindows, faApple, faLinux, faPython } from '@fortawesome/free-brands-svg-icons';
import { faCopy, faCheck, faTerminal, faDownload } from '@fortawesome/free-solid-svg-icons';
import { faCopy, faCheck, faTerminal, faDownload, faRocket, faBolt, faEye, faPlay, faGraduationCap } from '@fortawesome/free-solid-svg-icons';
import styles from './InstallSection.module.css';
import { getPyPIDownloadStats, formatDownloadCount } from 'utils/pypiStats';

// One-liner install command (inspired by clawd.bot)
const ONE_LINER = 'curl -fsSL https://openadapt.ai/install.sh | bash';
const ONE_LINER_WINDOWS = 'irm https://openadapt.ai/install.ps1 | iex';

const platforms = {
'macOS': {
icon: faApple,
Expand Down Expand Up @@ -88,16 +92,36 @@ export default function InstallSection() {
const currentPlatform = platforms[selectedPlatform];
const allCommands = currentPlatform.commands.join('\n');

const isWindows = selectedPlatform === 'Windows';
const oneLiner = isWindows ? ONE_LINER_WINDOWS : ONE_LINER;

return (
<div className={styles.installSection}>
<div className={styles.header}>
<FontAwesomeIcon icon={faTerminal} className={styles.terminalIcon} />
<FontAwesomeIcon icon={faRocket} className={styles.terminalIcon} />
<h3 className={styles.title}>Install in 30 Seconds</h3>
</div>

<p className={styles.subtitle}>
One command installs everything you need. No Python setup required.
</p>
{/* One-Liner Hero Section - inspired by clawd.bot */}
<div className={styles.oneLinerSection}>
<p className={styles.oneLinerTagline}>
Works everywhere. Installs everything. You're welcome.
</p>
<div className={styles.oneLinerContainer}>
<div className={styles.oneLinerCode}>
<span className={styles.oneLinerComment}># {isWindows ? 'Run in PowerShell' : 'macOS / Linux / WSL'}</span>
<code className={styles.oneLinerCommand}>{oneLiner}</code>
</div>
<CopyButton text={oneLiner} className={styles.oneLinerCopyBtn} />
</div>
<p className={styles.oneLinerNote}>
Installs uv, Python 3.11, and OpenAdapt CLI automatically
</p>
</div>

<div className={styles.dividerOr}>
<span>or install manually</span>
</div>

{/* PyPI Download Stats */}
{pypiStats.total > 0 && (
Expand Down Expand Up @@ -168,20 +192,40 @@ export default function InstallSection() {
<h4 className={styles.quickStartTitle}>Quick Start Commands</h4>
<div className={styles.commandGrid}>
<div className={styles.commandItem}>
<code>openadapt capture start --name my-task</code>
<span>Start recording</span>
<div className={styles.commandIcon}>
<FontAwesomeIcon icon={faPlay} />
</div>
<div className={styles.commandContent}>
<code>openadapt record --name invoice-task</code>
<span>Record a demonstration</span>
</div>
</div>
<div className={styles.commandItem}>
<code>openadapt capture stop</code>
<span>Stop recording</span>
<div className={styles.commandIcon}>
<FontAwesomeIcon icon={faEye} />
</div>
<div className={styles.commandContent}>
<code>openadapt view invoice-task</code>
<span>Review and annotate</span>
</div>
</div>
<div className={styles.commandItem}>
<code>openadapt capture view my-task</code>
<span>View recording</span>
<div className={styles.commandIcon}>
<FontAwesomeIcon icon={faGraduationCap} />
</div>
<div className={styles.commandContent}>
<code>openadapt replay invoice-task</code>
<span>Replay with AI assistance</span>
</div>
</div>
<div className={styles.commandItem}>
<code>openadapt doctor</code>
<span>Check system</span>
<div className={styles.commandIcon}>
<FontAwesomeIcon icon={faBolt} />
</div>
<div className={styles.commandContent}>
<code>openadapt doctor</code>
<span>Check system setup</span>
</div>
</div>
</div>
</div>
Expand Down
127 changes: 121 additions & 6 deletions components/InstallSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,93 @@
font-size: 16px;
}

/* One-Liner Hero Section (clawd.bot inspired) */
.oneLinerSection {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(86, 13, 248, 0.15) 100%);
border: 2px solid rgba(34, 197, 94, 0.4);
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
text-align: center;
}

.oneLinerTagline {
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 16px;
letter-spacing: -0.02em;
}

.oneLinerContainer {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}

.oneLinerCode {
display: flex;
flex-direction: column;
align-items: flex-start;
background: rgba(0, 0, 0, 0.4);
border-radius: 12px;
padding: 16px 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.oneLinerComment {
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 4px;
}

.oneLinerCommand {
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 15px;
color: #22c55e;
font-weight: 500;
}

.oneLinerCopyBtn {
padding: 12px 20px !important;
font-size: 14px !important;
background: rgba(34, 197, 94, 0.3) !important;
border-color: rgba(34, 197, 94, 0.5) !important;
}

.oneLinerCopyBtn:hover {
background: rgba(34, 197, 94, 0.5) !important;
}

.oneLinerNote {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
margin-top: 12px;
}

.dividerOr {
display: flex;
align-items: center;
justify-content: center;
margin: 24px 0;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
}

.dividerOr::before,
.dividerOr::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 0 16px;
}

/* PyPI Download Stats */
.pypiStats {
display: flex;
Expand Down Expand Up @@ -248,21 +335,49 @@

.commandItem {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
flex-direction: row;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
}

.commandItem code {
.commandItem:hover {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(86, 13, 248, 0.3);
}

.commandIcon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(86, 13, 248, 0.2);
border-radius: 8px;
color: #a78bfa;
font-size: 14px;
flex-shrink: 0;
}

.commandContent {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}

.commandContent code {
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 12px;
color: #22c55e;
word-break: break-all;
}

.commandItem span {
.commandContent span {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}