{"id":15013412,"url":"https://github.com/veliovgroup/meteor-flow-router-title","last_synced_at":"2025-04-12T04:44:12.077Z","repository":{"id":146650141,"uuid":"47688903","full_name":"veliovgroup/Meteor-flow-router-title","owner":"veliovgroup","description":"Change document.title on the fly within flow-router","archived":false,"fork":false,"pushed_at":"2025-03-05T19:20:57.000Z","size":109,"stargazers_count":25,"open_issues_count":1,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-26T00:12:54.835Z","etag":null,"topics":["flow-router","meteor","meteor-package","meteorjs","page-title","seo","seo-meta","title"],"latest_commit_sha":null,"homepage":"https://atmospherejs.com/ostrio/flow-router-title","language":"JavaScript","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/veliovgroup.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"dr-dimitru","custom":"https://paypal.me/veliovgroup"}},"created_at":"2015-12-09T12:05:48.000Z","updated_at":"2025-03-05T19:19:34.000Z","dependencies_parsed_at":"2024-03-28T01:50:40.347Z","dependency_job_id":null,"html_url":"https://github.com/veliovgroup/Meteor-flow-router-title","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veliovgroup%2FMeteor-flow-router-title","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veliovgroup%2FMeteor-flow-router-title/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veliovgroup%2FMeteor-flow-router-title/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veliovgroup%2FMeteor-flow-router-title/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/veliovgroup","download_url":"https://codeload.github.com/veliovgroup/Meteor-flow-router-title/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519468,"owners_count":21117757,"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":["flow-router","meteor","meteor-package","meteorjs","page-title","seo","seo-meta","title"],"created_at":"2024-09-24T19:44:15.151Z","updated_at":"2025-04-12T04:44:12.070Z","avatar_url":"https://github.com/veliovgroup.png","language":"JavaScript","funding_links":["https://github.com/sponsors/dr-dimitru","https://paypal.me/veliovgroup"],"categories":[],"sub_categories":[],"readme":"[![support](https://img.shields.io/badge/support-GitHub-white)](https://github.com/sponsors/dr-dimitru)\n[![support](https://img.shields.io/badge/support-PayPal-white)](https://paypal.me/veliovgroup)\n\u003ca href=\"https://ostr.io/info/built-by-developers-for-developers?ref=github-flowroutertitle-repo-top\"\u003e\u003cimg src=\"https://ostr.io/apple-touch-icon-60x60.png\" height=\"20\"\u003e\u003c/a\u003e\n\u003ca href=\"https://meteor-files.com/?ref=github-flowroutertitle-repo-top\"\u003e\u003cimg src=\"https://meteor-files.com/apple-touch-icon-60x60.png\" height=\"20\"\u003e\u003c/a\u003e\n\n# Reactive page title\n\nChange `document.title` on the fly in [Meteor.js](https://docs.meteor.com/?utm_source=dr.dimitru\u0026utm_medium=online\u0026utm_campaign=Q2-2022-Ambassadors) apps via [flow-router-extra](https://github.com/veliovgroup/flow-router) API.\n\n## ToC\n\n- [Installation](#installation)\n- [Demos](#demos)\n- [ES6 Import](#es6-import)\n- [Related Packages](#related-packages)\n- [API](#api)\n- [Usage](#usage)\n  - [Set title via Route](#set-title-via-route)\n  - [`FlowRouterTitle#set()` method](#set-method)\n  - [Function Context](#function-context)\n  - [Group Context](#group-context)\n  - [Reactive data sources](#reactive-data-sources)\n  - [More examples](#more-examples)\n- [Running tests](#running-tests)\n- [Support this package](#support-this-project)\n\n## Features\n\n- 👨‍🔬 __100% tests coverage__\n- ✨ Use prefixes for groups, including nesting\n- 🎛 Per route, per group, and default (*all routes*) `title` tag\n\nVarious ways to set `title`, *ordered by priority*:\n\n- `FlowRouter.route()` [*overrides all below*]\n- `FlowRouter.group()`\n- `FlowRouter.globals`\n- Head template `\u003ctitle\u003eText\u003c/title\u003e` tag [*superseded by any above*]\n\n## Installation\n\n```shell\nmeteor add ostrio:flow-router-title\n```\n\n## Demos\n\n- [Demo source](https://github.com/veliovgroup/Meteor-flow-router-title/tree/master/demo)\n- [Tests](https://github.com/veliovgroup/Meteor-flow-router-title/tree/master/tests)\n\n## ES6 Import\n\n```js\nimport { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';\n```\n\n## Related Packages\n\n`flow-router-title` performs the best when used with the next packages:\n\n- [flow-router-meta](https://github.com/veliovgroup/Meteor-flow-router-meta#reactive-meta-tags-javascript-and-csss) - Per route `meta` tags, `script`, and `link` (*e.g. CSS*) — set per-route meta-tags, stylesheets, and scripts\n- [flow-router-extra](https://github.com/veliovgroup/flow-router#flowrouter-extra) - Carefully extended FlowRouter\n\n## API\n\n- `new FlowRouterTitle(FlowRouter)` — The main `FlowRouterTitle` constructor that accepts `FlowRouter` as the only argument\n- `FlowRouterTitle#set(title: string)` — The only method that changes `document.title` during runtime\n\nAfter `new FlowRouterTitle(FlowRouter)` instance is initiated it extends `FlowRouter.router()` and `FlowRouter.group()` methods and `FlowRouter.globals` with support of:\n\n- `title: string` — String property\n- `title: function(params, qs, data) =\u003e string` — Method returning string\n- `titlePrefix: string` — String property for page's title prefix\n- `titlePrefix: function(params, qs, data) =\u003e string` — Method returning string for page's title prefix\n\n## Usage\n\nInitialize `FlowRouterTitle` class by passing `FlowRouter` object. Right after creating all routes:\n\n```js\nimport { FlowRouter } from 'meteor/ostrio:flow-router-extra';\nimport { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';\n\nFlowRouter.route('/', {\n  action() { /* ... */ },\n  title: 'Title'\n  /* ... */\n});\n\nconst titleHandler = new FlowRouterTitle(FlowRouter);\n```\n\n### Set title via Route\n\nSet `title` property in route's or group's configuration:\n\n```js\n// Set default document.title value in\n// case router has no title property\nFlowRouter.globals.push({\n  title: 'Default title'\n});\n\nFlowRouter.route('/me/account', {\n  name: 'account',\n  title: 'My Account'\n});\n```\n\n### `.set()` method\n\nSet `document.title` during runtime (*without route(s)*):\n\n```js\nFlowRouter.route('/', {/* ... */});\n\nconst titleHandler = new FlowRouterTitle(FlowRouter);\ntitleHandler.set('My Awesome Title String'); // \u003c- Returns `true`\n\n// `.set()` method accepts {string} only\n// Invalid values won't throw an exception\n// instead it will simply return `false`\n```\n\n### Function context\n\nUse function context (*with [`data`](https://github.com/veliovgroup/flow-router/blob/master/docs/hooks/data.md) hook*):\n\n```js\nFlowRouter.route('/post/:_id', {\n  name: 'post',\n  waitOn(params) {\n    return [Meteor.subscribe('post', params._id)];\n  },\n  async data(params) {\n    return await Collections.Posts.findOneAsync(params._id);\n  },\n  title(params, query, data) {\n    if (data) {\n      return data.title;\n    }\n    return '404: Page not found';\n  }\n});\n```\n\n### Group context\n\nUse group context:\n\n```js\nconst account = FlowRouter.group({\n  prefix: '/account',\n  title: 'Account',\n  titlePrefix: 'Account \u003e '\n});\n\naccount.route('/', {\n  name: 'accountIndex' // Title will be `Account`\n});\n\naccount.route('/settings', {\n  name: 'AccountSettings',\n  title: 'My Settings' // Title will be `Account \u003e My Settings`\n});\n```\n\n### Reactive data sources\n\nTo change `title` reactively, just pass it as function:\n\n```js\nFlowRouter.route('/me/account', {\n  name: 'account',\n  title() {\n    // In this example we used `ostrio:i18n` package\n    return i18n.get('account.document.title');\n  }\n});\n\n// Use params from route\nFlowRouter.route('/page/:_id/:slug', {\n  name: 'somePage',\n  title(params) {\n    return `Page ${params.slug}`;\n  }\n});\n```\n\n### More examples\n\nIn all examples below `title` can be a *Function* or *String*:\n\n```js\nimport { FlowRouter } from 'meteor/ostrio:flow-router-extra';\n\nFlowRouter.globals.push({\n  title() {/* ... */} // \u003c-- Suitable for reactive data source\n});\n\nFlowRouter.globals.push({\n  title: 'Title text'\n});\n\nFlowRouter.group({\n  title() {/* ... */}, // \u003c-- Suitable for reactive data source\n  titlePrefix() {/* ... */} // \u003c-- Can accept reactive data source, but won't trigger re-computation\n});\n\nFlowRouter.group({\n  title: 'Title text',\n  titlePrefix: 'Title prefix text'\n});\n\nFlowRouter.route('/path', {\n  title() {/* ... */} // \u003c-- Reactive\n});\n\nFlowRouter.route('/path', {\n  title: 'Title text'\n});\n```\n\n## Running Tests\n\n1. Clone this package\n2. In Terminal (*Console*) go to directory where package is cloned\n3. Then run:\n\n### Meteor/Tinytest\n\n```shell\n# Default\nmeteor test-packages ./\n\n# With custom port\nmeteor test-packages ./ --port 8888\n\n# With local MongoDB and custom port\nMONGO_URL=\"mongodb://127.0.0.1:27017/flow-router-title-tests\" meteor test-packages ./ --port 8888\n```\n\n## Support this project\n\n- Upload and share files using [☄️ meteor-files.com](https://meteor-files.com/?ref=github-flowroutertitle-repo-footer) — Continue interrupted file uploads without losing any progress. There is nothing that will stop Meteor from delivering your file to the desired destination\n- Use [▲ ostr.io](https://ostr.io?ref=github-flowroutertitle-repo-footer) for [Server Monitoring](https://snmp-monitoring.com), [Web Analytics](https://ostr.io/info/web-analytics?ref=github-flowroutertitle-repo-footer), [WebSec](https://domain-protection.info), [Web-CRON](https://web-cron.info) and [SEO Pre-rendering](https://prerendering.com) of a website\n- Star on [GitHub](https://github.com/veliovgroup/Meteor-flow-router-title)\n- Star on [Atmosphere](https://atmospherejs.com/ostrio/flow-router-title)\n- [Sponsor via GitHub](https://github.com/sponsors/dr-dimitru)\n- [Support via PayPal](https://paypal.me/veliovgroup)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveliovgroup%2Fmeteor-flow-router-title","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fveliovgroup%2Fmeteor-flow-router-title","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveliovgroup%2Fmeteor-flow-router-title/lists"}