kadirahq/meteor-dochead

Isomorphic way to manipulate document.head for Meteor apps

DocHead for Meteor

DocHead is an isomorphic way to manipulate document.head for Meteor apps.

With DocHead, you can easily set title and meta tags both in client and server using a single API. In the server side it'll use FlowRouter SSR.

Installation

meteor add kadira:dochead

Usage

In the Client Side, you can use DocHead anywhere in your app. But in the server, you need to use DocHead inside a React Component. Otherwise, it can't work properly.

In the server, you need to use kadira:flow-router-ssr

API

DocHead.setTitle(titleName)

Set title to the page.

var title = "FlowRouter Rocks";
DocHead.setTitle(title);

DocHead.getTitle()

Get the document title.

This API is reactive on the client. It only detect changes you made with DocHead.setTitle().

var title = DocHead.getTitle();
console.log("This is the document.title", title);

DocHead.addMeta(metaInfo)

Add a Meta tag.

var metaInfo = {name: "description", content: "FlowRouter SSR is Awesome"};
DocHead.addMeta(metaInfo);

DocHead.addLink(metaInfo)

Add a Link tag.

var linkInfo = {rel: "icon", type: "image/png", href: "/icon.png"};
DocHead.addLink(linkInfo);

DocHead.addLdJsonScript(jsonObj)

Add a Script tag with type of application/ld+json.

var richSnippet = { '@context': 'http://schema.org', '@type': 'Organization', url: 'http://www.example.com', logo: 'http://www.example.com/images/logo.png' };
DocHead.addLdJsonScript(richSnippet);

DocHead.loadScript(scriptName, options, callback) - [client only]

Load an script dynamically from the client side of your app. Both options and callback are optional.

Behind the scene DocHead.loadScript uses load-script npm module. Visit here to learn more about options.

var gaScript = 'https://www.google-analytics.com/analytics.js';
DocHead.loadScript(gaScript, function() {
    // Google Analytics loaded
    ga('create', 'UA-XXXX-Y', 'auto');
    ga('send', 'pageview');
});

DocHead.removeDocHeadAddedTags()

When you add meta tags multiple times, older tags will be kept in the document.head. So, we need to clean them. For that, we can use this API.

Practially, we can use this before a route change happen.

DocHead.removeDocHeadAddedTags() is already added to FlowRouter SSR.

This API only functioning in the client. In the server, this does nothing.

Testing the package

meteor test-packages ./ --port 3010

meteor-dochead's Issues

npmLoadScript is not defined

Title says it all. I cannot load a script. Thanks.

how to add this to flow router ssr

hello,

Is there a way to add this to this example http://flow-react-ssr.meteor.com/ ?

required way of function is when on the index page title will be a general one "Welcome"

But on the each other page the "Post title" will be the <title>

Any advise please ?

Body.addClass and Body.replaceClasses

Would be nice to be able to set Body classes with this package or another package.

Body.addClass("mobile") // Add a new class to the body tag.
Body.removeClass("mobile") // Remove class(es) from the body tag.
Body.replaceClasses("desktop") // Replace all classes with "desktop" only.
Body.replaceClasses("") // Remove all classes.

How about it?

non-English characters get translated differently in title tag

I was trying to insert some non-English characters into the title tag, Characters displayed correctly without errors, but in the source code, they get translated into some unrecognized characters. (Looks like some escaped UTF8 characters)

For example,

DocHead.setTitle('タイトル');

Gets translated into this

<title>&#x30BF;&#x30A4;&#x30C8;&#x30EB;</title>

I already put the meta tag with charset set to utf-8, but source code still remains the same
see my forked repo: https://github.com/awsp/hello-react-meteor
→ https://github.com/awsp/hello-react-meteor/blob/master/both/router.jsx

I would like it to be exactly the same as the title I input.
How would I possibly do it?

PS:
The body content being processed by the package flow-router-ssr displays non-English characters correctly even in source code. It seems to happen in <head> tag only.

EDIT
This issue seems to happen in meta tag as well.

Duplicated Meta Tags

Hello,

I'm using Dochead with Urigo/angular-meteor and i have an issue with DocHead.addMeta it append the meta Tags instead of replace it.

How can avoid that append!

fixes dyaa/deeMeteor#6

Support to replace link tags

We change favicons for different sections of our app, however dochead can only append or remove all tags, no option to update or tags is present.

If someone adds another meta tag with the same name or another link tag with type='icon' shouldn't this replace the old one?

If this also not possible, at least a reference to the DOM node should be returned for altering at a later time.

both.js:47 Resource interpreted as Stylesheet but transferred with MIME type text/html:

Hi. I'm trying to import css from onsenui, and Chrome browser shows this error. How can I have a workaround here? Thanks

Cant get Dochead to work?

Im sure this is a basic problem.. but i cant get dochead to work at all?

I have tried to add it in a component... in a container.. in a componentDidMount etc..

import { DocHead } from 'meteor/kadira:dochead';

DocHead.setTitle("Some title");

i view source.. and do not see the meta.

Do i need Spiderable / phantom.js to make this work?

Im using Mantra.. not using Flow-Router SSR

Better check/remove API

I'd like to be able to add links only on some routes (or route groups), and remove them when I go to other routes, but there is no easy way to check if the link has been added, or to remove only a single tag. Flow Router also lacks the necessary hooks to make this smooth.

With Flow you can do it in triggersEnter but if you are navigating between pages that rely on bootstrap (for example) you'll get a flash of unstyled content between routes.

It would be nicer if there was a registry or some way to check if the tag has already been added. I propose the following:

1. Add a method to remove links based on a globally unique field, such as href/src.
2. Add a method to check if links are added based on a globally unique field such as href/src.
3. Have the add methods return a handle that can be passed to a remove method, or that contains methods to manage the lifecyle of the link.

These methods would also help with issue #34

I'm happy to make a PR for these.

Cannot find module 'load-script'

@kadirahq After updating the package to Version 1.2.0 is seems that there's an error

While processing files with cosmos:browserify (for target web.browser):
   packages/kadira:dochead/package.browserify.js: Cannot find module 'load-script' from '/home/User/dir/meteor/packages/dochead/.npm/package'

How can i solve that, I cant even run the server.

improve api

hi i am missing some methods like: setOgImage() or setOgTitle() and so on...

loadScript with data-foo

Hello,

I'd like to add a lib with the same result as follow:

<script data-foo src='https://foo.com/foo.js' async></script>

I see I can do that (async is default):

DocHead.loadScript('https://foo.com/foo.js', () => {
  console.log('foo is ready');
});

But what is the best way to add data-foo ?

Thx

Build error on Meteor 1.2.0.2

Trying to run meteor on the new version 1.2.0.2 with kadira:[email protected] results in the following:

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

   While processing files with cosmos:browserify (for target web.browser):
   packages/kadira:dochead/package.browserify.js: Arguments to path.resolve must be strings

   While processing files with cosmos:browserify (for target web.cordova):
   packages/kadira:dochead/package.browserify.js: Arguments to path.resolve must be strings

=> Your application has errors. Waiting for file change.

client.browserify issue with meteor 1.3 beta.16 and above

kadirahq/flow-router#552
^ Same issue as experienced here.

=> Started proxy.                             
=> Started MongoDB.                           
=> Errors prevented startup:                  

While processing files with cosmos:browserify (for target web.browser):
packages/kadira:flow-router/client.browserify.js: Arguments to path.resolve must be strings

Browserify options:
>  undefined
packages/kadira:dochead/package.browserify.js: Arguments to path.resolve must be strings

Browserify options:
>  undefined

Version for blaze?

The package is using jsx and react, will there be a non-react version for vanilla blaze? Maybe with some added features like OG title, image, etc?

Facebook Pixel

I can't figure out how to add a Facebook Pixel. Any help would be appreciated. Thanks

Is this package still being maintained?

Hello!
With Arunoda leaving meteor and all that, is kadira's packages still being maintained? Including this one

GA track every page

Hi, how to set up GA to track every pageview ?

i come up with this solution:

var gaScript = 'https://www.google-analytics.com/analytics.js';
DocHead.loadScript(gaScript, function() {
  ga('create', 'UA-XXXXXX-Y', 'auto');

  FlowRouter.triggers.enter([(context) => {
    ga('send', 'pageview', {path: context.path});
  }]);
});

but sometimes enter trigger is not fired on page load...

setup dochead

im new in dochead and i have downloaded the package but i dont know how can i setup dochead in my meteor project

Where should i add DocHead.loadScript?

Trying to add DocHead.loadScript but can't get it to work. Could you please tell me where and how to add this in a Flowrouter-srr stack

var gaScript = 'https://www.google-analytics.com/analytics.js';
DocHead.loadScript(gaScript, function() {
    // Google Analytics loaded
    ga('create', 'UA-XXXX-Y', 'auto');
    ga('send', 'pageview');
});

Made a good effort myself to get it to work. Asked on Meteor forum, Stackoverflow, Tons of Google & and even searched through all github repos after some repo that used it in it's code, But nothing...

Putting up good examples would make the biggest difference, saving time for both users and on your part eliminating loads of questions.

Local tests fails

• The file package.browserify.js is missing.
• Local test launch with meteor test-packages ./ --port 3010 is not able to find the npm directory.

Twitter and Open Graph tags

In addition to title and meta tags, it would help to add twitter and open graph tags as well.

It looks to me as no big task and I would be willing to add the code.

Version 1.3.0 breaks Safari compatibility

After updating to 1.3.0, I get the following error in the console. This happens in Safari 9.0 on OSX and iOS 9

TypeError: undefined is not an object (evaluating 'elements[key].parentNode.removeChild')
removeDocHeadAddedTagsboth.js:77
startupstartup_client.js:62
(anonymous function)flow_router.js:4
runTriggerstriggers.js:78
_actionHandlerouter.js:104
(anonymous function)client.browserify.js:569
nextEnterclient.browserify.js:401
dispatchclient.browserify.js:407
replaceclient.browserify.js:369
(anonymous function)router.js:381
startclient.browserify.js:265
pageclient.browserify.js:199
initializerouter.js:390
(anonymous function)_init.js:8
runStartupCallbacksstartup_client.js:29
readystartup_client.js:31

Rich Snippets v2

I would like to add support for a addScript method for Rich Snippets v2. It enhances the SEO.

Some info:

• Specs: https://developers.google.com/structured-data/rich-snippets/
• Validator + Sample: https://developers.google.com/structured-data/testing-tool/

Should be interesting for a product like Kadira 😄

Does dochead work with Blaze in 1.2

The dochead doesn't work for me in 1.2 with blaze.

In the head code, I set the default to run in flowrouter trigger enter and in router action.
The head show the code 2 times.
But in facebook debug, I just doesn't make it work!

Can I add stylesheets which point to cdn

I could not make it work. For instance how to add:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300,300italic&subset=latin,cyrillic-ext" rel='stylesheet' type='text/css'>
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Remove Jquery

This small package adds heavy jquery in the app. Can we get rid of it please?

Cannot read property '0' of undefined

I'm stuck trying to get docHead added. Seems like browserify doesn't like my setup. This is the error message in question:

Errors prevented startup:

While processing files with cosmos:browserify (for target web.browser):
packages/kadira:dochead/package.browserify.js: Cannot read property '0' of undefined

Your application has errors. Waiting for file change.

Has anyone else experience such an error? I'm using FlowRouter + Blaze.

UPDATE: This is related to #11 & #12 , running meteor update cosmos:browserify fixed the issue. For the record I am running this on Win10.