Skip to content

Commit

Permalink
Updated documentation
Browse files Browse the repository at this point in the history
Closes #7
  • Loading branch information
timolins committed Nov 16, 2016
1 parent 7bd4e4c commit 994bcba
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 19 deletions.
117 changes: 99 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,20 @@ $ hpm install hyperlayout
```

# Usage
To get started, setup a layout inside of `package.json`.
To get started, write [your layout](#define_layout) inside `.hyperlayout`.

_Alternatively you can define it in `.hyperlayout` or `~/.hyperlayout`._
If you already use a `package.json` file, you can add it there. (With with the `hyperlayout` key)

> `package.json`
*Alternatively you can define [global layouts](#global_layouts) in `~/.hyperlayout`.*

> `.hyperlayout`
```json
{
"name": "example-1",
"hyperlayout": [
[
"echo 'Hello'",
"echo 'World'"
]
[
[
"echo 'Hello'",
"echo 'World'"
]
}
]
```

To apply the layout, simply run `hyperlayout` in the same directory.
Expand All @@ -43,20 +42,21 @@ $ hyperlayout
#### Result
![Demo 1](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/demo1.svg)


<a name="advanced_example"></a>
## Advanced example
This example shows the capabilities of `hyperlayout`.
This example shows the capabilities of `hyperlayout`. It demonstrates the usage inside `package.json` and how to define [multiple layouts](#multiple_layouts).

> `package.json`
```json
{
"name": "example-2",
"scripts": {
"watch": "gulp watch",
"serve": "nodemon build/index"
"serve": "nodemon build/index",
"layout": "hyperlayout"
},
"hyperlayout": {
"start": [
"default": [
[[
"npm run watch",
["npm run serve", "http://localhost:3000"]
Expand All @@ -70,14 +70,25 @@ This example shows the capabilities of `hyperlayout`.
"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, by suppling it as parameter.
Since there are two layouts defined here, you have to tell `hyperlayout` which one you want to use.

```sh
$ hyperlayout start
$ hyperlayout # Layout: default
```
```sh
$ hyperlayout helloworld # Layout: helloworld
```
```sh
$ npm run layout # Layout: default
```
#### Result
![Demo 2](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/demo2.svg)
Expand Down Expand Up @@ -114,13 +125,83 @@ or
"layout": ["1", "2"]
}
```

<a name="define_layout"></a>
# 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:
```json
[
[
["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.*


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

<a name="multiple_layouts"></a>
# Multiple Layouts
As shown in the [Advanced Example](#advanced_example), it's possible to define multiple layouts in one project. Instead of supplying the [layout](#define_layout) directly, you define name for the layout first.

```json
{
"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.

```sh
$ hyperlayout [NAME]
```

<a name="global_layouts"></a>
# 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:

```sh
$ hyperlayout global [LAYOUT]
$ hyperlayout global [NAME]
```
or
```sh
$ hyperlayout g [NAME]
```

# Known Issues
Expand Down
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ function focusUid({dispatch}, uid) {
})
}

// Listens for initial load and sessions
// Listens for cli commands and sessions
exports.middleware = store => next => action => {
const {type, data} = action
const {sessions} = store.getState()
Expand Down

0 comments on commit 994bcba

Please sign in to comment.