From f208307cbdd403d3fa92a1aae1dc9c094c7ec9d8 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Wed, 11 Jul 2012 10:43:37 -0700 Subject: Bringing in upstream changes --- scripts/md/README.md | 5 ++++ scripts/md/base.html | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++ scripts/md/render.py | 53 +++++++++++++++++++++++++++++++++++++++++ scripts/md/slides.md | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 188 insertions(+) create mode 100644 scripts/md/README.md create mode 100644 scripts/md/base.html create mode 100755 scripts/md/render.py create mode 100644 scripts/md/slides.md (limited to 'scripts') diff --git a/scripts/md/README.md b/scripts/md/README.md new file mode 100644 index 0000000..136e465 --- /dev/null +++ b/scripts/md/README.md @@ -0,0 +1,5 @@ +Want to use markdown instead? + +`python render.py` can do that for you. + +Dependencies: jinja2, markdown. diff --git a/scripts/md/base.html b/scripts/md/base.html new file mode 100644 index 0000000..a469806 --- /dev/null +++ b/scripts/md/base.html @@ -0,0 +1,66 @@ +<!-- +Google IO 2012 HTML5 Slide Template + +Authors: Eric Bidelman <ebidel@gmail.com> + Luke Mahe <lukem@google.com> + +URL: https://code.google.com/p/io-2012-slides +--> +<!DOCTYPE html> +<html> +<head> + <title>Google IO 2012</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">--> + <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--> + <!--This one seems to work all the time, but really small on ipad--> + <!--<meta name="viewport" content="initial-scale=0.4">--> + <meta name="apple-mobile-web-app-capable" content="yes"> + <link rel="stylesheet" media="all" href="theme/css/default.css"> + <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css"> + <base target="_blank"> <!-- This amazingness opens all links in a new tab. --> + <script data-main="js/slides" src="js/require-1.0.8.min.js"></script> +</head> +<body style="opacity: 0"> + +<slides class="layout-widescreen"> + +<slide class="logoslide nobackground"> + <article class="flexbox vcenter"> + <span><img src="images/google_developers_logo.png"></span> + </article> +</slide> + +<slide class="title-slide segue nobackground"> + <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> + <!-- The content of this hgroup is replaced programmatically through the slide_config.json. --> + <hgroup class="auto-fadein"> + <h1 data-config-title><!-- populated from slide_config.json --></h1> + <h2 data-config-subtitle><!-- populated from slide_config.json --></h2> + <p data-config-presenter><!-- populated from slide_config.json --></p> + </hgroup> +</slide> + +{% for slide in slides %} +<slide class="{{ slide.class }}"> + <hgroup> + <h1>{{ slide.h1 }}</h1> + <h2>{{ slide.title }}</h2> + </hgroup> + <article> + {{ slide.content }} + </article> +</slide> +{% endfor %} + +<slide class="backdrop"></slide> + +</slides> + +<!--[if IE]> + <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> + <script>CFInstall.check({mode: 'overlay'});</script> +<![endif]--> +</body> +</html> diff --git a/scripts/md/render.py b/scripts/md/render.py new file mode 100755 index 0000000..c634ea0 --- /dev/null +++ b/scripts/md/render.py @@ -0,0 +1,53 @@ +#!/opt/local/Library/Frameworks/Python.framework/Versions/2.7/bin/python +import codecs +import re +import jinja2 +import markdown + +def process_slides(): + with codecs.open('../presentation.html', 'w', encoding='utf8') as outfile: + md = codecs.open('slides.md', encoding='utf8').read() + md_slides = md.split('\n---\n') + print len(md_slides) + + slides = [] + # Process each slide separately. + for md_slide in md_slides: + slide = {} + sections = md_slide.split('\n\n') + # Extract metadata at the beginning of the slide (look for key: value) + # pairs. + metadata_section = sections[0] + metadata = parse_metadata(metadata_section) + slide.update(metadata) + remainder_index = metadata and 1 or 0 + # Get the content from the rest of the slide. + content_section = '\n\n'.join(sections[remainder_index:]) + html = markdown.markdown(content_section) + slide['content'] = postprocess_html(html, markdown) + + slides.append(slide) + + template = jinja2.Template(open('base.html').read()) + + outfile.write(template.render(locals())) + +def parse_metadata(section): + """Given the first part of a slide, returns metadata associated with it.""" + metadata = {} + metadata_lines = section.split('\n') + for line in metadata_lines: + colon_index = line.find(':') + if colon_index != -1: + key = line[:colon_index].strip() + val = line[colon_index + 1:].strip() + metadata[key] = val + + return metadata + +def postprocess_html(html, metadata): + """Returns processed HTML to fit into the slide template format.""" + return html + +if __name__ == '__main__': + process_slides() diff --git a/scripts/md/slides.md b/scripts/md/slides.md new file mode 100644 index 0000000..064b8db --- /dev/null +++ b/scripts/md/slides.md @@ -0,0 +1,64 @@ +title: Slide Title +class: image + +![Mobile vs desktop users](image.png) + +--- + +title: Agenda +class: big + +Things we'll cover: + +- Bullet1 +- Bullet2 +- Bullet3 + +--- + +title: Today +class: nobackground fill + +![Many kinds of devices.](image.png) + +<footer class="source">source: place source info here</footer> + +--- + +h1: Big Title Slide +class: title-slide + +--- + +title: Code Example + +Media Queries are sweet: + +<pre class="prettyprint" data-lang="css"> +@media screen and (max-width: 640px) { + #sidebar { display: none; } +} +</pre> + +--- + +title: Once more, with JavaScript + +<pre class="prettyprint" data-lang="javascript"> +function isSmall() { + return window.matchMedia("(min-device-width: ???)").matches; +} + +function hasTouch() { + return Modernizr.touch; +} + +function detectFormFactor() { + var device = DESKTOP; + if (hasTouch()) { + device = isSmall() ? PHONE : TABLET; + } + return device; +} +</pre> + -- cgit v1.2.3