hyperlayout

    0.2.1 • Public • Published

    Layout presets for Hyper.app

    Build Status XO code style

    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.

    Keywords

    Install

    npm i hyperlayout

    DownloadsWeekly Downloads

    54

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • timolins