Skip to content

Commit

Permalink
Update (WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@typicode
typicode committed Feb 10, 2015
1 parent 98a6267 commit 2cd98cd
Show file tree
Hide file tree
Showing 2 changed files with 204 additions and 70 deletions.
187 changes: 123 additions & 64 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,136 @@
<meta name="description" content="Fake online REST API for developers">
<meta name="author" content="Typicode">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/mono-blue.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" type="text/css" href="style.css">

<!-- Google plus -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>

<p class="social-buttons">
<iframe src="http://ghbtns.com/github-btn.html?user=typicode&repo=json-server&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</p>

<h1>JSONPlaceholder</h1>
<small>powered by <a href="https://github.com/typicode/json-server">JSON Server</a></small>
<header>
<!-- Twitter button -->
<div class="inline">
<a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

<p>
The Little Fake REST API for developers.
</p>
<p>
Use it whenever you need some data.
</p>

<h2>
Try it
</h2>
<!-- Google plus -->
<div class="inline">
<div class="g-plusone" data-size="medium"></div>
</div>

<p>Run this code in a console or from anywhere (CORS and JSONP supported)</p>
<!-- Facebook -->
<div class="inline">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<pre><code class="javascript">var root = 'http://jsonplaceholder.typicode.com';

$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
console.log(data);
});</code></pre>
<div class="fb-like" data-href="http://jsonplaceholder.typicode.com/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="false"></div>
</div>

<p>
<button id="run">Run</button>
</p>
<h1>JSONPlaceholder<br>{:}</h1>

<p id="result" class="json"></p>
<p>
Online Fake REST API for Developers
</p>

<h2>Resources</h2>
<p>
<small>powered by <a href="https://github.com/typicode/json-server">JSON Server</a></small>
</p>
</header>

<p>
<ul>
<li><a href="/posts">/posts</a></li>
<li><a href="/comments">/comments</a></li>
<li><a href="/albums">/albums</a></li>
<li><a href="/photos">/photos</a></li>
<li><a href="/todos">/todos</a></li>
<li><a href="/users">/users</a></li>
</ul>
</p>
<div class="narrow">
<h2>What?</h2>

<h2>Routes</h2>
<p>JSONPlaceholder is a free online REST service you can use whenever you need some fake data.</p>

<pre>
<code class="nohighlight">GET /posts
GET /posts/1
GET /posts/1/comments
GET /posts
POST /posts
PUT /posts/1
PATCH /posts/1
DEL /posts/1</code>
</pre>
<h2>Example</h2>

<h2>YOUR own DATA</h2>
<p>Run this code in a console or from anywhere (CORS and JSONP supported)</p>

<p>
<a href="https://github.com/typicode/json-server">JSON Server</a> lets you have a similar fake API with your own structures in less than a minute.
</p>
<pre><code class="javascript">var root = 'http://jsonplaceholder.typicode.com';

<p>
Coded and built with heart by <a href="https://github.com/typicode">Typicode</a>.
</p>
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
console.log(data);
});</code></pre>

<p id="os-x">
Lorem Ipsum
</p>
<p>
<button id="run">Run</button>
</p>

<p id="result" class="json"></p>

<h2>Resources</h2>

<p>
Here are all the available resources. Inspired by common use-cases.
</p>

<table>
<tr><td><a href="/posts">/posts</a><td><td>100 items</td></tr>
<tr><td><a href="/comments">/comments</a><td><td>500 items</td></tr>
<tr><td><a href="/albums">/albums</a><td><td>100 items</td></tr>
<tr><td><a href="/photos">/photos</a><td><td>200 items</td></tr>
<tr><td><a href="/todos">/todos</a><td><td>200 items</td></tr>
<tr><td><a href="/users">/users</a><td><td>10 items</td></tr>
</table>

<h2>Routes</h2>

<p>
All verbs are supported
</p>

<table>
<tr><td class="verb">GET</td><td><a href="/posts">/posts</a></td></tr>
<tr><td class="verb">GET</td><td><a href="/posts/1">/posts/1</a></td></tr>
<tr><td class="verb">GET</td><td><a href="/posts/1/comments">/posts/1/comments</a></td></tr>
<tr><td class="verb">GET</td><td><a href="/posts?postId=1">/comments?postId=1</a></td></tr>
<tr><td class="verb">POST</td><td>/posts</td></tr>
<tr><td class="verb">PUT</td><td>/posts/1</td></tr>
<tr><td class="verb">PATCH</td><td>/posts/1</td></tr>
<tr><td class="verb">DELETE</td><td>/posts/1</td></tr>
</tr>
</table>

<p>
View usage <a href="https://github.com/typicode/jsonplaceholder">examples</a>.
</p>

<h2>Use it with YOUR own DATA</h2>

<p>
<a href="https://github.com/typicode/json-server">JSON Server</a> powers this website.
You can use it to create a <strong>fake API</strong> in seconds with <strong>zero coding</strong>.
</p>

<pre>
<code class="bash">$ npm install -g json-server</code>
</pre>

<p id="os-x">
Hey, you seem to be on OS X. Check also <a href="https://github.com/typicode/katon">katon</a>,
a development tool I've built.
</p>
</div>

<footer>
<p>
Coded and built with heart by <a href="https://github.com/typicode">Typicode</a>.
</p>
</footer>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Expand All @@ -100,14 +149,16 @@ <h2>YOUR own DATA</h2>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
// Highlight result element
$('#result').each(function(i, block) {
hljs.highlightBlock(block);
});

// Run example
$('#run').click(function() {
var root = 'http://jsonplaceholder.typicode.com';
$.ajax({
url: root + '/posts/1',
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
var str = JSON.stringify(data, null, '\t')
Expand All @@ -123,6 +174,14 @@ <h2>YOUR own DATA</h2>
});
});

// Display os-x element only for OS X users
var isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
if (isMac) {
document.getElementById('os-x').style.display = 'block'
}

// Tell that jQuery can be used in console
console.log('You can use jQuery functions')
</script>
</body>
</html>
87 changes: 81 additions & 6 deletions public/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,70 @@
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #2C3E50;
margin: 0;
font-size: 16px;
line-height: 1.5;
}

.narrow {
max-width: 600px;
margin: 0 auto;
padding: 1%;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

a {
.center {
text-align: center
}

.inline {
display: inline-block;
}

.fb-like{
position:relative;
top:-10px;
}

header {
color: #333;
text-align: center;
padding: 1%;
font-weight: 100;
font-size: 24px;
letter-spacing: .1em;
border-bottom: 1px solid #CCC;
}

p {
font-weight: normal;
}

footer {
text-align: center;
border-top: 1px solid #CCC;
}

h1 {
font-size: 64px;
font-weight: inherit;
letter-spacing: .2em;
}

a {
text-decoration: none;
color: #1882BC;
}

a:hover {
text-decoration: underline ;
}

pre, #result {
font-family: monospace;
font-size: 1.1em;
font-size: 16px;
}

code {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#result {
Expand All @@ -22,6 +75,10 @@ pre, #result {
hyphens: auto;
}

code, #result {
padding: 20px !important
}

ul {
margin: 0;
padding: 0;
Expand All @@ -31,6 +88,24 @@ li {
list-style: none
}

p {
line-height: 1.6em
}

td.verb {
font-weight: bold;
width: 90px;
}

#os-x {
background: #EEE;
}
display: none;
background: rgb(103, 0, 255);
color: white;
font-weight: 200;
padding: 10px;
}

#os-x a {
color: white;
text-decoration: underline;
}

0 comments on commit 2cd98cd

Please sign in to comment.