{"id":13447344,"url":"https://github.com/timolins/hyperlayout","last_synced_at":"2025-04-09T17:22:36.546Z","repository":{"id":66106484,"uuid":"73497716","full_name":"timolins/hyperlayout","owner":"timolins","description":"📐 Layout presets for Hyper.app","archived":false,"fork":false,"pushed_at":"2020-08-13T15:33:07.000Z","size":949,"stargazers_count":201,"open_issues_count":17,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T09:30:39.613Z","etag":null,"topics":["hyper"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timolins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-11-11T17:30:24.000Z","updated_at":"2024-09-15T02:35:05.000Z","dependencies_parsed_at":"2023-07-23T20:45:25.689Z","dependency_job_id":null,"html_url":"https://github.com/timolins/hyperlayout","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timolins%2Fhyperlayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timolins%2Fhyperlayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timolins%2Fhyperlayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timolins%2Fhyperlayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timolins","download_url":"https://codeload.github.com/timolins/hyperlayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248075265,"owners_count":21043556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hyper"],"created_at":"2024-07-31T05:01:14.936Z","updated_at":"2025-04-09T17:22:36.527Z","avatar_url":"https://github.com/timolins.png","language":"JavaScript","readme":"\n\u003cimg src=\"https://github.com/timolins/hyperlayout/raw/master/assets/header.png\" width=\"320\" \u003e\n\n\u003e Layout presets for [Hyper.app](https://hyper.is)\n\n[![Build Status](https://travis-ci.org/timolins/hyperlayout.svg?branch=master)](https://travis-ci.org/timolins/hyperlayout) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)\n\n\u003e ### This repo is currently unmaintained.\n\u003e Feel free to contact me if you want to help maintain.\n\u003e Pull requests are welcome!\n\n\u003cimg src=\"https://github.com/timolins/hyperlayout/raw/master/assets/demo.gif\" width=\"532\" \u003e\n\n\n\n\n# Install\n\n```sh\n$ npm install -g hyperlayout hpm-cli\n$ hpm install hyperlayout\n```\n\n# Usage\nTo get started, write [your layout](#define-a-layout) inside `.hyperlayout`.\n\nIf you already use a `package.json` file, you can add it there. (With with the `hyperlayout` key)\n\n*Alternatively you can define [global layouts](#global-layouts) in `~/.hyperlayout`.*\n\n\u003e `.hyperlayout`\n```json\n[\n  [\n    \"echo 'Hello'\",\n    \"echo 'World'\"\n  ]\n]\n```\n\nTo apply the layout, simply run `hyperlayout` in the same directory.\n\n```sh\n$ hyperlayout\n```\n#### Result\n![Demo 1](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/demo1.svg)\n\n## Advanced example\nThis example shows the capabilities of `hyperlayout`. It demonstrates the usage inside `package.json` and how to define [multiple layouts](#multiple-layouts).\n\n\u003e `package.json`\n```json\n{\n  \"name\": \"my-example\",\n  \"scripts\": {\n    \"watch\": \"gulp watch\",\n    \"serve\": \"nodemon build/index\",\n    \"layout\": \"hyperlayout\"\n  },\n  \"hyperlayout\": {\n      \"default\": [\n        [[\n          \"npm run watch\",\n          [\"npm run serve\", \"http://localhost:3000\"]\n        ]],\n        \"mongod\"\n      ],\n      \"helloworld\": {\n        \"entry\": \"horizontal\",\n        \"layout\": [\n          \"echo 'Hello'\",\n          \"echo 'World'\"\n        ]\n      }\n  },\n  \"devDependencies\": {\n    \"nodemon\": \"latest\",\n    \"gulp\": \"latest\",\n    \"hyperlayout\": \"latest\"\n  }\n}\n```\n\nSince there are two layouts defined here, you have to tell `hyperlayout` which one you want to use.\n\n```sh\n$ hyperlayout # Layout: default\n```\n```sh\n$ hyperlayout helloworld # Layout: helloworld\n```\n```sh\n$ npm run layout # Layout: default\n```\n#### Result\n![Demo 2](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/demo2.svg)\n\n# Examples\n#### Tabs\n![Example 1](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/example1.svg)\n```json\n[\"1\", \"2\"]\n```\n---\n#### Horizontal Panes\n![Example 2](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/example2.svg)\n```json\n[[\"1\", \"2\"]]\n```\nor\n```json\n{\n  \"entry\": \"horizontal\",\n  \"layout\": [\"1\", \"2\"]\n}\n```\n---\n#### Vertical Panes\n![Example 3](https://cdn.rawgit.com/timolins/hyperlayout/f84d20382116fde4866b46e18180a446dc94d1dd/assets/example3.svg)\n```json\n[[[\"1\", \"2\"]]]\n```\nor\n```json\n{\n  \"entry\": \"vertical\",\n  \"layout\": [\"1\", \"2\"]\n}\n```\n\n# Define a layout\nThere are two different ways to define a layout:\n\n#### Array\nThe most basic way is to create a nested array with strings (commands) inside. The hierarchy looks like this:\n\n\n```\nTabs\n|-- Horizontal Panes\n    |-- Vertical Panes\n        |-- Horizontal Panes\n            |-- Vertical Panes\n                |-- ...\n```\n\n\nThis is a example for a vertical split using this method:\n```json\n[\n  [\n    [\"echo Hello\", \"echo World\"]\n  ]\n]\n```\n\n#### Object\nA layout object should contain the following key-value pairs:\n\n* `entry: \u003cString\u003e` – *You can define at which level the layout begins. Either `tab`, `vertical` or `horizontal`. Default value is `tab`.*\n\n* `layout: \u003cArray\u003e` – *A layout, as described above. The only difference is, that it respects the entry point. This can make the layout more readable.*\n\n\n```json\n{\n  \"entry\": \"vertical\",\n  \"layout\": [\n    \"echo Hello\", \"echo World\"\n  ]\n}\n```\n\n# Multiple Layouts\nAs shown in the [Advanced Example](#advanced-example), it's possible to define multiple layouts in one project. Instead of supplying the [layout](#define-a-layout) directly, you define name for the layout first.\n\n```json\n{\n  \"default\": {\n    \"entry\": \"vertical\",\n    \"layout\": [\"echo Hello\", \"echo World\"]\n  },\n  \"otherlayout\": [\"echo Hyper\", \"echo Term\"]\n}\n```\n\n`hyperlayout` will look for the `default` layout, when there is no parameter. If there is one, it will apply the given layout.\n\n```sh\n$ hyperlayout [NAME]\n```\n\n# Global layouts\nYou can define global layouts inside `~/.hyperlayout`.\n\n`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:\n\n```sh\n$ hyperlayout global [NAME]\n```\nor\n```sh\n$ hyperlayout g [NAME]\n```\n\n# Known Issues\n* It isn't possible layout multiple windows at once. If you know how to approach this feature, then head over to [Issue #2](https://github.com/timolins/hyperlayout/issues/2) and let me know!\n\n# Author\n`hyperlayout` is written by [Timo Lins](https://timo.sh).\n\n_Special thanks to [Tobias Lins](https://github.com/tobiaslins), for coming up with some great solutions._\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimolins%2Fhyperlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimolins%2Fhyperlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimolins%2Fhyperlayout/lists"}