Bringing in upstream changes

author: Eric Bidelman 2012-07-11 10:43:37 -0700
committer: Eric Bidelman 2012-07-11 10:43:37 -0700
commit: f208307cbdd403d3fa92a1aae1dc9c094c7ec9d8 (patch)
tree: eb8ac9966f182313db6b11e12c2f4fd5bab070b7 /scripts/md
parent: d78d1c5069ecdb6723a8933dbb86f4b7a20c59e9 (diff)
download: io-slides-remote-f208307cbdd403d3fa92a1aae1dc9c094c7ec9d8.tar.gz
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 @@
+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>
author	Eric Bidelman	2012-07-11 10:43:37 -0700
committer	Eric Bidelman	2012-07-11 10:43:37 -0700
commit	f208307cbdd403d3fa92a1aae1dc9c094c7ec9d8 (patch)
tree	eb8ac9966f182313db6b11e12c2f4fd5bab070b7 /scripts/md
parent	d78d1c5069ecdb6723a8933dbb86f4b7a20c59e9 (diff)
download	io-slides-remote-f208307cbdd403d3fa92a1aae1dc9c094c7ec9d8.tar.gz

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 @@
	1	Want to use markdown instead?
	2
	3	`python render.py` can do that for you.
	4
	5	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 @@
	1	<!--
	2	Google IO 2012 HTML5 Slide Template
	3
	4	Authors: Eric Bidelman <ebidel@gmail.com>
	5	Luke Mahe <lukem@google.com>
	6
	7	URL: 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
	2	import codecs
	3	import re
	4	import jinja2
	5	import markdown
	6
	7	def 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
	35	def 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
	48	def postprocess_html(html, metadata):
	49	"""Returns processed HTML to fit into the slide template format."""
	50	return html
	51
	52	if __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 @@
	1	title: Slide Title
	2	class: image
	3
	4	![Mobile vs desktop users](image.png)
	5
	6	---
	7
	8	title: Agenda
	9	class: big
	10
	11	Things we'll cover:
	12
	13	- Bullet1
	14	- Bullet2
	15	- Bullet3
	16
	17	---
	18
	19	title: Today
	20	class: nobackground fill
	21
	22	![Many kinds of devices.](image.png)
	23
	24	<footer class="source">source: place source info here</footer>
	25
	26	---
	27
	28	h1: Big Title Slide
	29	class: title-slide
	30
	31	---
	32
	33	title: Code Example
	34
	35	Media 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
	45	title: Once more, with JavaScript
	46
	47	<pre class="prettyprint" data-lang="javascript">
	48	function isSmall() {
	49	return window.matchMedia("(min-device-width: ???)").matches;
	50	}
	51
	52	function hasTouch() {
	53	return Modernizr.touch;
	54	}
	55
	56	function detectFormFactor() {
	57	var device = DESKTOP;
	58	if (hasTouch()) {
	59	device = isSmall() ? PHONE : TABLET;
	60	}
	61	return device;
	62	}
	63	</pre>
	64