Hyper InkBadge
HyperInkBadge is a badge plugin for Hyper.app. It shows you a badge telling you the current session by ink color. Besides the colored ink, it could show text information as badges. This plugin is inspired by Badges of iTerm2 and Splatoon!
Install
You can install hyper-ink-badge
by hyper
command or editing ~/.hyper.js
.
- Use
hyper
command.
$ hyper install hyper-ink-badge
- Or, edit
~/.hyper.js
and add "hyper-ink-badge" to theplugins
array as bellow.
plugins: [ "hyper-ink-badge" ],
Features & Demo
Change the color
You can change color of badge via GUI or CLI.
- GUI: Just click the badge, and colors are changed into new one selected from the template.
- CLI: Specify color codes with quoted ink-badge command as below.
$'ink-badge #5FA, #3B3'
- Hold down the command key and click the badge to open the color picker.
Set text
- Use quoted ink-badge command with some text as below.
$ 'ink-badge Hello World'
Fix the color to 'Tab title'
- Hold down the shift key and click the badge to fix current badge to current tab title.
Configuration.
Edit ~/.hyper.js
and add hyperInkBadge
object in config section as bellow.
module.exports = {
config: {
hyperInkBadge: {
command: 'ink',
templateColors: [
['#e78a48', '#ffffff'],
['#d9503f', '#5186ec'],
['#3472b4', '#4aabb8'],
],
advancedPicker: true,
fontPath: 'file:///tmp/ikamodoki.woff',
imagePath: 'file:///tmp/slime.svg',
baseColors: ['#0096d9', '#e5004a'],
},
}
}
command
change cli command key. default is value is ink-badge
.
command: 'ink'
templateColors
Specify the template colors that used to change color by clicking the badge.
templateColors: [
['#e78a48', '#ffffff'],
['#d9503f', '#5186ec'],
['#3472b4', '#4aabb8'],
],
advancedPicker
Set true, you can use color picker that enables you to select more detailed color. default false.
advancedPicker: true
fontPath
You can use your favorite font. default font is 'paintball_web.woff' created by 'Project Paintball'
fontPath: 'file:///tmp/myfont.woff'
imagePath & baseColors
You can use your favarite SVG image instead of default ink image. Besides specifing imagePath, you have to set the baseColors value which indicates the changeable colors.
imagePath: 'file:///tmp/slime.svg',
baseColors: ['#0096d9', '#e5004a'],