term-website

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 46)

A minimal, configurable terminal website. 🖥️

term-website Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [term-website](https://term.micahkepe.com/) 💻

**term-website** is a highly configurable, client-side terminal emulator for
the browser. Designed as a fun and experimental project, it emulates a shell
environment with a mock backend. It's perfect as a starting template for a
terminal-style portfolio or even as a standalone terminal emulator.

> Have fun exploring! There are plenty of easter eggs hidden inside. 🎉

![Demo of term-website in action](https://raw.githubusercontent.com/micahkepe/term-website/main/public/assets/demos/demo.gif)

---

## **What is term-website?**

**term-website** is a **TypeScript-powered browser terminal** built with
vanilla TypeScript, HTML, and CSS. It uses [xterm.js](https://xtermjs.org/) for
terminal emulation and a mock backend to simulate a shell environment.

Core features include:

- **Filetree navigation** with commands like `ls`, `cd`, and `cat`.
- Configurable commands, themes, and shortcuts.
- **Stateless operation**: Refreshing resets the terminal to its initial state.

---

## **Features**

- **Interactive Shell-Like Environment**: Commands like `ls`, `cd`, `cat`, and
  `open` simulate real terminal behavior.
- **Configurable Themes and Filetree**: Customize the look and content via
  `config.json` and `/files/`.
- **Built-In Shortcuts**: Navigate, edit commands, and interact with ease.
- **Stateless Design**: Starts fresh on every reload for simplicity.
- **Easter Eggs**: A sprinkle of surprises for curious users.

---

## **Getting Started**

1. **Clone the Repository**:

```bash
   git clone https://github.com/micahkepe/term-website.git
   cd term-website
   ```

2. **Install Dependencies**:

```bash
   npm install
   ```

3. **Run Locally**:

```bash
   npm run dev
   ```

The site will be served at `http://localhost:5173`.

4. **Build for Production**:

```bash
   npm run build
   ```

The optimized build will be in the `/dist/` directory.

To preview the production build locally:

```bash
   npm run preview
   ```

5. **Optional: Deploy to GitHub Pages**:

```bash
   npm run deploy
   ```

This command builds the project and deploys it to the `gh-pages` branch. In
   the repository settings, set the GitHub Pages source to the `gh-pages` branch.

---

## **Configuration**

### **Customizing Filetree**

Modify the `/src/server/file-system/files/` directory to add, remove, or edit
files visible in the terminal.

### **Adding Commands**

Add new commands by creating files in the `/src/server/commands/` directory.
Commands must implement the `Command` interface and the `execute` method.

### **Theming**

Update the default theme in `config.json`. Available themes include:

- `dracula`
- `catpuccin-mocha`
- `solarized-dark`
- `kanagawa`

To add a new theme, implement the `ITheme` interface in
`src/client/terminal/themes.ts`.

### **Shortcuts**

The following shortcuts are supported:

| Shortcut            | Description                   |
| ------------------- | ----------------------------- |
| `Ctrl + L`          | Clear the terminal            |
| `Ctrl + C`          | Cancel the current command    |
| `Ctrl + W`          | Delete the last word          |
| `Ctrl + U`          | Delete the current line       |
| `ArrowUp/ArrowDown` | Cycle through command history |

---

## **Documentation**

Full documentation is autogenerated via `tsdoc`. To generate it:

```bash
npm run doc
```

Open `docs/index.html` in a browser to explore.

---

## **Roadmap**

Planned features:

- **TAB Autocomplete**: Autocomplete file names and commands.
- **Markdown Rendering**: Render Markdown files directly in the terminal.
- **Enhanced Command History**: Navigate multi-line commands seamlessly.

---

## **Contributing**

Want to contribute? Here’s how:

1. Fork the repository.
2. Create a feature branch: `git checkout -b feat/feature-name`.
3. Make your changes and commit: `git commit -am 'Add new feature'`.
4. Push your branch: `git push origin feat/feature-name`.
5. Open a Pull Request on GitHub.

---

## **Acknowledgements**

Inspired by:

- [Dustin Brett's terminal portfolio](https://dustinbrett.com/)
- [ProtiumX's interactive terminal](https://protiumx.dev/)
- [m4tt72/terminal](https://github.com/m4tt72/terminal)

---

## **License**

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.

term-website

term-website Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

term-website

term-website Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README