A simple jQuery plugin to show CodePen's on a personal website.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
.gitignore
README.md
build.js
index.html

README.md

pentizr.js

A simple jQuery plugin which uses the unofficial CodePen API to show pens on a personal website.

pentizr uses the unofficial CodePen API to fetch the data and creates some nice output for you.

If you like this, please hit me @TimPietrusky so that I can add your site to the live examples!

But just see for yourself... A pentizr custom template in action:

Live examples

Johan van Tongeren aka "Dreamdealer"

dreamdealer.nl/#codepens

Patrick Cox

patrick-cox.com

Tim Pietrusky

timpietrusky.com/lab

How to

Step 1: Default stuff

Add jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Step 2: pentizr

Add pentizr.js

<script src="https://raw.github.com/TimPietrusky/pentizr/master/js/pentizr-min.js"></script>

Step 2.5 (optional): Add pentizr.css

You can create your own (based on a simple template system) or add the default stuff:

<link rel="stylesheet" href="https://raw.github.com/TimPietrusky/pentizr/master/css/pentizr-min.css">

Step 3: GO GO GO!

We use the same HTML on all examples:

<div class="my-pens"></div>

Get owned pens of user "Mobilpadde" (aka Mads "The Cat" Cordes)

$(function() {
  $('.my-pens').pentizr({username: 'Mobilpadde'});
});

Get 6 owned pens of user "Dreamdealer" (aka Johan van Tongeren)

$(function() {
  $('.my-pens').pentizr({
    username: 'Dreamdealer',
    type: 'owned',
    limit: 6
  });
});

Create a custome template and get your owned pens of user "TimPietrusky"

$(function() {
    $('.my-pens').pentizr({
        username: 'TimPietrusky', 
        type : 'owned', 
        limit : 9,
        callback : function() {
            // Custom callback after everything was created (elements are dom ready)
            _1337.toggleEntry();
        },
        // A custom template
        template : ''+
        '<div class="entry">'+
            '<h2 class="label" id="{{title}}" data-label="{{hearts}} ♥ | {{views}} views">{{title}}</h2>'+
            '<div class="entry-body">'+
                '<p></p>'+
                '<p>{{description}}</p>'+
                '<hr>'+
                '<b>See it in action</b>'+
                '<p><a href="{{urlPen}}" target="_blank">{{urlPen}}</a></p>'+
                '<b>Write a comment</b>'+
                '<p><a href="{{urlDetails}}" target="_blank">{{urlDetails}}</a></p>'+
            '</div>'+
        '</div>'
    });
});

Get last 3 loved pens of user "HugoGiraudel"

$(function() {
  $(function() {
    $('.my-pens').pentizr({
      username : 'HugoGiraudel',
      type : 'loved',
      limit : 3
    });
  });
});