Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/micahkepe/term-website
A minimal, configurable terminal website. 🖥️
https://github.com/micahkepe/term-website
open-source portfolio terminal terminal-emulator terminal-ui typescript web-terminal
Last synced: 2 days ago
JSON representation
A minimal, configurable terminal website. 🖥️
- Host: GitHub
- URL: https://github.com/micahkepe/term-website
- Owner: micahkepe
- License: mit
- Created: 2024-12-27T03:57:59.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-02-02T21:01:35.000Z (18 days ago)
- Last Synced: 2025-02-17T03:35:11.243Z (4 days ago)
- Topics: open-source, portfolio, terminal, terminal-emulator, terminal-ui, typescript, web-terminal
- Language: TypeScript
- Homepage: https://term.micahkepe.com/
- Size: 4.15 MB
- Stars: 34
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [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. 🎉
---
## **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.