Criando um tema para o Hyperterm
Cofundador da @BrazilJS e da @NascHQ, Software developer e autor/editor no portal BrazilJS.
O Hyperterm é um terminal desenvolvido com JavaScript/HTML/CSS, ou seja, baseado em padrões Web. O objetivo do projeto, crido pelo pessoal da Zeit, é criar uma experiência bonita e extensível para a interface de linha de comando. Inicialmente o projeto apenas funcionava no macOS, mas agora já está disponível para Linux (para Windows deve sair logo).
Uma das funcionalidades legais do Hyperterm é o poder de criar plugins e temas. A API é relativamente fácil e nos permite criar algo simples em poucos minutos. Plugins do Hyperterm são módulos do npm, e não é preciso nem instalar nada. Por exemplo, veja no Gif abaixo como instalar o tema hyperyellow
:
Basta adicionar o nome do plugin no arquivo de configuração do Hyperterm (
~/.hyperterm.js
) para que o mesmo seja instalado. Fácil né?
Como temas são apenas plugins, a API é a mesma ao desenvolve-lo. Em um tema precisamos definir o hook decorateConfig
.
exports.decorateConfig = (config) => {
return Object.assign({}, config, {
});
}
Eu criei um tema inspirado nas cores do BrazilJS para ver o ecosistema do Hyperterm em ação, vejam como ficou:
Para instala-lo, basta adiciona-lo na lista de plugins (~/.hyperterm.js
). javascript
plugins: ['hyperterm-theme-braziljs']
O código para este tema segue abaixo:
exports.decorateConfig = (config) => {
return Object.assign({}, config, {
cursorColor: '#ffde17',
fontSize: 12,
windowSize: [680, 450],
fontFamily: 'Roboto+Condensed, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
cursorShape: 'BLOCK',
foregroundColor: '#fff',
backgroundColor: '#000',
borderColor: '',
padding: '0px 0px',
css: `
${config.css || ''}
.tabs_nav .tabs_list .tab_text {
color: yellow;
}
.tabs_nav .tabs_title {
color: yellow;
}
.hyperterm_main.main_b54qtm {
background-image: url(data:image/png;base64)
background-size: 80px 60px, cover;
}
.term_fit.fit_1ssoezr.term_term.term_13hv8io {
opacity: 0.9;
}
`,
termCSS: `
.hyperterm_main.main_b54qtm {
background-image: url('https://braziljs.org/assets/images/braziljs.svg');
}
`
},
shell: ''
});
}
Notem que estamos apenas sobrescrevendo valores de configuração Hyperterm no nosso tema. Seja criativo e crie o seu baseado em suas preferências, ou use este do BrazilJS 🙂