Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 
 
 

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
    });
  });
});

About

A simple jQuery plugin to show CodePen's on a personal website.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.