CLI CHEATSHEET

Interactive terminal command reference with a retro-futuristic CRT aesthetic. Find, copy, and execute commands instantly.

🌐 Live Demo | 📦 Zero Dependencies | ⚡ Instant Load

---

🚀 Quick Start

Get running in under 60 seconds:

Option 1: Open Locally (Fastest)

# Clone and open
git clone https://github.com/mbianchidev/cli-cheatsheet.git
cd cli-cheatsheet
open index.html          # macOS
xdg-open index.html      # Linux
start index.html         # Windows

That's it! The site works completely offline.

Option 2: Local Server

# Python 3
python3 -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js
npx http-server

# Then visit: http://localhost:8000

Option 3: GitHub Pages (Automatic)

The site automatically deploys to GitHub Pages on push to main branch via GitHub Actions.

---

✨ Features

Feature	Description
🔍 Live Search	Filter commands as you type
📋 Quick Copy	One-click clipboard copy
🎨 CRT Aesthetic	Retro terminal with scanlines and phosphor glow
⚡ Zero Build	Pure HTML/CSS/JS, no dependencies
⌨️ Keyboard Shortcuts	Ctrl+K to search, Esc to clear
📱 Responsive	Works on all screen sizes
🌈 8 Categories	Docker, K8s, Linux, Git, AWS, Helm, Maven, Flutter

---

📝 Adding Commands

All commands are stored in terminal-db.json. The structure is straightforward:

Edit Existing Category

{
  "systems": {
    "docker": {
      "name": "Docker",
      "glyph": "🐳",
      "entries": [
        ["command here", "description of what it does"],
        ["docker ps", "display running containers"],
        ["your new command", "your description"]
      ]
    }
  }
}

Add New Category

{
  "systems": {
    "mynewcategory": {
      "name": "My Tool",
      "glyph": "🔧",
      "entries": [
        ["mytool --help", "show help information"],
        ["mytool run", "execute the tool"]
      ]
    }
  }
}

Data Format

Each category contains:

• name: Display name shown in UI
• glyph: Emoji icon for visual identification
• entries: Array of [command, description] pairs

---

🎨 Customization

Change Color Scheme

Edit CSS variables in index.html:

:root {
    --phosphor: #39ff14;  /* Main terminal green */
    --screen: #0d0208;    /* Background */
    --amber: #ffba08;     /* Secondary color */
    --cyan: #00f5ff;      /* Highlight color */
    --purple: #b537f2;    /* Accent */
}

Modify Typography

Change the Google Fonts import:

@import url('https://fonts.googleapis.com/css2?family=YourFont&display=swap');

Update font family:

body {
    font-family: 'YourFont', monospace;
}

Disable CRT Effects

Remove the scanlines and vignette:

.monitor::before { display: none; }  /* Remove scanlines */
.monitor::after { display: none; }   /* Remove vignette */

---

🛠️ Project Structure

cli-cheatsheet/
├── index.html              # Main web interface
├── terminal-db.json        # Command database
├── README.md               # Documentation
│
├── docker.sh               # Original Docker commands
├── kubernetes.sh           # Original Kubernetes commands
├── linux.sh                # Original Linux commands
├── git.sh                  # Original Git commands
├── aws.sh                  # Original AWS commands
├── helm.sh                 # Original Helm commands
├── maven.sh                # Original Maven commands
└── flutter.sh              # Original Flutter commands

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl+K / Cmd+K	Focus search field
Esc	Clear search
Tab	Navigate between buttons
Enter	Activate focused button

---

🤝 Contributing

How to Contribute

1. Fork this repository
2. Create a feature branch: git checkout -b add-new-commands
3. Edit terminal-db.json with your additions
4. Test locally by opening index.html
5. Commit: git commit -m "Add XYZ commands"
6. Push: git push origin add-new-commands
7. Submit a Pull Request

Adding Commands

Each command is a simple two-element array in terminal-db.json:

["the command to run", "brief description of what it does"]

Example:

{
  "systems": {
    "docker": {
      "name": "Docker",
      "glyph": "🐳",
      "entries": [
        ["docker ps", "display running containers"],
        ["docker images", "list all images"],
        ["YOUR NEW COMMAND HERE", "what it does"]
      ]
    }
  }
}

Description Best Practices

• Keep descriptions under 60 characters
• Start with a verb (e.g., "display", "create", "remove")
• Be specific about what the command does
• Don't include punctuation at the end
• Use present tense

Good: "list all running containers"
Bad: "Lists all running containers." (has punctuation)

Command Patterns

Placeholders: Use <angle-brackets> for required values, [square-brackets] for optional:

["docker exec -it <container> bash", "open shell in container"]
["git log [--oneline]", "view commit history"]

Piped Commands: Include pipes when essential:

["ps aux | grep <process>", "find specific process"]

Testing Your Changes

Before submitting:

1. Validate JSON syntax:

   python3 -m json.tool terminal-db.json

2. Open index.html and verify:

   • Commands appear in correct category
   • Descriptions are clear
   • Copy functionality works
   • No visual glitches

Contribution Guidelines

✅ DO:

• Add practical, commonly-used commands
• Keep descriptions concise (under 60 characters)
• Test commands before submitting
• Follow the existing JSON format
• Include examples for complex commands

❌ DON'T:

• Add deprecated or obsolete commands
• Include dangerous commands without clear warnings
• Submit commands that require extensive setup
• Break the JSON structure

---

📊 Current Stats

Total Commands: 143
Categories: 8
Lines of Code: ~600
Dependencies: 0
Build Time: 0ms
Total Size: ~50KB
Load Time: <100ms

---

🎯 Philosophy & Architecture

This project embraces:

• Simplicity: No build tools, no frameworks, just HTML/CSS/JS
• Speed: Instant load, instant search, instant copy
• Aesthetics: Retro-futuristic terminal design that's actually functional
• Accessibility: Keyboard navigation and screen reader friendly
• Maintainability: Single JSON file for all command data

Technical Architecture

Data Model:

• JSON-based storage (terminal-db.json)
• Flat structure: systems → entries array
• Each entry: [command, description]

Application Logic:

• Single object (Terminal) manages all state
• Event-driven architecture
• DOM manipulation via vanilla JavaScript
• No virtual DOM, no reactivity framework

Design System:

• Custom CSS with CSS variables
• Retro phosphor green (#39ff14) primary color
• CRT effects: scanlines, vignette, glow
• Monospace fonts: Cutive Mono + Orbitron
• Brutalist layout with heavy borders

Why These Choices?

Why No Framework?

• Faster loading (no bundle to download)
• Easier maintenance (no dependencies to update)
• Lower barrier to contribution
• Demonstrates vanilla JS capabilities

Why JSON Over YAML?

• Native JavaScript support
• Easier to validate
• Simpler parsing
• No external libraries needed

Why Retro CRT Design?

• Distinctive and memorable
• Fits terminal/CLI theme perfectly
• Appeals to developer nostalgia
• Makes the tool stand out

---

🐛 Troubleshooting

Commands not loading?

Check browser console for errors. Ensure terminal-db.json is valid JSON:

python3 -m json.tool terminal-db.json

Styling broken?

Clear browser cache and hard reload:

• Chrome/Edge: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
• Firefox: Ctrl+F5 (Windows/Linux) or Cmd+Shift+R (Mac)

Copy not working?

Modern browsers require HTTPS for clipboard API. Use localhost or deploy to GitHub Pages.

Page doesn't load?

• Make sure index.html and terminal-db.json are in the same directory
• Try opening in a different browser
• Check browser console for errors (F12)

JSON errors?

Validate your JSON:

python3 -m json.tool terminal-db.json

---

🔧 Deployment & Maintenance

Deployment Options

1. LOCAL - Just open index.html in any browser
2. LOCAL SERVER - python3 -m http.server 8000 → http://localhost:8000
3. GITHUB PAGES - Automatic deployment via GitHub Actions (see .github/workflows/)
4. ANY HOST - Upload index.html + terminal-db.json to any static hosting

Browser Compatibility

• Chrome/Edge: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ Full support
• Mobile browsers: ✅ Responsive design

Minimum requirements: ES6, Clipboard API, CSS Grid, Flexbox

Performance Metrics

• Load Time: <100ms on fast connection
• Search Performance: Instant (client-side filtering)
• Copy Operation: <50ms
• Memory Usage: <5MB
• Bundle Size: 28KB total (uncompressed)

Maintenance

The project is designed for minimal maintenance:

1. Adding Commands: Edit JSON file, no code changes needed
2. Styling: CSS variables make theme changes easy
3. No Dependencies: No security updates or breaking changes
4. Static Hosting: Works on any web server or CDN

---

📜 Original Scripts

The original .sh and .bat files remain in the repository root. These are the source materials that inspired the interactive web interface.

---

🔗 Links

• Repository: github.com/mbianchidev/cli-cheatsheet
• Issues: Report bugs
• Discussions: Join the conversation

---

📄 License

This project is provided as-is without warranty. The original author takes no responsibility for command execution or outcomes. Always understand commands before running them, especially those requiring elevated privileges.

---

🙏 Acknowledgments

Created by: mbianchidev

Design Inspiration: Vintage CRT terminals, phosphor monitors, and 80s sci-fi aesthetics

Typography: Cutive Mono (Google Fonts), Orbitron (Google Fonts)

---

Built with: Pure HTML, CSS, and JavaScript
External Dependencies: None
Framework: None
Bundler: None

Just open index.html and start copying commands. 🚀