Y-Terminal: A Geeky Web Terminal Browser Homepage for Developers

Are you a developer looking for a unique and efficient way to manage your browsing experience? Look no further than Y-Terminal, a web terminal command-line browser homepage designed with geeks in mind. This innovative project, developed by 程序员小 y, transforms your browser into a powerful command-line interface, allowing you to perform tasks quickly and efficiently.

What is Y-Terminal?

Y-Terminal is a special browser homepage that supports command-line input for operations. The goal is to help you efficiently complete all tasks within a web terminal (all in one). It's also a powerful web terminal component, allowing developers to customize their own web terminals and integrate various content.

If you're a programmer, you'll likely appreciate this tool. You can integrate music, games, or even your favorite content directly into your homepage.

Online Experience: Check out Y-Terminal to see it in action.

Key Features and Benefits

Y-Terminal offers a range of features that cater to both users and developers:

For Users:

• Efficiency: Perform tasks quickly without needing a mouse, such as searching across different platforms.
• Aesthetic Appeal: Enjoy a minimalist, cool, and geeky interface with a Linux-like feel.
• Ease of Use: Utilize shortcuts, help commands, and input prompts to minimize the learning curve.
• Customization: Personalize your homepage by changing the background and other settings.
• Learning Opportunity: Familiarize yourself with Linux commands and experience the fun of programming.

For Developers:

• Versatile Component: Use the feature-rich web terminal component independently or expand upon it.
• Extensibility: Develop and integrate your own custom commands.
• Educational Value: Learn about web terminal development and system design principles.
• Code Structure: Understand well-structured code directories and formatting conventions.

Getting Started with Y-Terminal

Here's how to get started in just one minute:

1. Visit the website: Y-Terminal

2. Enter commands within the website:

   • help: Displays all supported commands.
   • help [command name]: Queries the specific usage of a command (e.g., help search).
   • shortcut: Shows all available keyboard shortcuts.

##附属命令集 (Subsidiary Command Set)

To simplify the development of terminal browser commands, the project includes a command set that supports Y-Terminal browsers. It's ready to use, and users can choose to import it as needed for better support in browser customization.

👉 y-command

• Online documentation: https://y-command-doc.vercel.app
• npm Package Address: https://www.npmjs.com/package/y-command

Core Functionalities and Characteristics

Y-Terminal boasts a comprehensive set of features, including:

Web Terminal:

• Command history and quick execution of historical commands.
• Keyboard shortcuts.
• Screen clearing.
• Command input prompts.
• Tab-key command completion.
• Five built-in output states.
• Command folding/unfolding.
• Automatic generation of help manuals.
• Customizable configurations (e.g., background changes, prompt settings).

Supported Commands:

• search: Multi-platform search.
• goto: Quick website navigation.
• date: View current date.
• ping: Network diagnostics.
• time: Countdown timer.
• focus: Immersive mode.
• weather: Weather forecast.
• background: Change background.
• article: Juejin article recommendations.
• music: Music playback.
• moyu: Casual games.
• hot: Music charts.
• And more...

Tech Stack

Y-Terminal is built using a modern technology stack:

Frontend:

• Vue 3: A progressive JavaScript framework.
• Vite 2: A fast build tool.
• Ant Design Vue 3: A UI component library.
• Pinia 2: State management.
• TypeScript: Type control.
• Eslint: Code quality.
• Prettier: Code formatting.
• axios: For making HTTP requests.
• dayjs: For date manipulation.
• lodash: A utility library.
• getopts: Command-line argument parsing.

Backend:

• Node.js: A JavaScript runtime environment.
• Express: A web application framework.
• express-session: Middleware for managing sessions.
• Axios: HTTP client.
• NeteaseCloudMusicApi: API for NetEase Cloud Music.

Dependencies:

• Baidu Translate API
• Sina Wallpaper API

System Design and Architecture

Y-Terminal's architecture emphasizes openness and flexibility, using a plugin-like design that allows developers to easily define new commands. The system is divided into three core modules:

1. Micro-Terminal: Handles UI display and terminal interaction logic.
2. Command System: Connects the micro-terminal and command set, responsible for matching, parsing, and executing commands.
3. Command Set: A collection of commands with different functionalities.

Why Build a Custom Terminal?

The developer initially considered using xterm.js but found its documentation lacking and issues difficult to resolve. Creating a custom web terminal provided more control and a better fit for the project's goals. It also served as a valuable learning experience in Vue development and system design.

Contributing and Expanding Y-Terminal

Developers can easily add new commands by following these steps:

1. Create a new directory under commands with the command's English name.
2. Write a command definition file (e.g., xxxCommand.ts).
3. Add the new command to the commandList in commandRegister.

Conclusion

Y-Terminal is more than just a browser homepage; it's a powerful tool that can enhance your productivity and provide a unique browsing experience. Whether you're a developer, a Linux enthusiast, or simply someone who enjoys a streamlined interface, Y-Terminal offers something for everyone. Give it a try and experience the future of browsing!