{"id":16774200,"url":"https://github.com/dragonwocky/termy","last_synced_at":"2025-04-10T20:06:20.558Z","repository":{"id":133320504,"uuid":"115235616","full_name":"dragonwocky/termy","owner":"dragonwocky","description":"An easily customisable web terminal built with JavaScript.","archived":false,"fork":false,"pushed_at":"2020-05-18T09:46:59.000Z","size":753,"stargazers_count":35,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T17:52:35.410Z","etag":null,"topics":["css","customisable","html","javascript","terminal"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dragonwocky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-24T02:49:59.000Z","updated_at":"2024-12-18T09:46:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"aa92b654-06e4-4547-a6ac-1fd292308ab3","html_url":"https://github.com/dragonwocky/termy","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonwocky%2Ftermy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonwocky%2Ftermy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonwocky%2Ftermy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonwocky%2Ftermy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dragonwocky","download_url":"https://codeload.github.com/dragonwocky/termy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248288341,"owners_count":21078900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","customisable","html","javascript","terminal"],"created_at":"2024-10-13T06:48:24.420Z","updated_at":"2025-04-10T20:06:20.547Z","avatar_url":"https://github.com/dragonwocky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Termy.js\r\n*An easily customisable web terminal interface built with JavaScript for menus, tutorials, games, and more!*\r\n\r\n![animated demo](termy.gif)\r\n\r\n### Usage\r\n----------\r\nTo use Termy, simply download `termy-1.0.min.js` (found in the `dist` folder) and the `dependencies` folder with all its contents (`jquery-3.3.1.min.js`, `typed-2.0.6.min.js` and `autosize-4.0.0.min.js`) - then include the JS files in the \u003chead\u003e element of your file, and you're good to go:\r\n```html\r\n\u003cscript src=\"dependencies/jquery-3.3.1.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"dependencies/typed-2.0.6.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"dependencies/autosize-4.0.0.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"termy-1.0.min.js\"\u003e\u003c/script\u003e\r\n```\r\n(Yes, of course you can optionally use a CDN instead of the provided [jQuery](http://jquery.com/), [typed.js](https://mattboldt.com/typed.js/) and [Autosize](http://www.jacklmoore.com/autosize/) files!)\r\n\r\nNow that you've got the scripts, you can customise it as you like. If, instead of filling the entire page, you wanted Termy to be in a single element of the page, give that element the `termy` class, like so:\r\n```html\r\n\u003cdiv class=\"termy\"\u003e\u003c/div\u003e\r\n```\r\n\r\nThere are also 3 settings in the `termy-1.0.min.js` file you can modify. Open up the file, and you'll see that there is a `custom` object up the top, with the minified Termy beneath. Within this object, there is another, `settings`, object. There, you have 3 options (currently set to the default settings) - you can take advantage of them, or if you don't want to use them, completely remove the `settings` object:\r\n```js\r\nsettings: {\r\n  // user and host names\r\n  // below settings will set it to visitor@site.com\r\n  // if the window hostname is undefined, it'll show as visitor@example.domain\r\n  user: 'visitor',\r\n  host: window.location.hostname || 'example.domain',\r\n  // colour of the ~$\r\n  promptColour: '#00f',\r\n},\r\n```\r\n\r\n(You'll see that below the settings object is the `commands` object - see the [adding custom commands](#adding-custom-commands) section for more info on that.)\r\n\r\n\r\n### Default Commands\r\n---------------------\r\nThe core commands of Termy are `help - display all available commands`, `man - show detailed information about commands`, `clear - remove all previously run commands from the terminal` and `exit - logs out, to execute commands afterwards the page must be reloaded`.\r\n\r\nThere are also 3 \"custom commands\" included to serve as examples: `time - display the current time`, `8ball - gives a random response to the input` and `google - google the command arguments`.\r\n\r\n(Hey! I've added a little easter egg to the custom commands - see what you can do with it!)\r\n\r\n### Adding Custom Commands\r\n---------------------------\r\nAdding your own commands to Termy is simple. Open up the `termy-1.0.min.js` file and go the the `commands` object (it's inside the `custom` object up the top). You'll see that there are a few already there - those are the ones mentioned in the [default commands](#default-commands) section. Here's an example command:\r\n```js\r\n// command name - STRING\r\nhello: {\r\n  // command description - STRING\r\n  description: 'says hello.',\r\n  // arguments to show as usage - STRING\r\n  usage: '\u0026lt;required - my name\u0026gt; [optional - your name]',\r\n  // extra information to show when the man command is run - STRING\r\n  info: 'Just an example command.',\r\n  // whether or not to hide the command in the help menu - BOOLEEN\r\n  hidden: false,\r\n  // whether or not the command uses Typed.js and prepares the prompt for\r\n  // the next command itself - BOOLEEN\r\n  typed: false,\r\n  // run - FUNCTION\r\n  run: (args) =\u003e {\r\n    if (args[0]) {\r\n      if (args[0] === 'Termy') {\r\n        if (args[1]) {\r\n          $(`${container} .${commandCount - 1}`).append(`Hello ${args[1]}!`);\r\n        } else {\r\n          $(`${container} .${commandCount - 1}`).append('Hello!');\r\n        }\r\n      } else {\r\n        $(`${container} .${commandCount - 1}`).append('That\\'s not my name!');\r\n      }\r\n    } else {\r\n      $(`${container} .${commandCount - 1}`).append('\u003cspan style=\"color: #f00\"\u003eERROR\u003c/span\u003e: this '\r\n        + 'command should be executed as \u003ci\u003ehello \u0026lt;required - my name\u0026gt; [optional - your name]\u003c/i\u003e');\r\n    }\r\n  }\r\n},\r\n```\r\nJust like that, you've added a command called `hello`:\r\n\r\n- when you run `hello`, it will reply `ERROR: this command should be executed as hello \u003crequired - my name\u003e [optional - your name]`,\r\n\r\n- when you run `hello someone`, it will reply `That's not my name!`,\r\n\r\n- when you run `hello Termy`, it will reply `Hello!`,\r\n\r\n- and when you run `hello Termy Me`, it will reply `Hello Me!`.\r\n\r\n`description`, `usage` and `info` are shown by the `help` and `man` commands.\r\n\r\nIf `hidden` is set to true, then the command will be overlooked by the `help` and `man` commands.\r\n\r\nIf `typed` is set to `true`, then you must handle preparing the prompt for the next command yourself (neccessary if you use Typed.js in the command). This is done like so:\r\n\r\nTo animate the appearance of text, Termy uses Typed.js. So that all text appears and stays in the right place in the terminal, this is how it should be run:\r\n```js\r\n// Just an example variable - change it to whatever you wish, but make sure to change it in the strings setting below too.\r\nvar string = 'whatever it is you want to type'; \r\nnew Typed('.typed', {\r\n  strings: [string],\r\n  typeSpeed: -100,\r\n  showCursor: false,\r\n  onComplete: function (self) {\r\n    $('.typed').empty();\r\n    $('#' + (commandCount - 1)).append(string);\r\n    command = '';\r\n    displayPrefix();\r\n  }\r\n});\r\n```\r\nNow that the command has been registered with Termy, adding functionality is easy. Just scroll to the bottom of the page to the custom commands section - where you can see `time`, `8ball` and `google` already are. To add functionality to your own command, just create a function named the name of your command.\r\n```\r\n// Adds functionality for the command named dosomething\r\nfunction dosomething(args){ // args argument contains all words input after.\r\n  $('#' + (commandCount - 1)).append('something'); // Adds the word something to the terminal.\r\n}\r\n```\r\nWhen adding text to the terminal, always either use the Typed.js method demonstrated above, or append text to the `$('#' + (commandCount - 1)` element like it is done here.\r\n\r\n### Other Details\r\n------------------\r\nTermy was originally made as a 2017 Christmas gift to the community, inspired by https://host01.th3f.de/ during some random browsing. It is released under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragonwocky%2Ftermy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdragonwocky%2Ftermy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragonwocky%2Ftermy/lists"}