Giter Club home page Giter Club logo

punch-thirdparty-snippets-helper's Introduction

Punch Third Party Snippets Helper

Collection of third party snippets (Google Analytics, Disqus, Tweet Button & Web Font Loader), you can easily add to your Punch templates.

How to Use

  • Install the package

    npm install punch-thirdparty-snippets-helper

  • Open your Punch project's configurations (config.json) and add the following:

      "plugins": {
    
      	"helpers": {
      		"thirdparty_snippets_helper": "punch-thirdparty-snippets-helper"
      	}
    
      }
    
  • You must then define the configurations for the snippets you wish to use as follows:

      "thirdparty_snippets": {
    
      	"google_analytics": {
      		"universal": true
      		"property_id": "UA-XXXXXX-X"
      		"property_domain": "yoursite.com"
      	},
    
      	"disqus": {
      		"shortname": "username"
      	},
    
      	"twitter": {
      		"user": "screename"
      	},
    
      	"web_fonts": {
      		"google": {
      			"families": ['Droid Sans', 'Droid Serif']
      		}
      	},
      }
    

Here is a full list of options available for each snippet:

Google Analytics

  • universal: (optional, default to false) - if true, use the new universal google analytics tracking code
  • property_domain (optional, default to auto) - only use when universal is true
  • proterty_id (required) - The property ID for the site you want to track (Learn More)
  • async - Whether to load the script in asynchronous mode, which will start tracking the events immediately without blocking the page rendering (default: true)

Disqus

  • shortname (required) - Shortname provided for your discuss account.

Tweet Button

  • via - Screen name of the user to attribute the Tweet to
  • count - Count box position values: none, horizontal, vertical (default: none)
  • size - The size of the rendered button values: medium, large (default: medium)

WebFont Loader

You must provide the configuration of fonts to load as defined in the WebFont Loader library

For example to use Google Fonts:

	"web_fonts": {
		"google": {
			"families": ['Droid Sans', 'Droid Serif']
		}
	}

or Typekit:

	"web_fonts": {
		typekit: {
			id: 'xxxxxx'
		}
	}

License

Copyright (c) 2012 Licensed under the MIT license.

punch-thirdparty-snippets-helper's People

Contributors

laktek avatar constantx avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.