codepen-awesomepi - 源码 - 源码 - 免费下载

codepen-awesomepi

文件大小： unknow

源码售价： 5 个金币积分规则积分充值

资源说明：An unofficial API for CodePen.io

# CodePen AwesomePI

An unofficial API for [CodePen](http://codepen.io) made by a fan.

This simple API parses the requested CodePen page with the [PHP Simple HTML DOM Parser](http://sourceforge.net/projects/simplehtmldom/)
and returns JSON.

2012 - 2015 by http://timpietrusky.com


## Basics

### Base URL

    http://codepen-awesomepi.timpietrusky.com

### Response

The response is JSON-encoded (content-type: application/json).

If you want to use the response within JavaScript you can append `jsonp` as a callback.

### pentizr.js

Get your CodePens onto your website with [pentizr.js](https://github.com/TimPietrusky/pentizr).

```javascript
$(function() {
  $('.my-pens').pentizr({username: 'TimPietrusky'});
});
```

```html

  

```

#### JSONP example in jQuery

```javascript
$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: 'http://codepen-awesomepi.timpietrusky.com/picks',
    success: function (data) {
        alert(data);
    }
});
```


### Null values

If the value of a field is not specified, it will get the value `null`.

### Error handling

If the request is invalid you will get an error:

```javascript
{
    "status" : {
        "code":1337,
        "message":"invalid"
    },
    "content":null
};
```

### URL explanation

Why are there four URLs?


    
        URL
        Description
    
    
    
        pen
        Code split view: Above is the source code (HTML, CSS, JS) and below is the CodePen
    
    
    
        details
        Details split view: Above are details, stats, lovers and comments and below is the CodePen
    
    
    
        full
        The CodePen is shown fullpage
    
    
    
        fullgrid
        The CodePen is shown fullpage, but all interactive stuff e.g. CSS3 animation or requestAnimationFrame is stopped after 5 seconds
    



## API Reference

### /<user>

CodePens for a specific user. 

#### Method

    http://codepen-awesomepi.timpietrusky.com/{username}/{type}/{page}

#### Parameters


    
        Parameter
        Type
        Description
        Required
    

    
    	username
    	String
    	Name of the CodePen user
    	Yes
    

    
        type
        String
        
            
                public (former owned)
                    
                        list
                    
                loved
                forked
                pen
            
        
        No
    

    
        page
        Number
        The page to show
        No
    




#### Example

Display page "1" of all "public" pens of user "TimPietrusky"

    http://codepen-awesomepi.timpietrusky.com/TimPietrusky/public/1

If you don't specify the page, it's automatically set to "1"

    http://codepen-awesomepi.timpietrusky.com/TimPietrusky/public

```javascript
{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":"Breaking Bad",
                "description":"A tribute to the best fucking series in the world. ",
                "views":75218,
                "hearts":100,
                "comments":32,
                "url": {
                    "pen":"http:\/\/codepen.io\/TimPietrusky\/pen\/Bsegb",
                    "details":"http:\/\/codepen.io\/TimPietrusky\/details\/Bsegb",
                    "full":"http:\/\/codepen.io\/TimPietrusky\/full\/Bsegb",
                    "fullgrid":"http:\/\/codepen.io\/TimPietrusky\/fullgrid\/Bsegb"
                },
                "hash":"Bsegb"
            }
        ]
    }
};

/* Note: Output was shortened. */
```

### /<user>/pen

A specific CodePen for a specific user. 

#### Method

    http://codepen-awesomepi.timpietrusky.com/{username}/pen/{hash}

#### Parameters


    
        Parameter
        Type
        Description
        Required
    

    
        username
        String
        Name of the CodePen user
        Yes
    

    
        pen
        String
        Get source (CSS, HTML, JavaScript) and tags
        Yes
    

    
        hash
        String
        The unique hash of the CodePen
        Yes
    



#### Example

Get the source of the pen **WebPlatform.org logo** and the configuration stuff (e.g. prefix-free or SASS enabled). 

    http://codepen-awesomepi.timpietrusky.com/TimPietrusky/pen/fCejn

```javascript
{
   "status":{
      "code":0,
      "message":"ok"
   },
   "content":{
      "pen":{
         "created_at":"2012-10-08T21:59:25Z",
         "css":"@import url(http:\/\/fonts.googleapis.com\/css?family=Bitter:700);\n\n$background: #f7f4f0;\n\n$orange: rgba(247, 147, 17, 1);\n$red: rgba(221, 35, 15, .8);\n$purple: rgba(88, 56, 153, .65);\n$cyan: rgba(46, 179, 196, 1);\n\n$middle: #873E77;\n\nbody {\n  background:$background;\n  margin:0;\n}\n\nh1 {\n  position:absolute;\n  left:50%;\n  top:60%;\n  margin:0 0 0 -4em;\n  height:.5em;\n  width:.5em;\n  font:bold 2em\/2.5em 'Bitter', Georgia, serif;\n  letter-spacing:-.04em;\n  color:#474646;\n  border-radius:50%;\n  box-shadow:\n    \/* left - cross *\/\n    3.7em -2.4em 0 -.065em $background,\n    2.25em -.95em 0 -.065em $background,\n    3.7em -2.4em 0 .25em $middle,\n    2.25em -.95em 0 .25em $red,\n    \n    \/* left - vertical *\/\n    2.25em -3.55em 0 -.065em $background,\n    2.25em -3.55em 0 .25em $orange,\n    2.25em -.95em 0 .25em $orange,\n    \n    \/* right - cross *\/\n    5.155em -.95em 0 -.065em $background,\n    5.155em -.95em 0 .25em $purple,\n    \n    \/* right - vertical *\/\n    5.155em -3.55em 0 -.065em $background,\n    5.155em -3.55em 0 .25em $cyan,\n    5.155em -.95em 0 .25em $cyan\n  ;\n}\n\nh1:hover {\n  -webkit-filter:grayscale(.65);\n  filter:grayscale(.65);\n}\n\nh1:before,\nh1:after,\nh1 span:before,\nh1 span:after {\n  position:absolute;\n  content:'';\n  width:1em;\n}\n\n\/* left - vertical *\/\nh1:after {\n  z-index:-2;\n  height:2.55em;\n  top:-3.25em;\n  left:2em;\n  background:$orange;\n}\n\n\/* left - cross *\/\nh1:before {\n  z-index:-1;\n  height:2em;\n  top:-2.45em;\n  left:2.76em;\n  background:$red;\n  transform:rotate(45deg);\n}\n\nh1 span {\n  position:absolute;\n  left:6.475em;\n  top:0;\n  color:#a3a2a2;\n}\n\n\/* right - vertical *\/\nh1 span:after {\n  z-index:-2;\n  height:2.55em;\n  top:-3.25em;\n  left:-1.57em;\n  background:$cyan;\n}\n\n\/* right - cross *\/\nh1 span:before {\n  z-index:-1;\n  height:2em;\n  top:-2.45em;\n  left:-2.325em;\n  background:$purple;\n  transform:rotate(-45deg);\n}",
         "css_external":"",
         "css_pre_processor":"scss",
         "css_prefix_free":true,
         "css_starter":"neither",
         "description":"I want to celebrate the launch of the http:\/\/WebPlatform.org! A place to document the web for everybody. \n\nIt's the first version and it should definitely be improved & simplified.\n\nYou can see the single elements on ```h1:hover```\n\n## Web What?\nhttp:\/\/blog.webplatform.org\/2012\/10\/one-small-step",
         "head":"",
         "html":"WebPlatform.org<\/span><\/h1>",
         "html_classes":"",
         "html_pre_processor":"none",
         "js":"\/**\n  WebPlatform.org logo\n  \n  # What? #\n  I want to celebrate the launch of the WebPlatform.org! \n  A place to document the web for everybody. \n\n\n  # 2012 by Tim Pietrusky\n  # timpietrusky.com\n**\/",
         "js_external":"",
         "js_library":"none",
         "js_modernizr":false,
         "js_pre_processor":"none",
         "private":null,
         "hash":"fCejn",
         "title":"WebPlatform.org logo",
         "updated_at":"2012-10-10T06:59:08Z",
         "url":{
            "pen":"http:\/\/codepen.io\/TimPietrusky\/pen\/fCejn",
            "details":"http:\/\/codepen.io\/TimPietrusky\/details\/fCejn",
            "full":"http:\/\/codepen.io\/TimPietrusky\/full\/fCejn",
            "fullgrid":"http:\/\/codepen.io\/TimPietrusky\/fullgrid\/fCejn"
         }
      },
      "tags":[
         "css",
         "logo",
         "webplatform"
      ]
   }
}
```

### /picks

Editor's Picks.

#### Method

    http://codepen-awesomepi.timpietrusky.com/picks/{page}

#### Parameters


    
        Parameter
        Type
        Description
        Required
    

    
        page
        Number
        The page to show
        No
    


#### Example

Display page "2" of Editor's Picks

    http://codepen-awesomepi.timpietrusky.com/picks/2

```javascript
{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":"CSS Dribbble invite request",
                "description":"Pure CSS Dribbble logo. Pure CSS loader. Pure CSS animations. Pure CSS refle...",
                "views":320,
                "hearts":9,
                "comments":7,
                "url": {
                    "pen":"http:\/\/codepen.io\/HugoGiraudel\/pen\/FBbDd",
                    "details":"http:\/\/codepen.io\/HugoGiraudel\/details\/FBbDd",
                    "full":"http:\/\/codepen.io\/HugoGiraudel\/full\/FBbDd",
                    "fullgrid":"http:\/\/codepen.io\/HugoGiraudel\/fullgrid\/FBbDd"
                },
                "hash":"FBbDd",
                "user": {
                    "nickname":"HugoGiraudel",
                    "realname":"Hugo Giraudel",
                    "gravatar":"https:\/\/secure.gravatar.com\/avatar\/729edf889ced7863dedba95452272bca?d=https:\/\/a248.e.akamai.net\/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"
                }
            }
        ]
    }
};

/* Note: Output was shortened. */
```


### /popular

The most popular pens.

#### Method

    http://codepen-awesomepi.timpietrusky.com/popular/{page}

#### Parameters


    
        Parameter
        Type
        Description
        Required
    

    
        page
        Number
        The page to show
        No
    


#### Example

```javascript
{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":"CSS3 iPhone v0.1",
                "description":"CSS3 iPhone v0.1 by Dylan Hudson (@dyln_hdsn on twitter)",
                "views":77500,
                "hearts":77,
                "comments":20,
                "url": {
                    "pen":"http:\/\/codepen.io\/dylnhdsn\/pen\/pheJs",
                    "details":"http:\/\/codepen.io\/dylnhdsn\/details\/pheJs",
                    "full":"http:\/\/codepen.io\/dylnhdsn\/full\/pheJs",
                    "fullgrid":"http:\/\/codepen.io\/dylnhdsn\/fullgrid\/pheJs"
                },
                "hash":"pheJs",
                "user": {
                    "nickname":"dylnhdsn",
                    "realname":"dylnhdsn",
                    "gravatar":"https:\/\/secure.gravatar.com\/avatar\/2e6377be71ded525989c6c101ddf133a?d=https:\/\/a248.e.akamai.net\/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"
                }
            }
        ]
    }
};

/* Note: Output was shortened. */
```


### /recent

Recently added pens.

#### Method

    http://codepen-awesomepi.timpietrusky.com/recent/{page}

#### Parameters


    
        Parameter
        Type
        Description
        Required
    

    
        page
        Number
        The page to show
        No
    


#### Example

```javascript
{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":null,
                "description":null,
                "views":1,
                "hearts":"",
                "comments":0,
                "url": {
                    "pen":"http:\/\/codepen.io\/chrisxclash\/pen\/mzoHt",
                    "details":"http:\/\/codepen.io\/chrisxclash\/details\/mzoHt",
                    "full":"http:\/\/codepen.io\/chrisxclash\/full\/mzoHt",
                    "fullgrid":"http:\/\/codepen.io\/chrisxclash\/fullgrid\/mzoHt"
                },
                "hash":"mzoHt",
                "user": {
                    "nickname":"chrisxclash",
                    "realname":"chrisxclash",
                    "gravatar":"https:\/\/secure.gravatar.com\/avatar\/6d0056af25ebcda49d4e38c6985e6cb1?d=https:\/\/a248.e.akamai.net\/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"
                }
            }
        ]
    }
};

/* Note: Output was shortened. */
```

URL	Description
pen	Code split view: Above is the source code (HTML, CSS, JS) and below is the CodePen
details	Details split view: Above are details, stats, lovers and comments and below is the CodePen
full	The CodePen is shown fullpage
fullgrid	The CodePen is shown fullpage, but all interactive stuff e.g. CSS3 animation or requestAnimationFrame is stopped after 5 seconds

Parameter	Type	Description	Required
username	String	Name of the CodePen user	Yes
type	String	public (former owned) list loved forked pen	No
page	Number	The page to show	No

Parameter	Type	Description	Required
username	String	Name of the CodePen user	Yes
pen	String	Get source (CSS, HTML, JavaScript) and tags	Yes
hash	String	The unique hash of the CodePen	Yes

Parameter	Type	Description	Required
page	Number	The page to show	No

Parameter	Type	Description	Required
page	Number	The page to show	No

Parameter	Type	Description	Required
page	Number	The page to show	No

部分文件列表（点击文件名可查看文件内容）

					
									本源码包内暂不包含可直接显示的源代码文件，请下载源码包。