{"id":13474731,"url":"https://github.com/glorious-codes/glorious-demo","last_synced_at":"2026-01-12T05:39:32.794Z","repository":{"id":33114271,"uuid":"140993987","full_name":"glorious-codes/glorious-demo","owner":"glorious-codes","description":"The easiest way to demonstrate your code in action.","archived":false,"fork":false,"pushed_at":"2023-10-26T22:37:46.000Z","size":2141,"stargazers_count":3414,"open_issues_count":16,"forks_count":109,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-08-20T17:59:09.509Z","etag":null,"topics":["animation","code","demo","editor","mac","snippet","terminal"],"latest_commit_sha":null,"homepage":"https://gdemo.compilorama.com","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/glorious-codes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-15T03:00:25.000Z","updated_at":"2025-08-11T20:28:41.000Z","dependencies_parsed_at":"2022-07-11T09:17:22.666Z","dependency_job_id":"c0edce4f-3e5d-4698-a9fb-c395fc5aefd4","html_url":"https://github.com/glorious-codes/glorious-demo","commit_stats":null,"previous_names":["rafaelcamargo/glorious-demo"],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/glorious-codes/glorious-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glorious-codes%2Fglorious-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glorious-codes%2Fglorious-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glorious-codes%2Fglorious-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glorious-codes%2Fglorious-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glorious-codes","download_url":"https://codeload.github.com/glorious-codes/glorious-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glorious-codes%2Fglorious-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335226,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","code","demo","editor","mac","snippet","terminal"],"created_at":"2024-07-31T16:01:14.403Z","updated_at":"2026-01-12T05:39:32.774Z","avatar_url":"https://github.com/glorious-codes.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Tools","Uncategorized","code","terminal","animation","工具","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Uncategorized","调试"],"readme":"# Glorious Demo\n\n\u003e The easiest way to demonstrate your code in action.\n\n[![CircleCI](https://circleci.com/gh/glorious-codes/glorious-demo.svg?style=svg)](https://circleci.com/gh/glorious-codes/glorious-demo)\n[![Coverage Status](https://coveralls.io/repos/github/glorious-codes/glorious-demo/badge.svg?branch=master)](https://coveralls.io/github/glorious-codes/glorious-demo?branch=master)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"480\" src=\"https://user-images.githubusercontent.com/4738687/49405334-49505c80-f739-11e8-992e-32f4b6e18311.gif\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n```\nnpm install @glorious/demo --save\n```\n\n## Basic Usage\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"node_modules/@glorious/demo/dist/gdemo.min.css\"\u003e\n\u003cscript src=\"node_modules/@glorious/demo/dist/gdemo.min.js\"\u003e\u003c/script\u003e\n```\n\n*Note: If you're not into package management, load it from a third-party [CDN provider](https://github.com/rafaelcamargo/glorious-demo/wiki/CDN-Providers).*\n\n``` javascript\n// Constructor receives a selector that indicates\n// where to inject the demonstration in your page.\nconst demo = new GDemo('#container');\n\nconst code = `\nfunction greet(){\n  console.log(\"Hello World!\");\n}\n\ngreet();\n`\n\ndemo\n  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})\n  .write(code, {onCompleteDelay: 1500})\n  .openApp('terminal', {minHeight: '350px', promptString: '$'})\n  .command('node ./demo', {onCompleteDelay: 500})\n  .respond('Hello World!')\n  .command('')\n  .end();\n```\n\n*NOTE: Check [here](https://github.com/rafaelcamargo/glorious-demo/wiki/Syntax-highlight) to know how to use Prism to get your code highlighted.*\n\n### API\n\n#### `openApp`\nOpens or maximizes an open application.\n``` javascript\n/*\n** @applicationType: String [required]\n** @options: Object [optional]\n*/\n\n// Possible values are 'editor' or 'terminal'\nconst applicationType = 'terminal';\n\nconst openAppOptions = {\n  minHeight: '350px',\n  windowTitle: 'bash',\n  id: 'someId', // Identifies an application, in case of multiple instances\n  inanimate: true, // Turns off application's window animation\n  promptString: '~/my-project $', // For 'terminal' applications only\n  initialContent: 'Some text', // For 'editor' applications only\n  onCompleteDelay: 1000 // Delay before executing the next method\n}\n\ndemo.openApp(applicationType, openAppOptions).end();\n```\n\n#### `write`\nWrites some code in the open Editor application.\n``` javascript\n/*\n** @codeSample: String [required]\n** @options: Object [optional]\n*/\n\n// Tabs and line breaks will be preserved\nconst codeSample = `\nfunction sum(a, b) {\n  return a + b;\n}\n\nsum();\n`;\n\nconst writeOptions = {\n  id: 'someId', // Identifies an application, in case of multiple instances\n  onCompleteDelay: 500 // Delay before executing the next method\n}\n\ndemo.openApp('editor').write(codeSample, writeOptions).end();\n```\n\n#### `command`\nWrites some command in the open Terminal application.\n``` javascript\n/*\n** @command: String [required]\n** @options: Object [optional]\n*/\n\nconst command = 'npm install @glorious/demo --save';\n\n// Redefines prompt string for this and following commands\nconst promptString = '$'\n\n// Can optionally be an HTML string:\nconst promptString = '\u003cspan class=\"my-custom-class\"\u003e$\u003c/span\u003e'\n\nconst commandOptions = {\n  id: 'someId', // Identifies an application, in case of multiple instances\n  promptString, // Sets a custom string. Default: ~/demo $\n  onCompleteDelay: 500 // Delay before executing the next method\n}\n\ndemo.openApp('terminal').command(command, commandOptions).end();\n```\n\n#### `respond`\nShows some response on the open Terminal application.\n``` javascript\n/*\n** @response: String [required]\n** @options: Object [optional]\n*/\n\n// Line breaks will be preserved\nconst response = `\n+ @glorious/demo successfully installed!\n+ v0.1.0\n`;\n\n// Can optionally be an HTML string:\nconst response = `\n\u003cdiv\u003e\u003cspan class=\"my-custom-class\"\u003e+\u003c/span\u003e @glorious/demo successfully installed!\u003c/div\u003e\n\u003cdiv\u003e\u003cspan class=\"my-custom-class\"\u003e+\u003c/span\u003e v0.6.0\u003c/div\u003e\n`;\n\nconst respondOptions = {\n  id: 'someId', // Identifies an application, in case of multiple instances\n  onCompleteDelay: 500 // Delay before executing the next method\n}\n\ndemo.openApp('terminal').respond(response, respondOptions).end();\n```\n\n#### `end`\nIndicates the end of the demonstration. The method returns a promise in case you want to perform some action at the end of the demonstration.\n\n``` javascript\ndemo.openApp('terminal')\n    .command('node demo')\n    .respond('Hello World!')\n    .end()\n    .then(() =\u003e {\n      // Custom code to be performed at the end of the demostration goes here.\n    });\n```\n\n**IMPORTANT:** Do not forget to invoke it at the end of your demo. Otherwise, the demo won't be played.\n\n## Contributing\n\n1. Install [Node](https://nodejs.org/en/). Download the \"Recommend for Most Users\" version.\n\n2. Clone the repo:\n``` bash\ngit clone git@github.com:glorious-codes/glorious-demo.git\n```\n\n3. Go to the project directory:\n``` bash\ncd glorious-demo\n```\n\n4. Install the project dependencies:\n``` bash\nnpm install\n```\n\n5. Build the project:\n``` bash\nnpm run build\n```\n\n## Tests\n\nEnsure that all code that you have added is covered with unit tests:\n``` bash\nnpm run test -- --coverage\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglorious-codes%2Fglorious-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglorious-codes%2Fglorious-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglorious-codes%2Fglorious-demo/lists"}