{"_id":"@duckdoc/termynal","_rev":"2-05bc6bba2390daeaab358d7b05a61df7","name":"@duckdoc/termynal","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@duckdoc/termynal","version":"1.0.0","description":"Typing animations are nothing new and Termynal isn't particularly revolutionary. I wrote it because I needed a modern and lightweight version with minimal JavaScript and without messy, nested `setTimeout` calls. Most of the existing libraries rely on Java","main":"termynal.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"MIT","gitHead":"9b301892db6f8d403abfce7adf65888dffed72ea","_id":"@duckdoc/termynal@1.0.0","_nodeVersion":"11.14.0","_npmVersion":"6.10.1","dist":{"integrity":"sha512-ZJHPyacpbhRZAacxxXQA/ZkF964/5JMVyk0YUKilkQFh4v7oZInbZxA91Ot2Qxd23qoNJ5JkNehqcRiv+zRhKA==","shasum":"f02604a6864edf8ff83aeb43fa8c1c942d0aa88e","tarball":"https://registry.npmjs.org/@duckdoc/termynal/-/termynal-1.0.0.tgz","fileCount":9,"unpackedSize":30175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduSrgCRA9TVsSAnZWagAAaOsQAJfGx7TH6qDtE/dzZLRX\nsgfPHOAy4c+kc8HtXZU8rDulkyru7YgVsvgchxPT9RYLNkjPaVstiC+HsRg5\n1ieN8+e17k134WGjBdcULnNMAafviWl2qbEy8CXkDHvdk2N3V2gdp/9mp9NY\nIqjBDvfR3/oNOwD9E23Q9kWwgcbD/INM1C83m3rDCqTaGn9IZI5g7xpLHOO1\n26UCg0Nix+xBCl/LP8XSWPrmE2zp2erGsusCcI9NyXtl2Q+XFrE/r0As57+t\nL4933LmxsHabb64BPh7VGnOPJzAY+7A2gcvpGcrAgMq9HC3Bs2pr/dlzI+2M\n0s5rPEcJwVR49H5c88RjVNKFKjZiKknC/c7WgcjLWnHqoXIv4C5nEEon/+Cq\n8q6EYZgIHK2i82EKwIPMlTzgpGAM8OWpRBH+egUugcYUCWC2LEApWQ+YN8mD\n8aq05M7P/9eYk4gpxdEjJhXoAKJ4SHZmGxMZjHLTlAa75UHpdFjAVLLhewR3\n4mjK6S1iIz19mxJVvbWT9GmJgOmSIqCGyF1UkUO7z7DgBvane6ITzcpcrBFL\nNadouL8/ghFTl1/uExpOxpstjXUHSSuc1ThHkaVNOmaQTIp3Ou/UlXZZ6MJS\nq5HERqQc/1Pca08rD+/nYsYHU/XZ5B635MqT280S9ummBuhcnkL5rKXExHtC\n7yGo\r\n=X6pv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3Uj/kpxRL1803H/lKZM+K24di5XQgMR6pnhzUMQiWYAIgSIlH2rG8N89GPX8KkVPhYUWkuL9AA1wm/CQW4H6Lbr0="}]},"maintainers":[{"name":"inlife","email":"vladgritsenko@gmail.com"}],"_npmUser":{"name":"inlife","email":"vladgritsenko@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/termynal_1.0.0_1572416224522_0.37826937851152653"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-30T06:17:04.299Z","1.0.0":"2019-10-30T06:17:04.687Z","modified":"2022-04-05T06:06:38.630Z"},"maintainers":[{"email":"zaklaus@outlook.com","name":"zaklaus"},{"email":"vladgritsenko@gmail.com","name":"inlife"}],"description":"Typing animations are nothing new and Termynal isn't particularly revolutionary. I wrote it because I needed a modern and lightweight version with minimal JavaScript and without messy, nested `setTimeout` calls. Most of the existing libraries rely on Java","license":"MIT","readme":"# termynal.js: A lightweight and modern animated terminal window\n\nTyping animations are nothing new and Termynal isn't particularly revolutionary. I wrote it because I needed a modern and lightweight version with minimal JavaScript and without messy, nested `setTimeout` calls. Most of the existing libraries rely on JavaScript for both the rendering, styling and animation, or even require jQuery. This is inconvenient, especially if you're using the animation as part of your software's documentation. If a user has JavaScript disabled, they will only see a blank window.\n\nTermynal uses **`async` and `await`**, which is now [supported](http://caniuse.com/#feat=async-functions) pretty much across all major browsers. Termynal lets you write all input and output in **plain HTML**, and all styling in **plain CSS**. Non-JS users will still see the **complete code**, just no animation. The width and height of the terminal window is read off the original container. This means you won't have to worry about sizing or layout reflows. Termynal also comes with a **flexible HTML API**, so you can use it without having to write a single line of JavaScript yourself.\n\n\n\n\n\n\n## Examples\n\n* **Simple example:** [CodePen demo](https://codepen.io/ines/full/MoaRYM/), [`example.html`](example.html)\n* **Custom example:** [CodePen demo](https://codepen.io/ines/pen/mwegrX), [`example2.html`](example2.html)\n\n## Usage\n\nFirst, you need to create a container. Each container should have a unique class or ID that tells Termynal where to find the lines to animate. Terminal will find the lines via their `data-ty` attribute and will then animate their text content. Apart from that, it won't mess with your markup – so you're free to add additional styling and attributes.\n\n```html\n
\n```\n\nWhen you include [`termynal.js`](termynal.js), you can specify the container(s) as the `data-termynal-container` attribute. To initialise Termynal for more than one container, simply add the selectors separated by a `|`, for example `#termynal1|#termynal2`.\n\n```html\n\n```\n\nYou also need to include the stylesheet, [`termynal.css`](termynal.css) in your site's ``:\n\n```html\n\n```\n\nThat's it!\n\n### Customising Termynal\n\nOn each container, you can specify a number of settings as data attributes, and overwrite the animation delay after a line on each individual element.\n\n```html\n
\n pip install spacy\n Installing spaCy...\n
\n```\n\nIf you don't want to use the HTML API, you can also initialise Termynal in JavaScript. The constructor takes two arguments: the query selector of the container, and an optional object of settings.\n\n```javascript\nvar termynal = new Termynal('#termynal', { startDelay: 600 })\n```\n\nThe following settings are available:\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `prefix` | string | `ty` | Prefix to use for data attributes. |\n| `startDelay` | number | `600` | Delay before animation, in ms. |\n| `typeDelay` | number | `90` | Delay between each typed character, in ms. |\n| `lineDelay` | number | `1500` | Delay between each line, in ms. |\n| `progressLength` | number | `40` | Number of characters displayed as progress bar. |\n| `progressChar` | string | `'█'` | Character to use for progress bar. |\n| `cursor` | string | `'▋'` | Character to use for cursor. |\n| `noInit` | boolean | `false` | Don't initialise the animation on load. This means you can call `Termynal.init()` yourself whenever and however you want.\n| `lineData` | Object[] | `null` | [Dynamically load](#dynamically-loading-lines) lines at instantiation.\n\n## Prompts and animations\n\nEach `` within the container represents a line of code. You can customise the way it's rendered and animated via its data attributes. To be rendered by Termynal, each line needs at least an empty `data-ty` attribute.\n\n### `data-ty`: display and animation style\n\n| Value | Description | Example |\n| --- | --- | --- |\n| - | Simple output, no typing. | `Successfuly installed spacy` |\n| `input` | Simple prompt with user input and cursor | `pip install spacy` |\n| `progress` | Animated progress bar | `` |\n\n### `data-ty-prompt`: prompt style\n\nThe prompt style specifies the characters that are displayed before each line, for example, to indicate command line inputs or interpreters (like `>>>` for Python). By default, Termynal displays a `$` before each user input line.\n\n| Attributes | Output |\n| --- | --- |\n| `data-ty=\"input\"` | `$ hello world` |\n| `data-ty=\"input\" data-ty-prompt=\"~\"` | `~ hello world` |\n| `data-ty=\"input\" data-ty-prompt=\">>>\"` | `>>> hello world` |\n| `data-ty=\"input\" data-ty-prompt=\">\"` | `> hello world` |\n| `data-ty=\"input\" data-ty-prompt=\"▲\"` | `▲ hello world` |\n| `data-ty=\"input\" data-ty-prompt=\"(.env)\"` | `(.env) hello world` |\n| `data-ty=\"input\" data-ty-prompt=\"~/user >\"` | `~/user > hello world` |\n\nYou can also use custom prompts for non-animated output.\n\nTo make prompts easy to customise and style, they are defined as `:before` pseudo-elements. Pseudo-elements are not selectable, so the user can copy-paste the commands and won't have to worry about stray `$` or `>>>` characters.\n\nYou can change the style by customising the elements in [termynal.css](terminal.css), or add your own rules for specific elements only.\n\n```css\n/* Default style of prompts */\n[data-ty=\"input\"]:before,\n[data-ty-prompt]:before {\n margin-right: 0.75em;\n color: var(--color-text-subtle);\n}\n\n/* Make only >>> prompt red */\n[data-ty-prompt=\">>>\"]:before {\n color: red;\n}\n```\n\n### `data-ty-progressPercent`: set max percent of progress\n\n| Attributes | Output |\n| --- | --- |\n| `data-ty=\"progress\"` | `████████████████████████████████████████ 100%` |\n| `data-ty=\"progress\" data-ty-progressPercent=\"81\"` | `█████████████████████████████████ 83%` |\n\n### `data-ty-cursor`: display a cursor\n\nEach line set to `data-ty=\"input\"` will be rendered with an animated cursor. Termynal does this by adding a `data-ty-cursor` attribute, and removing it when the line animation has completed (after the delay specified as `lineDelay`). The value of the `data-ty-cursor` sets the cursor style – by default, a small unicode block is used: `▋`. You can set a custom cursor character in the global settings, or overwrite it on a particular line:\n\n```html\n
\n Animated with cursor |\n Animated with cursor ▋\n
\n```\n\nYou can also change the cursor style and animation in [`termynal.css`](termynal.css):\n\n```css\n[data-ty-cursor]:after {\n content: attr(data-ty-cursor);\n font-family: monospace;\n margin-left: 0.5em;\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}\n```\n\n### Dynamically loading lines\n\nLines can be dynamically loaded by passing an array of line data objects, using the [attribute suffixes](#data-ty-prompt-prompt-style), as a property of the [settings](#customising-termynal) object.\n\n```javascript\nvar termynal = new Termynal('#termynal',\n {\n lineData: [\n { type: 'input', value: 'pip install spacy' },\n { value: 'Are you sure you want to install \\'spaCy\\'?' },\n { type: 'input', typeDelay: 1000, prompt: '(y/n)', value: 'y' },\n { delay: 1000, value: 'Installing spaCy...' }\n ]\n }\n)\n```","readmeFilename":"README.md"}