archbtw ~ web based terminal simulator banner

archbtw ~ web based terminal simulator

7 devlogs
12h 19m 2s

a web based terminal simulator which has its UI and UX copied from my old ‘kitty’ config along with my current git bash setup.. this is running on arch, btw ;)

This project uses AI

used claude to help me with the command dispatcher function.

Demo Repository

Loading README...

damaker

Shipped this project!

i have built a web based terminal simulator using html css and javascript which is supposedly running on arch linux, BTW hehe. i have learned a lot about objects and object properties in js while doing this project. its quite astonishing how a dark background screen with colorful monospace text with input makes the screen feel like a real terminal.

for the commands i have used a basic object which has the commands and their functions stored as key value method pairs.

in my opinion, the tree and hollywood commands were quite challlenging to add. tried adding grep command but messed up so removed it. i love how this has turned out to be.

absolutely will recommend anyone learning js to try and build a basic web based terminal simulator to learn js in a fun (and kinda hard) way doing this project.

damaker

new commands like tree, hollywood,etc and bug fixes

final devlog i guess :D

-first of all, this update took a lot of time due to the complexity of the logic behind these commands but i absolutley love how this has turned out to be. been working on this app continously for the past week and finally im getting to see it as a REPLICA of my kitty terminal of my arch linux rice.

changelogs..

  • clicking CTRL + C will fire up new line.

tree

  • tree shows the visual hierarchy of the files in the current dir. i have used the concept of recursion to make the tree commmand work and took a lil bit help from claude too. for the symbols shown i have used the basic dashes and less than greater than symbols as i dont want to spend time searcihng for symbols in char map tool of windows. i love how this command has turned out to be, folders and files are colored differently. it doesnot show the hidden files cause, idk why lol

hollywood

  • storytimee: i love the hollywood package in the aur. i used to do the hollywood command in my terminal to get the hacky hacker vibes so i HAD to add this command to this terminal sim.
  • AND YES< FINALLY IVE ADDED IT… this took a while. it basically prints random characters and texts into the screen with two colors changing per few lines.

uname, exit

  • uname command shows basic info of the os and kernel in use so it basically prints the info.
  • exit comand is added so that you can MAYBE QUIT THE TERMINAL, who knows!!! what if there is a full on OS which shows up when u exit the terminal.

bug fixes:

  • the touch command did not allow hidden files so i have fixed it. now if u do touch .abc.txt then it makes abc.txt which cant be seen from ls if you dont use the -a flag.
  • (tried to add grep command and spent quite sometime on it but it started to mess this simulator so i rejected that idea :( )
  • rm also did not allow to remove hidden files which i have fixed.
  • cant write to files in ts versn, will fix in future.
Attachment
Attachment
Attachment
0
damaker

a lot of changes to the virtual (fake) file system

in this update i have introduced a lot of changes to the file system. during this update i learned a lot about working with objects in js. i have used an object for file system and another for the files, for the subcommands or flags like -a,-r , i hsve used basic parsing and checking for the flag and running the code if the flag is called. a great learning opportunity. this sim lookin kinda real tho.
summary of the changes:

cat

  • i have added the cat command which is used to view the contents of a file.

ls -a

  • i have added the -a subcommand to ls so that hidden files can be seen. this will surely help me improve the lore.

spent a lot of time on the commands given below:

i have added a lot of checks and spent A LOT OF TIME on the mkdir, touch and rm commands so that this terminal sim feels a lot like the real terminal.

mkdir -> create new directory

rm -> remove a file

  • inorder to remove a directory the -r subcommand can be added to the rm command.

touch -> create new EMPTY file

  • if the file exists already and touch command is ran to it then nothing happens .. it doesnot overwrite the original file..
Attachment
Attachment
Attachment
Attachment
0
damaker

virtual file system started and other new commands too

  • the virtual (fake) file system is basically an object which has its keys set to the directory names and value set to the directories and files they contain.

ls

  • this is same as the ls command in the terminal, it lists the files under the current working directory (cwd).

pwd

  • this prints the current working directory. used some basic printing logic so that this works even when the user is in any other directory than the root ~ .
  • the ~ in the terminal line is functional now, it shows the current working directory like real terminals.

cd

  • this changes the current directory to the specified dir. it is a basic command. but, in my code it basically changes the index of the file system object hehe. if it works, it works thumbs-up

future updates?

  • in the next update i will try to add these stuff:
    -> i will add cat command which will make the files in the directories readable. this will add a new dimension to the game, a lore ;).
    -> i might add ls -al which basically lists the hidden files in the directories. this can add a lot to the lore im trying to make.
    -> other basic filesystem commands like mkdir, touch, rm.
Attachment
Attachment
Attachment
0
damaker

tab completion, command history and date command added dance

  • i have added tab completion. it basically completes the commands when u type a character of it and press tab, e.g. if i type e and press tab then it autocompletes it into echo. there’s a catch, if there are more than one commands with the same characters like neofetch and name then it only autocompletes when the alphabet after the common one has been typed. not sure how to fix this, will prob fix in future updates.
  • arrow key history has been added too. the history of previous commands/input can be tracked and checked using the up or down arrow key like how it can be done in a lot of terminals. keyboard shortcuts other than copy ,paste ,undo ,select all,cut, zoomin, zoomout have also been blocked to give the terminal vibe hehe.
  • date command basically shows the date and time on the time of execution of the command.. this command is also kinda mandatory for all terminals lol.

will add the major commands like ls,cd,mkdir etc basically a whole virtual file system (fake) in the next update. long way to go!

Attachment
0
damaker

neofetch go brrr

  • add neofetch finally!! this took a lot of time. it shows the system info along with a cool ascii art of arch linux logo (copied the exact arch linux art directly from neofetch manually, tried using ai but didnot get any fruitful results.)
  • the site looks awesome with neofetch. it can be ran with the neofetch command. the system info shown is false, obv. im trying to make this as fun as i can.
  • neofetch runs everytime the site is opened, with different colors of the logo and titles each time.
Attachment
0
damaker

ui improved + new commands

  • updated the CSS to make the term look like git bash, git bash is my only inspo for this project hehe.
  • added two new commands: help and whoami. this update did not take much time, except for the css part.
  • adding new commands is fairly simple. it is as simple as adding new key value pairs in an object. the command name is the key and the commands function is the value. thats it.

future updates?

  • im thinking of adding a way to see command history by using arrow keys. it is a basic feature and is in almost all of the terminals out there, so this is a must have feature.
  • tab completion also seems to be in a lot of terminals. e.g. if i type cat ab and press tab and a file named abc.txt is present then the command automatically auto completes itself with the abc.txt. not sure how do add it but will add it.
  • i want to add a neofetch command too, maybe show neofetch at startup as thats MUST have. hehe /j
Attachment
Attachment
0
damaker

first steps :)

  • i have made a basic html only version of this web terminal. i have added two commands till now, clear and echo. clear clears the screen. i may change its name to cls in the next update, cause why not :P and the echo command basically repeats what you type after it like echo hello returns hello.
  • if the user types anything except those commands then the output is ‘command not found’.

future updates

  • im trying to go with the UI and the feel of the git bash terminal cause it feels soo home. for that i will have to work on the css for it. also, im planning to make this site a sort of go to platform for learning linux commands and having fun tweaking them without having to install terminal ( ikr its pointless as cmd is alr there in windows, but whatever -_-
Attachment
0