JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q44493F
  • License Apache-2.0

Change the background of your Hyper terminal!

Package Exports

  • hyper-background

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hyper-background) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hyper-background

🌌 Change the background of your hyper terminal!

js-standard-style

dependencies Status devDependencies Status

Technically the first plugin and the whole and sole easy way to do this 😝

Fun fact: We boilerplated and wrote hyper-background in 2 hours. And it worked the first time.

NOTE: This plugin is small, which might cause it to seem unmaintained. If you see the plugin seem so, I assure you that this plugin is actively maintained and if you wish to propose a new feature, report an issue or you are submitting a PR, do not hesitate to do so under grounds of umaintainence.

Supports Windows, macOS and Linux. If you have any issues, report them at the repository's issue tracker.

Installation

Manually

Edit .hyper.js and add "hyper-background" to the plugins array which should be near the end of your file.

Using hpm-cli

If you have hpm-cli installed, run

hpm install hyper-background

Example of a customized terminal

Screenshot_from_2017-08-07_13-50-38.png

Usage

In your .hyper.js file, which probably looks something like this at this point:

module.exports = {
  config: {
    // font config
    fontSize: 14,
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
    // cursor config
    cursorColor: '#EBCB8B',
    cursorShape: 'BLOCK',
    cursorBlink: true,
    // color config
    foregroundColor: '#fff',
    backgroundColor: '#000',
    borderColor: '#333',
    // hyper-background can handle any value of the CSS key, whether populated manually or populated by a plugin, and will not overwrite it.
    css: '',
    termCSS: '',
    // window and color config
    showHamburgerMenu: true,
    showWindowControls: '',
    padding: '12px 14px',
    colors: {
      ...
    },
    // shell config
    shell: '/bin/bash',
    shellArgs: ['--login'],
    env: {},
    // behaviour config
    bell: false,
    copyOnSelect: false,
  },
  plugins: [
    "hyper-background"
  ]
};

You will need to add the path to your selected background in the config object as backgroundImage after which your .hyper.js should look like:

module.exports = {
  config: {
    // font config
    fontSize: 14,
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
    // cursor config
    cursorColor: '#EBCB8B',
    cursorShape: 'BLOCK',
    cursorBlink: true,
    // color config
    foregroundColor: '#fff',
    backgroundColor: '#000',
    borderColor: '#333',
    // css config
    css: '',
    termCSS: '',
    // window and color config
    showHamburgerMenu: true,
    showWindowControls: '',
    padding: '12px 14px',
    colors: {
      ...
    },
    // shell config
    shell: '/bin/zsh',
    shellArgs: ['--login'],
    env: {},
    // behaviour config
    bell: false,
    copyOnSelect: false,

    // Here lies our background image.
    backgroundImage: "/path/to/your/image"
  },
  plugins: [
    "hyper-background"
  ]
};

After this, you should have your background image ready to go!

Development

The recommended Node version required in development is Node 8. while the target Node version is 7. Node 6 is the absolute necessity and will work, but we are not targeting it as Hyper uses Node 7.4 internally.

  • Run tests via npm test
  • You can bundle the plugin via npm run build