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.

1. Use hyper command.

$ hyper install hyper-ink-badge

2. Or, edit ~/.hyper.js and add "hyper-ink-badge" to the plugins array as bellow.

   plugins: [ "hyper-ink-badge" ],

Features & Demo

Change the color

You can change color of badge via GUI or CLI.

1. GUI: Just click the badge, and colors are changed into new one selected from the template.
2. 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'],

Licence

MIT