30:T4b7,apiReference = html` ${md`## API Reference
### Lines An array of strings or objects that is the content of the Terminal lines. Terminal( ['echo hello world', '!output hello world'] ) #### Definition A line can either be: **String** - Just a string will default to a default **command** styling. **String with prefix** - If a string is prefixed with "**!command**", "**!output**", or "**!shell**", then that line will be given that styling. Used for quick and easy typing **Object** - Pass a JS object, with keys: |Key Name|Description|Required?|Example |-|-|-|- |line|String, content of the line|yes|{line:'cat output.txt'} |type|String, 'command', 'output', or 'shell'|no, default 'command'|{type:'output} |prefix|String, overwrite prefix for that line|no|{prefix:'~/project-space/'} |style|String, CSS styling for ONLY the current line|no|{style:'color:steelblue;'} #### Types - **command** - Default, meant to be any regular command on the Terminal (e.g. whoami, cat ..., node ..., etc.) - **output** - Output of a command - no prefix - **shell** - Indicates a programs in-terminal shell (e.g. Python shell, sqlite shell, node shell, etc.) `}`31:Ta6e,Terminal = (commands, options={}) => { let { w=width, terminalStyle='', commandPrefix='$ ', shellPrefix=' > ', outputPrefix='', commandStyle='$ ', shellStyle=' > ', outputStyle='', commandPrefixStyle='', shellPrefixStyle='', outputPrefixStyle='', } = options; console.log(commands) if(Array.isArray(commands)) { commands = commands.map(c=>{ if(typeof(c) === 'string') return c.split('\n') return c }).flat() } else { commands = commands.split('\n') } let randId = `terminal-id-${Math.floor(Math.random()*100)}-${Date.now()}`; return html`

${commands.map( (c,i) => { let type = 'command'; let line = c.line || c; let style = c.style || ''; if(c.type) // if command obj was passed type = c.type; else { let res = /!(command|output|shell).*$/g.exec(line) if (res) { // used something like '!command cat example.txt' type = res[1] line = line.slice( type.length+1) } } return `${line}
`; })}

` }32:[] 2e:{"title":"Terminal","cells":[{"id":0,"value":"md`# Terminal\n\nSimple UI Terminal for Observable usage.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"{ \n let t = Terminal([\n'whoami',\n'!outputasg017',\n'ls',\n{line: '!output Downloads/ Pictures/ Projects/ secrets.txt ', style:'color:#0f0; font-weight:800;'},\n'cat secrets.txt',\n'!output',\n'!outputDONT LOOK MY PASSWORD IS HERE',\n'!outputOH NO HERE IT IS',\n{type:'output', line:'hunter2', style:'background-color:#ff8;color:black;padding:2px;'},\n'!output',\n'!outputEND OF FILE',\n'cd Projects/',\n{prefix:'~/Projects/ 🦒👉 ', line:'pwd'},\n'!output/home/asg017/Projects/'\n \n], {commandPrefix:'🦒👉 ', w:width/2+'px'})\n \n // Making it Canvas for nicer thumbnail\n document.body.appendChild(t)\n return html2canvas(t)\n }\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"md`\n## Tables of Contents\n- [Importing](#importing)\n- [Usage](#usage)\n- [API Reference](#apiReference)\n- [Roadmap](#roadmap)\n- [Definition](#definition)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"importing = md`## Importing\n\n\\`\\`\\` javascript\nimport {Terminal} from '@asg017/terminal'\n\\`\\`\\`\n\nPut it in your [Toolbox](/@asg017/toolbox) as well!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"usage = md`## Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`\n\\`Terminal\\` is a function that takes two parameters:\n\n- \\`lines\\` - Array of Strings or objects.\n- \\`options\\` - Object of options to style/customize the Terminal.\n\nQuick examples:\n\n\\`\\`\\` javascript\nTerminal(['echo \"hello world!\"', { type:'output', line:'hello world!'}])\n\\`\\`\\`\n\n${Terminal(['echo \"hello world!\"', { type:'output', line:'hello world!'}])}\n\n\\`\\`\\` javascript\nTerminal(['echo \"This has a different prefix!\"'], {commandPrefix: '👉'})\n\\`\\`\\`\n${Terminal(['echo \"This has a different prefix!\"'], {commandPrefix: '👉 '})}\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`\nAlso, instead of defining an object for each line just to get different types, \nyou can also just prepend **!command**, **!output**, or **!shell** to a string:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"Terminal(\n [ \n '!command cat password.txt', \n '!output hunter2', \n '!command python', \n '!shell print(\"hi\")', \n '!outputhi',\n '!shell',\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`\n### Options\n\n\\`options\\` is an optional parameter to Terminal that'll give you more control over\nstyling and other features of your Terminal.\n\nHere are the allowed values of \\`options\\`:\n\n|Value|Description|default|Example\n|-|-|-|-\n|w|Width of the Terminal|width|{width:'33%'}\n|terminalStyle|CSS styling for the Terminal, overwrites old values|check definition below|{terminalStyle:'background-color:red'}\n|commandPrefix|String, prefix for all \\`command\\` lines|$ |{commandPrefix:'👉'}\n|outputPrefix|String, prefix for all \\`output\\` lines|none|{outputPrefix:'\\\\t\\\\t'}\n|shellPrefix|String, prefix for all \\`shell\\` lines|' > '|{commandPrefix:' >>> '}\n|commandStyle, outputStyle, shellStyle|CSS styling for all specified lines, overwrites old values|check definition below|{shellStyle:'color:red'}\n|commandPrefixStyle, outputPrefixStyle, shellPrefixStyle|CSS Styling specifically for given type's prefix|check definition below|{shellStylePrefix:'font-weight:900;'}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"roadmap = md`## Roadmap\n\n

\n\n

Ideas

\n${md`\n- Include button to copy/paste command lines\n- minimize output\n- Better dev ui, e.g.: \\`{line:'ls', output:\\`a.txt\\nb.pdf \\`}\\`\n- In-line terminal: something like \n\n$ this\n`}\n

In Progress

\n${md`\n- Include more documentation\n`}\n

Bugs

\n${md`\n- a line prefix and Terminal-scoped commandPrefix or shellPrefix will clash, can't do both\n`}\n

\n\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"definition = md`## Definition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"a = ['oneline', 'another oneline', `line #1\nline#2,\nline#3`, 'line#1a\\nline#2a']","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"a.map(s=>s.split('\\n')).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"Terminal(`cat dog.txt\n!outputbark bark`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"Array.isArray(`asdfafds\nasdfasdf`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"import {signOff} from '@asg017/toolbox'","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"html2canvas = require('https://bundle.run/html2canvas@1.0.0-alpha.12')","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"signOff()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}