Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mbianchidev/cli-cheatsheet

A cheatsheet for various CLIs
https://github.com/mbianchidev/cli-cheatsheet

aws bash cli docker kubernetes maven powershell terraform

Last synced: about 2 months ago
JSON representation

A cheatsheet for various CLIs

Awesome Lists containing this project

README 

          
# CLI CHEATSHEET



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



🌐 **[Live Demo](https://mbianchidev.github.io/cli-cheatsheet/)** | 📦 Zero Dependencies | ⚡ Instant Load



---



## 🚀 Quick Start



Get running in under 60 seconds:



### Option 1: Open Locally (Fastest)



```bash

# 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



```bash

# 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



```json

{

  "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



```json

{

  "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`:



```css

: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:



```html

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

```



Update font family:



```css

body {

    font-family: 'YourFont', monospace;

}

```



### Disable CRT Effects



Remove the scanlines and vignette:



```css

.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`:



```json

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

```



**Example:**



```json

{

  "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 `` for required values, `[square-brackets]` for optional:

```json

["docker exec -it  bash", "open shell in container"]

["git log [--oneline]", "view commit history"]

```



**Piped Commands:** Include pipes when essential:

```json

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

```



### Testing Your Changes



Before submitting:



1. Validate JSON syntax:

   ```bash

   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:



```bash

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:

```bash

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](https://github.com/mbianchidev/cli-cheatsheet)

- **Issues**: [Report bugs](https://github.com/mbianchidev/cli-cheatsheet/issues)

- **Discussions**: [Join the conversation](https://github.com/mbianchidev/cli-cheatsheet/discussions)



---



## 📄 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](https://github.com/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. 🚀