Reactive meta tags and CSS for meteor within iron-router

Change meta tags on the fly within iron-router. This package can create meta tags, and link tags as well.

This package may also help to use dynamic CSSs, so you may use different style sheets - for different routes.

This package supports meta and link options (properties) defined on objects below, ordered by prioritization:

• Router.route() [overrides all]
• RouteController.extend()
• Router.configure() [might be overridden by any above]

Note: this package implies ostrio:iron-router-title package.

Install:

meteor add ostrio:iron-router-meta

Demo application:

iron-router-meta.meteor.com

Usage:

Change CSS per route:

1# Set default CSS for all routes
2Router.configure
3  link:
4    stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"
5
6# Rewrite default CSS, for second route, via controller:
7secondPageController = RouteController.extend
8  link:
9    stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
10Router.route 'secondPage', controller: secondPageController
11
12# Rewrite default CSS, for third route via route settings:
13Router.route 'thirdPage', 
14  link:
15    stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"

Set default values in Router.configure()

1Router.configure
2  meta:
3    charset:
4      charset: 'UTF-8'
5    keywords: 
6      name: 'keywords'
7      itemprop: 'keywords'
8      content: 'Awesome, Meteor, based, app'
9    robots: 'index, follow'
10    google: 'notranslate'
11
12  link:
13    canonical: ->
14      window.location.href
15    image:
16      rel: 'image'
17      sizes: '500x500'
18      href: 'http://doma..'
19    publisher: 'http://plus.google...'

Then override default values in each route:

1Router.route 'account',
2  template: 'account'
3  path: '/me/account'
4  title: 'My Account'
5  meta:
6    keywords: 
7      name: 'keywords'
8      itemprop: 'keywords'
9      content: 'User, Account'

Set tags via RouteController:

1accountController = RouteController.extend(meta: keywords: 'User, Account')
2Router.route 'account', controller: accountController

Set only name and content attributes on meta tag:

1Router.route 'routeName',
2  meta:
3    name: 'content'

Set only rel and href attributes on link tag:

1Router.route 'routeName',
2  link:
3    rel: 'href'

Set multiple attributes on meta tag:

1Router.route 'routeName',
2  meta:
3    uniqueName: 
4      name: 'name'
5      content: 'content'
6      value: 'value'
7      'og:prop': 'value'
8      itemprop: 'value'

Set multiple attributes on link tag:

1Router.route 'routeName',
2  link:
3    uniqueName: 
4      rel: 'name'
5      sizes: 'value'
6      href: 'value'
7      type: 'value'

You can pass functions as value:

1Router.route 'routeName',
2  meta:
3    url:
4      property: 'og:url'
5      itemprop: 'url'
6      content: ->
7        window.location.href
8  link:
9    canonical: ->
10      window.location.href

Use function context:

1Router.route 'post',
2  template: 'post'
3  path: '/post/:_id'
4  meta: ->
5    keywords: 
6      name: 'keywords'
7      itemprop: 'keywords'
8      content: ->
9        @data.getKeywords()
10  data:
11    getKeywords: ->
12      Collection.Posts.findOne(@params._id).keywords

Sample config

1Router.configure
2  meta:
3    # <meta charset="UTF-8">
4    charset:
5      charset: 'UTF-8'
6
7    # <meta name="keywords" content="Awes..">
8    keywords: 
9      name: 'keywords'
10      itemprop: 'keywords'
11      content: 'Awesome, Meteor, based, app' 
12    
13    # <meta name="description" itemprop="description" property="og:description" content="Default desc..">
14    description:
15      name: 'description'
16      itemprop: 'description'
17      property: 'og:description'
18      content:  'Default description'
19
20    image:
21      name: 'twitter:image'
22      itemprop: 'image'
23      property: 'og:image'
24      content: 'http://doma..'
25
26    'og:type': 'website'
27    'og:title': ->
28      document.title
29    'og:site_name': 'My Awesome Site'
30
31    url:
32      property: 'og:url'
33      itemprop: 'url'
34      content: ->
35        window.location.href
36
37    'twitter:card': 'summary'
38    'twitter:title': ->
39      document.title
40    'twitter:description': 'Default description'
41    'twitter:site': 
42      name: 'twitter:site'
43      value: '@twitterAccountName'
44    'twitter:creator': 
45      name: 'twitter:creator'
46      value: '@twitterAccountName'
47
48    'http-equiv':
49      'http-equiv': 'X-UA-Compatible'
50      content: 'IE=edge,chrome=1'
51
52    robots: 'index, follow'
53    google: 'notranslate'
54  
55
56  link:
57    # <link href="https://maxcdn.bootstrapcdn.com/..." rel="stylesheet">
58    stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"
59
60    # <link rel="canonical" href="http://doma..">
61    canonical: ->
62      window.location.href
63
64    # <link rel="image" sizes="500x500" href="http://doma..">
65    image:
66      rel: 'image'
67      sizes: '500x500'
68      href: 'http://doma..'
69
70    publisher: 'http://plus.google...'
71
72    'shortcut icon':
73      rel: 'shortcut icon'
74      type: 'image/x-icon'
75      href: 'http://domai...'
76
77    'icon':
78      rel: 'icon'
79      type: 'image/png'
80      href: 'http://domai...'
81
82    'apple-touch-icon-144':
83      rel: 'apple-touch-icon'
84      sizes: '144x144'
85      href: 'http://doma..'
86    'apple-touch-icon-114':
87      rel: 'apple-touch-icon'
88      sizes: '114x114'
89      href: 'http://doma..'
90    'apple-touch-icon-72':
91      rel: 'apple-touch-icon'
92      sizes: '72x72'
93      href: 'http://doma..'
94    'apple-touch-icon-57':
95      rel: 'apple-touch-icon'
96      sizes: '57x57'
97      href: 'http://doma..'