πŸ“ Layout presets for Hyper.app
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
art Converted fonts to paths Nov 15, 2016
assets Gif loops now Nov 15, 2016
bin Included command execution into queue Nov 15, 2016
.gitignore Added package.json Nov 11, 2016
.npmignore Check if hyperlayout plugin is installed Nov 15, 2016
.travis.yml Added travis testing Nov 15, 2016
LICENSE Initial commit Nov 11, 2016
README.md Added unmaintained notice to README Feb 24, 2018
index.js Remove duplicate work() Dec 21, 2016
package.json 0.2.1 Release Dec 22, 2016

README.md

Layout presets for Hyper.app

Build Status XO code style

This repo is currently unmaintained.

I will start working on it again in a few months, when I got more freetime in my hands. Pull requests are very welcome!

Install

$ npm install -g hyperlayout hpm-cli
$ hpm install hyperlayout

Usage

To get started, write your layout inside .hyperlayout.

If you already use a package.json file, you can add it there. (With with the hyperlayout key)

Alternatively you can define global layouts in ~/.hyperlayout.

.hyperlayout

[
  [
    "echo 'Hello'",
    "echo 'World'"
  ]
]

To apply the layout, simply run hyperlayout in the same directory.

$ hyperlayout

Result

Demo 1

Advanced example

This example shows the capabilities of hyperlayout. It demonstrates the usage inside package.json and how to define multiple layouts.

package.json

{
  "name": "my-example",
  "scripts": {
    "watch": "gulp watch",
    "serve": "nodemon build/index",
    "layout": "hyperlayout"
  },
  "hyperlayout": {
      "default": [
        [[
          "npm run watch",
          ["npm run serve", "http://localhost:3000"]
        ]],
        "mongod"
      ],
      "helloworld": {
        "entry": "horizontal",
        "layout": [
          "echo 'Hello'",
          "echo 'World'"
        ]
      }
  },
  "devDependencies": {
    "nodemon": "latest",
    "gulp": "latest",
    "hyperlayout": "latest"
  }
}

Since there are two layouts defined here, you have to tell hyperlayout which one you want to use.

$ hyperlayout # Layout: default
$ hyperlayout helloworld # Layout: helloworld
$ npm run layout # Layout: default

Result

Demo 2

Examples

Tabs

Example 1

["1", "2"]

Horizontal Panes

Example 2

[["1", "2"]]

or

{
  "entry": "horizontal",
  "layout": ["1", "2"]
}

Vertical Panes

Example 3

[[["1", "2"]]]

or

{
  "entry": "vertical",
  "layout": ["1", "2"]
}

Define a layout

There are two different ways to define a layout:

Array

The most basic way is to create a nested array with strings (commands) inside. The hierarchy looks like this:

Tabs
|-- Horizontal Panes
    |-- Vertical Panes
        |-- Horizontal Panes
            |-- Vertical Panes
                |-- ...

This is a example for a vertical split using this method:

[
  [
    ["echo Hello", "echo World"]
  ]
]

Object

A layout object should contain the following key-value pairs:

  • entry: <String> – You can define at which level the layout begins. Either tab, vertical or horizontal. Default value is tab.

  • layout: <Array> – A layout, as described above. The only difference is, that it respects the entry point. This can make the layout more readable.

{
  "entry": "vertical",
  "layout": [
    "echo Hello", "echo World"
  ]
}

Multiple Layouts

As shown in the Advanced Example, it's possible to define multiple layouts in one project. Instead of supplying the layout directly, you define name for the layout first.

{
  "default": {
    "entry": "vertical",
    "layout": ["echo Hello", "echo World"]
  },
  "otherlayout": ["echo Hyper", "echo Term"]
}

hyperlayout will look for the default layout, when there is no parameter. If there is one, it will apply the given layout.

$ hyperlayout [NAME]

Global layouts

You can define global layouts inside ~/.hyperlayout.

hyperlayout will use these layouts when there is no configuration in the current directory. It's possible to force global layouts with the following command:

$ hyperlayout global [NAME]

or

$ hyperlayout g [NAME]

Known Issues

  • It isn't possible layout multiple windows at once. If you know how to approach this feature, then head over to Issue #2 and let me know!

Author

hyperlayout is written by Timo Lins.

Special thanks to Tobias Lins, for coming up with some great solutions.