Criando um tema para o Hyperterm

Ferramentas

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:

Instalando um tema 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 🙂

jaydson

Criando um tema para o Hyperterm

Leia também