aboutsummaryrefslogtreecommitdiff
path: root/scripts/md
diff options
context:
space:
mode:
Diffstat (limited to 'scripts/md')
-rw-r--r--scripts/md/README.md5
-rw-r--r--scripts/md/base.html66
-rwxr-xr-xscripts/md/render.py53
-rw-r--r--scripts/md/slides.md64
4 files changed, 188 insertions, 0 deletions
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 @@
1Want to use markdown instead?
2
3`python render.py` can do that for you.
4
5Dependencies: 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 @@
1<!--
2Google IO 2012 HTML5 Slide Template
3
4Authors: Eric Bidelman <ebidel@gmail.com>
5 Luke Mahe <lukem@google.com>
6
7URL: https://code.google.com/p/io-2012-slides
8-->
9<!DOCTYPE html>
10<html>
11<head>
12 <title>Google IO 2012</title>
13 <meta charset="utf-8">
14 <meta http-equiv="X-UA-Compatible" content="chrome=1">
15 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">-->
16 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
17 <!--This one seems to work all the time, but really small on ipad-->
18 <!--<meta name="viewport" content="initial-scale=0.4">-->
19 <meta name="apple-mobile-web-app-capable" content="yes">
20 <link rel="stylesheet" media="all" href="theme/css/default.css">
21 <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css">
22 <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->
23 <script data-main="js/slides" src="js/require-1.0.8.min.js"></script>
24</head>
25<body style="opacity: 0">
26
27<slides class="layout-widescreen">
28
29<slide class="logoslide nobackground">
30 <article class="flexbox vcenter">
31 <span><img src="images/google_developers_logo.png"></span>
32 </article>
33</slide>
34
35<slide class="title-slide segue nobackground">
36 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
37 <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
38 <hgroup class="auto-fadein">
39 <h1 data-config-title><!-- populated from slide_config.json --></h1>
40 <h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
41 <p data-config-presenter><!-- populated from slide_config.json --></p>
42 </hgroup>
43</slide>
44
45{% for slide in slides %}
46<slide class="{{ slide.class }}">
47 <hgroup>
48 <h1>{{ slide.h1 }}</h1>
49 <h2>{{ slide.title }}</h2>
50 </hgroup>
51 <article>
52 {{ slide.content }}
53 </article>
54</slide>
55{% endfor %}
56
57<slide class="backdrop"></slide>
58
59</slides>
60
61<!--[if IE]>
62 <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
63 <script>CFInstall.check({mode: 'overlay'});</script>
64<![endif]-->
65</body>
66</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 @@
1#!/opt/local/Library/Frameworks/Python.framework/Versions/2.7/bin/python
2import codecs
3import re
4import jinja2
5import markdown
6
7def process_slides():
8 with codecs.open('../presentation.html', 'w', encoding='utf8') as outfile:
9 md = codecs.open('slides.md', encoding='utf8').read()
10 md_slides = md.split('\n---\n')
11 print len(md_slides)
12
13 slides = []
14 # Process each slide separately.
15 for md_slide in md_slides:
16 slide = {}
17 sections = md_slide.split('\n\n')
18 # Extract metadata at the beginning of the slide (look for key: value)
19 # pairs.
20 metadata_section = sections[0]
21 metadata = parse_metadata(metadata_section)
22 slide.update(metadata)
23 remainder_index = metadata and 1 or 0
24 # Get the content from the rest of the slide.
25 content_section = '\n\n'.join(sections[remainder_index:])
26 html = markdown.markdown(content_section)
27 slide['content'] = postprocess_html(html, markdown)
28
29 slides.append(slide)
30
31 template = jinja2.Template(open('base.html').read())
32
33 outfile.write(template.render(locals()))
34
35def parse_metadata(section):
36 """Given the first part of a slide, returns metadata associated with it."""
37 metadata = {}
38 metadata_lines = section.split('\n')
39 for line in metadata_lines:
40 colon_index = line.find(':')
41 if colon_index != -1:
42 key = line[:colon_index].strip()
43 val = line[colon_index + 1:].strip()
44 metadata[key] = val
45
46 return metadata
47
48def postprocess_html(html, metadata):
49 """Returns processed HTML to fit into the slide template format."""
50 return html
51
52if __name__ == '__main__':
53 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 @@
1title: Slide Title
2class: image
3
4![Mobile vs desktop users](image.png)
5
6---
7
8title: Agenda
9class: big
10
11Things we'll cover:
12
13- Bullet1
14- Bullet2
15- Bullet3
16
17---
18
19title: Today
20class: nobackground fill
21
22![Many kinds of devices.](image.png)
23
24<footer class="source">source: place source info here</footer>
25
26---
27
28h1: Big Title Slide
29class: title-slide
30
31---
32
33title: Code Example
34
35Media Queries are sweet:
36
37<pre class="prettyprint" data-lang="css">
38@media screen and (max-width: 640px) {
39 #sidebar { display: none; }
40}
41</pre>
42
43---
44
45title: Once more, with JavaScript
46
47<pre class="prettyprint" data-lang="javascript">
48function isSmall() {
49 return window.matchMedia("(min-device-width: ???)").matches;
50}
51
52function hasTouch() {
53 return Modernizr.touch;
54}
55
56function detectFormFactor() {
57 var device = DESKTOP;
58 if (hasTouch()) {
59 device = isSmall() ? PHONE : TABLET;
60 }
61 return device;
62}
63</pre>
64
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-19 22:09:53 +0000