Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 210 lines (188 sloc) 6.694 kb
<!DOCTYPE html>
<html>
<head>
<title>tQuery at WebGL Camp</title>
<base target=”_blank” />
<meta charset='utf-8'/>
<script src="vendor/jquery-1.7.2.min.js"></script>
<script src='slides.js'></script>
</head>
<body style='display: none'>
<style>
article[data-markdown] em {
color : orange;
font-style : normal;
font-weight : bolder;
}
article[data-markdown] h3 {
font-size : 180%;
}
span.orange {
color : orange;
}
span.larger {
font-weight : bolder;
font-size : 120%;
}
</style>
<section class='slides layout-regular template-default'>
<!-- ****************************************************************************
Talk Introduction
********************************************************************************* -->
<article data-markdown>
# *slides template*
#### based on google html5 slides
## Jerome Etienne
</article>
<!-- ****************************************************************************
presentation
********************************************************************************* -->
<article data-markdown>
## my usual *who am i* page
</article>
<article>
<h3>Who Am I</h3>
<img style="float:right" src='jetienne-avatar.jpg' />
<ul>
<li>coder, speaker, trainer</li>
<li>Javascript, Node.js, WebGL and other HTML5 games stuff</li>
</ul>
<h4>Learning Three.js</h4>
<ul>
<li>Author of <a href="http://learningthreejs.com">learningthreejs</a> blog</li>
<li>Lists of three.js tutorials or "WebGL for dummies"</li>
</ul>
<h4>Contacts</h4>
<ul>
<li>
<a href='https://twitter.com/jerome_etienne'>@jerome_etienne</a> on twitter,
<a href='http://github.com/jeromeetienne'>jeromeetienne</a> on github
</li>
</ul>
</article>
<article data-markdown>
### What is this ?
* This is template i use for my slides
* based on [google html5 slides](http://html5slides.googlecode.com/svn/trunk/template/index.html)
* support markdown slides based on [paul irish gist](https://gist.github.com/1343518)
* open links in new tabs
#### Usage
* Mostly personal
* Feel free to use it
</article>
<article data-markdown>
# Example of subtitle
</article>
<article data-markdown>
## Example of footer title
</article>
<article data-markdown>
# Example of subtitle
## Example of footer title
</article>
<article data-markdown>
### slides title
#### slides subtitle
* list item1
* list item2
#### subtitle2
1. list item1
2. list item2
</article>
<article data-markdown>
### Example of iframe
<iframe height='400px' src='http://jeromeetienne.github.com/demo.ridinglight/index.html'
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</article>
<!-- <article data-markdown>
### Include code
* with prettify.js
```
< !doctype html><title>Minimal tQuery Page</title>
<script src="../../build/tquery-bundle.js"></script>
<body><script>
var world = tQuery.createWorld().boilerplate().start();
var object = tQuery.createTorus().addTo(world);
</script></body>
```
</article>
--> <article data-markdown>
# *Questions ?*
Jerome Etienne
</article>
<script>
// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>
// @link http://git.io/data-markdown
// @match *
// ==/UserScript==
// If you're not using this as a userscript just delete from this line up. It's cool, homey.
(function markdownSlideToHtml(){
if (!window.Showdown){
var scr = document.createElement('script');
scr.onload = markdownSlideToHtml;
scr.src = 'vendor/showdown.js';
document.body.appendChild(scr);
return;
}
[].forEach.call(document.querySelectorAll('[data-markdown]'), function fn(elem){
// strip leading whitespace so it isn't evaluated as code
//var text = elem.textContent.replace(/\n\s*\n/g,'\n');
// jerome- to have better support of html within markdown
var text = elem.innerHTML;
//console.log("origin innerHTML", text.split('\n'));
// remove all blanks lines
//text = text.replace(/\n\s*\n/g,'\n');
//console.log("step text", text)
// set indentation level so your markdown can be indented within your HTML
var matches = text.match(/^\n([ \t]*)/);
var leadingws = matches[1].length;
//console.log("first line", matches)
//console.log("leadingws", leadingws)
var regex = new RegExp('\\n[ \\t]{' + leadingws + '}','g');
var md = text.replace(regex,'\n');
//console.log("pre md", md);
html = (new Showdown.converter()).makeHtml(md);
//console.log("post html", html);
// to support prettyprint
html = html.replace(/<code><br \/>/g,'<pre class="prettyprint">');
html = html.replace(/<br \/><\/code>/g,'</pre>');
// unescape [><]
html = html.replace(/&amp;gt;/g,'>');
html = html.replace(/&amp;lt;/g,'<');
//console.log("escaped html", html);
// here, have sum HTML
elem.innerHTML = html;
});
// callback prettyprint to highlight code found in markdown
prettyPrint();
}());
</script>
<script>
//////////////////////////////////////////////////////////////////
// scan the whole webpage and replace url to their local location
// - usefull to have local copy of the slides in conference when internet is unavailable
// - and still have slides which works when internet is available
// $ open -a "/Applications/Google Chrome.app" --args --disable-web-security --allow-file-access-from-file
setTimeout(function(){
location.href.match(/^file:/) && jQuery('a').add('iframe').each(function(index, element){
var attrNames = {
'A' : 'href',
'IFRAME': 'src'
};
var attrName = attrNames[element.nodeName];
var url = jQuery(element).attr(attrName);
url = url.replace(/^http:\/\/jeromeetienne.github.com\/tquery\// , 'file://localhost/Users/jerome/webwork/tquery/')
url = url.replace(/^http:\/\/jeromeetienne.github.com\/augmentedgesture.js\// , 'file://localhost/Users/jerome/webwork/augmentedgesture.js/')
url = url.replace(/^http:\/\/jeromeetienne.github.com\/webaudio.js\// , 'file://localhost/Users/jerome/webwork/webaudio.js/')
url = url.replace(/^http:\/\/jeromeetienne.github.com\/pongGL\//, 'file://localhost/Users/jerome/webwork/pongGL/')
url = url.replace(/^http:\/\/jeromeetienne.github.com\/threex\//, 'file://localhost/Users/jerome/webwork/threex/')
url = url.replace(/^http:\/\/learningthreejs.com\//, 'file://localhost/Users/jerome/webwork/learningthreejs.com/')
url = url.replace(/\/$/, '/index.html')
jQuery(element).attr(attrName, url);
})
}, 100);
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.