{"id":19128894,"url":"https://github.com/peerlibrary/blaze-layout-component","last_synced_at":"2025-05-06T00:11:29.653Z","repository":{"id":68281245,"uuid":"47491007","full_name":"peerlibrary/blaze-layout-component","owner":"peerlibrary","description":"A simple Blaze Component for use with Flow Router's layout manager","archived":false,"fork":false,"pushed_at":"2019-09-23T06:00:21.000Z","size":9,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-19T12:42:23.450Z","etag":null,"topics":["blaze","meteor","meteor-package"],"latest_commit_sha":null,"homepage":"https://atmospherejs.com/peerlibrary/blaze-layout-component","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peerlibrary.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,"publiccode":null,"codemeta":null}},"created_at":"2015-12-06T09:41:17.000Z","updated_at":"2019-09-23T06:00:23.000Z","dependencies_parsed_at":"2023-02-25T11:46:03.139Z","dependency_job_id":null,"html_url":"https://github.com/peerlibrary/blaze-layout-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peerlibrary%2Fblaze-layout-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peerlibrary%2Fblaze-layout-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peerlibrary%2Fblaze-layout-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peerlibrary%2Fblaze-layout-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peerlibrary","download_url":"https://codeload.github.com/peerlibrary/blaze-layout-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252596422,"owners_count":21773845,"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":["blaze","meteor","meteor-package"],"created_at":"2024-11-09T06:05:57.261Z","updated_at":"2025-05-06T00:11:29.635Z","avatar_url":"https://github.com/peerlibrary.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Blaze Layout Component\n======================\n\nA simple [Blaze Component](https://github.com/peerlibrary/meteor-blaze-components) for use with\n[Flow Router](https://github.com/kadirahq/flow-router)'s [layout manager](https://github.com/kadirahq/blaze-layout).\n\nAdding this package to your [Meteor](http://www.meteor.com/) application adds `BlazeLayoutComponent` class\ninto the global scope. It also configures the root Blaze Component to serve as the root of the components' tree.\n\nAlternatively, you can also use our [fork of Flow Router](https://github.com/peerlibrary/flow-router), which\nadds [ignoring links](https://github.com/peerlibrary/flow-router#ignoring-links) feature to it.\n\nClient side only.\n\nInstallation\n------------\n\n```\nmeteor add peerlibrary:blaze-layout-component\n```\n\nUsage\n-----\n\nDefine your layout component:\n\n```handlebars\n\u003ctemplate name=\"ColumnsLayoutComponent\"\u003e\n  {{\u003e HeaderComponent}}\n  \u003cmain\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"first col s4\"\u003e\n        {{\u003e renderFirst}}\n      \u003c/div\u003e\n      \u003cdiv class=\"second col s4\"\u003e\n        {{\u003e renderSecond}}\n      \u003c/div\u003e\n      \u003cdiv class=\"third col s4\"\u003e\n        {{\u003e renderThird}}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/main\u003e\n  {{\u003e FooterComponent}}\n\u003c/template\u003e\n```\n\n```javascript\nclass ColumnsLayoutComponent extends BlazeLayoutComponent {\n  renderFirst(parentComponent) {\n    return this._renderRegion('first', parentComponent);\n  }\n\n  renderSecond(parentComponent) {\n    return this._renderRegion('second', parentComponent);\n  }\n\n  renderThird(parentComponent) {\n    return this._renderRegion('third', parentComponent);\n  }\n}\n\nColumnsLayoutComponent.register('ColumnsLayoutComponent');\n```\n\nThen you can define a route using this layout:\n\n```javascript\nFlowRouter.route('/post/:_id', {\n  name: 'Post.display'\n  action: function (params, queryParams) {\n    BlazeLayout.render('ColumnsLayoutComponent', {\n      first: 'FirstComponent',\n      second: 'SecondComponent',\n      third: 'ThirdComponent'\n    });\n  }\n});\n```\n\nAlternatively, you can restrict regions' names to catch possible errors:\n\n```javascript\nclass ColumnsLayoutComponent extends BlazeLayoutComponent {\n  renderFirst(parentComponent) {\n    return this._renderRegion(this.constructor.REGIONS.FIRST, parentComponent);\n  }\n\n  renderSecond(parentComponent) {\n    return this._renderRegion(this.constructor.REGIONS.SECOND, parentComponent);\n  }\n\n  renderThird(parentComponent) {\n    return this._renderRegion(this.constructor.REGIONS.THIRD, parentComponent);\n  }\n}\n\nColumnsLayoutComponent.REGIONS = {\n  FIRST: 'first',\n  SECOND: 'second',\n  THIRD: 'third'\n};\n\nColumnsLayoutComponent.register('ColumnsLayoutComponent');\n```\n\nA good pattern to access the `_id` parameter from the URL is something like:\n\n```javascript\nclass FirstComponent extends BlazeComponent {\n  onCreated() {\n    super.onCreated();\n\n    this.currentPostId = new ComputedField(() =\u003e {\n      return FlowRouter.getParam('_id');\n    });\n\n    this.autorun((computation) =\u003e {\n      postId = this.currentPostId();\n      if (postId) this.subscribe('Comments', postId);\n    });\n  }\n\n  comments() {\n    return Comments.find({\n      'post._id': this.currentPostId()\n    });\n  }\n}\n\nFirstComponent.register('FirstComponent');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeerlibrary%2Fblaze-layout-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeerlibrary%2Fblaze-layout-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeerlibrary%2Fblaze-layout-component/lists"}