Photon Terminal CLI
Photon Terminal CLI (Command Line Interface) is the easiest way to add Photon Terminal to your project.
Introduction
Photon Terminal is a CLI formatting tool for web-developers that structures output in a similar way to React elements. Photon Terminal stands out because it lets you style CLI output with CSS-rules.
Getting started
Install
npm i -D photon-terminal
Add a new element
Elements are individual components that can be styled with rules similar to CSS.
import Photon from 'photon-terminal'
const greeting = new Photon.Element('p')
greeting.content = 'Hello World!'
greeting.print()
// Prints 'Hello World!' to the CLI
or
import Photon from 'photon-terminal'
const greeting = new Photon.Element({
tag: 'p',
content: 'Hello World!',
})
greeting.print()
// Prints 'Hello World!' to the CLI
Apply styling to element
import Photon from 'photon-terminal'
const classSuccess = new Photon.Style({
backgroundColor: 'green',
color: 'black',
margin: 2,
textDecoration: 'strong',
textTransform: 'uppercase',
}).rules
const status = new Photon.Element({
tag: 'p',
content: 'Passing',
})
status.style = classSuccess
status.print()
Photon.Element.style
Background color
Sets the text background color.
backgroundColor: 'black' | 'blue' | 'cyan' | 'green' | 'magenta' | 'red' | 'white' | 'yellow'
Automatically sets paddingLeft
and paddingRight
to 1
. This can be prevented by setting padding values to 0
or 'none'
.
Color
Sets the text color.
color: 'black' | 'blue' | 'cyan' | 'green' | 'magenta' | 'red' | 'white' | 'yellow'
Margin
Sets the spacing around the Element content.
margin: <number> | 'none'
Sets all sides to the same value. Set individual sides with:
marginBottom: <number> | 'none'
marginLeft: <number> | 'none'
marginRight: <number> | 'none'
marginTop: <number> | 'none'
Padding
Sets the spacing around the output text. Used with backgroundColor
to prevent text from touching the background walls.
paddingLeft: <number> | 'none'
paddingRight: <number> | 'none'
Text decoration
Sets the visual appearance of text.
textDecoration: 'italic' | 'strong' | 'underline'
Text transform
Transforms the text output.
textTransform: 'capitalize' | 'lowercase' | 'uppercase'
Width
Sets the total width of the output.
width: <number>
Upcoming features
These are the planned upcoming features.
Elements
<div>
-
<h>
- represents a heading -
<ol>
<li>
<strong>
-
<table>
<tbody>
<td>
<th>
<thead>
<tr>
-
<ul>
<li>
CSS properties
align-items: 'center' | 'end' | 'start'
border-collapse: 'collapse' | 'separate'
border-color: <color>
border-style: 'dotted' | 'solid'
display: 'flex'
flex-direction: 'column' | 'row'
height: <number>
justify-content: 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'start'
list-style-type: 'disc' | 'circle' | 'none' | 'square'
text-align: 'center' | 'justify' | 'left' | 'right'