npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mber-head

v0.1.4

Published

An addon to easily set document head content via a template.

Downloads

7

Readme

Ember-cli-head Build Status

This addon adds easy population of head tags from your Ember code without any direct hacky dom manipulation. This addon also provides ember-cli-fastboot compatability for generating head tags in server rendered apps.

The hope is that Ember itself will provide a mechanism for populating head tags from your app at some time in the future. Until then this addon provides that functionality.

Installation

Install by running

ember install ember-cli-head

And add {{head-layout}} to the top of your application template.

Version

Take into account that version >= 0.3 of this addon require Ember 2.10+ and fastboot >=1.0.rc1 Please use 0.2.X if you don't fulfull both requirements.

Usage

Template

By installing this addon you will find a new template added to your app:

app/templates/head.hbs

The contents of this template will be inserted into the <head> element of the page.

Service

There will be a model in the rendering scope of this template. This model is actually an alias for the head-data service. You can set whatever data you want to be available in the template directly on that service.

Example

Setting content data in route

// app/routes/application.js

import Ember from 'ember';

const { set } = Ember;

export default Ember.Route.extend({
  // inject the head data service
  headData: Ember.inject.service(),
  afterModel() {
    set(this, 'headData.title', 'Demo App');
  }
});

Using the service as model in head.hbs

<meta property="og:title" content={{headData.title}} />

Resulting head

This will result in a document along the lines of:

<html data-ember-extension="1">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Ember App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <base href="/">

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/my-app.css">

    <meta property="og:title" content="Demo App">
  </head>
  <body class="ember-application">


    <script src="assets/vendor.js"></script>
    <script src="assets/my-app.js"></script>
    <div id="ember383" class="ember-view"><h2 id="title">Welcome to Ember</h2>

    </div>
  </body>
</html>

Fastboot Only

The primary need for this library is to support various bots and web crawlers. To that end the head content is only truly needed in a server rendered (ie FastBoot) environment. However by default the library will keep the head content in sync with any transitions/data changes that occur in your Ember App while running in the browser. This can be useful for development and/or debugging.

If you do not wish to have the head content "live" while running in browser you can restrict this library to work only in FastBoot by adding the following to your config/environment.js:

module.exports = function(environment) {
  var ENV = {
    'ember-cli-head': {
        suppressBrowserRender: true
    }
  };
}

Upgrade to 0.4.x

As mentioned above you need to add the {{head-layout}} component once and only once in an application wide template. This template is usually app/templates/application.hbs, but could be different in your case. Previously, in ember-cli-head 0.3.x and below the component was appended to the document inside an instance initializer. This prevented the need for the {{head-layout}} component as it was automatically injected and used inside that initializer. Unfortunately, this approach needed to change so that we could render the component with the rest of the application rendering.

If you care to read more about the details of render please see the PR that introduced these changes https://github.com/ronco/ember-cli-head/pull/37

But for now, if you are upgrading to 0.4.x, you simply need to add {{head-layout}} component to your application wide template.

If you make use of this mode the content of <head> will be the static FastBoot rendered content through the life of your App.