Skip to content

Commit

Permalink
Simplifed README
Browse files Browse the repository at this point in the history
  • Loading branch information
@screeley
screeley committed Apr 3, 2013
1 parent d91b527 commit 593d8cd
Show file tree
Hide file tree
Showing 24 changed files with 568 additions and 5,905 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
@@ -1 +1,2 @@
.sass-cache .sass-cache
node_modules
10 changes: 6 additions & 4 deletions Gruntfile.js
View file
Expand Up @@ -13,18 +13,20 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('jquery-preview.jquery.json'), pkg: grunt.file.readJSON('jquery-preview.jquery.json'),
meta: { meta: {
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= grunt.template.today("yyyy-mm-dd") + "\\n" %>' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */' ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */<%= "\\n" %>'
}, },
qunit: { qunit: {
all: ['test/**/*.html'] all: ['test/**/*.html']
}, },
concat: { concat: {
options: {
banner: '<%= meta.banner %>'
},
dist: { dist: {
src: [ src: [
'<banner:meta.banner>',
'src/intro.js', 'src/intro.js',
'lib/sprintf-0.7-beta1.js', 'lib/sprintf-0.7-beta1.js',
'src/hidden.js', 'src/hidden.js',
Expand Down
59 changes: 14 additions & 45 deletions README.rest
View file
Expand Up @@ -10,41 +10,24 @@ metadata.


We have made this plugin overly verbose and infinitely customizable. Our goal We have made this plugin overly verbose and infinitely customizable. Our goal
is not to dictate design, merely give a set of tools to make it easy to create is not to dictate design, merely give a set of tools to make it easy to create
a custom experience. There are 5 different demos that you should take a look at a custom experience.
before getting started. It will give you a quick overview of what you should be
able to build.

* `Link <http://embedly.github.com/jquery-preview/demo/link.html>`_
* `Status <http://embedly.github.com/jquery-preview/demo/status.html>`_
* `Multipe Inputs <http://embedly.github.com/jquery-preview/demo/multi.html>`_


Basic Setup Basic Setup
----------- -----------
To get started you need to put `jQuery <http://jquery.com/>`_, To get started you need to put `jQuery <http://jquery.com/>`_,
`jquery.preview.full.js `Embedly jQuery
<https://github.com/embedly/jquery-preview/blob/master/jquery.preview.full.js>`_ <https://github.com/embedly/embedly-jquery>`_,
`jquery.preview.js
<https://github.com/embedly/jquery-preview/blob/master/jquery.preview.js>`_
and `preview.css and `preview.css
<https://github.com/embedly/jquery-preview/blob/master/css/preview.css>`_. into <https://github.com/embedly/jquery-preview/blob/master/css/preview.css>`_. into
the ``head`` of your page:: your page::


<head> <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://scripts.embed.ly/p/0.2/jquery.preview.full.min.js" type="text/javascript"></script> <script src="http://cdn.embed.ly/jquery.embedly-3.0.5.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://scripts.embed.ly/p/0.2/css/preview.css" /> <script src="http://cdn.embed.ly/jquery.preview-0.3.0.min.js" type="text/javascript"></script>
</head> <link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.0.css" />

jquery.preview.full.js bundles `Underscore.js
<http://documentcloud.github.com/underscore/>`_ and `Mustache.js
<https://github.com/janl/mustache.js/>`_ in with jquery.preview.js. If you
already have or use these two libs you can see up the ``head`` of the document
like so::

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="lib/mustache.js" type="text/javascript"></script>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="http://scripts.embed.ly/p/0.2/jquery.preview.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://scripts.embed.ly/p/0.2/css/preview.css" />
</head> </head>


Next set up a simple form that allows a user to input link:: Next set up a simple form that allows a user to input link::
Expand Down Expand Up @@ -72,10 +55,6 @@ You then need to tell preview what field to listen to::
And you are done setting up the front end solution for jQuery Preview. The And you are done setting up the front end solution for jQuery Preview. The
rest of this document will go into how to customize Preview. rest of this document will go into how to customize Preview.


Note that the `Preview <http://embed.ly/docs/endpoints/1/preview>`_ endpoint is
only available to Embedly developers with a Starter plan or above. You can sign
up for a Starter plan at `embed.ly/pricing <http://embed.ly/pricing>`_.

How it Works How it Works
------------ ------------
The plugin works by listening to the field on ``paste``, ``keyup``, ``preview`` The plugin works by listening to the field on ``paste``, ``keyup``, ``preview``
Expand Down Expand Up @@ -144,7 +123,7 @@ Options


If you would like to create your own selector, overwrite ``render`` with If you would like to create your own selector, overwrite ``render`` with
your own function. We will go in more detail, in the writing your own your own function. We will go in more detail, in the writing your own
selector function, but here is the simplest example I could think of. selector function, but here is the simplest example I could think of::


$('#url').preview({ $('#url').preview({
render: function(obj, options){ render: function(obj, options){
Expand Down Expand Up @@ -173,7 +152,7 @@ Events


``close`` ``close``
Triggered when the selector should be closed. If you are implementing a Triggered when the selector should be closed. If you are implementing a
custom selector, you must listen for this event. custom selector, you must listen for this event::


var render = function(data, options){ var render = function(data, options){
// Insert selector // Insert selector
Expand Down Expand Up @@ -302,27 +281,17 @@ CDN
To get you going even faster, Embedly hosts all the files you need on To get you going even faster, Embedly hosts all the files you need on
scripts.embed.ly. The latest version is available here:: scripts.embed.ly. The latest version is available here::


http://scripts.embed.ly/p/0.3/jquery.preview.min.js http://cdn.embed.ly/jquery.preview-0.3.0.min.js
http://scripts.embed.ly/p/0.3/jquery.preview.full.min.js http://cdn.embed.ly/jquery.preview-0.3.0.css
http://scripts.embed.ly/p/0.3/css/preview.css




Development
-----------
The code is broken down into modules in the ``src`` folder and built by
``grunt``. If you want to modify anything in ``preview.jquery.js`` please
find the code in the module and run ``grunt run`` to build
``preview.jquery.js``. ``preview.css`` is a `sass <http://sass-lang.com/>`_
generated file. Please modify ``preview.scss`` by running ``sass --watch
preview.scss:preview.css``



Changelog Changelog
--------- ---------


0.3 0.3
^^^ ^^^
* Full rewrite to simplify adding jQuery to a site. * Full rewrite to simplify adding jQuery Preview to a site.


0.2 0.2
^^^ ^^^
Expand Down
40 changes: 40 additions & 0 deletions bin/docs.py
View file
@@ -0,0 +1,40 @@
"""
We use this in development to build jquery.preview.js
"""
import os
import lxml.html
from docutils.core import publish_string
from optparse import OptionParser

DIR_PATH = os.path.abspath(os.path.dirname(__file__))
DEMO_PATH = os.path.join(DIR_PATH, '../demo')

if __name__ == '__main__':

f = open(os.path.join(DIR_PATH, '../README.rest'), 'r')
html = publish_string(f.read(), writer_name='html')
f.close()
doc = lxml.html.fromstring(html)


for pre in doc.xpath('//pre'):
pre.set('class', 'prettyprint linenums')

body = doc.xpath('//div[@id="jquery-preview"]')[0]
body.xpath('.//h1[@class="title"]')[0].drop_tree()

for heading in body.xpath('//h1|//h2|//h3|//h4'):
heading.tag = 'h{}'.format(int(heading.tag[1])+1)

f = open(os.path.join(DEMO_PATH, 'index.html.tmpl'), 'r')
doc = lxml.html.fromstring(f.read())
f.close()
document = doc.xpath('//div[@id="document"]')[0]
for child in body.getchildren():
document.append(child)

f = open(os.path.join(DEMO_PATH, 'index.html'), 'w')
f.write(lxml.html.tostring(doc))
f.close()

print 'Done'
17 changes: 15 additions & 2 deletions demo/common/css/demo.css
View file
Expand Up @@ -14,6 +14,7 @@ body {


.panel { .panel {
padding:3em; padding:3em;
margin-bottom: 2em;
} }


.panel .selector { .panel .selector {
Expand Down Expand Up @@ -67,5 +68,17 @@ body {
.item .attributes { .item .attributes {
padding: 0 0 0 120px; padding: 0 0 0 120px;
} }
.section { padding-top:60px; } .section { padding-top:10px; }
fieldset .help-block { clear:both; display:block;}
pre.prettyprint {
padding:5px 2px;
overflow-x:scroll;
border:1px solid #ddd;
margin-bottom: 1.25em
}

pre ol {
list-style-position: inside;
}


1 change: 1 addition & 0 deletions demo/common/css/prettify.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 593d8cd

Please sign in to comment.