{"id":15062066,"url":"https://github.com/reshape/layouts","last_synced_at":"2025-04-10T09:54:20.293Z","repository":{"id":57122077,"uuid":"65311129","full_name":"reshape/layouts","owner":"reshape","description":"plugin that adds the ability to use layout block/extend statements","archived":false,"fork":false,"pushed_at":"2019-04-19T13:33:26.000Z","size":84,"stargazers_count":9,"open_issues_count":7,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T21:42:13.420Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/reshape.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-09T16:34:25.000Z","updated_at":"2019-02-18T19:26:28.000Z","dependencies_parsed_at":"2022-08-24T14:59:25.257Z","dependency_job_id":null,"html_url":"https://github.com/reshape/layouts","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Flayouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Flayouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Flayouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Flayouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reshape","download_url":"https://codeload.github.com/reshape/layouts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248198697,"owners_count":21063626,"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":[],"created_at":"2024-09-24T23:29:42.959Z","updated_at":"2025-04-10T09:54:20.250Z","avatar_url":"https://github.com/reshape.png","language":"JavaScript","readme":"# Reshape Layouts\n\n[![npm](https://img.shields.io/npm/v/reshape-layouts.svg?style=flat-square)](https://npmjs.com/package/reshape-layouts)\n[![tests](https://img.shields.io/travis/reshape/layouts.svg?style=flat-square)](https://travis-ci.org/reshape/layouts?branch=master)\n[![dependencies](https://img.shields.io/david/reshape/layouts.svg?style=flat-square)](https://david-dm.org/reshape/layouts)\n[![coverage](https://img.shields.io/coveralls/reshape/layouts.svg?style=flat-square)](https://coveralls.io/r/reshape/layouts?branch=master)\n\nLayout inheritance using `block` and `extend`, inspired by ([jade/pug](http://jade-lang.com/reference/inheritance/)).\n\n### Installation\n\n`npm i reshape-layouts --save`\n\n### Usage\n\nLet's say we have a base template:\n\n`base.html`\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cblock name='title'\u003e\n          \u003ctitle\u003eDefault Title\u003c/title\u003e\n        \u003c/block\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003cdiv class=\"content\"\u003e\n           \u003cblock name=\"content\"\u003e\u003c/block\u003e\n        \u003c/div\u003e\n        \u003cfooter\u003e\n            \u003cblock name=\"footer\"\u003efooter content\u003c/block\u003e\n        \u003c/footer\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNow we can inherit this template. All defined blocks inside `\u003cextends\u003e` will\nreplace the blocks with the same name in the parent template. If the block is not defined inside `\u003cextends\u003e` its content in the parent template remains the same.\n\nIn the example the blocks `title` and `content` will be replaced and\nthe block `footer` will remain unchanged:\n\n```js\nconst reshape = require('reshape')\nconst layouts = require('reshape-layouts')\n\nconst html = '\u003cextends src=\"base.html\"\u003e' +\n               '\u003cblock name=\"title\"\u003e\u003ctitle\u003eHow to use reshape-layouts\u003c/title\u003e\u003c/block\u003e' +\n               '\u003cblock name=\"content\"\u003eRead the documentation\u003c/block\u003e'\n             '\u003c/extends\u003e'\n\nreshape({\n  plugins: layouts({\n    encoding: 'utf8', // Parent template encoding (default: 'utf8')\n    root: './' // Path to parent template directory (default: './')\n  })\n}).process(html)\n  .then((res) =\u003e res.output())\n```\n\nThe final HTML will be:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHow to use reshape-layouts\u003c/title\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv class=\"content\"\u003eRead the documentation\u003c/div\u003e\n    \u003cfooter\u003efooter content\u003c/footer\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Append \u0026 Prepend\n\nIt's also possible to append and prepend block's content\n\n```js\nconst reshape = require('reshape')\nconst layouts = require('reshape-layouts')\n\nconst html = '\u003cextends src=\"base.html\"\u003e' +\n               '\u003cblock name=\"title\" type=\"prepend\"\u003e\u003cmeta name=\"description\" content=\"test\"\u003e\u003c/block\u003e' +\n               '\u003cblock name=\"content\"\u003eRead the documentation\u003c/block\u003e' +\n               '\u003cblock name=\"footer\" type=\"append\"\u003e— 2016\u003c/block\u003e'\n           '\u003c/extends\u003e'\n\nreshape({ plugins: layouts() })\n  .process(html)\n  .then((res) =\u003e res.output())\n```\n\nThe final HTML will be:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta name=\"description\" content=\"test\"\u003e\n    \u003ctitle\u003eHow to use reshape-layouts\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"content\"\u003eRead the documentation\u003c/div\u003e\n    \u003cfooter\u003efooter content — 2016\u003c/footer\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Caveats\n\nThere are a number of tags that have their contents parsed as plaintext and cannot contain nested html tags. If you place a `block` tag inside any of these elements, it will not behave as expected, and instead will be rendered as plaintext. These are the tags that are content-only: `title`, `noscript`, `noframes`, `style`, `script`, `xmp`, `iframe`, `noembed`.\n\n### Options\n\nAll options are optional, none are required.\n\n| Name | Description | Default |\n| ---- | ----------- | ------- |\n| **root** | root to resolve layout paths from | reshape `filename` option |\n| **encoding** | encoding with which to read layout files | `utf8` |\n\n### Reporting Dependencies\n\nThis plugin will report its dependencies in the standard format as dictated by [reshape-loader](https://github.com/reshape/loader) if you pass `dependencies: []` as an option to reshape when it runs. Dependencies will be available on the output object under the `dependencies` key. For example:\n\n```js\nconst reshape = require('reshape')\nconst include = require('reshape-layouts')\n\nreshape({ plugins: [layouts()], dependencies: []})\n  .process(someHtml)\n  .then((res) =\u003e {\n    console.log(res.dependencies)\n    console.log(res.output())\n  })\n```\n\nIf you are using this with webpack, reshape-loader takes care of the dependency reporting and you don't have to do anything 😁\n\n### License \u0026 Contributing\n\n- Licensed under [MIT](LICENSE.txt)\n- See the [contributing guide](contributing.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freshape%2Flayouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freshape%2Flayouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freshape%2Flayouts/lists"}