{"id":25693683,"url":"https://github.com/tautvilas/termpage","last_synced_at":"2025-04-13T04:12:29.116Z","repository":{"id":86085844,"uuid":"202895684","full_name":"tautvilas/termpage","owner":"tautvilas","description":"Termpage allows you to create neat functional webpages that behave like a terminal","archived":false,"fork":false,"pushed_at":"2020-01-26T11:53:26.000Z","size":120,"stargazers_count":245,"open_issues_count":1,"forks_count":22,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-26T21:11:19.530Z","etag":null,"topics":["terminal","webpage"],"latest_commit_sha":null,"homepage":"","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/tautvilas.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":"2019-08-17T15:09:43.000Z","updated_at":"2025-02-27T07:18:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2a5fce2-784a-4b54-9a26-21e67ab1bf44","html_url":"https://github.com/tautvilas/termpage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tautvilas%2Ftermpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tautvilas%2Ftermpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tautvilas%2Ftermpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tautvilas%2Ftermpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tautvilas","download_url":"https://codeload.github.com/tautvilas/termpage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661721,"owners_count":21141451,"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":["terminal","webpage"],"created_at":"2025-02-24T23:46:45.679Z","updated_at":"2025-04-13T04:12:29.109Z","avatar_url":"https://github.com/tautvilas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Termpage 💻\n[![Version](https://img.shields.io/npm/v/termpage.svg)](https://www.npmjs.com/package/termpage)\n\nTermpage allows you to create neat webpages that behave like a terminal\n\n![](https://i.imgur.com/wqaqeNB.png)\n\n# Why Termpage?\nI wanted to build an effective web interface for my raspberry pi home server without thinking too much about design or ux.\n\n# Example usage\n\nYou can see usage demo in the [examples folder](https://tautvilas.github.io/termpage/example/index.html) or let a [cow tell your fortune](http://home.tautvilas.lt/#fortune)\n\nTo use termpage include the lib from CDN or install it from npm.\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/termpage@0.1.5/dist/termpage.min.js\" type=\"text/javascript\"\u003e\n\u003c/script\u003e\n```\n```npm install --save termpage```\n\nThe easiest way to get started is to drop this code in your index.html and implement your own terminal logic inside command processing function\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003etermpage@home\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/termpage@0.1.3/dist/termpage.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n  \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"termpage-window\" style=\"position:absolute;top:0;bottom:0;left:0;right:0\" id=\"window\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      Termpage.init(document.getElementById('window'), (command) =\u003e {\n        command = command.toLowerCase().trim();\n        if (command === 'home') {\n          return \"Welcome to termpage\";\n        } else {\n          return 'Command not found';\n        }\n      }, {\n        initialCommand: 'home'\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# API documentation\n\n### Termpage.init\n\n`Termpage.init(domElement, commandParser, options)`\n\n```javascript\ncommandParser = (input) =\u003e {\n  return response;\n}\n```\n\n`input` is user input command string\n\n`response` can be either string or object `{text: responseText, commands: ['menuCommand1', 'menuCommand']}`\n\nCommands array is used to display command suggestion interface bellow command input. This interface can make life easier for people with mobile devices because they can tap on commands instead of typing them.\n\nList of available options:\n\n```javascript\n  {\n    prompt: '$',\n    initialCommand: 'home',\n    autoFocus: true\n  },\n```\n\nResponses can be returned as **promises** for async commands.\n\n### Termpage.replace, Termpage.link and Termpage.color\n\n`Termpage.replace` together with `Termpage.link` and `Termpage.color` helpers can be used to format terminal output without losing monospace alignment between lines.\n\nThis code would format Cell1 as a html link and Cell2 as span with color\n```javascript\nTermpage.replace(\n`\n------------------\n| Cell1 | Cell2 |\n------------------\n`, {Cell1: Termpage.link('http://home.tautvilas.lt'), Cell2: termpage.color('red')})\n```\n\n# Styling\n\nThese default Termpage styles can be freely customized by overriding them with your own css file\n\n```css\n.termpage-window {\n  background-color: black;\n  border: 2px solid #888;\n  padding-top: 5px;\n}\n\n.termpage-window * {\n  font-family: \"Courier New\", Courier, monospace;\n  font-size: 16px;\n  color: #ddd;\n}\n\n.termpage-input {\n  background-color: #222;\n  color: #ddd;\n  caret-color: white;\n}\n\n.termpage-block, .termpage-input {\n  line-height: 20px;\n}\n\n.termpage-block {\n  padding-left: 5px;\n  padding-right: 5px;\n}\n\n.termpage-window a {\n  background-color: #888;\n  text-decoration: none;\n  cursor:pointer;\n}\n.termpage-window a:hover {\n  background-color: #333;\n}\n\n.termpage-menu {\n  background-color: #888;\n}\n\n.termpage-menu li:hover {\n  background-color: #666;\n  cursor: pointer;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftautvilas%2Ftermpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftautvilas%2Ftermpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftautvilas%2Ftermpage/lists"}