term-website 💻

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

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

2. Install Dependencies:

   npm install
   

3. Run Locally:

   npm run dev
   

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

4. Build for Production:

   npm run build
   

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

   To preview the production build locally:

   npm run preview
   

5. Optional: Deploy to GitHub Pages:

   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:

Documentation

Full documentation is autogenerated via tsdoc. To generate it:

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
• ProtiumX's interactive terminal
• m4tt72/terminal

License

This project is licensed under the MIT License. See the LICENSE file for details.