Skip to content

Commit 30f2243

Browse files
ritz078ritz078
committed
site
1 parent d68ac82 commit 30f2243

8 files changed

Lines changed: 378 additions & 45 deletions

File tree

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets":["es2015"]
3+
}

‎app/doc.html‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>embed js</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="shortcut icon" href="/favicon.ico">
10+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
11+
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
12+
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
13+
<!-- build:css(.) styles/vendor.css -->
14+
<!-- bower:css -->
15+
<link rel="stylesheet" href="/bower_components/skeleton/css/skeleton.css" />
16+
<!-- endbower -->
17+
<!-- endbuild -->
18+
<!-- build:css(.tmp) styles/examples.css -->
19+
<link rel="stylesheet" href="styles/doc.css">
20+
<!-- endbuild -->
21+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
22+
</head>
23+
24+
<body>
25+
<header>
26+
<a href="/"><img src="images/logo.png" alt=""></a>
27+
<nav>
28+
<ul>
29+
<a href="/">
30+
<li>Home</li>
31+
</a>
32+
<a href="getting_started">
33+
<li>Getting Started</li>
34+
</a>
35+
<a href="doc.html">
36+
<li>Documentation</li>
37+
</a>
38+
<a href="examples.html">
39+
<li>Examples</li>
40+
</a>
41+
</ul>
42+
</nav>
43+
</header>
44+
<div class="left-nav">
45+
<ul>
46+
47+
</ul>
48+
</div>
49+
<div class="container">
50+
<h5>Advanced options</h5>
51+
<pre><code>
52+
{
53+
marked : false,
54+
markedOptions : {},
55+
link : true,
56+
linkOptions : {
57+
target : 'self',
58+
exclude : ['pdf'],
59+
rel : ''
60+
},
61+
emoji : true,
62+
customEmoji : [],
63+
fontIcons : true,
64+
customFontIcons : [],
65+
highlightCode : true,
66+
videoJS : false,
67+
videojsOptions : {
68+
fluid : true,
69+
preload : 'metadata'
70+
},
71+
locationEmbed : true,
72+
mapOptions : {
73+
mode : 'place'
74+
},
75+
tweetsEmbed : true,
76+
tweetOptions : {
77+
maxWidth : 550,
78+
hideMedia : false,
79+
hideThread : false,
80+
align : 'none',
81+
lang : 'en'
82+
},
83+
imageEmbed : true,
84+
videoEmbed : true,
85+
videoHeight : null,
86+
videoWidth : null,
87+
videoDetails : true,
88+
audioEmbed : true,
89+
excludeEmbed : [],
90+
inlineEmbed : [],
91+
inlineText : true,
92+
codeEmbedHeight : 500,
93+
vineOptions : {
94+
maxWidth : null,
95+
type : 'postcard', //'postcard' or 'simple' embedding
96+
responsive : true,
97+
width : 350,
98+
height : 460
99+
},
100+
googleAuthKey : '',
101+
soundCloudOptions : {
102+
height : 160,
103+
themeColor : 'f50000', //Hex Code of the player theme color
104+
autoPlay : false,
105+
hideRelated : false,
106+
showComments : true,
107+
showUser : true,
108+
showReposts : false,
109+
visual : false, //Show/hide the big preview image
110+
download : false //Show/Hide download buttons
111+
},
112+
beforeEmbedJSApply : function() {},
113+
afterEmbedJSApply : function() {},
114+
onVideoShow : function() {},
115+
onTweetsLoad : function() {},
116+
videojsCallback : function() {}
117+
};
118+
</code></pre>
119+
<h5>marked</h5>
120+
<span><b>Type</b> : Boolean</span> <br>
121+
<span><b>Default</b> : <code>false</code></span>
122+
<p>An option when set to <code>true</code> will use <a href="https://github.com/chjj/marked" target="_blank">marked.js</a> to parse markdown and convert it to HTML. Make sure you have loaded marked.js before loading embed.js if this option is set to <code>true</code> else the plugin will throw an error.</p>
123+
124+
<h5>markedOptions</h5>
125+
<span><b>Type</b> : Object</span><br>
126+
<span><b>Default</b> : <code>{}</code></span><br>
127+
<p>The option takes the marked.js <a href="https://github.com/chjj/marked#options-1" target="_blank">options.</a></p>
128+
129+
<h5 id="link">link</h5>
130+
<span><b>Type</b> : Boolean</span><br>
131+
<span><b>Default</b> : <code>true</code></span>
132+
<p>Instructs the plugin whether or not to embed urls/ convert urls into HTML anchor tags.</p>
133+
134+
<h5 id="link-options">linkOptions</h5>
135+
<span><b>Type</b> : object</span><br>
136+
<div class="obj">
137+
<h5>target</h5>
138+
<span><b>Type</b> : String</span><br>
139+
<span><b>Default</b>: <code>'self'</code></span><br>
140+
<p>Same as the target attribute in html anchor tag . supports all html supported target values.</p>
141+
142+
<h5>exclude</h5>
143+
<span><b>Type</b> : Array</span><br>
144+
<span><b>Default</b> : <code>[]</code></span>
145+
<p>Accept array of extensions to be excluded from converting into HTML anchor links</p>
146+
147+
<h5>rel</h5>
148+
<span><b>Type</b> : string</span><br>
149+
<span><b>Default</b> : <code>''</code></span>
150+
<p>Same as the rel attribute.</p>
151+
</div>
152+
153+
<h5 id="emoji">emoji</h5>
154+
<span><b>Type</b> : Boolean</span><br>
155+
<span><b>Default</b> : <code>true</code></span>
156+
<p>Set to <code>false</code> if you want to disable converting emoji codes into actual emojis.</p>
157+
158+
<h5 id="customEmoji">customEmoji</h5>
159+
<span><b>Type</b> : Array</span><br>
160+
<span><b>Default</b> : <code>[]</code></span>
161+
<p>Include the names of custom emojis. Eg : <code>['emoji1', 'emoji2']</code>. Now they can be used using <code>:emoji1:</code> <code>:emoji2:</code></p>
162+
163+
<h5 id="fontIcons">fontIcons</h5>
164+
<span><b>Type</b> : Boolean</span><br>
165+
<span><b>Default</b> : <code>true</code></span><br>
166+
<p></p>
167+
168+
<h5 id="customFontIcons">customFontIcons</h5>
169+
<span><b>Type</b> : Array</span><br>
170+
<span><b>Default</b> : <code>[]</code></span><br>
171+
<p>You can use your customised font icon with this plugin. You need to replace the default font files with yours and provide the code to icon mapping in the format :
172+
<pre><code>customFontIcons:[{
173+
'text': ' :) ',
174+
'code': '&amp;#xe60a'
175+
}, {
176+
'text': ' :D ',
177+
'code': '&amp;#xe608'
178+
}, {
179+
'text': ' :d ',
180+
'code': '&amp;#xe608'
181+
}]</code></pre>
182+
</p>
183+
184+
<h5 id="highlightCode">highlightCode</h5>
185+
<span><b>Type</b> : Boolean</span><br>
186+
<span><b>Default</b> : <code>true</code></span>
187+
<p>Set to true if you want to convert code blocks into formatted code. It uses <a href="https://highlightjs.org/">highlight.js</a> for code highlighting. Make sure highlight.js is loaded before embed.js if this option is set to <code>true</code> or else set this to <code>false</code> The format that it supports are single backticks and code blocks:
188+
<pre><code>```[optional-language-name]
189+
//code here
190+
```</code></pre>
191+
</p>.
192+
193+
<h5 id="videojs">videoJS</h5>
194+
<span><b>Type</b> : Boolean</span><br>
195+
<span><b>Default</b> : <code>false</code></span>
196+
<p>Set to <code>true</code> if you want to enable <a href="http://videojs.com/" target="_blank">video.js</a> support for audio and video files. Make sure video.js is loaded before the plugin else the plugin will throw an error.</p>
197+
198+
<h5 id="videojsOptions">videojsOptions</h5>
199+
<span><b>Type</b> : Object</span><br>
200+
<span><b>Default</b> : <code>{}</code></span>
201+
<p>This object is the video.js <a href="https://github.com/videojs/video.js/blob/master/docs/guides/options.md">options</a>. You can pass any option supported by video.js. Currently it will be applied to both audio and video files. Eg :
202+
<pre><code>videojsOptions : {
203+
fluid : true,
204+
preload : 'metadata'
205+
}</code></pre>
206+
</p>
207+
208+
<h5 id="locationEmbed">locationEmbed</h5>
209+
<span><b>Type</b> : Boolean</span><br>
210+
<span><b>Default</b> : <code>true</code></span>
211+
<p></p>
212+
213+
</div>
214+
</body>
215+
<script src="/bower_components/jquery/dist/jquery.js"></script>
216+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
217+
<script src="scripts/docs.js"></script>
218+
219+
220+
</html>

‎app/examples.html‎

Lines changed: 69 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@
99
<link rel="shortcut icon" href="/favicon.ico">
1010
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
1111
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
12-
<link href="http://vjs.zencdn.net/5.0.0/video-js.css" rel="stylesheet">
13-
<link rel="stylesheet" href="https://rawgit.com/ritz078/embed.js/es6/dist/embed.min.css">
14-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
1512
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
1613
<!-- build:css(.) styles/vendor.css -->
1714
<!-- bower:css -->
@@ -28,41 +25,94 @@
2825
<a href="/"><img src="images/logo.png" alt=""></a>
2926
<nav>
3027
<ul>
31-
<a href="">
28+
<a href="/">
3229
<li>Home</li>
3330
</a>
34-
<a href="">
31+
<a href="getting_started">
3532
<li>Getting Started</li>
3633
</a>
37-
<a href="">
34+
<a href="doc.html">
3835
<li>Documentation</li>
3936
</a>
40-
<a href="">
37+
<a href="examples.html">
4138
<li>Examples</li>
4239
</a>
4340
</ul>
4441
</nav>
4542
</header>
4643
<div class="left-nav">
47-
44+
<ul>
45+
<a href="#basic"><li>Basic Example</li></a>
46+
<a href="#youtube"><li>Youtube video with preview</li></a>
47+
<a href="#markdown"><li>Markdown using marked.js</li></a>
48+
<a href="#twitter"><li>Twitter</li></a>
49+
<a href="#gist"><li>Github gist</li></a>
50+
<a href="#code"><li>Code Highlighting</li></a>
51+
<a href="#flickr"><li>Flickr</li></a>
52+
<a href="#gmap"><li>Google Map</li></a>
53+
<a href="#sound"><li>SoundCloud and Spotify</li></a>
54+
<a href="#video"><li>Basic video</li></a>
55+
<a href="#videojs"><li>video.js support for video</li></a>
56+
<a href="#vine"><li>vine</li></a>
57+
<a href="#codepen"><li>codepen</li></a>
58+
<a href="#inline">
59+
<li>Inline embed</li>
60+
</a>
61+
</ul>
4862
</div>
4963
<div class="container">
50-
<p data-height="266" data-theme-id="21076" data-slug-hash="QjZded" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/QjZded/'>embed.js-basic demo</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
64+
<h5 id="basic">Basic Example</h5>
65+
<p data-height="250" data-theme-id="21076" data-slug-hash="QjZded" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/QjZded/'>embed.js-basic demo</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
66+
67+
68+
<h5 id="youtube">Youtube video with preview</h5>
69+
<p data-height="406" data-theme-id="21076" data-slug-hash="JYmJML" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/JYmJML/'>embed.js-youtube with preview</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
70+
71+
<h5 id="markdown">Markdown Support</h5>
72+
<p data-height="900" data-theme-id="21076" data-slug-hash="bVmPrX" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/bVmPrX/'>embed.js-Markdown Support</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
73+
74+
75+
<h5 id="twitter">Twitter support</h5>
76+
<p data-height="550" data-theme-id="21076" data-slug-hash="XmLGJe" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/XmLGJe/'>embed.js-twitter</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
77+
78+
<h5 id="gist">Github gist support</h5>
79+
<p data-height="350" data-theme-id="21076" data-slug-hash="gaNEYJ" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/gaNEYJ/'>embed.js-gist</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
80+
81+
<h5 id="code">Code highlighting</h5>
82+
<p data-height="400" data-theme-id="21076" data-slug-hash="NGZJKq" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/NGZJKq/'>embed.js-code highlight</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
83+
84+
85+
<h5 id="flickr">Flickr</h5>
86+
<p data-height="800" data-theme-id="21076" data-slug-hash="rOEPXw" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/rOEPXw/'>embed.js-flickr support</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
5187

5288

53-
<p data-height="800" data-theme-id="21076" data-slug-hash="JYmJML" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/JYmJML/'>embed.js-youtube with preview</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
54-
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
89+
<h5 id="gmap">Google Map</h5>
90+
<p data-height="800" data-theme-id="21076" data-slug-hash="OyBrgX" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/OyBrgX/'>embed.js-Google map</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
91+
92+
<h5 id="sound">Soundcloud and spotify</h5>
93+
<p data-height="500" data-theme-id="21076" data-slug-hash="rOERWY" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/rOERWY/'>embed.js-soundcloud and spotify</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
94+
95+
96+
<h5 id="video">Basic video</h5>
97+
<p data-height="750" data-theme-id="21076" data-slug-hash="bVPZgE" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/bVPZgE/'>embed.js-mp4 support</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
98+
99+
<h5 id="videojs">video.js support</h5>
100+
<p data-height="750" data-theme-id="21076" data-slug-hash="KdjEWa" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/KdjEWa/'>embed.js-video.js </a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
101+
102+
<h5 id='vine'>vine</h5>
103+
<p data-height="600" data-theme-id="21076" data-slug-hash="WQqmOG" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/WQqmOG/'>embed.js-vine</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
104+
105+
<h5 id="codepen">codepen</h5>
106+
<p data-height="700" data-theme-id="21076" data-slug-hash="vNqPZw" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/vNqPZw/'>embed.js-codepen</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
107+
108+
<h5 id="inline">Inline embedding</h5>
109+
<p data-height="800" data-theme-id="21076" data-slug-hash="JYQVKg" data-default-tab="result" data-user="ritz078" class='codepen'>See the Pen <a href='http://codepen.io/ritz078/pen/JYQVKg/'>embed.js-inline</a> by Ritesh Kumar (<a href='http://codepen.io/ritz078'>@ritz078</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
110+
55111
</div>
56112
</body>
113+
<script src="//assets.codepen.io/assets/embed/ei.js"></script>
57114
<script src="/bower_components/jquery/dist/jquery.js"></script>
58-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
59-
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
60-
<script src="//platform.twitter.com/widgets.js"></script>
61-
<script src="http://vjs.zencdn.net/5.0.0/video.js"></script>
62-
<script src="https://rawgit.com/ritz078/embed.js/es6/src/embed.js"></script>
63115
<script src="scripts/examples.js"></script>
64-
<script>
65-
hljs.initHighlightingOnLoad();
66-
</script>
116+
67117

68118
</html>

‎app/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@
2828
<a href="/"><img src="images/logo.png" alt=""></a>
2929
<nav>
3030
<ul>
31-
<a href="">
31+
<a href="/">
3232
<li>Home</li>
3333
</a>
34-
<a href="">
34+
<a href="getting_started">
3535
<li>Getting Started</li>
3636
</a>
37-
<a href="">
37+
<a href="doc.html">
3838
<li>Documentation</li>
3939
</a>
40-
<a href="">
40+
<a href="examples.html">
4141
<li>Examples</li>
4242
</a>
4343
</ul>
@@ -132,7 +132,7 @@
132132
<script src="/bower_components/jquery/dist/jquery.js"></script>
133133
<!-- endbower -->
134134
<!-- endbuild -->
135-
<!-- build:js scripts/main.js -->
135+
<!-- build:js(.tmp) scripts/main.js -->
136136
<script src="scripts/main.js"></script>
137137
<!-- endbuild -->
138138
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->

‎app/scripts/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
hljs.initHighlightingOnLoad();

‎app/scripts/examples.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$('.left-nav a').click(function(e) {
2+
e.preventDefault()
3+
var id = $(this).attr('href')
4+
$('html,body').animate({
5+
scrollTop: $(id).offset().top - 70
6+
},
7+
'slow');
8+
})

0 commit comments

Comments
 (0)